diff options
Diffstat (limited to 'files/de/web/html')
117 files changed, 19198 insertions, 0 deletions
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 +--- +<div>{{HTMLRef}}</div> + +<p>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. <span class="seoSummary">Mit <a href="/en-US/docs/Web/CSS">CSS</a> gibt es viele Möglichkeiten, den <a href="/en-US/docs/Web/HTML">HTML</a> <a href="/en-US/docs/Web/HTML/Element">elements</a> Farbe zu verleihen. Dieser Artikel ist eine Einführung, die jede Möglichkeit vorstellt, CSS Farben in HTML zu verwenden.</span></p> + +<p>Zum Glück ist das Hinzufügen von Farbe zu deinem HTML eigentlich wirklich <em>easy</em> und du kannst Farbe zu fast allem hinzufügen.</p> + +<p>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")}}.</p> + +<p>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</p> + +<h2 id="Dinge_die_Farbe_haben_können">Dinge, die Farbe haben können</h2> + +<p>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.</p> + +<p>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.</p> + +<h3 id="Text">Text</h3> + +<p>Wo auch immer ein Element gerendert wurde sind diese Elemente dazu da, die Farbe des Textes, seinen Hintergrund oder Dekorationen des Textes festzulegen.</p> + +<dl> + <dt>{{cssxref("color")}}</dt> + <dd>Legt die Farbe von Text und <a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals#Font_style_font_weight_text_transform_and_text_decoration">text decorations</a> fest (wie z. B. die Ergänzung von Über- oder Unterstrichen, durchgestrichene Linien, usw.)</dd> + <dt>{{cssxref("background-color")}}</dt> + <dd>Die Hintergrundfarbe des Textes.</dd> + <dt>{{cssxref("text-shadow")}}</dt> + <dd>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.</dd> + <dt>{{cssxref("text-decoration-color")}}</dt> + <dd>Als Standardeinstellung verwenden Textdekorationen (wie z. B. Unterstreichungen, Durchstreichungen, etc.) die <code>color</code> Eigenschaft als ihre Farbe. Jedoch können sie diese Einstellung überschreiben und eine andere Farbe mit der <code>text-decoration-color</code> Eigenschaft verwenden.</dd> + <dt>{{cssxref("text-emphasis-color")}}</dt> + <dd>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.</dd> + <dt>{{cssxref("caret-color")}}</dt> + <dd>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.</dd> +</dl> + +<h3 id="Boxen">Boxen</h3> + +<p>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.</p> + +<dl> + <dt>{{anch("Borders")}}</dt> + <dd>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.</dd> + <dt>{{cssxref("background-color")}}</dt> + <dd>Farbe auf Bereiche eines Elements anwenden, die keinen Inhalt im Vordergrund haben.</dd> + <dt>{{cssxref("column-rule-color")}}</dt> + <dd>Farbe auf Linien anwenden, die Textspalten trennen.</dd> + <dt>{{cssxref("outline-color")}}</dt> + <dd>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.</dd> +</dl> + +<h3 id="Ränder_(Borders)">Ränder (Borders)</h3> + +<p>Jedes Element kann einen Rand (<a href="/en-US/docs/Learn/CSS/Styling_boxes/Borders">border</a>) 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 <a href="/en-US/docs/Learn/CSS/Styling_boxes/Borders">Styling borders using CSS</a> to learn more about applying styles to borders.</p> + +<p>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 <a href="/en-US/docs/Web/CSS/border-width">width</a>, <a href="/en-US/docs/Web/CSS/border-style">style</a> (solid, dashed, etc.), and so forth.</p> + +<dl> + <dt>{{cssxref("border-color")}}</dt> + <dd>Specifies a single color to use for every side of the element's border.</dd> + <dt>{{cssxref("border-left-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, and {{cssxref("border-bottom-color")}}</dt> + <dd>Lets you set the color of the corresponding side of the element's border.</dd> + <dt>{{cssxref("border-block-start-color")}} and {{cssxref("border-block-end-color")}}</dt> + <dd>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).</dd> + <dt>{{cssxref("border-inline-start-color")}} and {{cssxref("border-inline-end-color")}}</dt> + <dd>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 <code>border-inline-start-color</code> is applied to the right side of the border.</dd> +</dl> + +<h3 id="Andere_Methoden_um_Farbe_zu_verwenden">Andere Methoden um Farbe zu verwenden</h3> + +<p>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.</p> + +<dl> + <dt>Die HTML <a href="/en-US/docs/Web/API/Canvas_API">Canvas API</a></dt> + <dd>Lets you draw 2D bitmapped graphics in a {{HTMLElement("canvas")}} element. See our <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a> to learn more.</dd> + <dt><a href="/en-US/docs/Web/SVG">SVG</a> (Scalable Vector Graphics)</dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Web/API/WebGL_API">WebGL</a></dt> + <dd>The Web Graphics Library is an OpenGL ES-based API for drawing high-performance 2D and 3D graphics on the Web. See <a href="/en-US/docs/Learn/WebGL">Learn WebGL for 2D and 3D</a> graphics to find out more.</dd> +</dl> + +<h2 id="Wie_man_eine_Farbe_definiert">Wie man eine Farbe definiert</h2> + +<p>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.</p> + +<p>For more detailed discussion of each of the color value types, see the reference for the CSS {{cssxref("<color>")}} unit.</p> + +<h3 id="Schlüsselwörter">Schlüsselwörter</h3> + +<p>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 <code>red</code>, <code>blue</code>, or <code>orange</code>), shades of gray (from <code>black</code> to <code>white</code>, including colors like <code>darkgray</code> and <code>lightgrey</code>), and a variety of other blended colors including <code>lightseagreen</code>, <code>cornflowerblue</code>, and <code>rebeccapurple</code>.</p> + +<p>See {{SectionOnPage("/en-US/docs/Web/CSS/color_value", "Color keywords", "code")}} for a list of all available color keywords.</p> + +<h3 id="RGB-Werte">RGB-Werte</h3> + +<p>There are three ways to represent an RGB color in CSS.</p> + +<h4 id="Hexadezimale_String_Notation">Hexadezimale String Notation</h4> + +<p>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 <em>must</em> 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, <code>"#D"</code> becomes <code>"#DD"</code> when drawing.</p> + +<p>A color in hexadecimal string notation always begins with the character <code>"#"</code>. After that come the hexadecimal digits of the color code. The string is case-insensitive.</p> + +<dl> + <dt><code>"#rrggbb"</code></dt> + <dd>Specifies a fully-opaque color whose red component is the hexadecimal number <code>0xrr</code>, green component is <code>0xgg</code>, and blue component is <code>0xbb</code>.</dd> + <dt><code>"#rrggbbaa"</code></dt> + <dd>Specifies a color whose red component is the hexadecimal number <code>0xrr</code>, green component is <code>0xgg</code>, and blue component is <code>0xbb</code>. The alpha channel is specified by <code>0xaa</code>; the lower this value is, the more translucent the color becomes.</dd> + <dt><code>"#rgb"</code></dt> + <dd>Specifies a color whose red component is the hexadecimal number <code>0xrr</code>, green component is <code>0xgg</code>, and blue component is <code>0xbb</code>.</dd> + <dt><code>"#rgba"</code></dt> + <dd>Specifies a color whose red component is the hexadecimal number <code>0xrr</code>, green component is <code>0xgg</code>, and blue component is <code>0xbb</code>. The alpha channel is specified by <code>0xaa</code>; the lower this value is, the more translucent the color becomes.</dd> +</dl> + +<p>As an example, you can represent the opaque color bright blue as <code>"#0000ff"</code> or <code>"#00f"</code>. To make it 25% opaque, you can use <code>"#0000ff44"</code> or <code>"#00f4"</code>.</p> + +<h4 id="RGB_functional_notation">RGB functional notation</h4> + +<p>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.</p> + +<p>Legal values for each of these parameters are:</p> + +<dl> + <dt><code>red</code>, <code>green</code>, and <code>blue</code></dt> + <dd>Each must be an {{cssxref("<integer>")}} value between 0 and 255 (inclusive), or a {{cssxref("<percentage>")}} from 0% to 100%.</dd> + <dt><code>alpha</code></dt> + <dd>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.</dd> +</dl> + +<p>For example, a bright red that's 50% opaque can be represented as <code>rgb(255, 0, 0, 0.5)</code> or <code>rgb(100%, 0, 0, 50%)</code>.</p> + +<h3 id="HSL_functional_notation">HSL functional notation</h3> + +<p>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 <code>hsl()</code> CSS function is very similar to the <code>rgb()</code> function in usage otherwise.</p> + +<div style="padding-bottom: 20px;"> +<figure style="width: 500px;"><img alt="HSL color cylinder" src="https://mdn.mozillademos.org/files/15445/1200px-HSL_color_solid_cylinder_alpha_lowgamma.png" style="height: 375px; width: 500px;"> +<figcaption><em><strong>Figure 1. An HSL color cylinder.</strong> 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 <a href="http://commons.wikimedia.org/wiki/User:SharkD">SharkD</a> on <a href="https://www.wikipedia.org/">Wikipedia</a>, distributed under the <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY-SA 3.0</a> license.</em></figcaption> +</figure> +</div> + +<p>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 (<code>deg</code>), radians (<code>rad</code>), gradians (<code>grad</code>), or turns (<code>turn</code>). But this doesn't control how vivid or dull, or how bright or dark the color is.</p> + +<p>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.</p> + +<p>Think of it like creating the perfect paint color:</p> + +<ol> + <li>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 <strong>hue</strong> (H) component: a value representing the angle around the color wheel for the vivid hue we want to use as our base.</li> + <li>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.</li> + <li>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.</li> +</ol> + +<p>You can also optionally include an alpha channel, to make the color less than 100% opaque.</p> + +<p>Here are some sample colors in HSL notation:</p> + +<div id="hsl-swatches"> +<div class="hidden"> +<pre class="brush: css">table { + border: 1px solid black; + font: 16px "Open Sans", Helvetica, Arial, sans-serif; + border-spacing: 0; + border-collapse: collapse; +} + +th, td { + border: 1px solid black; + padding:4px 6px; + text-align: left; +} + +th { + background-color: hsl(0, 0%, 75%); +}</pre> + +<pre class="brush: html"><table> + <thead> + <tr> + <th scope="col">Color in HSL notation</th> + <th scope="col">Example</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>hsl(90deg, 100%, 50%)</code></td> + <td style="background-color: hsl(90deg, 100%, 50%);">&nbsp;</td> + </tr> + <tr> + <td><code>hsl(90, 100%, 50%)</code></td> + <td style="background-color: hsl(90, 100%, 50%);">&nbsp;</td> + </tr> + <tr> + <td><code>hsl(0.15turn, 50%, 75%)</code></td> + <td style="background-color: hsl(0.15turn, 50%, 75%);">&nbsp;</td> + </tr> + <tr> + <td><code>hsl(0.15turn, 90%, 75%)</code></td> + <td style="background-color: hsl(0.15turn, 90%, 75%);">&nbsp;</td> + </tr> + <tr> + <td><code>hsl(0.15turn, 90%, 50%)</code></td> + <td style="background-color: hsl(0.15turn, 90%, 50%);">&nbsp;</td> + </tr> + <tr> + <td><code>hsl(270deg, 90%, 50%)</code></td> + <td style="background-color: hsl(270deg, 90%, 50%);">&nbsp;</td> + </tr> + </tbody> +</table></pre> +</div> + +<p>{{EmbedLiveSample("hsl-swatches", 300, 260)}}</p> +</div> + +<div class="note"> +<p>Note that when you omit the hue's unit, it's assumed to be in degrees (<code>deg</code>).</p> +</div> + +<h2 id="Farbe_verwenden">Farbe verwenden</h2> + +<p>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.</p> + +<h3 id="Specifying_colors_in_stylesheets">Specifying colors in stylesheets</h3> + +<p>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.</p> + +<p>Let's take a look at an example, starting by looking at the results we're trying to achieve:</p> + +<div>{{EmbedLiveSample("Specifying_colors_in_stylesheets", 650, 150)}}</div> + +<h4 id="HTML">HTML</h4> + +<p>The HTML responsible for creating the above example is shown here:</p> + +<pre class="brush: html"><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></pre> + +<p>This is pretty simple, using a {{HTMLElement("div")}} as a wrapper around the contents, which consists of two more <code><div></code>s, each styled differently with a single paragraph ({{HTMLElement("p")}}) in each box.</p> + +<p>The magic happens, as usual, in the CSS, where we'll apply colors define the layout for the HTML above.</p> + +<h4 id="CSS">CSS</h4> + +<p>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.</p> + +<pre class="brush: css">.wrapper { + width: 620px; + height: 110px; + margin: 0; + padding: 10px; + border: 6px solid mediumturquoise; +}</pre> + +<p>The <code>.wrapper</code> 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")}}.</p> + +<p>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 <code>mediumturquoise</code>.</p> + +<p>Our two colored boxes share a number of properties in common, so next we establish a class, <code>.box</code>, that defines those shared properties:</p> + +<pre class="brush: css">.box { + width: 290px; + height: 100px; + margin: 0; + padding: 4px 6px; + font: 28px "Marker Felt", "Zapfino", cursive; + display: flex; + justify-content: center; + align-items: center; +}</pre> + +<p>In brief, <code>.box</code> establishes the size of each box, as well as the configuration of the font used within. We also take advantage of <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexbox</a> to easily center the contents of each box. We enable <code>flex</code> mode using {{cssxref("display", "display: flex")}}, and set both {{cssxref("justify-content")}} and {{cssxref("align-items")}} to <code>center</code>. Then we can create a class for each of the two boxes that defines the propeties that differ between the two.</p> + +<pre class="brush: css">.boxLeft { + float: left; + background-color: rgb(245, 130, 130); + outline: 2px solid darkred; +}</pre> + +<p>The <code>.boxLeft</code> class—which, cleverly, is used to style the box on the left—floats the box to the left, then sets up the colors:</p> + +<ul> + <li>The box's background color is set by changing the value of the CSS {{cssxref("background-color")}} property to <code>rgb(245, 130, 130)</code>.</li> + <li>An outline is defined for the box. Unlike the more commonly used <code>border</code>, {{cssxref("outline")}} doesn't affect layout at all; it draws over the top of whatever may happen to be outside the element's box instead of making room as <code>border</code> does. This outline is a solid, dark red line that's two pixels thick. Note the use of the <code>darkred</code> keyword when specifying the color.</li> + <li>Notice that we're not explicitly setting the text color. That means the value of {{cssxref("color")}} will be inherited from the nearest containing element that defines it. By default, that's black.</li> +</ul> + +<pre class="brush: css">.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; +}</pre> + +<p>Finally, the <code>.boxRight</code> 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:</p> + +<ul> + <li>The <code>background-color</code> is set using the HSL value specified using <code>hsl(270deg, 50%, 75%)</code>. This is a medium purple color.</li> + <li>The box's <code>outline</code> is used to specify that the box should be enclosed in a four pixel thick dashed line whose color is a somewhat deeper purple (<code>rgb(110, 20, 120)</code>).</li> + <li>The foreground (text) color is specified by setting the {{cssxref("color")}} property to <code>hsl(0deg, 100%, 100%)</code>. This is one of many ways to specify the color white.</li> + <li>We add a green wavy line under the text with {{cssxref("text-decoration")}}.</li> + <li>Finally, a bit of a shadow is added to the text using {{cssxref("text-shadow")}}. Its <code>color</code> parameter is set to <code>black</code>.</li> +</ul> + +<h2 id="Dem_Nutzer_die_Farbe_wählen_lassen">Dem Nutzer die Farbe wählen lassen</h2> + +<p>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 <code>"color"</code> as the value of its {{htmlattrxref("type", "input")}} attribute.</p> + +<p>The <code><input></code> element represents a color only in the {{anch("Hexadecimal string notation", "hexadecimal string notation")}} covered above.</p> + +<h3 id="Beispiel_Farbe_wählen">Beispiel: Farbe wählen</h3> + +<p>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.</p> + +<p>{{EmbedLiveSample("Example_Picking_a_color", 525, 275)}}</p> + +<div class="note"> +<p>On macOS, you indicate that you've finalized selection of the color by closing the color picker window.</p> +</div> + +<h4 id="HTML_2">HTML</h4> + +<p>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.</p> + +<pre class="brush: html"><div id="box"> + <label for="colorPicker">Border color:</label> + <input type="color" value="#8888ff" id="colorPicker"> + <p id="output"></p> +</div></pre> + +<h4 id="CSS_2">CSS</h4> + +<p>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...</p> + +<pre class="brush: css">#box { + width: 500px; + height: 200px; + border: 2px solid rgb(245, 220, 225); + padding: 4px 6px; + font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif" +}</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<p>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 <code><a href="/en-US/docs/Web/HTML/Element/input/color"><input type="color"></a></code> element.</p> + +<pre class="brush: js">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);</pre> + +<p>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.</p> + +<p>The {{event("change")}} event is received when the color picker's value is finalized. We respond by setting the contents of the <code><p></code> element with the ID <code>"output"</code> to a string describing the finally selected color.</p> + +<h2 id="Farbe_klug_verwenden">Farbe klug verwenden</h2> + +<p>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.</p> + +<h3 id="Die_richtigen_Farben_finden">Die richtigen Farben finden</h3> + +<p>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.</p> + +<h4 id="Base_color">Base color</h4> + +<p>The first step is to choose your <strong>base color</strong>. 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:</p> + +<ul> + <li>A color that is naturally associated with the topic of your content, such as the existing color identified with a product or idea or a color representative of the emotion you wish to convey.</li> + <li>A color that comes from imagery associated with what your content is about. If you're creating a web site about a given item or product, choose a color that's physically present on that item.</li> + <li>Browse web sites that let you look at lots of existing color palettes and imags to find inspiration.</li> +</ul> + +<p>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 <a href="http://www.colorzilla.com/">ColorZilla</a> offers an extension (<a href="http://www.colorzilla.com/chrome">Chrome</a> / <a href="http://www.colorzilla.com/firefox">Firefox</a>) 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.</p> + +<div class="note"> +<p>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.</p> +</div> + +<h4 id="Fleshing_out_the_palette">Fleshing out the palette</h4> + +<p>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.</p> + +<p>A few examples (all free to use as of the time this list was last revised):</p> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool">MDN's color picker tool</a></li> + <li><a href="http://paletton.com">Paletton</a></li> + <li><a href="https://color.adobe.com/create/color-wheel">Adobe Color CC online color wheel</a></li> +</ul> + +<p>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.</p> + +<div class="note"> +<p>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.</p> +</div> + +<h3 id="Ressourcen_zu_Farbentheorie">Ressourcen zu Farbentheorie</h3> + +<p>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:</p> + +<dl> + <dt><a href="https://www.khanacademy.org/partner-content/pixar/color">Color Science</a> (<a href="https://www.khanacademy.org/">Khan Academy</a> in association with <a href="https://www.pixar.com/">Pixar</a>)</dt> + <dd>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.</dd> + <dt>{{interwiki("wikipedia", "Color theory")}} on Wikipedia</dt> + <dd>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.</dd> +</dl> + +<h3 id="Farbe_und_Barrierefreiheit">Farbe und Barrierefreiheit</h3> + +<p>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.</p> + +<p>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.</p> + +<div class="note"> +<p>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.</p> +</div> + +<p>For more information about color blindness, see the following articles:</p> + +<ul> + <li><a href="https://medlineplus.gov/colorblindness.html">Medline Plus: Color Blindness</a> (United States National Institute of Health)</li> + <li><a href="https://www.aao.org/eye-health/diseases/what-is-color-blindness">American Academy of Ophthamology: What Is Color Blindness?</a></li> + <li><a href="https://www.usability.gov/get-involved/blog/2010/02/color-blindness.html">Color Blindness & Web Design</a> (Usability.gov: United States Department of Health and Human Services)</li> +</ul> + +<h3 id="Palette_design_example">Palette design example</h3> + +<p>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 <a href="https://www.google.com/search?q=Mars&tbm=isch">Google search for photos of Mars</a>. 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.</p> + +<p>Using an eyedropper tool, we identify a color we like and determine that the color in question is <code>#D79C7A</code>, which is an appropriate rusty orange-red color that's so stereotypical of the Martian surface.</p> + +<p>Having selected our base color, we need to build out our palette. We decide to use <a href="http://www.paletteon.com/">Paletteon</a> to come up with the other colors we need. Upon opening Paletton, we see:</p> + +<p><img alt="Right after loading Paletton." src="https://mdn.mozillademos.org/files/15451/paletton1.png" style="height: 361px; width: 600px;"></p> + +<p>Next, we enter our color's hex code (<code>D79C7A</code>) into the "Base RGB" box at the bottom-left corner of the tool:</p> + +<p><img alt="After entering base color" src="https://mdn.mozillademos.org/files/15453/paletton2.png" style="height: 361px; width: 600px;"></p> + +<p>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 <code>#508D7C</code>.</p> + +<p><img alt="Now with complementary colors included." src="https://mdn.mozillademos.org/files/15455/paletton3.png" style="height: 361px; width: 600px;"></p> + +<p>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:</p> + +<p><img alt="Triad color scheme selected" src="https://mdn.mozillademos.org/files/15457/paletton4.png" style="height: 361px; width: 600px;"></p> + +<p>That greyish blue in the top-right looks pretty good. Clicking on it, we find that it's <code>#556E8D</code>. 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:</p> + +<p><img alt="Triad color scheme selected" src="https://mdn.mozillademos.org/files/15459/paletton-color-detail.png" style="height: 370px; width: 526px;"></p> + +<p>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.</p> + +<p>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.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a></li> + <li><a href="/en-US/docs/Web/Guide/Graphics">Graphics on the web</a></li> + <li><a href="/en-US/docs/Tools/DevToolsColors">MDN's color picker tool</a></li> +</ul> 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 +--- +<p>Elemente in HTML haben <strong>Attribute</strong>; 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.</p> + +<h2 id="Attributliste">Attributliste</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Attributname</th> + <th>Elemente</th> + <th>Beschreibung</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>accept</code></td> + <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> + <td>Liste der Typen, die der Server akzeptiert, in der Regel ein Dateityp.</td> + </tr> + <tr> + <td><code>accept-charset</code></td> + <td>{{ HTMLElement("form") }}</td> + <td>Liste der unterstützten Zeichensätze.</td> + </tr> + <tr> + <td><code>accesskey</code></td> + <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td> + <td>Definiert eine Tastenkombination zum Aktivieren oder Hinzufügen von Fokus auf das Element.</td> + </tr> + <tr> + <td><code>action</code></td> + <td>{{ HTMLElement("form") }}</td> + <td>Die URI eines Programms, das die über das Formular übermittelten Informationen verarbeitet.</td> + </tr> + <tr> + <td><code>align</code></td> + <td>{{ 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") }}</td> + <td>Gibt die horizontale Ausrichtung des Elements an.</td> + </tr> + <tr> + <td><code>alt</code></td> + <td>{{ HTMLElement("applet") }}, {{ HTMLElement("area") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}</td> + <td>Alternativer Text, falls ein Bild oder ein vergleichbares anderes Element nicht angezeigt werden kann.</td> + </tr> + <tr> + <td><code>async</code></td> + <td>{{ HTMLElement("script") }}</td> + <td>Gibt an, dass das Skript asynchron ausgeführt werden soll.</td> + </tr> + <tr> + <td><code>autocomplete</code></td> + <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> + <td>Gibt an, ob die Kontrollen in diesem Formular standardmäßig ihre Werte automatisch durch den Browser vervollständigen können.</td> + </tr> + <tr> + <td><code>autofocus</code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>Das Element sollte nach der geladenen Seite automatisch fokussiert werden.</td> + </tr> + <tr> + <td><code>autoplay</code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> + <td>Das Audio oder Video sollte so schnell wie möglich spielen.</td> + </tr> + <tr> + <td><code>autosave</code></td> + <td>{{ HTMLElement("input") }}</td> + <td>Bisherige Werte sollten Dropdowns von auswählbaren Werten über Seitenlasten bestehen bleiben.</td> + </tr> + <tr> + <td><code>bgcolor</code></td> + <td>{{ HTMLElement("body") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}, {{ HTMLElement("tr") }}</td> + <td> + <p>Hintergrundfarbe des Elements</p> + + <div class="note"> + <p><strong>Hinweis:</strong> Dies ist ein veraltetes Attribut. Bitte benutze stattdessen die CSS {{ Cssxref("background-color") }} Eigenschachaft.</p> + </div> + </td> + </tr> + <tr> + <td><code>border</code></td> + <td>{{ HTMLElement("img") }}, {{ HTMLElement("object") }}, {{ HTMLElement("table") }}</td> + <td> + <p>Die Randbreite eines Elements</p> + + <div class="note"> + <p><strong>Hinweis:</strong> Die ist ein veraltetes Attribut. Bitte benutze stattdessen die CSS {{ Cssxref("border") }} Eigenschaft.</p> + </div> + </td> + </tr> + <tr> + <td><code>buffered</code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> + <td>Enthält den Zeitbereich von bereits gepufferten Medien.</td> + </tr> + <tr> + <td><code>challenge</code></td> + <td>{{ HTMLElement("keygen") }}</td> + <td>Eine Herausforderung, die zusammen mit dem öffentlichen Schlüssel eingereicht wird.</td> + </tr> + <tr> + <td><code>charset</code></td> + <td>{{ HTMLElement("meta") }}, {{ HTMLElement("script") }}</td> + <td>Deklariert die Zeichencodierung der Seite oder des Skripts.</td> + </tr> + <tr> + <td><code>checked</code></td> + <td>{{ HTMLElement("command") }}, {{ HTMLElement("input") }}</td> + <td>Gibt an, ob das Element auf Seitenladung überprüft werden soll.</td> + </tr> + <tr> + <td><code>cite</code></td> + <td>{{ HTMLElement("blockquote") }}, {{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("q") }}</td> + <td>Enthält einen URI, der auf die Quelle des Angebots oder der Änderung verweist.</td> + </tr> + <tr> + <td><code>class</code></td> + <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td> + <td>Oft mit CSS verwendet, um Elemente mit gemeinsamen Eigenschaften zu gestalten.</td> + </tr> + <tr> + <td><code>code</code></td> + <td>{{ HTMLElement("applet") }}</td> + <td>Gibt die URL der zu ladenden und ausgeführten Klassendatei des Applets an.</td> + </tr> + <tr> + <td><code>codebase</code></td> + <td>{{ HTMLElement("applet") }}</td> + <td>Dieses Attribut gibt die absolute oder relative URL des Verzeichnisses an, in dem Applets '.class-Dateien, die durch das Codeattribut referenziert werden, gespeichert sind.</td> + </tr> + <tr> + <td><code>color</code></td> + <td>{{ HTMLElement("basefont") }}, {{ HTMLElement("font") }}, {{ HTMLElement("hr") }}</td> + <td> + <p>Dieses Attribut setzt die Textfarbe entweder mit einer benannten Farbe oder einer Farbe, die im hexadezimalen #RRGGBB-Format angegeben ist.</p> + + <div class="note"> + <p><strong>Hinweis:</strong> Das ist ein veraltetestes Attribut. Bitte benutze stattdessen die CSS {{ Cssxref("color") }} Eigenschaft.</p> + </div> + </td> + </tr> + <tr> + <td><code>cols</code></td> + <td>{{ HTMLElement("textarea") }}</td> + <td>Definiert die Anzahl der Spalten in einem Textbereich.</td> + </tr> + <tr> + <td><code>colspan</code></td> + <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td> + <td>Das colspan-Attribut definiert die Anzahl der Spalten, die eine Zelle überspannen soll.</td> + </tr> + <tr> + <td><code>content</code></td> + <td>{{ HTMLElement("meta") }}</td> + <td>Ein Wert, der mit <code>http-equiv</code> oder dem Namen verbunden ist, abhängig vom Kontext.</td> + </tr> + <tr> + <td><code>contenteditable</code></td> + <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td> + <td>Gibt an, ob der Inhalt des Elements bearbeitet werden kann.</td> + </tr> + <tr> + <td><code>contextmenu</code></td> + <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td> + <td>Definiert die ID eines {{HTMLElement("menu")}} - Elements, das als Kontextmenü des Elements dient.</td> + </tr> + <tr> + <td><code>controls</code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> + <td>Gibt an, ob der Browser dem Benutzer die Wiedergabesteuerung anzeigen soll.</td> + </tr> + <tr> + <td><code>coords</code></td> + <td>{{ HTMLElement("area") }}</td> + <td>Ein Satz von Werten, die die Koordinaten des Hot-Spot-Bereichs angeben.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">crossorigin</a></code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("img") }}, {{ HTMLElement("link") }}, {{ HTMLElement("script") }}, {{ HTMLElement("video") }}</td> + <td>Wie das Element grenzüberschreitende Anfragen behandelt.</td> + </tr> + <tr> + <td><code>data</code></td> + <td>{{ HTMLElement("object") }}</td> + <td>Gibt die URL der Ressource an.</td> + </tr> + <tr> + <td><code>data-*</code></td> + <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td> + <td>Ermöglicht es Ihnen, benutzerdefinierte Attribute an ein HTML-Element anzuhängen.</td> + </tr> + <tr> + <td><code>datetime</code></td> + <td>{{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("time") }}</td> + <td>Gibt das Datum und die Uhrzeit an, die dem Element zugeordnet sind.</td> + </tr> + <tr> + <td><code>default</code></td> + <td>{{ HTMLElement("track") }}</td> + <td>Zeigt an, dass die Spur aktiviert werden soll, es sei denn, die Einstellungen des Benutzers zeigen etwas anderes an.</td> + </tr> + <tr> + <td><code>defer</code></td> + <td>{{ HTMLElement("script") }}</td> + <td>Gibt an, dass das Skript nach dem Analysieren der Seite ausgeführt werden soll.</td> + </tr> + <tr> + <td><code>dir</code></td> + <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td> + <td>Definiert die Textrichtung. Zulässige Werte sind (links-nach-rechts oder rechts-nach-links)</td> + </tr> + <tr> + <td><code>dirname</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td></td> + </tr> + <tr> + <td><code>disabled</code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("command") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>Gibt an, ob der Benutzer mit dem Element interagieren kann.</td> + </tr> + <tr> + <td><code>download</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td> + <td>Zeigt an, dass der Hyperlink zum Herunterladen einer Ressource verwendet werden soll.</td> + </tr> + <tr> + <td><code>draggable</code></td> + <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td> + <td>Legt fest, ob das Element gezogen werden kann.</td> + </tr> + <tr> + <td><code>dropzone</code></td> + <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td> + <td>Gibt an, dass das Element das Fallenlassen von Inhalt auf ihm akzeptiert.</td> + </tr> + <tr> + <td><code>enctype</code></td> + <td>{{ HTMLElement("form") }}</td> + <td>Definiert den Inhaltstyp des Formulars, wenn die Methode POST ist.</td> + </tr> + <tr> + <td><code>for</code></td> + <td>{{ HTMLElement("label") }}, {{ HTMLElement("output") }}</td> + <td>Beschreibt Elemente, die zu diesem gehören.</td> + </tr> + <tr> + <td><code>form</code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>Gibt das Formular an, das der Besitzer des Elements ist.</td> + </tr> + <tr> + <td><code>formaction</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("button") }}</td> + <td>Gibt die Aktion des Elements an und überschreibt die im {{HTMLElement ("Formular")}} definierte Aktion.</td> + </tr> + <tr> + <td><code>headers</code></td> + <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td> + <td>IDs der <code><th></code> -Elemente, die für dieses Element gelten.</td> + </tr> + <tr> + <td><code>height</code></td> + <td>{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}</td> + <td> + <p>Gibt die Höhe der hier aufgeführten Elemente an. Für alle anderen Elemente verwenden Sie die Eigenschaft CSS {{cssxref ("height")}}.</p> + + <div class="note"> + <p><strong>Hinweis:</strong> In einigen Fällen wie {{HTMLElement ("div")}} ist dies ein Legacy-Attribut, in welchem Fall die CSS {{Cssxref ("height")}} Eigenschaft stattdessen verwendet werden soll.</p> + </div> + </td> + </tr> + <tr> + <td><code>hidden</code></td> + <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td> + <td>Verhindert das Rendering des gegebenen Elements, während Kinderelemente, z.B. Script-Elemente, aktiv.</td> + </tr> + <tr> + <td><code>high</code></td> + <td>{{ HTMLElement("meter") }}</td> + <td>Zeigt die untere Schranke des oberen Bereichs an.</td> + </tr> + <tr> + <td><code>href</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("link") }}</td> + <td>Gibt die URL einer verknüpften Ressource an.</td> + </tr> + <tr> + <td><code>hreflang</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td> + <td>Gibt die Sprache der verknüpften Ressource an.</td> + </tr> + <tr> + <td><code>http-equiv</code></td> + <td>{{ HTMLElement("meta") }}</td> + <td></td> + </tr> + <tr> + <td><code>icon</code></td> + <td>{{ HTMLElement("command") }}</td> + <td>Gibt ein Bild an, das den Befehl darstellt.</td> + </tr> + <tr> + <td><code>id</code></td> + <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td> + <td>Oft mit CSS verwendet, um ein bestimmtes Element zu stylen. Der Wert dieses Attributs muss eindeutig sein.</td> + </tr> + <tr> + <td><code>integrity</code></td> + <td>{{ HTMLElement("link") }}, {{ HTMLElement("script") }} </td> + <td> + <p>Sicherheits-Feature, das Browsern ermöglicht zu verifizieren, was sie abrufen.</p> + + <p><a href="https://developer.mozilla.org/de/docs/Web">MDN Link</a></p> + </td> + </tr> + <tr> + <td><code>ismap</code></td> + <td>{{ HTMLElement("img") }}</td> + <td>Gibt an, dass das Bild Teil einer Server-seitigen Image-Map ist.</td> + </tr> + <tr> + <td><code>itemprop</code></td> + <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td> + <td></td> + </tr> + <tr> + <td><code>keytype</code></td> + <td>{{ HTMLElement("keygen") }}</td> + <td>Spezifiziert den Typ des generierten Schlüssels.</td> + </tr> + <tr> + <td><code>kind</code></td> + <td>{{ HTMLElement("track") }}</td> + <td>Spezifiziert die Art der Textspur.</td> + </tr> + <tr> + <td><code>label</code></td> + <td>{{ HTMLElement("track") }}</td> + <td>Definiert einen für den Nutzer lesbaren Titel der Textspur.</td> + </tr> + <tr> + <td><code>lang</code></td> + <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td> + <td>Definiert die im Element genutzte Sprache.</td> + </tr> + <tr> + <td><code>language</code></td> + <td>{{ HTMLElement("script") }}</td> + <td>Definiert die im Element genutzte Skriptsprache.</td> + </tr> + <tr> + <td><code>list</code></td> + <td>{{ HTMLElement("input") }}</td> + <td>Identifiziert eine dem Nutzer vorzuschlagende Liste vordefinierter Optionen.</td> + </tr> + <tr> + <td><code>loop</code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("bgsound") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("video") }}</td> + <td>Gibt an, ob das Medium ab dem Start beginnen soll, wenn es fertig ist.</td> + </tr> + <tr> + <td><code>low</code></td> + <td>{{ HTMLElement("meter") }}</td> + <td>Zeigt die obere Schranke des unteren Bereiches an.</td> + </tr> + <tr> + <td><code>manifest</code></td> + <td>{{ HTMLElement("html") }}</td> + <td>Gibt die URL des Cache-Manifests des Dokuments an.</td> + </tr> + <tr> + <td><code>max</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td> + <td>Gibt den maximal zulässigen Wert an.</td> + </tr> + <tr> + <td><code>maxlength</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>Definiert die maximal zulässige Anzahl von Zeichen im Element.</td> + </tr> + <tr> + <td><code>media</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}</td> + <td>Gibt einen Hinweis auf das Medium an, für das die verknüpfte Ressource entworfen wurde.</td> + </tr> + <tr> + <td><code>method</code></td> + <td>{{ HTMLElement("form") }}</td> + <td>Legt fest, welche HTTP-Methode bei der Übermittlung des Formulars verwendet werden soll. Kann GET (Standard) oder POST sein.</td> + </tr> + <tr> + <td><code>min</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}</td> + <td>Gibt den zulässigen Mindestwert an.</td> + </tr> + <tr> + <td><code>multiple</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> + <td>Gibt an, ob mehrere Werte in einer Eingabe des Typs E-Mail oder Datei eingegeben werden können.</td> + </tr> + <tr> + <td><code>muted</code></td> + <td>{{ HTMLElement("video") }}</td> + <td>Zeigt an, ob der Ton anfänglich auf Seitenladung ausgeschaltet wird.</td> + </tr> + <tr> + <td><code>name</code></td> + <td>{{ 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") }}</td> + <td>Name des Elements. Zum Beispiel von dem Server verwendet, um die Felder in Form zu übermitteln.</td> + </tr> + <tr> + <td><code>novalidate</code></td> + <td>{{ HTMLElement("form") }}</td> + <td>Dieses Attribut gibt an, dass das Formular bei der Übermittlung nicht validiert werden darf.</td> + </tr> + <tr> + <td><code>open</code></td> + <td>{{ HTMLElement("details") }}</td> + <td>Gibt an, ob die Details auf Seite geladen werden sollen.</td> + </tr> + <tr> + <td><code>optimum</code></td> + <td>{{ HTMLElement("meter") }}</td> + <td>Zeigt den optimalen numerischen Wert an.</td> + </tr> + <tr> + <td><code>pattern</code></td> + <td>{{ HTMLElement("input") }}</td> + <td>Definiert einen regulären Ausdruck, den der Wert des Elements validiert.</td> + </tr> + <tr> + <td><code>ping</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td> + <td></td> + </tr> + <tr> + <td><code>placeholder</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>Bietet dem Benutzer einen Hinweis darauf, was im Feld eingegeben werden kann.</td> + </tr> + <tr> + <td><code>poster</code></td> + <td>{{ HTMLElement("video") }}</td> + <td>Eine URL, die einen Posterrahmen anzeigt, bis der Benutzer spielt oder sucht.</td> + </tr> + <tr> + <td><code>preload</code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> + <td>Indicates whether the whole resource, parts of it or nothing should be preloaded.</td> + </tr> + <tr> + <td><code>radiogroup</code></td> + <td>{{ HTMLElement("command") }}</td> + <td></td> + </tr> + <tr> + <td><code>readonly</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>Indicates whether the element can be edited.</td> + </tr> + <tr> + <td><code>rel</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td> + <td>Specifies the relationship of the target object to the link object.</td> + </tr> + <tr> + <td><code>required</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>Indicates whether this element is required to fill out or not.</td> + </tr> + <tr> + <td><code>reversed</code></td> + <td>{{ HTMLElement("ol") }}</td> + <td>Indicates whether the list should be displayed in a descending order instead of a ascending.</td> + </tr> + <tr> + <td><code>rows</code></td> + <td>{{ HTMLElement("textarea") }}</td> + <td>Defines the number of rows in a text area.</td> + </tr> + <tr> + <td><code>rowspan</code></td> + <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td> + <td>Defines the number of rows a table cell should span over.</td> + </tr> + <tr> + <td><code>sandbox</code></td> + <td>{{ HTMLElement("iframe") }}</td> + <td></td> + </tr> + <tr> + <td><code>scope</code></td> + <td>{{ HTMLElement("th") }}</td> + <td></td> + </tr> + <tr> + <td><code>scoped</code></td> + <td>{{ HTMLElement("style") }}</td> + <td></td> + </tr> + <tr> + <td><code>seamless</code></td> + <td>{{ HTMLElement("iframe") }}</td> + <td></td> + </tr> + <tr> + <td><code>selected</code></td> + <td>{{ HTMLElement("option") }}</td> + <td>Defines a value which will be selected on page load.</td> + </tr> + <tr> + <td><code>shape</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td> + <td></td> + </tr> + <tr> + <td><code>size</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> + <td>Defines the width of the element (in pixels). If the element's <code>type</code> attribute is <code>text</code> or <code>password</code> then it's the number of characters.</td> + </tr> + <tr> + <td><code>sizes</code></td> + <td>{{ HTMLElement("link") }}, {{ HTMLElement("img") }}, {{ HTMLElement("source") }}</td> + <td></td> + </tr> + <tr> + <td><code>slot</code></td> + <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td> + <td>Assigns a slot in a shadow DOM shadow tree to an element.</td> + </tr> + <tr> + <td><code>span</code></td> + <td>{{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}</td> + <td></td> + </tr> + <tr> + <td><code>spellcheck</code></td> + <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td> + <td>Indicates whether spell checking is allowed for the element.</td> + </tr> + <tr> + <td><code>src</code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("track") }}, {{ HTMLElement("video") }}</td> + <td>Die URL des einbettbaren Inhalts.</td> + </tr> + <tr> + <td><code>srcdoc</code></td> + <td>{{ HTMLElement("iframe") }}</td> + <td></td> + </tr> + <tr> + <td><code>srclang</code></td> + <td>{{ HTMLElement("track") }}</td> + <td></td> + </tr> + <tr> + <td><code>srcset</code></td> + <td>{{ HTMLElement("img") }}</td> + <td></td> + </tr> + <tr> + <td><code>start</code></td> + <td>{{ HTMLElement("ol") }}</td> + <td>Definiert die erste Zahl, wenn sie anders als 1 ist.</td> + </tr> + <tr> + <td><code>step</code></td> + <td>{{ HTMLElement("input") }}</td> + <td></td> + </tr> + <tr> + <td><code>style</code></td> + <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td> + <td>Definiert CSS Stile für das Element und überschreibt andere Stile, welche z.B. in einem Stylesheet für das Element festgelegt sind.</td> + </tr> + <tr> + <td><code>summary</code></td> + <td>{{ HTMLElement("table") }}</td> + <td></td> + </tr> + <tr> + <td><code>tabindex</code></td> + <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td> + <td>Overrides the browser's default tab order and follows the one specified instead.</td> + </tr> + <tr> + <td><code>target</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("form") }}</td> + <td></td> + </tr> + <tr> + <td><code>title</code></td> + <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td> + <td>Text to be displayed in a tooltip when hovering over the element.</td> + </tr> + <tr> + <td><code>type</code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("command") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("object") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}, {{ HTMLElement("menu") }}</td> + <td>Definiert den Typ eines Elements.</td> + </tr> + <tr> + <td><code>usemap</code></td> + <td>{{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}</td> + <td></td> + </tr> + <tr> + <td><code>value</code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("li") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("param") }}</td> + <td>Defines a default value which will be displayed in the element on page load.</td> + </tr> + <tr> + <td><code>width</code></td> + <td>{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}</td> + <td> + <p>For the elements listed here, this establishes the element's width.</p> + + <div class="note"> + <p><strong>Note:</strong> 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.</p> + </div> + </td> + </tr> + <tr> + <td><code>wrap</code></td> + <td>{{ HTMLElement("textarea") }}</td> + <td>Indicates whether the text should be wrapped.</td> + </tr> + </tbody> +</table> + +<h2 id="Content_versus_IDL_attributes">Content versus IDL attributes</h2> + +<p>In HTML, most attributes have two faces: the <strong>content attribute</strong> and the <strong>IDL attribute</strong>.</p> + +<p>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 <code>maxlength</code> to 42 using the content attribute, you have to call <code>setAttribute("maxlength", "42")</code> on that element.</p> + +<p>The IDL attribute is also known as a JavaScript property. These are the attributes you can read or set using JavaScript properties like <code class="moz-txt-verticalline">element.foo</code>. 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.</p> + +<p>Most of the time, IDL attributes will return their values as they are really used. For example, the default <code>type</code> for {{HTMLElement("input")}} elements is "text", so if you set <code>input.type="foobar"</code>, the <code><input></code> element will be of type text (in the appearance and the behavior) but the "type" content attribute's value will be "foobar". However, the <code>type</code> IDL attribute will return the string "text".</p> + +<p>IDL attributes are not always strings; for example, <code>input.maxlength</code> is a number (a signed long). When using IDL attributes, you read or set values of the desired type, so <code>input.maxlength</code> is always going to return a number and when you set <code>input.maxlength</code> ,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.</p> + +<p>IDL attributes can <a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes">reflect other types</a> 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 <a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes">the rules laid out in the specification</a>, 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 (<code>select.size</code>, for example) and you should read the specifications to understand how exactly they behave.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="https://developer.mozilla.org/de/docs/Web/HTML/Element">HTML-Elemente</a></li> +</ul> 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 +--- +<p>Block- und <a href="/de/docs/Web/HTML/Inline_elemente" title="/en-US/docs/HTML/inline_elements">Inline-Elemente</a> sind die zwei ursprünglichen Kategorien der darstellenden HTML-Elemente.</p> + +<p>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.</p> + +<p>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.<br> + 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.</p> + +<p>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.<br> + Die höchste Ebene für Block-Elemente selbst ist das Element {{ HTMLElement("body") }}.</p> + +<p>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 <a href="/en-US/docs/HTML/Content_categories" title="/en-US/docs/HTML/Content_categories">Inhaltskategorien</a> ergänzt. Hierbei entspricht die Block-Ebene in HTML 5 grob der Kategorie <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="/en-US/docs/HTML/Content_categories#Flow_content">fließender Inhalte</a>, während die Inline-Ebene der Kategorie <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="/en-US/docs/HTML/Content_categories#Phrasing_content">gestaltender Inhalte</a> gleichkommt. Darüber hinaus existieren weitere Kategorien.</p> + +<h2 id="Elemente">Elemente</h2> + +<p>Die nachfolgende Liste zeigt eine komplette Übersicht aller HTML-Block-Elemente (die neuen HTML-5-Elemente sind technisch gesehen nicht als Block-Elemente definiert).</p> + +<div class="threecolumns"> +<dl> + <dt>{{ HTMLElement("address") }}</dt> + <dd>Kontaktinformation.</dd> + <dt>{{ HTMLElement("article") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Inhalt eines Artikels.</dd> + <dt>{{ HTMLElement("aside") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Anmerkungen.</dd> + <dt>{{ HTMLElement("audio") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Audio-Wiedergabe.</dd> + <dt>{{ HTMLElement("video") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Video-Wiedergabe.</dd> + <dt>{{ HTMLElement("blockquote") }}</dt> + <dd>Zitat in Form eines eigenständigen Absatzes.</dd> + <dt>{{ HTMLElement("canvas") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Bereich zum Zeichnen und Malen.</dd> + <dt>{{ HTMLElement("dd") }}</dt> + <dd>Definition, Beschreibung.</dd> + <dt>{{ HTMLElement("div") }}</dt> + <dd>Allgemeine Unterteilung ohne semantische Aussage.</dd> +</dl> + + + +<dl> + <dt></dt> + <dt>{{ HTMLElement("dl") }}</dt> + <dd>Definitionsliste.</dd> +</dl> + +<dl> + <dt>{{ HTMLElement("fieldset") }}</dt> + <dd>Gruppe von Elementen im Formular oder Reiter im Dialog.</dd> + <dt>{{ HTMLElement("figcaption") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Beschreibung einer Grafik.</dd> + <dt>{{ HTMLElement("figure") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Grafik mit Beschreibung (siehe {{ HTMLElement("figcaption") }}).</dd> + <dt>{{ HTMLElement("footer") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Fußbereich.</dd> + <dt>{{ HTMLElement("form") }}</dt> + <dd>Eingabeformular.</dd> + <dt>{{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}</dt> + <dd>Überschriften in Abstufung 1 bis 6.</dd> + <dt>{{ HTMLElement("header") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Kopfbereich.</dd> + <dt>{{ HTMLElement("hgroup") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Gruppe mehrerer Überschriften.</dd> + <dt></dt> + <dt>{{ HTMLElement("hr") }}</dt> + <dd>Horizontrale Trennlinie.</dd> + <dt>{{ HTMLElement("noscript") }}</dt> + <dd>Ersatzinhalt, falls JavaScript deaktiviert ist.</dd> + <dt>{{ HTMLElement("ol") }}</dt> + <dd>Geordnete Liste.</dd> + <dt>{{ HTMLElement("output") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Dynamisch erzeugte Ausgaben.</dd> + <dt>{{ HTMLElement("p") }}</dt> + <dd>Textabsatz.</dd> + <dt>{{ HTMLElement("pre") }}</dt> + <dd><span class="short_text" id="result_box" lang="de"><span class="hps">Vorformatierter </span></span>Text.</dd> + <dt>{{ HTMLElement("section") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Abschnitt einer Seite.</dd> + <dt>{{ HTMLElement("table") }}</dt> + <dd>Tabelle.</dd> + <dt>{{ HTMLElement("tfoot") }}</dt> + <dd>Fußbereich der Tabelle.</dd> + <dt>{{ HTMLElement("ul") }}</dt> + <dd>Ungeordnete Liste.</dd> +</dl> +</div> + +<h3 id="See_also" name="See_also"></h3> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/HTML/Inline_elemente" title="en/HTML/Inline_elements">Inline-Elemente</a></li> +</ul> 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 +--- +<div>{{CanvasSidebar}}</div> + +<p class="summary">Mit der Einführung von <a href="/en-US/docs/HTML/HTML5">HTML5 </a>wurde ein neues "Leinwand" Element zum Zeichnen von Grafiken mittels <a href="/en-US/docs/Web/JavaScript">JavaScript</a>-API vorgestellt: <strong>{{HTMLElement("canvas")}}</strong>. 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.</p> + +<p>Der Support für <code><canvas></code> in Mozilla-Anwendungen wurde ab Gecko 1.8 (sprich ab <a href="/en-US/docs/Mozilla/Firefox/Releases/1.5">Firefox 1.5</a>) implementiert. Canvas stammt ursprünglich von Apple und wurde für das OS X <a href="https://en.wikipedia.org/wiki/Dashboard_%28Mac_OS%29">Dashboard </a>und den Safari-browser entwickelt. Der Internet Explorer unterstützt Canvas ab Version 9, wobei es durch ein Skript von Google's <a href="http://excanvas.sourceforge.net/">Explorer Canvas Projekt</a> auch in früheren Versionen des IE lauffähig ist. Google Chrome und Opera ab Version 9 unterstützen <code><canvas></code> ebenfalls problemlos.</p> + +<p>Das <code><canvas></code> Element wird zudem von <a href="/en-US/docs/Web/WebGL">WebGL </a>für die hardwarebeschleunigte Darstellung von 3D-Grafiken auf Webseiten eingesetzt.</p> + +<h2 id="Beispiel">Beispiel</h2> + +<p>Dies ist ein einfacher Code-Ausschnitt mit der {{domxref("CanvasRenderingContext2D.fillRect()")}} Methode.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>canvas</span><span class="punctuation token">></span></span></code> +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.fillStyle = "green"; +ctx.fillRect(10, 10, 100, 100); +</pre> + +<p>Bearbeite den untenstehenden Code und sieh live Updates im Canvas: (Funktion kaputt auf Deutsch, die Englische Seite funktioniert, bitte oben umschalten auf Englisch )</p> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h2 id="Referenzen">Referenzen</h2> + +<div class="index"> +<ul> + <li>{{domxref("HTMLCanvasElement")}}</li> + <li>{{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasGradient")}}</li> + <li>{{domxref("CanvasPattern")}}</li> + <li>{{domxref("ImageBitmap")}}</li> + <li>{{domxref("ImageData")}}</li> + <li>{{domxref("TextMetrics")}}</li> + <li>{{domxref("Path2D")}} {{experimental_inline}}</li> +</ul> +</div> + +<p>Die Schnittstellen, die sich auf <code>WebGLRenderingContext</code> beziehen, werden unter <a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a> zusammengefasst.</p> + +<h2 id="Leitfäden_und_Anleitungen">Leitfäden und Anleitungen</h2> + +<dl> + <dt><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas Tutorial</a></dt> + <dd>Eine ausführliche Anleitung, die sowohl grundlegende Nutzung als auch fortgeschrittene Funktionen umfasst</dd> + <dt><a href="/en-US/Add-ons/Code_snippets/Canvas">Code-Ausschnitte: Canvas</a></dt> + <dd>Einige Entwickler-orientierte Code-Ausschnitte, die <code><canvas></code> enthalten.</dd> + <dt><a href="/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster">Demo: A basic ray-caster</a></dt> + <dd>A demo of ray-tracing animation using canvas.</dd> + <dt><a href="/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas">DOM-Objekte in ein canvas zeichnen</a></dt> + <dd>Wie man DOM Inhalt, wie zum Beispiel HTML-Elemente, in ein canvas zeichnet.</dd> + <dt><a href="/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">Videos mit canvas manipulieren</a></dt> + <dd>{{HTMLElement("video")}} und {{HTMLElement("canvas")}} kombinieren, um Videos in Echtzeit zu manipulieren.</dd> +</dl> + +<h2 id="Quellen">Quellen</h2> + +<h3 id="Allgemeines">Allgemeines</h3> + +<ul> + <li><a href="http://joshondesign.com/p/books/canvasdeepdive/title.html">HTML5 Canvas Deep Dive</a></li> + <li><a href="http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html">Canvas Handbook</a></li> +</ul> + +<h3 id="Libraries">Libraries</h3> + +<ul> + <li><a href="http://fabricjs.com">Fabric.js</a> is an open-source canvas library with SVG parsing capabilities.</li> + <li><a href="https://github.com/ericdrowell/KineticJS">Kinetic.js</a> is an open-source canvas library focused on interactivity for desktop and mobile applications.</li> + <li><a href="http://paperjs.org/">Paper.js</a> is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas.</li> + <li><a href="http://libcanvas.github.com/">libCanvas</a> is powerful and lightweight canvas framework.</li> + <li><a href="http://processingjs.org">Processing.js</a> is a port of the Processing visualization language.</li> + <li><a href="https://playcanvas.com/">PlayCanvas</a> is an open source game engine.</li> + <li><a href="http://www.pixijs.com/">Pixi.js</a> is an open source game engine.</li> + <li><a href="http://www.liquidx.net/plotkit/">PlotKit</a> is a charting and graphing library.</li> + <li><a class="link-https" href="https://github.com/jeremyckahn/rekapi">Rekapi</a> is an animation key-framing API for Canvas.</li> + <li><a href="http://senchalabs.github.com/philogl/">PhiloGL</a> is a WebGL framework for data visualization, creative coding and game development.</li> + <li><a href="http://thejit.org/">JavaScript InfoVis Toolkit</a> creates interactive 2D Canvas data visualizations for the Web.</li> +</ul> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "the-canvas-element.html", "Canvas")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/Web/WebGL">WebGL</a></li> +</ul> 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: <a> +slug: Web/HTML/Element/a +tags: + - Element + - HTML + - 'HTML: fliessender Inhalt' + - Inhalt + - Reference + - Web +translation_of: Web/HTML/Element/a +--- +<div>{{HTMLRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Das <em>HTML-Element <code><a></code></em> (auch <em>HTML-Anker-Element</em>) definiert einen Hyperlink, ein benanntes Ziel für einen Hyperlink oder beides.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorien</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Fließender Inhalt</a>, <a href="/de/docs/Web/Guide/HTML/Inhaltskategorien#Gestaltender_Inhalt" title="Gestaltender Inhalt">gestaltender Inhalt</a>, interaktiver Inhalt, fühlbarer Inhalt.</td> + </tr> + <tr> + <th scope="row">Erlaubter Inhalt</th> + <td><a href="/en-US/docs/HTML/Content_categories#Transparent_content_model" title="HTML/Content_categories#Transparent_content_model">Transparent</a>, beinhaltet entweder <a href="/de/docs/Web/Guide/HTML/Inhaltskategorien#Fließender_Inhalt" title="HTML/Content_categories#Flow_content">fließenden Inhalt</a> (ausgenommen interaktiven Inhalt) oder <a href="/de/docs/Web/Guide/HTML/Inhaltskategorien#Gestaltender_Inhalt" title="Gestaltender Inhalt">gestaltender Inhalt</a>.</td> + </tr> + <tr> + <th scope="row">Tag Wegfall</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Erlaubte Elternelemente</th> + <td>Alle Elemente die <a href="/de/docs/Web/Guide/HTML/Inhaltskategorien#Gestaltender_Inhalt" title="Gestaltender Inhalt">gestaltenden Inhalt</a> akzeptieren, oder alle Elemente die <a href="/de/docs/Web/Guide/HTML/Inhaltskategorien#Fließender_Inhalt" title="HTML/Content_categories#Flow_content">fließenden Inhalt</a> erlauben.</td> + </tr> + <tr> + <th scope="row">Erlaubte ARIA-Rollen</th> + <td>{{ARIARole("button")}}, {{ARIARole("checkbox")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("option")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}, {{ARIARole("treeitem")}}</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLAnchorElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p><span style="line-height: 21px;">Dieses Element besitzt die </span><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute" style="line-height: 21px;" title="HTML/Global attributes">globalen Attribute</a><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{htmlattrdef("download")}} {{HTMLVersionInline(5)}}</dt> + <dd>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 <code>/</code> und <code>\</code> 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. + <div class="note"> + <p><strong>Hinweis:</strong></p> + + <ul> + <li>Dies kann mit <a href="/de/docs/Web/API/URL.createObjectURL" title="/en-US/docs/Web/API/URL.createObjectURL"><code>blob:</code>-URLs</a> und <code>data:</code>-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).</li> + <li>Falls der HTTP-Header <code>Content-Disposition:</code> angegeben wird und einen anderen Dateinamen vorschlägt als dieses Attribut, hat der HTTP-Header Vorrang vor diesem Attribut.</li> + <li>Falls das Attribut angegeben wird und <code>Content-Disposition:</code> den Wert <code>inline</code> hat, gibt Firefox <code>Content-Disposition</code> eine größere Wichtigkeit, wie im Fall des Dateinamens, während Chrome dem <code>download</code>-Attribut mehr Priorität gibt.</li> + <li>Im <a href="/de/docs/Firefox_20_for_developers" title="/en-US/docs/Firefox_20_for_developers">Firefox 20</a> wird dieses Attribut nur für Links auf Dateien desselben Ursprungs angewendet.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("href")}}</dt> + <dd>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 <code>href</code>-Attribut zeigt das Ziel des Links an, entweder eine URL oder ein URL-Fragment. Ein URL-Fragment ist ein Name dem ein Doppelkreuz (<code>#</code>) vorausgeht, welches ein internes Ziel im aktuellen Dokument (eine <a href="/de/docs/HTML/Global_attributes#attr-id" title="Global attributes#attr-id">ID</a>) 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 <code>file</code>, <code>ftp</code> und <code>mailto</code> funktionieren in den meisten Browsern. + <div class="note"> + <p><strong>Hinweis:</strong> Sie können das spezielle Fragment „top“ verwenden, um Links zu erzeugen, die zurück zum Anfang der Seite springen. Zum Beispiel: <code><a href="#top">Return to top</a></code>. <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#scroll-to-fragid" lang="en" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#scroll-to-fragid">Dieses Verhalten ist in HTML5 festgelegt</a>.</p> + </div> + </dd> + <dt>{{htmlattrdef("media")}} {{HTMLVersionInline(5)}}</dt> + <dd>Dieses Attribut legt das Medium fest, zu welchem die verlinkte Seite gehört. Der Wert muss ein <a href="/de/docs/CSS/Media_queries" title="CSS/Media queries">Media Query</a> 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. + <div class="note"> + <p><strong>Verwendungshinweis:</strong></p> + + <ul> + <li>In HTML 4 ist nur eine einfache durch Leerzeichen getrennte Liste von <a href="/de/docs/CSS/@media" title="https://developer.mozilla.org/en-US/docs/CSS/@media">Media Types und Media Groups</a> definiert worden und als Werte für dieses Attribut erlaubt, z. B. <code>print</code>, <code>screen</code>, <code>aural</code>, <code>braille</code>, … HTML 5 hat dies auf beliebige <a href="/de/docs/CSS/Media_queries" title="CSS/Media queries">Media Queries</a> erweitert, die eine Obermenge der erlaubten Werte von HTML 4 sind.</li> + <li>Browser, welche die <a href="/de/docs/CSS/Media_queries" title="CSS/Media queries">CSS3 Media Queries</a> 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.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("ping")}} {{HTMLVersionInline(5)}}</dt> + <dd>Falls das Attribut <code>ping</code> vorhanden ist, wird den URLs der Zielseiten eine Benachrichtigung gesendet, wenn der Benutzer dem Hyperlink folgt.</dd> + <dt>{{htmlattrdef("rel")}}</dt> + <dd>Legt das Verhältnis des Zielobjekts zum Linkobjekt fest. Der Wert ist eine durch Leerzeichen getrennte Liste von <a href="/de/docs/Web/HTML/Link_types">Link-Typen</a>.</dd> + <dt>{{htmlattrdef("target")}}</dt> + <dd>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 <em>browsing context</em>es oder ein Schlüsselwort für einen <em>browsing context</em> (zum Beispiel ein Tab, Fenster oder Inline Frame). Die folgenden Schlüsselwörter haben eine spezielle Bedeutung: + <ul> + <li><code>_self</code>: Lädt die Antwort in dasselbe Frame (HTML4) bzw. denselben <em>browsing context</em> (HTML5) wie die aktuelle Seite. Dieser Wert ist der Standardwert.</li> + <li><code>_blank</code>: Lädt die Antwort in ein neues unbenanntes Fenster (HTML4) bzw. einen neuen <em>browsing context</em> (HTML5).</li> + <li><code>_parent</code>: Lädt die Antwort in den <em>frameset parent</em> des aktuellen Frames (HTML4) bzw. <em>parent browsing context</em> (HTML5) des aktuellen. Falls es keinen <em>parent</em> gibt, verhält sich dieser Wert wie <code>_self</code>.</li> + <li><code>_top</code>: Lädt die Antwort in das gesamte Fenster und alle Frames werden überschrieben (HTML4) bzw. in den obersten <em>browsing context</em> (d.h. der <em>browsing context</em>, der dem aktuellen übergeordnet ist und keine übergeordneten <em>browsing context</em>e hat). Falls es keinen übergeordneten gibt, verhält sich dieser Wert wie <code>_self</code>.</li> + </ul> + Verwenden Sie dieses Attribut nur, wenn ein <code>href</code>-Attribut vorhanden ist.</dd> + <dt>{{htmlattrdef("charset")}} {{obsoleteGeneric("inline","HTML5")}}</dt> + <dd>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 <a class="external" href="http://tools.ietf.org/html/rfc2045" title="http://tools.ietf.org/html/rfc2045">RFC 2045</a>. Der Standardwert ist ISO-8859-1. + <div class="note"> + <p><strong>Verwendungshinweis:</strong> Dieses Attribut ist obsolet in HTML5 und <strong>sollte nicht mehr verwendet werden</strong>. Um denselben Effekt zu erhalten, verwenden Sie den HTTP-Header <code>Content-Type:</code> bei der verlinkten Datei.</p> + </div> + </dd> + <dt>{{htmlattrdef("coords")}} nur {{HTMLVersionInline(4)}}, {{obsoleteGeneric("inline","HTML5")}}</dt> + <dd>Bei der Verwendung mit dem <code>shape</code>-Attribut gibt dieses Attribut als durch Komma getrennte Liste von Zahlen die Koordinaten des Objekts auf der Seite an.</dd> + <dt>{{htmlattrdef("datafld")}} {{Non-standard_inline}}</dt> + <dd>Dieses Attribut legt den Spaltennamen des Datenquellenobjekts fest, das die Daten zur Verfügung stellt, die mit diesem Element verknüpft sind. + <div class="note"> + <p><strong><strong>Verwendungshinweis</strong>:</strong> Dieses Attribut ist nicht standardisiert und <strong>s<strong>ollte nicht verwendet werden</strong></strong>. Um denselben Effekt zu erhalten, verwenden Sie Scripting und einen Mechanismus wie <a href="/de/docs/nsIXMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a>, um die Seite dynamisch zu verändern.</p> + </div> + + <table class="fullwidth-table"> + <tbody> + <tr> + <td rowspan="2">Unterstützung</td> + <td>Gecko</td> + <td>Presto</td> + <td>WebKit</td> + <td>Trident</td> + </tr> + <tr> + <td>Nicht unterstützt</td> + <td>Nicht unterstützt</td> + <td>Nicht unterstützt</td> + <td>IE4, IE5, IE6, IE7 (Entfernt in IE8)</td> + </tr> + <tr> + <td>Normatives Dokument</td> + <td colspan="4"><a class="external" href="http://msdn.microsoft.com/en-us/library/ms533703%28VS.85%29.aspx">Microsoft's Data Binding: dataFld Property (MSDN)</a></td> + </tr> + </tbody> + </table> + </dd> + <dt>{{htmlattrdef("datasrc")}} {{Non-standard_inline}}</dt> + <dd>Dieses Attribut zeigt die ID des Datenquellenobjekts an, das die Daten zur Verfügung stellt, die mit diesem Element verknüpft sind. + <div class="note"> + <p><strong><strong>Verwendungshinweis</strong>:</strong> Dieses Attribut ist nicht standardisiert und <strong>s<strong>ollte nicht verwendet werden</strong></strong>. Um denselben Effekt zu erhalten, verwenden Sie Scripting und einen Mechanismus wie <a href="/de/docs/nsIXMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a>, um die Seite dynamisch zu verändern.</p> + </div> + + <table class="fullwidth-table"> + <tbody> + <tr> + <td rowspan="2">Unterstützung</td> + <td>Gecko</td> + <td>Presto</td> + <td>WebKit</td> + <td>Trident</td> + </tr> + <tr> + <td>Nicht unterstützt</td> + <td>Nicht unterstützt</td> + <td>Nicht unterstützt</td> + <td>IE4, IE5, IE6, IE7 (Entfernt in IE8)</td> + </tr> + <tr> + <td>Normatives Dokument</td> + <td colspan="4"><a class="external" href="http://msdn.microsoft.com/en-us/library/ms533709(VS.85).aspx" title="http://msdn.microsoft.com/en-us/library/ms533709(VS.85).aspx">Microsoft's Data Binding: dataSrc Property (MSDN)</a></td> + </tr> + </tbody> + </table> + </dd> + <dt>{{htmlattrdef("hreflang")}}</dt> + <dd>Dieses Attribut zeigt die Sprache der verlinkten Datei an. Es ist nur ein Hinweis. Erlaubte Werte sind bestimmt von <a class="external" href="http://www.ietf.org/rfc/bcp/bcp47.txt" title="http://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a> für HTML5 und von <a class="external" href="http://www.ietf.org/rfc/rfc1766.txt" title="http://www.ietf.org/rfc/rfc1766.txt">RFC1766</a> für HTML4. Verwenden Sie dieses Attribut nur, wenn ein <code>href</code>-Attribut vorhanden ist.</dd> + <dt>{{htmlattrdef("methods")}} {{Non-standard_inline}}</dt> + <dd>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 <code>title</code>-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. <a class="external" href="http://msdn.microsoft.com/en-us/library/ms534168(VS.85).aspx">Methods Property (MSDN)</a></dd> + <dt>{{htmlattrdef("name")}} nur {{HTMLVersionInline(4)}}, {{obsoleteGeneric("inline","HTML5")}}</dt> + <dd>Dieses Attribut wird in einem Anker benötigt, der ein Sprungziel innerhalb einer Seite definiert. Ein Wert für <strong>name</strong> ist einem Wert für das <strong>id</strong>-Attribut ähnlich und sollte eine alphanumerische Identifikation sein, die für das Dokument eindeutig ist. Nach der HTML-4.01-Spezifikation können <strong>id</strong> und <strong>name</strong> beide mit dem <code>a</code>-Element verwendet werden, solange sie idente Werte haben. + <div class="note"> + <p><strong>Verwendungshinweis:</strong> Dieses Attribut ist obsolet in HTML5. Verwenden Sie das <a href="/de/docs/Web/HTML/Globale_Attribute#attr-id" title="HTML/Global attributes#id">globale Attribut <strong>id</strong></a> stattdessen.</p> + </div> + </dd> + <dt>{{htmlattrdef("rev")}} nur {{HTMLVersionInline(4)}}, {{obsoleteGeneric("inline","HTML5")}}</dt> + <dd>Dieses Attribut legt einen umgekehrten Link fest und ist das inverse Verhältnis zum <strong>rel</strong>-Attribut. Es ist nützlich, um anzuzeigen, woher ein Objekt kam, sowie den Autor eines Dokuments.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("shape")}} nur {{HTMLVersionInline(4)}}, {{obsoleteGeneric("inline","HTML5")}}</dt> + <dd>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 <code>circle</code>, <code>default</code>, <code>polygon</code> und <code>rect</code>. Das Format des <strong>coords</strong>-Attributes hängt vom Wert jenes Attributs <strong>shape</strong> ab. Für <code>circle</code> ist der Wert <code>x,y,r</code>, wobei <code>x</code> und <code>y</code> die Pixelkoordinaten für den Mittelpunkt des Kreises sind und <code>r</code> der Radius in Pixeln ist. Für <code>rect</code> sollte das <strong>coords</strong>-Attribut <code>x,y,w,h</code> sein. Die Werte <code>x,y</code> legen das obere linke Eck des Rechtecks fest, während <code>w</code> und <code>h</code> die Breite bzw. Höhe festlegen. Der Wert <code>polygon</code> für <strong>shape</strong> verlangt Werte <code>x1,y1,x2,y2,...</code> für <strong>coords</strong>. Jedes der <code>x,y</code>-Paare definiert einen Punkt des Polygons, wobei aufeinander folgende Punkte sowie der letzte Punkt mit dem ersten mit geraden Linien verbunden werden. Der Wert <code>default</code> für <strong>shape</strong> verlangt, dass die gesamte beigefügte Fläche, üblicherweise ein Bild, verwendet wird. + <div class="note"><strong>Hinweis:</strong> Es ist ratsam, das <strong>usemap</strong>-Attribut für das {{HTMLElement("img")}}-Element und das verbundene {{HTMLElement("map")}}-Element zu verwenden, um Hotspots anstatt des <strong>shape</strong>-Attributes zu definieren.</div> + </dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>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 <strong>type</strong> auf <code>audio/wav</code> gesetzt ist. Für eine komplette Liste von erkannten MIME-Typen siehe <a class="external" href="http://www.w3.org/TR/html4/references.html#ref-MIMETYPES">http://www.w3.org/TR/html4/references.html#ref-MIMETYPES</a>. Verwenden Sie dieses Attribut nur, wenn ein <code>href</code>-Attribut vorhanden ist.</dd> + <dt>{{htmlattrdef("urn")}} {{Non-standard_inline}}</dt> + <dd>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. <a class="external" href="http://msdn.microsoft.com/en-us/library/ms534710(VS.85).aspx">urn Property (MSDN)</a></dd> +</dl> + +<h2 id="Beispiel_Link_zu_einem_externen_Ort">Beispiel: Link zu einem externen Ort</h2> + +<pre class="brush: html"><!-- Link zu einer externen Datei --> +<a href="http://www.mozilla.com/"> +Externer Link +</a> +</pre> + +<h3 id="Result" name="Result">Ergebnis</h3> + +<p><a class="external" href="http://www.mozilla.com/">Externer Link</a></p> + +<h2 id="Beispiel_Erstellung_eines_Bildlinks">Beispiel: Erstellung eines Bildlinks</h2> + +<p>Diese kleine Beispiel verwendet ein Bild, um zur MDN-Homepage zu verlinken. Die Homepage wird in einem neun <em>browsing context</em> geöffnet, d.h. eine neue Seite oder ein neuer Tab.</p> + +<pre class="brush: html"><a href="https://developer.mozilla.org/de/"> + <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" alt="MDN-Logo" /> +</a> +</pre> + +<h3 id="Result" name="Result">Ergebnis</h3> + +<p><a href="https://developer.mozilla.org/de/"><img alt="MDN-Logo" src="https://mdn.mozillademos.org/files/6851/mdn_logo.png"></a></p> + +<h2 id="Beispiel_Erstellung_eines_E-Mail-Links">Beispiel: Erstellung eines E-Mail-Links</h2> + +<p>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 <code>mailto</code>-Links gemacht. Hier ein einfaches Beispiel:</p> + +<pre class="brush: html"><a href="mailto:nowhere@mozilla.org">E-Mail senden</a></pre> + +<p>Dies führt zu einem Link, der so aussieht: <a href="mailto:nowhere@mozilla.org">E-Mail senden</a>.</p> + +<p>Für weitere Details über das <code>mailto</code>-URL-Schema, z.B. wie man Betreff, Nachrichtentext oder ähnliches festlegt, siehe <a href="/de/docs/Web/Guide/HTML/Email_links">E-Mail-Links</a> oder {{RFC(6068)}}.</p> + +<h2 id="Beispiel_Verwendung_des_download-Attributes_um_ein_canvas_als_PNG_zu_speichern">Beispiel: Verwendung des download-Attributes, um ein canvas als PNG zu speichern</h2> + +<p>Falls Sie einem Benutzer erlauben möchten, ein HTML-Canvas als Bild herunterzuladen, können Sie einen Link mit <code>download</code>-Attribut und den <code>canvas</code>-Daten als Datei-URL erstellen:</p> + +<pre class="brush: js"><strong style="color: #000066; font-weight: bold;">var</strong> link <span style="color: #339933;">=</span> document.<span style="color: #660066;">createElement</span><span style="color: #009900;">(</span><span style="color: #3366cc;">'a'</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> +link.<span style="color: #660066;">innerHTML</span> <span style="color: #339933;">=</span> <span style="color: #3366cc;">'Bild herunterladen'</span><span style="color: #339933;">;</span> +link.<span style="color: #660066;">addEventListener</span><span style="color: #009900;">(</span><span style="color: #3366cc;">'click'</span><span style="color: #339933;">,</span> <strong style="color: #000066; font-weight: bold;">function</strong><span style="color: #009900;">(</span>ev<span style="color: #009900;">)</span> <span style="color: #009900;">{</span> + link.<span style="color: #660066;">href</span> <span style="color: #339933;">=</span> canvas.<span style="color: #660066;">toDataURL</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> + link.<span style="color: #660066;">download</span> <span style="color: #339933;">=</span> <span style="color: #3366cc;">"meinBild.png"</span><span style="color: #339933;">;</span> +<span style="color: #009900;">}</span><span style="color: #339933;">,</span> <strong style="color: #003366; font-weight: bold;">false</strong><span style="color: #009900;">)</span><span style="color: #339933;">;</span> +document.<span style="color: #660066;">body</span>.<span style="color: #660066;">appendChild</span><span style="color: #009900;">(</span>link<span style="color: #009900;">)</span><span style="color: #339933;">;</span></pre> + +<p>Hier können Sie dies in Aktion sehen <a href="http://jsfiddle.net/codepo8/V6ufG/2/">http://jsfiddle.net/codepo8/V6ufG/2/</a></p> + +<h2 id="Specifications" name="Specifications">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-a-element', '<a>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-a-element', '<a>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.2', '<a>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>href="#top"</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("10.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>{{htmlattrxref("download","a")}}</td> + <td>14</td> + <td>{{CompatGeckoDesktop("20.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>href="#top"</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("10.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>{{htmlattrxref("download","a")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("20.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Hinweise">Hinweise</h2> + +<p>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.</p> + +<p>HTML 3.2 definiert nur <strong>name</strong>, <strong>href</strong>, <strong>rel</strong>, <strong>rev</strong>, und <strong>title</strong>.</p> + +<p>Das <strong>target</strong> 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 <a href="/en-US/docs/XHTML" title="XHTML">XHTML</a> sondern ist limitiert nur auf frameset oder Transit-Formulare.</p> + +<h3 id="JavaScript_Empfehlungen">JavaScript Empfehlungen</h3> + +<p>Es ist öfters der Fall, dass ein Anker-Tag benutzt wird zusammen mit dem <code>onclick</code> Event. Um zu verhindern, dass die Seite sich neu lädt, wird <strong>href</strong> 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.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Andere Elemente, die Text semantisch beschreiben: {{HTMLElement("abbr")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li> +</ul> 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: '<abbr>: Das Abkürzungselement' +slug: Web/HTML/Element/abbr +tags: + - Element + - HTML + - HTML Textlevel Semantik + - Referenz + - Web +translation_of: Web/HTML/Element/abbr +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">Das <strong>HTML-Abkürzungselement</strong> (<strong><code><abbr></code></strong>) 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.</span> Wenn vorhanden, <code>title</code> diese vollständige Beschreibung und nichts anderes enthalten.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/abbr.html", "tabbed-shorter")}}</div> + + + +<p>Der Artikel <em><a href="/de/Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable">Wie Abkürzungen markiert und verständlich gemacht werden</a></em>, ist ein Leitfaden zur Verwendung von <code><abbr></code> und verwandten Elementen.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Inhaltskategorien</a></th> + <td><a href="/de/docs/Web/HTML/Content_categories#Flow_content">Fließender Inhalt</a>, <a href="/de/docs/Web/HTML/Content_categories#Phrasing_content">Formulierungsinhalt</a>, fühlbarer Inhalt</td> + </tr> + <tr> + <th scope="row">Erlaubter Inhalt</th> + <td><a href="/de/docs/Web/HTML/Content_categories#Phrasing_content">Formulierungsinhalt</a></td> + </tr> + <tr> + <th scope="row">Tag Wegfall</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Erlaubte Elternelemente</th> + <td>Jedes Element, das Formulierungsinhalt akzeptiert</td> + </tr> + <tr> + <th scope="row">Erlaubte ARIA Rollen</th> + <td>Alle</td> + </tr> + <tr> + <th scope="row">DOM-Schnittstelle</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p>Dieses Element unterstützt nur die <a href="/de/docs/Web/HTML/Global_attributes">globalen Attribute</a>. Das Attribut {{htmlattrxref("title")}} hat bei Verwendung mit dem <code><abbr></code>-Element eine bestimmte semantische Bedeutung. Es <em>muss</em> 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.</p> + +<p>Jedes <code><abbr></code>-Element, das Sie verwenden, ist unabhängig von allen anderen; wenn Sie <code>title</code> für eines angeben, wird derselbe Erweiterungstext nicht automatisch an ein anderes mit demselben Inhaltstext angehängt.</p> + +<h2 id="Nutzungshinweise">Nutzungshinweise</h2> + +<h3 id="Typische_Anwendungsfälle">Typische Anwendungsfälle</h3> + +<p>Es ist sicherlich nicht erforderlich, dass alle Abkürzungen mit <code><abbr></code> markiert werden. Es gibt jedoch einige Fälle, in denen es hilfreich ist, dies zu tun:</p> + +<ul> + <li>Wenn eine Abkürzung verwendet wird und Sie eine Erweiterung oder Definition außerhalb des Dokumentenflusses bereitstellen möchten, verwenden Sie <code><abbr></code> mit einer entsprechenden {{htmlattrxref("title")}}.</li> + <li>Um eine Abkürzung zu definieren, die dem Leser möglicherweise nicht vertraut ist, legen Sie den Begriff mit <code><abbr></code> und entweder einem <code>title</code>-Attribut oder einem Inline-Text vor, der die Definition bereitstellt.</li> + <li>Wenn die Anwesenheit einer Abkürzung im Text semantisch notiert werden muss, ist das <code><abbr></code>-Element hilfreich. Dies kann wiederum für Styling- oder Scripting-Zwecke verwendet werden.</li> + <li>Sie können <code><abbr></code> zusammen mit {{HTMLElement("dfn")}} verwenden, um Definitionen für Begriffe festzulegen, die Abkürzungen oder Akronyme sind. Siehe das Beispiel {{anch("Eine Abkürzung definieren")}} unten.</li> +</ul> + +<h3 id="Überlegungen_zur_Grammatik">Überlegungen zur Grammatik</h3> + +<p>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 <code>title</code>-Attribut wie in Ihrem <code><abbr></code>-Element. Dies ist besonders wichtig bei Sprachen mit mehr als zwei Numeri, wie z. B. Arabisch, ist aber auch in Englisch relevant.</p> + +<h2 id="Standarddarstellung">Standarddarstellung</h2> + +<p>Der Zweck dieses Elements ist ausschließlich für den Autor gedacht und wird von allen Browsern standardmäßig inline ({{cssxref('display')}}<code>: inline</code>) angezeigt. Die Standardeinstellung ist jedoch von Browser zu Browser unterschiedlich:</p> + +<ul> + <li>Manche Browser, wie der Internet Explorer, stellen es nicht anders als das {{HTMLElement("span")}}-Element dar.</li> + <li>Opera, Firefox, Chrome und einige andere fügen dem Inhalt des Elements eine gepunktete Unterstreichung hinzu.</li> + <li>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 <a href="https://developer.mozilla.org/de/docs/Web/CSS/font-variant" title="The CSS Eigenschaft font-variant property selects a normal, or small-caps face from a font family. Setting font-variant is also possible by using the font shorthand."><code>font-variant</code></a><code>: none</code> hinzu.</li> +</ul> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Eine_Abkürzung_semantisch_markieren">Eine Abkürzung semantisch markieren</h3> + +<p>Um eine Abkürzung zu markieren, ohne eine Erweiterung oder Beschreibung anzugeben, verwenden Sie einfach <code><abbr></code> ohne Attribute, wie in diesem Beispiel dargestellt.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p>Using <abbr>HTML</abbr> is fun and easy!</p></pre> + +<h4 id="Ergebnis">Ergebnis</h4> + +<p>{{EmbedLiveSample("Marking_up_an_abbreviation_semantically")}}</p> + +<h3 id="Abkürzungen_formatieren">Abkürzungen formatieren</h3> + +<p>Sie können CSS verwenden, um einen benutzerdefinierten Stil festzulegen, der für Abkürzungen verwendet wird, wie in diesem einfachen Beispiel gezeigt.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><p>Using <abbr>CSS</abbr>, you can style your abbreviations!</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">abbr { + font-variant: all-small-caps; +}</pre> + +<h4 id="Ergebnis_2">Ergebnis</h4> + +<p>{{EmbedLiveSample("Styling_abbreviations")}}</p> + +<h3 id="Eine_Erweiterung_bereitstellen">Eine Erweiterung bereitstellen</h3> + +<p>Durch das Hinzufügen eines Attributs {{htmlattrxref("title")}} können Sie eine Erweiterung oder Definition für die Abkürzung oder das Akronym angeben.</p> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html"><p>Ashok's joke made me <abbr title="Laugh Out Loud">LOL</abbr> big +time.</p></pre> + +<h4 id="Ergebnis_3">Ergebnis</h4> + +<p>{{EmbedLiveSample("Providing_an_expansion")}}</p> + +<h3 id="Eine_Abkürzung_definieren">Eine Abkürzung definieren</h3> + +<p>Sie können <code><abbr></code> zusammen mit {{HTMLElement("dfn")}} verwenden, um eine Abkürzung formal zu definieren, wie hier gezeigt.</p> + +<h4 id="HTML_4">HTML</h4> + +<pre class="brush: 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></pre> + +<h4 id="Ergebnis_4">Ergebnis</h4> + +<p>{{EmbedLiveSample("Defining_an_abbreviation", 600, 120)}}</p> + +<p>Ausführlichere Beispiele finden Sie im Artikel <em><a href="/de/Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable">Wie Abkürzungen markiert und verständlich gemacht werden</a></em>.</p> + +<h2 id="Barrierefreiheit">Barrierefreiheit</h2> + +<p>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.</p> + +<h4 id="Beispiel">Beispiel</h4> + +<pre class="brush: html"><p>JavaScript Object Notation (<abbr>JSON</abbr>) is a lightweight data-interchange format.</p> +</pre> + +<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.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-abbr-element', '<abbr>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-abbr-element', '<abbr>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '<abbr>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("html.elements.abbr")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/Learn/HTML/Element/abbr">Benutzung des <code><abbr></code>-Elements</a></li> + <li>Andere Elemente, die <a href="/de/docs/Web/HTML/Text_level_semantics_conveying_elements">Semantik auf Textebene</a> vermitteln: {{HTMLElement("a")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li> + <li>Das veraltete Element {{HTMLElement("acronym")}}, dessen Verantwortlichkeiten in <code><abbr></code> zusammengefasst wurden</li> +</ul> 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: <acronym> +slug: Web/HTML/Element/acronym +tags: + - Element + - HTML + - Referenz + - Veraltet + - Web +translation_of: Web/HTML/Element/acronym +--- +<div>{{HTMLRef}}{{obsolete_header}}</div> + +<p>Mit dem HTML Acronym Element (<code><acronym></code>) 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")}}.</p> + +<div class="note"> +<p><strong>Nutzungshinweis:</strong> Dieses Element wurde in HTML5 entfernt und sollte nicht mehr verwendet werden. Stattdessen sollten Webentwickler das Element {{HTMLElement("abbr")}} verwenden.</p> +</div> + +<h2 id="Attributes" name="Attributes">Attribute</h2> + +<p>Dieses Element hat nur <a href="/de/docs/HTML/global_attributes">globale Attribute</a>, die allen Elementen gemeinsam sind.</p> + +<h2 id="DOM_Interface" name="DOM_Interface">DOM Schnittstelle</h2> + +<p>Dieses Element implementiert die {{domxref('HTMLElement')}} Schnittstelle.</p> + +<div class="note"><strong>Implementierungshinweis: </strong>Bis einschließlich Gecko 1.9.2 implementiert Firefox die {{domxref('HTMLSpanElement')}} Schnittstelle für dieses Element.</div> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre class="brush:html"><p>Das <acronym title="World Wide Web">WWW</acronym> ist nur eine Komponente des Internets.</p> +</pre> + +<h2 id="Default_styling" name="Default_styling">Standarddarstellung</h2> + +<p>Obwohl der Zweck dieses Tags nur der Bequemlichkeit des Autors dient, variiert sein Standardstil von Browser zu Browser:</p> + +<ul> + <li>Manche Browser, wie der Internet Explorer, stellen es nicht anders als das {{HTMLElement("span")}}-Element dar.</li> + <li>Opera, Firefox, Chrome und einige andere fügen dem Inhalt des Elements eine gepunktete Unterstreichung hinzu.</li> + <li>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")}}<code>: none</code> hinzu.</li> +</ul> + +<p>Es wird daher dringend empfohlen, dass sich Webautoren nicht vollständig auf das Standard-Styling verlassen.</p> + +<h2 id="Specifications" name="Specifications">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#edef-ACRONYM', '<acronym>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2> + +<p> </p> + +<p>{{Compat("html.elements.acronym")}}</p> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>Das HTML-Element {{HTMLElement("abbr")}}</li> +</ul> + +<div> </div> 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: <address> +slug: Web/HTML/Element/address +tags: + - Element + - HTML + - HTML Sektionen + - Referenz + - Web +translation_of: Web/HTML/Element/address +--- +<h2 id="Übersicht">Übersicht</h2> + +<p>Das <em>HTML <code><address></code> Element</em> 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.</p> + +<div class="note"> +<p><strong>Hinweis zur Benutzung:</strong></p> + +<ul> + <li>Um eine beliebige Adresse darzustellen, welche unabhängig von den Kontaktinformationen ist, sollte eher das {{HTMLElement("p")}} Element als das <span style="font-family: courier new;"><address></span> Element genutzt werden.</li> + <li>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).</li> + <li>Typischerweise wird ein <span style="font-family: courier new;"><address></span> Element innerhalb eines {{HTMLElement("footer")}} Elements der aktuellen Sektion platziert.</li> +</ul> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorien</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Fließender Inhalt</a>, greifbarer Inhalt.</td> + </tr> + <tr> + <th scope="row">Erlaubter Inhalt</th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Fließender Inhalt</a>, jedoch ohne <span style="font-family: courier new;"><address></span> 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.</td> + </tr> + <tr> + <th scope="row">Tag Auslassung</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Erlaubte Elternelemente</th> + <td>Jedes Element, welches <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">fließenden Inhalt</a> akzeptiert.</td> + </tr> + <tr> + <th scope="row">DOM Schnittstelle</th> + <td>{{domxref("HTMLElement")}}. Bis Gecko 2.0 (Firefox 4), hat Gecko dieses Element mit Hilfe der {{domxref("HTMLSpanElement")}} Schnittstelle implementiert.</td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p><span style="line-height: 21px;">Dieses Element schließt nur </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globale Attribute</a><span style="line-height: 21px;"> ein.</span></p> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: html"> <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> +</pre> + +<p>Das obenstehende HTML wird folgendes ausgeben:</p> + +<p><img alt="Image:HTML-address.png" src="/@api/deki/files/238/=HTML-address.png"></p> + +<p>Außerdem stellt das <em>address</em> Element den Text im gleichen Stil wie das {{HTMLElement("i")}} oder {{HTMLElement("em")}} Element dar. Es ist angebracht das <em>address</em> Element zu benutzen, wenn man mit Kontaktinformationen umgeht, als wenn man nur zusätzliche Informationen mitteilen möchte.</p> + +<h2 id="Specifications" name="Specifications">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-address-element', '<address>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-address-element', '<address>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.6', '<address>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>1.0</td> + <td>5.12</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mini</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.7")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>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")}};</li> + <li class="last"><a class="deki-ns current" href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sections and outlines of an HTML5 document</a>.</li> +</ul> + +<div>{{HTMLRef}}</div> 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: <applet> +slug: Web/HTML/Element/applet +tags: + - Element + - HTML + - Obsolete + - Referenz + - Web +translation_of: Web/HTML/Element/applet +--- +<div> + {{obsolete_header}}</div> +<h2 id="Übersicht">Übersicht</h2> +<p>Das HTML Applet Element (<code><applet></code>) identifiziert die Einbindung eines Java Applets.</p> +<div class="note"> + <p><strong>Hinweis zur Benutzung: </strong>Dieses Element wurde in HTML5 entfernt und sollte nicht mehr verwendet werden. Stattdessen sollten Webentwickler das generische {{HTMLElement("object")}} Element verwenden.</p> +</div> +<h2 id="Attributes" name="Attributes">Attribute</h2> +<dl> + <dt> + {{htmlattrdef("align")}}</dt> + <dd> + 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 <strong>bottom</strong>, <strong>left</strong>, <strong>middle</strong>, <strong>right</strong> und <strong>top</strong>, während Microsoft und Netscape ebenso <strong>absbottom</strong>, <strong>absmiddle</strong>, <strong>baseline</strong>, <strong>center</strong> und <strong>texttop</strong> unterstützen.</dd> + <dt> + {{htmlattrdef("alt")}}</dt> + <dd> + 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 <code><applet></code> Elements liegen, auch als Alternativtext dargestellt werden könnten.</dd> + <dt> + {{htmlattrdef("archive")}}</dt> + <dd> + 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.</dd> + <dt> + {{htmlattrdef("code")}}</dt> + <dd> + Dieses Attribut spezifiziert die URL der Applet Klassendatei die geladen und ausgeführt wird. Applet Dateinamen werden identifiziert mit Hilfe der Extension .class. <span id="result_box" lang="de"><span class="hps">Die vom</span> <span class="hps">Code angegeben</span>e <span class="hps">URL kann</span> <span class="hps">in Bezug mit dem</span> <span class="hps">codebase-Attribut</span> <span class="hps">stehen.</span></span></dd> + <dt> + {{htmlattrdef("codebase")}}</dt> + <dd> + Dieses Attribut gibt die absolute oder die relative URL vom Pfad der Applet-Klassendatei an, welche vom code Attribut gespeichert wird.</dd> + <dt> + {{htmlattrdef("datafld")}}</dt> + <dd> + 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.</dd> + <dt> + {{htmlattrdef("datasrc")}}</dt> + <dd> + Ähnlich wie <code>datafld</code>, 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.</dd> + <dt> + {{htmlattrdef("height")}}</dt> + <dd> + Dieses Attribut spezifiziert die Höhe in Pixeln, die das Applet benötigt.</dd> + <dt> + {{htmlattrdef("hspace")}}</dt> + <dd> + Dieses Attribut spezifiziert zusätzlichen horizontalen Platz in Pixeln, der für das Applet reserviert wird.</dd> + <dt> + {{htmlattrdef("mayscript")}}</dt> + <dd> + In der Netscape Implementierung erlaubt dieses Attribut den Zugriff auf Applets durch Programme, die innerhalb einer Skriptsprache im Dokument eingebettet sind.</dd> + <dt> + {{htmlattrdef("name")}}</dt> + <dd> + Dieses Attribut weist dem Applet einen Namen zu, sodass es von anderen Ressourcen (vorwiegend Scripts) identifiziert werden kann.</dd> + <dt> + {{htmlattrdef("object")}}</dt> + <dd> + Dieses Attribut spezifiziert die URL einer serialisierten Darstellung eines Applets.</dd> + <dt> + {{htmlattrdef("src")}}</dt> + <dd> + 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.</dd> + <dt> + {{htmlattrdef("vspace")}}</dt> + <dd> + Dieses Attribut spezifiziert zusätzlichen vertikalen Platz in Pixeln, der für das Applet ober- und unterhalb reserviert wird.</dd> + <dt> + {{htmlattrdef("width")}}</dt> + <dd> + Dieses Attribut spezifiziert die Breite in Pixeln, die das Applet benötigt.</dd> +</dl> +<h2 id="Beispiel">Beispiel</h2> +<pre class="brush: html"><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> +</pre> +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> +<p>{{CompatibilityTable}}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mini</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> + </table> +</div> +<h2 id="Anmerkungen">Anmerkungen</h2> +<p>Die W3C Spezifikation rät von der Benutzung des <code><applet></code> 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.</p> +<div> + {{HTMLRef}}</div> 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: <area> +slug: Web/HTML/Element/area +tags: + - Eingebettet + - Element + - HTML + - Inhalt + - Multimedia + - Referenz + - Web +translation_of: Web/HTML/Element/area +--- +<h2 id="Übersicht">Übersicht</h2> + +<p class="seoSummary">Das <em>HTML-Element <code><area></code> </em>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.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/de/docs/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorien</a></th> + <td><a href="/de/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Fließender Inhalt</a>, <a href="/de/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">Formulierung</a>.</td> + </tr> + <tr> + <th scope="row">Erlaubter Inhalt</th> + <td>Keiner, es ist ein {{Glossary("empty element", "leeres Element")}}.</td> + </tr> + <tr> + <th scope="row">Tag Wegfall</th> + <td>Es muss einen Start-Tag und keinen End-Tag geben.</td> + </tr> + <tr> + <th scope="row">Erlaubte Elternelemente</th> + <td>Jedes Element, das <a href="/de/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">Formulierungen</a> akzeptiert. Das <code><area></code> Element muss direkt oder indirekt ein Kind eines {{HTMLElement("map")}} Elements sein.</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLAreaElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p><span style="line-height: 21px;">Dieses Element besitzt die globalen Attribute </span><a href="https://developer.mozilla.org/de/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globalen Attribute</a><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{htmlattrdef("accesskey")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}</dt> + <dd>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.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("alt")}}</dt> + <dd>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 <strong>href</strong> Attribut vewendet wird.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("coords")}}</dt> + <dd>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 <strong>shape</strong> Attributs ab. Für <code>rect</code> (rechteckige Form) beinhaltet der Wert von <strong>coords</strong> zwei x,y Pare: left, top, right und bottom. Für <code>circle</code> (kreisförmige Form) besteht der Wert aus <code>x,y,r</code>. Dabei sind <code>x,y</code> ein Paar, dass die Position des Kreismittelpunkt angibt und <code>r</code> ist der Radius. Für <code>poly</code> (Polygon) beinhaltet der Wert mehrere x,y Paare, wobei jedes Paar für einen Punkt im Polygon steht: <code>x1,y1,x2,y2,x3,y3,</code> 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.</dd> + <dt>{{htmlattrdef("download")}} {{HTMLVersionInline("5")}}</dt> + <dd>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.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("href")}}</dt> + <dd>Das Ziel des Hyperlinks für diesen Bereich. Der Wert muss eine gültige URL sein. In HTML4 muss entweder dieses Attribut oder das <strong>nohref</strong> Attribut im Element sein. In HTML5 kann dieses Attribut ausgelassen werden. In diesem Fall repräsentiert das area Element keinen Hyperlink.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("hreflang")}} {{HTMLVersionInline("5")}}</dt> + <dd>Gibt die Sprache der verlinkten Ressource an. Erlaubte Werte sind in <a class="external" href="http://www.ietf.org/rfc/bcp/bcp47.txt" title="http://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a> bestimmt worden. Dieses Attribut sollte nur zusammen mit einem <strong>href</strong> Attribut verwendet werden.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("name")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}</dt> + <dd>Definiert einen Namen für den anklickbaren Bereich, damit er von älternen Webbrowserns mittels Scripting verwendet werden kann.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("media")}} {{HTMLVersionInline("5")}}</dt> + <dd>Ein Hinweis zum Medium, für welches die verlinkte Ressource ausgelegt ist (zum Beispiel: <code>print und screen</code>.). Wenn es ausgelassen wird, wird der Standardwert <code>all</code> angenommen. Dieses Attribut sollte nur zusammen mit einem <strong>href</strong> Attribut verwendet werden.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("nohref")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}</dt> + <dd>Gibt an, dass auf diesem Bereich kein Hyperlink hinterlegt ist. Es muss entweder dieses Attribut oder das <strong>href</strong> Attribut in diesem Element verwendet werden. + <div class="note"> + <p><strong>Verwendungshinweis: </strong>Dieses Attribut ist seit HTML5 veraltet. Stattdessen ist das Auslassen des <strong>href</strong> Attributs ausreichend.</p> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("rel")}} {{HTMLVersionInline("5")}}</dt> + <dd>Dieses Attribut spezifiziert für Anker im <strong>href</strong> Attribut die Beziehung zwischen dem Zielobjekt und dem Linkobjekt. Der Wert ist eine kommaseparierte Liste von <a href="https://developer.mozilla.org/de/docs/Web/HTML/Link_types">Linktypen</a>. 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 <strong>href</strong> Attribut verwendet werden.</dd> + <dt>{{htmlattrdef("shape")}}</dt> + <dd>Die Form vom Hot-Spot. Die Spezifikationen für HTML 5 und HTML 4 definieren die Werte <code>rect</code> (rechteckiger Bereich), <code>circle</code> (kreisförmiger Bereich), <code>poly</code> (für ein Polygon) und <code>default</code> (für den ganzen Bereich außerhalb der definierten Bereiche). Viele Webbrowser, insbesonders Internet Explorer 4 und höher, unterstützen <code>circ</code>, <code>polygon</code> und <code>rectangle</code> als gültige Werte für <strong>shape</strong>, welche nicht spezifiziert sind {{Non-standard_inline}}.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("tabindex")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}</dt> + <dd>Ein numerischer Wert, der die Position in der Reihenfolge des Tabbing im Webbrowser definiert. Dieses Attribut ist in HTML5 global.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("target")}}</dt> + <dd>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 <em>browsing context</em> (zum Beispiel: tab, window oder inline frame). Die folgenden Schlüsselwörter haben eine spezielle Bedeutung: + <ul> + <li><code>_self</code>: 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.</li> + <li><code>_blank</code>: Lädt die Antwort in ein neues unbenanntes HTML4 Fenster oder HTML5 browsing context.</li> + <li><code>_parent</code>: 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 <code>_self</code>.</li> + <li><code>_top</code>: 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 <code>_self</code>.</li> + </ul> + Dieses Attribut sollte nur zusammen mit einem <strong>href</strong> Attribut verwendet werden.</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>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 <a class="linkification-ext external" href="http://www.w3.org/TR/html4/references.html#ref-MIMETYPES" title="Linkification: http://www.w3.org/TR/html4/references.html#ref-MIMETYPES">http://www.w3.org/TR/html4/references.html#ref-MIMETYPES</a> zu finden. Dieses Attribut sollte nur zusammen mit einem <strong>href</strong> Attribut verwendet werden.</dd> +</dl> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: html"><map name="primary"> + <area shape="circle" coords="200,250,25" href="another.htm" /> + <area shape="default" nohref /> +</map> +</pre> + +<h2 id="Specifications" name="Specifications">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Bemerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-map-element.html#the-area-element', '<area>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-area-element', '<area>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.6.1', '<area>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("html.elements.area")}}</p> + +<h2 id="Hinweise">Hinweise</h2> + +<p>Unter den HTML 3.2, 4.0 und 5 Spezifikationen ist der End-Tag <code></area></code> verboten.</p> + +<p>Die XHTML 1.0 Spezifikation verlangt einen nachfolgenden Slash: <code><area /></code>.</p> + +<p>Die Attribute <strong>id</strong>, <strong>class</strong>, und <strong>style</strong> haben dieselbe Bedeutung wie die in HTML 4 definierten Kernattribute. Aber nur Netscape und Microsoft definieren sie.</p> + +<p>Netscape 1–level Webbrowser verstehen das <strong>target</strong> Attribut in dem Sinne, dass es sich auf Frames bezieht.</p> + +<p>HTML 3.2 definiert nur <strong>alt</strong>, <strong>coords</strong>, <strong>href</strong>, <strong>nohref</strong> und <strong>shape</strong>.</p> + +<p>{{HTMLRef}}</p> 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: '<article>: Das Inhaltselement für Artikel' +slug: Web/HTML/Element/article +tags: + - Element + - HTML + - HTML Bereiche + - HTML5 + - Referenz + - Web +translation_of: Web/HTML/Element/article +--- +<div>{{HTMLRef}}</div> + +<p>Das <strong>HTML-Element <code><article></code></strong> 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.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/article.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<p>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 <code><article></code>-Element mit einem oder mehreren <code><section></code>-Elementen enthalten.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/de/docs/HTML/Content_categories">Inhaltskategorien</a></th> + <td><a href="/de/docs/HTML/Content_categories#Flow_content">Fließender Inhalt</a>, Sektionsinhalt, fühlbarer Inhalt</td> + </tr> + <tr> + <th scope="row">Erlaubter Inhalt</th> + <td><a href="/de/docs/HTML/Content_categories#Flow_content">Fließender Inhalt</a>.</td> + </tr> + <tr> + <th scope="row">Tag Wegfall</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Erlaubte Elternelemente</th> + <td>Jedes Element das <a href="/de/docs/HTML/Content_categories#Flow_content">fließenden Inhalt</a> erlaubt. Beachten Sie, dass ein <code><article></code>-Element kein Nachkomme eines {{HTMLElement("address")}}-Elements sein darf.</td> + </tr> + <tr> + <th scope="row">Erlaubte ARIA Rollen</th> + <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("main")}}, {{ARIARole("presentation")}}, {{ARIARole("region")}}</td> + </tr> + <tr> + <th scope="row">DOM-Schnittstelle</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p>Dieses Element unterstützt nur die <a class="new" href="/de/docs/Web/HTML/Global_attributes" rel="nofollow">globalen Attribute</a>.</p> + +<h2 id="Nutzungshinweise">Nutzungshinweise</h2> + +<ul> + <li>Jeder <code><article></code> sollte beschriftet sein, normalerweise indem eine Überschrift (<a href="/de/docs/Web/HTML/Element/Heading_Elements"><code><h1></code>-<code><h6></code></a>) als untergeordnetes Element des <code><article></code>-Elements eingefügt wird.</li> + <li>Wenn ein <code><article></code>-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 <code><article></code>-Elemente sein, die im <code><article></code> des Blogbeitrags verschachtelt sind.</li> + <li>Informationen zum Autor eines <code><article></code>-Elements können über das {{HTMLElement("address")}}-Element bereitgestellt werden, gelten jedoch nicht für verschachtelte <code><article></code>-Elemente.</li> + <li>Das Datum und die Uhrzeit der Veröffentlichung eines <code><article></code>-Elements können mit dem Attribut {{htmlattrxref("datetime", "time")}} eines {{HTMLElement("time")}}-Elements beschrieben werden. <em>Beachten Sie, dass das Attribut {{htmlattrxref("pubdate", "time")}} von {{HTMLElement("time")}} nicht mehr Bestandteil des W3C HTML 5-Standards ist.</em></li> +</ul> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: html"><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> +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-article-element', '<article>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sections.html#the-article-element', '<article>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-article-element', '<article>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("html.elements.article")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>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")}}</li> + <li class="last"><a class="deki-ns current" href="/de/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document">Abschnitte und Umrisse eines HTML5-Dokuments</a></li> +</ul> 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: <aside> +slug: Web/HTML/Element/aside +tags: + - Element + - HTML + - HTML5 + - Referenz + - Web +translation_of: Web/HTML/Element/aside +--- +<p>Das <em>HTML <code><aside></code> Element</em> repräsentiert eine Sektion einer Seite, welche aus Inhalt besteht der nur indirekt zum restlichen Inhalt gehört, also parallel zum Kontext betrachtet werden kann. Diese Sektionen werden oftmals als Seitenleisten oder Beilage dargestellt. Sie enthalten meistens nebenläufige Erklärungen, wie ein Glossar; weniger zusammenhängenden Inhalt, wie Werbung; die Biographie eines Autors oder zum Beispiel Profilinformationen die zugehörig zu einer Blog-Seite sind.</p> + +<div class="note"> +<p><em>Hinweis zur Benutzung:</em></p> + +<ul> + <li>Das <code><aside></code> Element sollte nicht genutzt werden, um eingeklammerte Texte zu bezeichnen, so lange diese Art von Texten zum primären Inhalt gehören.</li> +</ul> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorien</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Fließender Inhalt</a>, Sektionsinhalte, greifbarer Inhalt.</td> + </tr> + <tr> + <th scope="row">Erlaubter Inhalt</th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">Fließender Inhalt</a>.</td> + </tr> + <tr> + <th scope="row">Tag Auslassung</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Erlaubte Elternelemente</th> + <td>Jedes Element das <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">fließenden Inhalt</a> erlaubt. Das <code><aside></code> Element darf kein Abkömmling des {{HTMLElement("address")}} Elements sein.</td> + </tr> + <tr> + <th scope="row">DOM Schnittstelle</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p><span style="line-height: 21px;">Dieses Element schließt nur </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globale Attribute</a><span style="line-height: 21px;"> ein.</span></p> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: html"><article> + <p> + The Disney movie <em>The Little Mermaid</em> was + first released to theatres in 1989. + </p> + <aside> + The movie earned $87 million during its initial release. + </aside> + <p> + More info about the movie... + </p> +</article></pre> + +<p>{{EmbedLiveSample("Beispiel")}}</p> + +<h2 id="Specifications" name="Specifications"> </h2> + +<h2 id="Specifications" name="Specifications">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-aside-element', '<aside>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-aside-element', '<aside>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + + + +<p>{{Compat("html.elements.aside")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Andere Sektionsverwandte Elemente: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li> + <li><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sections and outlines of an HTML5 document</a>.</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/de/web/html/element/b/index.html b/files/de/web/html/element/b/index.html new file mode 100644 index 0000000000..89a75bd39f --- /dev/null +++ b/files/de/web/html/element/b/index.html @@ -0,0 +1,83 @@ +--- +title: b +slug: Web/HTML/Element/b +tags: + - HTML + - HTML Elemente + - HTML Referenz +translation_of: Web/HTML/Element/b +--- +<p>Das HTML bold Element (<code><span style="font-family: Courier New;"><b></span></code>) wird benutzt, um einen Text hervorzuheben und die Aufmerksamkeit des Lesers hierauf zu lenken. Dabei wird keine besondere Wichtigkeit oder Relevanz übertragen. Typischerweise sind Schlüsselwörter in einer Zusammenfassung, Produktnamen oder andere Textstellen, die speziell präsentiert werden sollen, mit dem bold Tag ausgezeichnet. Ein weiteres Beispiel ist die Markierung der führenden Sätze der Absätze eines Artikels.</p> + +<div class="note"> +<p><strong>Hinweise zur Verwendung:</strong></p> + +<ul> + <li>Das HTML bold Element sollte nicht mit den {{ HTMLElement("strong") }}, {{ HTMLElement("em") }} oder {{ HTMLElement("mark") }} Elementen verwechselt werden. Das {{ HTMLElement("strong") }} Element repräsentiert einen Text, der über eine gewisse <em>Wichtigkeit</em> verfügt, {{ HTMLElement("em") }} betont den Text und das {{ HTMLElement("mark") }} Element repräsentiert einen Text, der über eine gewisse <em>Relevanz</em> verfügt. Das bold Element enthält keine speziellen semantischen Informationen; es kann als das Element angesehen werden, welches benutzt wird, wenn kein anderes passend ist.</li> + <li>Überschriften sollen daher nicht mit dem bold Element ausgezeichnet werden. Dafür sind die Elemente {{ HTMLElement("h1") }} bis {{ HTMLElement("h6") }} gedacht. Stylesheets können verwendet werden, um das Standardaussehen des Elements zu verändern, sodass es nicht zwingend ist, dass etwas in Fettdruck angezeigt wird.</li> + <li>Es macht in der Praxis Sinn das <strong>class</strong> Attribut zu verwenden, um weitere semantische Informationen hinzuzufügen. Das vereinfacht zudem die Entwicklung von verschiedenen Styles eines Webdokuments, ohne dass dabei der HTML-Code verändert werden muss.</li> + <li>In der Geschichte von HTML war das <code>bold</code> Element dazu gedacht, Text mit Fettdruck darzustellen. Da Style-Informationen seit HTML 4 nicht länger erwünscht sind, hat sich diese Bedeutung geändert.</li> +</ul> +</div> + +<h2 id="Verwendungskontext">Verwendungskontext</h2> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td><a href="/de/HTML/Inhaltskategorien" title="de/HTML/Inhaltskategorien">Inhaltskategorie</a></td> + <td><a href="/de/HTML/Inhaltskategorien#Flow_content" title="de/HTML/Inhaltskategorien#Flow content">Flow content</a>, <a href="/de/HTML/Inhaltskategorien#Phrasing_content" title="de/HTML/Inhaltskategorien#Phrasing content">Phrasing content</a></td> + </tr> + <tr> + <td>Erlaubter Inhalt</td> + <td>Phrasing content</td> + </tr> + <tr> + <td>Tag Auslassung</td> + <td>Keine; <span title="syntax-start-tag">Start- und Endtag </span>sind vorgeschrieben.</td> + </tr> + <tr> + <td>Erlaubte Elternelemente</td> + <td>Jedes Element, dass Phrasing content zulässt.</td> + </tr> + <tr> + <td>Normatives Dokument</td> + <td><a class="external" href="https://html.spec.whatwg.org/multipage/semantics.html#the-b-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-b-element">HTML5, section 4.5.21</a> (<a class="external" href="http://www.w3.org/TR/REC-html40/present/graphics.html#edef-B" title="http://www.w3.org/TR/REC-html40/present/graphics.html#edef-B">HTML4.01, section 15.2.1</a>)</td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p>Genau wie alle anderen HTML Elemente verfügt dieses Element über <a href="/de/HTML/Globale_Attribute" title="de/HTML/Globale Attribute">globale Attribute</a>.</p> + +<h2 id="DOM_Interface">DOM Interface</h2> + +<p>Dieses Element implementiert das <code><a href="/de/DOM/element" title="de/DOM/element">HTMLElement</a></code> Interface.</p> + +<div class="note"> +<p><strong>Implementationshinweis:</strong> Bis einschließlich Gecko 1.9.2 implementiert Firefox das <a href="/de/DOM/span" title="de/DOM/span"><span style="font-family: Courier New;">HTMLSpanElement</span></a> Interface für dieses Element.</p> +</div> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="eval"><p> + Dieser Artikel beschreibt einige <b>text-level</b> Elemente. Es beschreibt die Verwendung in einem <b>HTML</b> Dokument. +</p> +Schlüsselwörter werden hier mit dem Standard-Style des <b> Elements versehen, meistens Fettdruck +</pre> + +<h4 id="Ergebnis">Ergebnis</h4> + +<p>Dieser Artikel beschreibt einige <strong>text-level</strong> Elemente. Es beschreibt die Verwendung in einem <strong>HTML</strong> Dokument.</p> + +<p>Schlüsselwörter werden hier mit dem Standard-Style des <b> Elements versehen, meistens Fettdruck.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Andere Elemente mit semantischer Bedeutung auf Text-Ebene: {{ HTMLElement("a") }}, {{ HTMLElement("em") }}, {{ HTMLElement("strong") }}, {{ HTMLElement("small") }}, {{ HTMLElement("cite") }}, {{ HTMLElement("q") }}, {{ HTMLElement("dfn") }}, {{ HTMLElement("abbr") }}, {{ HTMLElement("time") }}, {{ HTMLElement("code") }}, {{ HTMLElement("var") }}, {{ HTMLElement("samp") }}, {{ HTMLElement("kbd") }}, {{ HTMLElement("sub") }}, {{ HTMLElement("sup") }}, {{ HTMLElement("i") }}, {{ HTMLElement("mark") }}, {{ HTMLElement("ruby") }}, {{ HTMLElement("rp") }}, {{ HTMLElement("rt") }}, {{ HTMLElement("bdo") }}, {{ HTMLElement("span") }}, {{ HTMLElement("br") }}, {{ HTMLElement("wbr") }}.</li> + <li><a class="external" href="http://www.w3.org/International/questions/qa-b-and-i-tags.de.php">Verwendung von <b> und <i> Elementen (W3C)</a></li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/de/web/html/element/base/index.html b/files/de/web/html/element/base/index.html new file mode 100644 index 0000000000..e5f37d7d1a --- /dev/null +++ b/files/de/web/html/element/base/index.html @@ -0,0 +1,170 @@ +--- +title: <base> +slug: Web/HTML/Element/base +tags: + - Element + - HTML + - HTML Dokumentmetadaten + - Referenz + - Web +translation_of: Web/HTML/Element/base +--- +<h2 id="Übersicht">Übersicht</h2> + +<p>Das <em>HTML Base Element</em> (<strong><base></strong>) definiert die Basis URL für alle relativen URLs im Dokument. Das <base> Element darf nur einmal im Dokument vorkommen.</p> + +<div class="note"><strong>Hinweis:</strong> Falls mehrere <code><base></code> Elemente in einem Dokument vorhanden sind, wird nur der Erste <strong>href</strong> und der Erste <strong>target</strong> Wert verwendet. Alle anderen werden ignoriert.</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories">Inhaltskategorien</a></th> + <td>Metadata Inhalt.</td> + </tr> + <tr> + <th scope="row">Erlaubter Inhalt</th> + <td>Keine, ist ein {{Glossary("empty element")}}.</td> + </tr> + <tr> + <th scope="row">Tag Auslassung</th> + <td>Es ist kein End-Tag erforderlich.</td> + </tr> + <tr> + <th scope="row">Erlaubte Elternelemente</th> + <td>Jedes {{HTMLElement("head")}} Element, das keine anderen {{HTMLElement("base")}} Elemente enthält.</td> + </tr> + <tr> + <th scope="row">DOM Schnittstelle</th> + <td>{{domxref("HTMLBaseElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p><span style="line-height: 21px;">Dieses Element schliesst </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globale Attribute</a><span style="line-height: 21px;"> ein</span><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{htmlattrdef("href")}}</dt> + <dd>Die Basis URL die im Dokument für relative URLs genutzt werden soll. Wenn dieses Attribut verwendet wird, sollte das Element vor allen anderen Elementen definiert werden, die eine URL als Wert enthalten.<br> + Absolute und relative URLs sind erlaubt (siehe Anmerkungen).</dd> + <dt>{{htmlattrdef("target")}}</dt> +</dl> + +<p>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 <em>browsing context</em>es oder ein Schlüsselwort für einen <em>browsing context</em> (zum Beispiel ein Tab, Fenster oder Inline Frame). Die folgenden Schlüsselwörter haben eine spezielle Bedeutung:</p> + +<ul> + <li><code>_self</code>: Lädt die Antwort in dasselbe Frame (HTML4) bzw. denselben <em>browsing context</em> (HTML5) wie die aktuelle Seite. Dieser Wert ist der Standardwert.</li> + <li><code>_blank</code>: Lädt die Antwort in ein neues unbenanntes Fenster (HTML4) bzw. einen neuen <em>browsing context</em> (HTML5).</li> + <li><code>_parent</code>: Lädt die Antwort in den <em>frameset parent</em> des aktuellen Frames (HTML4) bzw. <em>parent browsing context</em> (HTML5) des aktuellen. Falls es keinen <em>parent</em> gibt, verhält sich dieser Wert wie <code>_self</code>.</li> + <li><code>_top</code>: Lädt die Antwort in das gesamte Fenster und alle Frames werden überschrieben (HTML4) bzw. in den obersten <em>browsing context</em> (d.h. der <em>browsing context</em>, der dem aktuellen übergeordnet ist und keine übergeordneten <em>browsing context</em>e hat). Falls es keinen übergeordneten gibt, verhält sich dieser Wert wie <code>_self</code>.</li> +</ul> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: html"><base href="http://www.example.com/"> +<base target="_blank" href="http://www.example.com/"> +</pre> + +<h2 id="Specifications" name="Specifications">Spezifikation</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-base-element', '<base>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Keine Änderungen seit der letzten Version</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata#the-base-element', '<base>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Verhalten des <code>target</code> Attributs defniert</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.4', '<base>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td><code>target</code> Attribut hinzugefügt</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Anmerkungen">Anmerkungen</h2> + +<ul> + <li>Die Basis URL ist für Skripte erforderlich, die {{domxref('document.baseURI')}} verwenden.</li> + <li>Relative URLs für <code>href</code> werden seit Gecko 2.0 (Firefox 4.0) unterstützt</li> + <li>HTML 2.0 und 3.2 spezifizieren lediglich das <code>href</code> Attribut</li> + <li>XHTML setzte einen nachfolgenden Slash voraus: <code><base /></code></li> + <li>Die Verwendung eines Verweises innerhalb der Seite, z.B. <code><a href="#anchor">Anker</a>,</code> wird mit Hilfe der Basis-Url ausgewertet und löst einen HTTP-Request auf die Basis-Url aus.<br> + <br> + <strong>Beispiel:</strong><br> + <br> + Die Basis Url:<br> + <code><base href="http://www.example.com/"></code><br> + <br> + Der Verweis:<br> + <code><a href="#anchor">Anker</a></code><br> + <br> + Wird aufgelöst in:<br> + <code>http://www.example.com/#anchor</code><br> + </li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/de/web/html/element/bdi/index.html b/files/de/web/html/element/bdi/index.html new file mode 100644 index 0000000000..20c25bb54d --- /dev/null +++ b/files/de/web/html/element/bdi/index.html @@ -0,0 +1,138 @@ +--- +title: <bdi> +slug: Web/HTML/Element/bdi +translation_of: Web/HTML/Element/bdi +--- +<p>Das <strong>HTML <code><bdi></code> Element</strong> (engl. für <em>bidirectional isolation</em>) isoliert einen Textauszug der in einer anderen Richtung erscheinen soll, als der Text der ihn umgibt.</p> + +<p>Dieses Element ist nützlich, wenn Text in einen Text eingebunden werden soll, z. B. von einer Datenbank, aber die Schreibrichtung anders sein kann, als der bestehende Text.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Inhaltskategorien</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Fließender Inhalt</a>, gestaltender Inhalt, eindeutiger Inhalt.</td> + </tr> + <tr> + <th scope="row">Erlaubter Inhalt</th> + <td>Ausdrucksinhalt.</td> + </tr> + <tr> + <th scope="row">Tag Wegfall</th> + <td>keiner</td> + </tr> + <tr> + <th scope="row">Erlaubte Elternelemente</th> + <td>Irgend ein Element, das den Ausdrucksinhalt akzeptiert.</td> + </tr> + <tr> + <th scope="row">Erlaubte ARIA-Rollen</th> + <td>Beliebig</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p>Wie alle anderen HTML Elemente hat dieses Element globale Attribute mit einer leicht anderen Bedeutung: das <strong>dir</strong> Attribut wird nicht geerbt. Wenn es nicht gesetzt wurde, ist der Standardwert <code>auto</code>. Das lässt den Browser an Hand des Inhalts entscheiden, welche Richtung er für den Text innerhalb des <code><bdi></code> Element setzt.</p> + +<h2 id="Gebrauchshinweise">Gebrauchshinweise</h2> + +<p>Obwohl der gleiche visuelle Effekt mit der CSS Regel {{cssxref("unicodes-bidi")}}<code>: isolate</code> auf einem {{HTMLElement("span")}} oder einem anderen textformatierenden Element erziehlt werden kann, wird die semantische Bedeutung nur mit dem <code><bdi></code> Element übermittelt. Zumal es Browsern erlaubt ist, CSS-Styling zu ignorieren. In einem solchen Fall würde der Text unter dem genannten Element richtig angezeigt, die Methode mit CSS würde hingegen Müll erzeugen.</p> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: html"><p dir="ltr">Das arabische Wort <bdi>ARABISCHER_PLATZHALTER</bdi> +wird automatisch von rechts nach links geschrieben.</p> +</pre> + +<h3 id="Ergebnis">Ergebnis</h3> + +<p dir="ltr">Das arabische Wort RETLAHZTALP_REHCSIBARA wird automatisch von rechts nach links geschrieben..</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifikation</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-bdi-element', '<bdi>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-bdi-element', '<bdi>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>16</td> + <td>{{CompatGeckoDesktop("10.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("10.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 dir="ltr" id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Ähnliches HTML Element: bdo</li> + <li>Ähnliche HTML Eigenschaften: direction, unicode-bidi</li> +</ul> + +<p>HTMLRef</p> diff --git a/files/de/web/html/element/bdo/index.html b/files/de/web/html/element/bdo/index.html new file mode 100644 index 0000000000..a97af7ab38 --- /dev/null +++ b/files/de/web/html/element/bdo/index.html @@ -0,0 +1,153 @@ +--- +title: <bdo> +slug: Web/HTML/Element/bdo +tags: + - BiDi + - Element + - HTML + - HTML Text-Level Semantik + - NeedsCompatTable + - Referenz + - Web +translation_of: Web/HTML/Element/bdo +--- +<h2 id="Übersicht">Übersicht</h2> + +<p>Das <strong>HTML <code><bdo></code> Element</strong> (oder <em>HTML bidirectional override element</em>) wird genutzt um die Laufrichtung von Texten zu überschreiben. Die Richtungsabhängigkeit der einzelnen Buchstaben wird ignoriert, stattdessen wird die spezifische Richtungsabhängigkeit favorisiert.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorien</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Fließender Inhalt</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">Formulierungsinhalt</a>, greifbarer Inhalt.</td> + </tr> + <tr> + <th scope="row">Erlaubter Inhalt</th> + <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Formulierungsinhalt</a>.</td> + </tr> + <tr> + <th scope="row">Tag Auslassung</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Erlaubte Elternelemente</th> + <td>Jedes Element, das <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Formulierungsinhalt</a> akzeptiert.</td> + </tr> + <tr> + <th scope="row">DOM Schnittstelle</th> + <td>{{domxref("HTMLElement")}} Bis einschließlich Gecko 1.9.2 (Firefox 4) hat Firefox die <a href="/en-US/docs/DOM/span" title="DOM/span"><span style="font-family: courier new;">HTMLSpanElement</span></a> Schnittstelle für dieses Element implementiert.</td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p><span style="line-height: 21px;">Dieses Element schließt </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globale Attribute</a><span style="line-height: 21px;"> ein.</span></p> + +<dl> + <dt>{{htmlattrdef("dir")}}</dt> + <dd>Textausrichtung in diesem Element. Mögliche Werte sind: + <ul> + <li><code>ltr</code>: Indiziert, dass der Text von links-nach-rechts ausgerichtet wird.</li> + <li><code>rtl</code>: Indiziert, dass der Text von rechts-nach-links ausgerichtet wird.</li> + <li><code>auto</code>: Der Browser entscheidet über die Ausrichtung, basierend auf den Inhalt des Elements.</li> + </ul> + </dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: html"><!-- Ändere die Textrichtung --> +<p>Dieser Text wird von links nach rechts gehen.</p> +<p><bdo dir="rtl">Dieser Text wird von rechts nach links gehen.</bdo></p></pre> + +<h3 id="Ergebnis">Ergebnis</h3> + +<p>Dieser Text wird von links nach rechts gehen.</p> + +<p>.neheg sknil hcan sthcer nov driw txeT reseiD</p> + +<h2 id="Bemerkung">Bemerkung</h2> + +<p>In der HTML 4 Spezifikation werden keine Events für dieses Element beschrieben; diese wurden in XHTML hinzugefügt. Dies wird oftmals übersehen.</p> + +<h2 id="Specifications" name="Specifications">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-bdo-element', '<bdo>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'the-bdo-element.html#the-bdo-element', '<bdo>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'dirlang.html#h-8.2.4', '<bdo>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>{{HTMLRef}}</p> diff --git a/files/de/web/html/element/bgsound/index.html b/files/de/web/html/element/bgsound/index.html new file mode 100644 index 0000000000..8c9946dc0f --- /dev/null +++ b/files/de/web/html/element/bgsound/index.html @@ -0,0 +1,96 @@ +--- +title: <bgsound> +slug: Web/HTML/Element/bgsound +translation_of: Web/HTML/Element/bgsound +--- +<div> + {{non-standard_header}}</div> +<h2 id="Zusammenfassung">Zusammenfassung</h2> +<p>Das HTML Hintergrund Sound-Element (<bgsound>) ist ein Internet Explorer-Element, was ein Hintergrund-Sound mit einer Webseite verknüpft.</p> +<div class="note"> + <p><strong>Benutze dies nicht!:<em> </em></strong>Wenn du nur eine Audiodatei einbetten willst, solltest du {{HTMLElement("audio")}} benutzen.</p> +</div> +<h2 id="Attribute">Attribute</h2> +<dl> + <dt> + {{htmlattrdef("balance")}}</dt> + <dd> + Dieses Attribut definiert den Lautstärkeunterschied(zwischen -10,000 und +10,000)zwischen den beiden Lautsprechern.</dd> + <dt> + {{htmlattrdef("loop")}}</dt> + <dd> + Dieses Attribut gibt die Nummer der Anzahl an, wie oft ein Sound abgespielt werden soll. Du kannst entweder eine Nummer angeben oder "infinite" schreiben, damit der Sound unendlich angespielt wird.</dd> +</dl> +<dl> + <dt> + {{htmlattrdef("src")}}</dt> + <dd> + Dieses Attribut gibt die URL von dem Sound an, der gespielt werden soll. Die Datei muss eines dieser Formate haben: .wav, .au oder .mid.</dd> + <dt> + {{htmlattrdef("volume")}}</dt> + <dd> + Dieses attribut gibt an mit einer Nummer zwischen -10,000 and 0, die die Lautstärke angibt.</dd> +</dl> +<h2 id="Beispiel">Beispiel</h2> +<pre class="brush:html"><bgsound src="sound1.mid"> + +<bgsound src="sound2.au" loop="infinite"> +</pre> +<h2 id="Notes">Notes</h2> +<p>Die gleiche Funktionalität kann erreicht werden in einigen Versionen von Netscape, wenn man den <embed>-Tag benutzt, der dann einen Audio-Player auruft.</p> +<p>Du kannst <bgsound> mit einem Selbstschließendem-Tag(Also so:<code><bgsound /></code>) schreiben. Allerdings ist dies nicht Teil des Standarts, wenn ihr XHTML benutzt, wird es nicht valide sein.</p> +<h2 id="Browser-Kompatiblität">Browser-Kompatiblität</h2> +<p>{{CompatibilityTable}}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td> + <p>{{CompatUnknown}}</p> + </td> + <td>{{CompatNo}} [1]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> + </table> +</div> +<p>[1] Bis zur Firefox-Version 22, selbst wenn es nicht unterstützt wird, hat Gecko es interpretiert wie {{domxref("HTMLSpanElement")}}. Dies wurde gefixt und nun wird es wie {{domxref("HTMLUnknownElement")}} interpretiert, wie es eigentlich sein sollte.</p> +<h2 id="Siehe_auch">Siehe auch</h2> +<ul> + <li>Das {{htmlelement("audio")}}, was das Standart-Element ist bei eingebetteten Audio-Dokumenten.</li> +</ul> +<div> + {{HTMLRef}}</div> diff --git a/files/de/web/html/element/big/index.html b/files/de/web/html/element/big/index.html new file mode 100644 index 0000000000..5515b9798f --- /dev/null +++ b/files/de/web/html/element/big/index.html @@ -0,0 +1,89 @@ +--- +title: <big> +slug: Web/HTML/Element/big +tags: + - Element + - HTML + - Obsolete + - Referenz + - Web +translation_of: Web/HTML/Element/big +--- +<div> + {{obsolete_header}}</div> +<h2 id="Übersicht">Übersicht</h2> +<p>Das HTML Big Element (<code><big></code>) vergrößert die Schrift um einen Wert (zum Beispiel von small nach medium oder von large nach x-large) bis zur maximalen Schriftgröße des Browsers.</p> +<div class="note"> + <p><strong>Hinweis zur Benutzung: </strong>Dadurch, dass dieses Element rein der Darstellung diente, wurde es in <a href="/en-US/docs/Web/Guide/HTML/HTML5" title="/en-US/docs/Web/Guide/HTML/HTML5">HTML5</a> entfernt und sollte nicht mehr verwendet werden. Stattdessen sollten Webentwickler die <a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a> Eigenschaften nutzen.</p> +</div> +<h2 id="Attribute">Attribute</h2> +<p>Dieses Element hat nicht mehr als die <a href="/en-US/docs/HTML/global_attributes" title="HTML/global attributes">globalen Attribute</a>, wie jedes Element.</p> +<h2 id="Beispiel_1">Beispiel 1</h2> +<pre class="brush:xml"><p> + Das ist der erste Satz. <big>Der zweite + Satz wird größer dargestellt.</big> +</p></pre> +<h2 id="Beispiel_2_(CSS_Alternative)">Beispiel 2 (CSS Alternative)</h2> +<pre class="brush:xml"><p> + Das ist der erste Satz. <span style="font-size:1.2em">Der zweite + Satz wird größer dargestellt.</span> +</p></pre> +<h3 id="Ergebnis">Ergebnis</h3> +<p>Das ist der erste Satz. <span style="font-size: 1.2em;">Der zweite Satz wird größer dargestellt.</span></p> +<h2 id="DOM_Schnittstelle">DOM Schnittstelle</h2> +<p>Dieses Element implementiert die {{domxref('HTMLElement')}} Schnittstelle.</p> +<div class="note"> + <strong>Hinweis zur Implementierung: </strong>Bis einschließlich Gecko 1.9.2 implementierte Firefox die {{domxref('HTMLSpanElement')}} Schnittstelle für dieses Element.</div> +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> +<p>{{CompatibilityTable}}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> + </table> +</div> +<h2 id="Siehe_auch">Siehe auch</h2> +<ul> + <li>{{htmlelement("small")}}, {{htmlelement("font")}}, {{htmlelement("style")}}</li> + <li>HTML 4.01 Spezifikation: <a class="external" href="http://www.w3.org/TR/html4/present/graphics.html#h-15.2">Font Styles</a></li> +</ul> +<div> + {{HTMLRef}}</div> diff --git a/files/de/web/html/element/blink/index.html b/files/de/web/html/element/blink/index.html new file mode 100644 index 0000000000..cc2718c06e --- /dev/null +++ b/files/de/web/html/element/blink/index.html @@ -0,0 +1,87 @@ +--- +title: <blink> +slug: Web/HTML/Element/blink +tags: + - Deprecated + - Element + - HTML + - Non-standard + - Referenz + - Web +translation_of: Web/HTML/Element/blink +--- +<div> + {{Deprecated_header}} {{Non-standard_header}}</div> +<h2 id="Übersicht">Übersicht</h2> +<p>Das HTML Blink Element (<code><blink></code>) ist kein Standard-Element und bewirkt, dass der vom Element umschlossene Text blinkt.</p> +<div class="warning"> + <p class="note"><strong>Warnung:</strong> Dieses Element sollte nicht verwendet werden, da es nicht zum Standard gehört und <strong>veraltet</strong> ist. Blinkender Text wird von diversen Zugriffstandards missbilligt und die CSS-Spezifikation erlaubt Browsern, das <blink>-Element zu ignorieren.</p> +</div> +<h2 id="DOM_Schnittstelle">DOM Schnittstelle</h2> +<p>Dieses Element wird nicht unterstützt und implementiert somit die {{domxref("HTMLUnknownElement")}} Schnittstelle.</p> +<h2 id="Beispiel">Beispiel</h2> +<pre class="brush:html"><blink>Why would somebody use this?</blink> +</pre> +<h3 id="Ergebnis">Ergebnis</h3> +<p><img alt="Image:HTMLBlinkElement.gif" src="/@api/deki/files/247/=HTMLBlinkElement.gif"></p> +<h2 id="Spezifikation">Spezifikation</h2> +<p>Dieses Element gehört nicht zum Standard und ist somit auch kein Teil einer Spezifikation.</p> +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> +<div> + {{CompatibilityTable}}</div> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>Until {{CompatGeckoDesktop("22.0")}}<br> + {{CompatNo}} since {{CompatGeckoDesktop("23.0")}}</td> + <td>{{CompatNo}}</td> + <td>Until 12.1<br> + {{CompatNo}} since 15.0</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>Until {{CompatGeckoMobile("22.0")}}<br> + {{CompatNo}} since {{CompatGeckoMobile("23.0")}}</td> + <td>{{CompatNo}}</td> + <td>Until 12.1<br> + {{CompatNo}} since 15.0</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> + </table> +</div> +<h2 id="Siehe_auch">Siehe auch</h2> +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blink" title="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blink">Die Geschichte der Entstehung des HTML <code><blink></code> Elements</a>.</li> + <li>{{cssxref("text-decoration")}}, wo blinkende Werte existieren, der Browser sie jedoch nicht effektiv blinken lassen muss.</li> + <li>{{htmlelement("marquee")}}, ein ähnliches Element, welches ebenfalls nicht zum Standard gehört.</li> + <li><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations" title="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">CSS Animationen</a> sind der richtige Weg für diese Art von Effekt.</li> +</ul> +<p>{{HTMLRef}}</p> diff --git a/files/de/web/html/element/blockquote/index.html b/files/de/web/html/element/blockquote/index.html new file mode 100644 index 0000000000..75f38620cc --- /dev/null +++ b/files/de/web/html/element/blockquote/index.html @@ -0,0 +1,156 @@ +--- +title: <blockquote> +slug: Web/HTML/Element/blockquote +tags: + - Element + - HTML + - HTML Gruppierungsinhalt + - 'HTML:Flow content' + - Referenz + - Web +translation_of: Web/HTML/Element/blockquote +--- +<h2 id="Übersicht">Übersicht</h2> + +<p>Das <strong>HTML <code><blockquote></code> Element</strong> (oder <em>HTML Block Quotation Element</em>) gibt an, dass der eingeschlossene Text ein erweiterndes Zitat ist. Normalerweise wird dieses Element als Einrückung dargestellt (siehe <a href="/en-US/docs/HTML/Element/blockquote#Notes" title="HTML/Element/blockquote#Notes">Anmerkungen</a> wie man die Darstellung ändert). Eine URL für die Quelle des Zitats kann mit Hilfe des <em>cite</em> Attributs angegeben werden, während die Quelle eines Textes mit dem {{HTMLElement("cite")}} Element angegeben werden kann.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorien</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Fließender Inhalt</a>, Sektionsursprung, greifbarer Inhalt.</td> + </tr> + <tr> + <th scope="row">Erlaubter Inhalt</th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Phrasing_content">Fließender Inhalt</a>.</td> + </tr> + <tr> + <th scope="row">Tag Auslassung</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Erlaubte Elternelemente</th> + <td>Jedes Element, dass <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Phrasing_content">fließenden Inhalt</a> erlaubt.</td> + </tr> + <tr> + <th scope="row">DOM Schnittstelle</th> + <td>{{domxref("HTMLQuoteElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p><span style="line-height: 21px;">Dieses Element schließt die </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globalen Attribute</a><span style="line-height: 21px;"> ein.</span></p> + +<dl> + <dt>{{htmlattrdef("cite")}}</dt> + <dd>Eine URL, die ein Quelldokument oder die Quellnachricht angibt, für die zitierte Information. Dieses Attribut zielt darauf ab, auf Informationen zu zeigen, die den Kontext oder die Referenz des Zitats näher erläutern.</dd> +</dl> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: html"><blockquote cite="http://developer.mozilla.org"> + <p>Das ist ein Zitat vom Mozilla Developer Center.</p> +</blockquote> +</pre> + +<p>Dieser HTML Code gibt folgendes Ergebnis aus:</p> + +<blockquote cite="http://developer.mozilla.org"> +<p>Das ist ein Zitat vom Mozilla Developer Center.</p> +</blockquote> + +<h2 id="Specifications" name="Specifications">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-blockquote-element', '<blockquote>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-blockquote-element', '<blockquote>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.2', '<blockquote>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Anmerkungen">Anmerkungen</h2> + +<p>Um die <code><blockquote></code> Einrückung zu ändern, kann die <a href="/en-US/docs/CSS" title="CSS">CSS</a> {{cssxref("margin")}} Eigenschaft genutzt werden.</p> + +<p>Für kurze Zitate kann man das {{HTMLElement("q")}} Element nutzen.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Das {{HTMLElement("q")}} Element einreihige Zitat.</li> + <li>Das {{HTMLElement("cite")}} Element für Quellenangaben.</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/de/web/html/element/body/index.html b/files/de/web/html/element/body/index.html new file mode 100644 index 0000000000..d71558312c --- /dev/null +++ b/files/de/web/html/element/body/index.html @@ -0,0 +1,230 @@ +--- +title: <body> +slug: Web/HTML/Element/body +tags: + - Element + - Grundlagen + - HTML + - Web +translation_of: Web/HTML/Element/body +--- +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>Das <strong>HTML <code><body></code> Element</strong> repräsentiert den Inhalt eines HTML Dokuments. Es gibt nur ein <code><body></code> Element in einem Dokument.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document#Sectioning_roots">Sectioning root</a>.</td> + </tr> + <tr> + <th scope="row">Erlaubter Inhalt</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>.</td> + </tr> + <tr> + <th scope="row">Tag Platzierung</th> + <td>Der Starttag darf weggelassen werden, wenn das erste Ding dazwischen kein Leerzeichen, Kommentar, {{HTMLElement("script")}} Element oder {{HTMLElement("style")}} Element ist. Der Endtag kann weggelassen werden, wenn das Body-Element Inhalte oder einen Starttag hat und ihm nicht sofort ein Kommentar folgt.</td> + </tr> + <tr> + <th scope="row">Zulässige Elternelemente</th> + <td>Es muss das zweite Element eines {{HTMLElement("html")}} Elements sein.</td> + </tr> + <tr> + <th>DOM Schnittstelle</th> + <td>{{domxref("HTMLBodyElement")}} + <ul> + <li>Das <code><body></code> Element implementiert die {{domxref("HTMLBodyElement")}} Schnittstelle.</li> + <li>Sie können auf das Body-Element durch ein {{domxref("document.body")}} Attribute zugreifen.</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p>Dieses Element beinhaltet die <a href="/en-US/docs/Web/HTML/Global_attributes">Globalen Attribute</a>.</p> + +<dl> + <dt>{{htmlattrdef("alink")}} {{obsolete_inline}}</dt> + <dd>Textfarbe für selektierte Links. <em>Diese Methode ist fehlerhaft, benutzen Sie stattdessen das CSS {{cssxref("color")}} Objekt in Verbindung mit der {{cssxref(":active")}} Pseudoklasse.</em></dd> + <dt>{{htmlattrdef("background")}} {{obsolete_inline}}</dt> + <dd>URI eines Bilds, das als Hintergrundbild gesetzt wird. <em>Diese Methode ist fehlerhaft, benutzen Sie stattdessen das CSS</em><em> {{cssxref("background")}} Objekt auf dem Element.</em> + <div class="note"><strong>Hinweis:</strong> Seit Gecko 7.0 {{geckoRelease("7.0")}} wird <code>background</code> nicht länger als eine URI aufgelöst; stattdessen wird es als einfacher String behandelt.</div> + </dd> + <dt>{{htmlattrdef("bgcolor")}} {{obsolete_inline}}</dt> + <dd>Hintergrundfarbe eines Dokumentes. <em>Diese Methode ist fehlerhaft, benutzen Sie stattdessen das CSS {{cssxref("background-color")}} Objekt auf dem Element.</em></dd> + <dt>{{htmlattrdef("bottommargin")}} {{obsolete_inline}}</dt> + <dd>Der Abstand des Bodens des Bodys. <em>Diese Methode ist fehlerhaft, benutzen Sie stattdessen das CSS {{cssxref("margin-bottom")}} Objekt auf dem Element.</em></dd> + <dt>{{htmlattrdef("leftmargin")}} {{obsolete_inline}}</dt> + <dd>Der Abstand der linken Seite des Bodys. <em>Diese Methode ist fehlerhaft, benutzen Sie stattdessen das CSS {{cssxref("margin-left")}} Objekt auf dem Element.</em></dd> + <dt>{{htmlattrdef("link")}} {{obsolete_inline}}</dt> + <dd>Textfarbe eines unbesuchten Links. <em>Diese Methode ist fehlerhaft, benutzen Sie stattdessen das CSS {{cssxref("color")}} Objekt in Verbindung mit der {{cssxref(":link")}} Pseudoklasse.</em></dd> + <dt>{{htmlattrdef("onafterprint")}} {{HTMLVersionInline(5)}}</dt> + <dd>Funktion, die aufgerufen wird, wenn der Nutzer das Dokument gedruckt hat.</dd> + <dt>{{htmlattrdef("onbeforeprint")}} {{HTMLVersionInline(5)}}</dt> + <dd>Funktion, die aufgerufen wird, wenn der Nutzer das Dokument drucken möchte.</dd> + <dt>{{htmlattrdef("onbeforeunload")}} {{HTMLVersionInline(5)}}</dt> + <dd>Funktion, die aufgerufen wird, wenn das Dokument nicht geladen wird.</dd> + <dt>{{htmlattrdef("onblur")}} {{HTMLVersionInline(5)}}</dt> + <dd>Funktion, die aufgerufen wird, wenn das Dokument nicht mehr angezeigt wird.</dd> + <dt>{{htmlattrdef("onerror")}} {{HTMLVersionInline(5)}}</dt> + <dd>Funktion, die aufgerufen wird, wenn das Dokument nicht richtig geladen wird.</dd> + <dt>{{htmlattrdef("onfocus")}} {{HTMLVersionInline(5)}}</dt> + <dd>Funktion, die aufgerufen wird, wenn das Dokument angezigt wird.</dd> + <dt>{{htmlattrdef("onhashchange")}} {{HTMLVersionInline(5)}}</dt> + <dd>Funktion, die aufgerufen wird, wenn der Fragment-Identifizier-Teil (beginnend mit der Raute (<code>'#'</code>)) der eigentlichen Adresse des Dokuments geändert wird.</dd> + <dt>{{htmlattrdef("onlanguagechange")}} {{experimental_inline}}</dt> + <dd>Funktion, die aufgerufen wird, wenn die bevorzugte Sprache geändert wird.</dd> + <dt>{{htmlattrdef("onload")}} {{HTMLVersionInline(5)}}</dt> + <dd>Funktion, die aufgerufen wird, wenn das Dokument fertig geldaden ist.</dd> + <dt>{{htmlattrdef("onmessage")}} {{HTMLVersionInline(5)}}</dt> + <dd>Funktion, die aufgerufen wird, wenn das Dokument eine Nachricht erhalten hat.</dd> + <dt>{{htmlattrdef("onoffline")}} {{HTMLVersionInline(5)}}</dt> + <dd>Funktion, die aufgerufen wird, wenn die Netzwerk-Kommunikation gescheitert ist.</dd> + <dt>{{htmlattrdef("ononline")}} {{HTMLVersionInline(5)}}</dt> + <dd>Funktion, die aufgerufen wird, wenn die Netzwerk-Kommunikation wiederhergestellt wird.</dd> + <dt>{{htmlattrdef("onpopstate")}} {{HTMLVersionInline(5)}}</dt> + <dd>Funktion, die aufgerufen wird, wenn der Nutzer den Sitzungsverlauf aufgerufen hat.</dd> + <dt>{{htmlattrdef("onredo")}} {{HTMLVersionInline(5)}}</dt> + <dd>Funktion, die aufgerufen wird, wenn der Nutzer vorwärts eine Rückgängig-Aktion wiederholt hat.</dd> + <dt>{{htmlattrdef("onresize")}} {{HTMLVersionInline(5)}}</dt> + <dd>Funktion, die aufgerufen wird, wenn die Größe des Dokumentes verändert wird.</dd> + <dt>{{htmlattrdef("onstorage")}} {{HTMLVersionInline(5)}}</dt> + <dd>Funktion, die aufgerufen wird, wenn der Speicherbreich verändert wurde.</dd> + <dt>{{htmlattrdef("onundo")}} {{HTMLVersionInline(5)}}</dt> + <dd>Funktion, die aufgerufen wird, wenn der Nutzer zurückgegangen ist.</dd> + <dt>{{htmlattrdef("onunload")}} {{HTMLVersionInline(5)}}</dt> + <dd>Funktion, die aufgerufen wird, wenn das Dokument verschwindet.</dd> + <dt>{{htmlattrdef("rightmargin")}} {{obsolete_inline}}</dt> + <dd>Der Abstand der rehten Seite des Bodys. <em>Diese Methode ist fehlerhaft, benutzen Sie stattdessen das CSS {{cssxref("margin-right")}} Objekt auf dem Element.</em></dd> + <dt>{{htmlattrdef("text")}} {{obsolete_inline}}</dt> + <dd>Vordergrundfarbe des Textes. <em>TDiese Methode ist fehlerhaft, benutzen Sie stattdessen das CSS {{cssxref("color")}} Objekt auf dem Element.</em></dd> + <dt>{{htmlattrdef("topmargin")}} {{obsolete_inline}}</dt> + <dd>Der Abstand von oben des Bodys. <em>Diese Methode ist fehlerhaft, benutzen Sie stattdessen das CSS {{cssxref("margin-top")}} Objekt auf dem Element.</em></dd> + <dt>{{htmlattrdef("vlink")}} {{obsolete_inline}}</dt> + <dd>Textfarbe eines besuchten Links. <em>Diese Methode ist fehlerhaft, benutzen Sie stattdessen das CSS {{cssxref("color")}} Objekt in Verbindung mit der {{cssxref(":visited")}} Pseudoklasse.</em></dd> +</dl> + +<h2 id="Specifications" name="Specifications">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-body-element', '<body>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Veränderte die Liste der fehlerhaften Features.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-body-element', '<body>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Überholt die ehemaligen veralteten Attribute. Definiert das Verhalten der fehlerhaften und niemals standartisierten <strong>margintop</strong>, <strong>marginleft</strong>, <strong>marginright</strong> und <strong>marginbottom</strong><strong>.</strong></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.1', '<body>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Überholt die <strong>alink</strong>, <strong>background</strong>, <strong>bgcolor</strong>, <strong>link</strong>, <strong>text</strong> und <strong>vlink</strong> Attribute.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>onlanguagechange</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("32")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>bottommargin</code>, <code>leftmargin</code>, <code>rightmargin</code>, <code>topmargin</code> {{obsolete_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("35")}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>onlanguagechange</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("32")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>bottommargin</code>, <code>leftmargin</code>, <code>rightmargin</code>, <code>topmargin</code> {{obsolete_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("35")}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Wurde bereits vorher im Quirk Mode unterstützt.</p> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>{{HTMLElement("html")}}</li> + <li>{{HTMLElement("head")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/de/web/html/element/br/index.html b/files/de/web/html/element/br/index.html new file mode 100644 index 0000000000..b5ca16c71b --- /dev/null +++ b/files/de/web/html/element/br/index.html @@ -0,0 +1,130 @@ +--- +title: <br> +slug: Web/HTML/Element/br +translation_of: Web/HTML/Element/br +--- +<h2 id="Summary" name="Summary">Zusammenfassung</h2> + +<p>Das HTML Element <em>line break</em> <code><br></code> produziert einen Zeilenumbruch in (Fließ-)Text (Wagenrücklauf). Es ist z.B nützlich beim Notieren eines Gedichtes oder einer Adresse, wo die Aufteilung der Zeilen von Bedeutung ist.</p> + +<h2 id="Usage_Context" name="Usage_Context">Gebrauch</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td>Zulässiger Inhalt</td> + <td>Keiner, es handelt sich um ein "void" Element.</td> + </tr> + <tr> + <td>Tag Platzierung</td> + <td>Muss ein Start-Tag und darf kein Ende-Tag besitzen. In XHTML Dokumenten wird das Element als <code><br/></code> notiert.</td> + </tr> + <tr> + <td>Zulässige Elternelemente</td> + <td>Alle Elemente die <a href="/en-US/docs/HTML/Content_categories#phrasing_content" title="HTML/Content categories#phrasing content">formulierten Inhalt</a> akzeptieren.</td> + </tr> + <tr> + <td>Normatives Dokument</td> + <td><a class="external" href="http://www.w3.org/TR/html5/text-level-semantics.html#the-br-element" title="http://www.w3.org/TR/html5/text-level-semantics.html#the-br-element">HTML5, section 4.6.23</a>; <a class="external" href="http://www.w3.org/TR/html401/struct/text.html#h-9.3.2.1" title="http://www.w3.org/TR/html401/struct/text.html#h-9.3.2.1">HTML 4.01, section 9.3.2</a></td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">Attribute</h2> + +<p>Wie alle anderen HTML Elemente besitzt dieses Element die <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">globalen Attribute</a>.</p> + +<dl> + <dt>{{ htmlattrdef("clear") }} {{deprecatedGeneric('inline','HTML4.01')}} {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>Zeigt an, wo die nächste Zeile nach dem Zeilenumbruch beginnt. + <div class="note"> + <p><strong>Gebrauchshinweis: </strong>Dieses Attribut ist veraltet in {{ HTMLVersionInline(5) }} und <strong>sollte nicht verwendet werden</strong>. Stattdessen sollte die CSS-Eigenschaft {{CSSxref('clear')}} verwendet werden.</p> + </div> + </dd> +</dl> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre class="brush: html">Mozilla Foundation<br> +1981 Landings Drive<br> +Building K<br> +Mountain View, CA 94043-0801<br> +USA +</pre> + +<p>Ausgabe:</p> + +<p>Mozilla Foundation<br> + 1981 Landings Drive<br> + Building K<br> + Mountain View, CA 94043-0801<br> + USA</p> + +<h2 id="DOM_Interface" name="DOM_Interface">DOM_Interface</h2> + +<ul> + <li><a href="/en-US/docs/DOM/HTMLBRElement" title="DOM/HTMLBRElement">HTMLBRElement</a></li> +</ul> + +<h2 id="Notes" name="Notes">Anmerkungen</h2> + +<p><code><br></code> <em>nicht</em> verwenden um die Lücken zwischen Text zu vergrößern; stattdessen sollte die <a href="/en-US/docs/CSS" title="CSS">CSS</a> {{cssxref('margin')}} Eigenschaft oder das {{ HTMLElement("p") }} Element verwendet werden.</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser Kompatibilität</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>{{ HTMLElement("address") }} element</li> + <li>{{ HTMLElement("p") }} element</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/de/web/html/element/canvas/index.html b/files/de/web/html/element/canvas/index.html new file mode 100644 index 0000000000..e4247626de --- /dev/null +++ b/files/de/web/html/element/canvas/index.html @@ -0,0 +1,110 @@ +--- +title: <canvas> +slug: Web/HTML/Element/canvas +translation_of: Web/HTML/Element/canvas +--- +<h2 id="Übersicht">Übersicht</h2> +<p>Das Canvas Element ist ein großer Fortschritt in der Entwicklung des HTML, bietet es doch die Möglichkeit zur dynamischen Darstellung grafischer Informationen. Dazu wird eine Canvas (engl. Leinwand) definiert und mittels JavaScript verschiedene Methoden zur Anwendung gebracht und Attribute gesetzt (siehe <a class="external" href="http://www.selfhtml5.org/2010-html5-features/canvas-attribute-table/">Canvas Attribute</a>). Es sollte ein Fallbackinhalt in den <code><canvas>Tag</code> eingefügt werden, welcher nur angezeigt wird, wenn Browser das <code><canvas></code> Element nicht unterstützt oder Javascript deaktiviert ist.</p> +<h2 id="Attribute">Attribute</h2> +<p><span style="line-height: 21px;">Dieses Element unterstützt die </span><a style="line-height: 21px;" title="HTML/Global attributes">globalen Attribute</a><span style="line-height: 21px;">.</span></p> +<dl> + <dt> + {{htmlattrdef("width")}}</dt> + <dd> + Die Breite in Pixel. Standard ist 300px.</dd> + <dt> + {{htmlattrdef("height")}}</dt> + <dd> + Die Höhe in Pixel. Standard ist 150px.</dd> +</dl> +<p>{{Note("Die Größe des <code>canvas</code> kann auch via CSS geändert werden. Das Bild wird hierzu gestreckt um die per CSS definierte Größe zu erreichen.")}}</p> +<h2 id="Beispiele">Beispiele</h2> +<pre class="brush: html"><canvas id="canvas" width="300" height="300"> + Dein Browser unterstützt das &lt;canvas&gt; Element anscheinend nicht. +</canvas> +</pre> +<h2 id="Specifications" name="Specifications">Spezifikationen</h2> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-canvas-element.html#the-canvas-element', '<canvas>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'the-canvas-element.html#the-canvas-element', '<canvas>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> +<p>{{CompatibilityTable}}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Funktion</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.8")}}</td> + <td>9.0</td> + <td><a href="http://www.opera.com/docs/changelogs/windows/900/">9.0</a></td> + <td><a href="http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/HTML-canvas-guide/Introduction/Introduction.html">2.0</a></td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Funktion</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoMobile("1.8")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>1.0</td> + </tr> + </tbody> + </table> +</div> +<h3 id="Browserspezifische_Hinweise">Browserspezifische Hinweise</h3> +<h4 id="Firefox_(Gecko)">Firefox (Gecko)</h4> +<ul> + <li>Before Gecko 5.0 {{geckoRelease("5.0")}}, the canvas width and height were signed integers instead of unsigned integers.</li> + <li>Prior to Gecko 6.0 {{geckoRelease("6.0")}}, a {{HTMLElement("canvas")}} element with a zero width or height would be rendered as if it had default dimensions.</li> + <li>Before Gecko 12.0 {{geckoRelease("12.0")}}, if JavaScript is disabled, the <code><canvas></code> element was being rendered instead of showing the fallback content as per the <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html">specification</a>. Now the fallback content is rendered instead.</li> +</ul> +<h2 id="See_also">See also</h2> +<ul> + <li><a href="/en-US/docs/HTML/Canvas" title="https://developer.mozilla.org/en-US/docs/HTML/Canvas">MDN canvas portal</a></li> + <li>A <a href="/en-US/docs/Canvas_tutorial" title="Canvas tutorial">canvas tutorial</a></li> + <li><a href="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html">Canvas cheat sheet</a></li> + <li><a href="/en-US/demos/tag/tech:canvas" title="demos/tag/tech:canvas/">Canvas-related demos</a></li> +</ul> +<div> + {{HTMLRef}}</div> +<p style="margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; text-indent: 0px;"><span style="font-family: 'Ubuntu'; font-size: 9pt; color: #000000;">{{ languages( { "de": "de/HTML/Element/canvas", "en": "en/HTML/Element/canvas", "es": "es/HTML/Elemento/canvas", "ja": "ja/HTML/Element/canvas", "ko": "ko/HTML/Element/canvas", "nl": "nl/HTML/HTML_Tags/canvas", "pl": "pl/HTML/Element/canvas", "ru": "Ru/HTML/Element/canvas", "zh-cn": "cn/HTML/Element/canvas", "fr": "fr/HTML/Element/canvas" } ) }}</span></p> diff --git a/files/de/web/html/element/caption/index.html b/files/de/web/html/element/caption/index.html new file mode 100644 index 0000000000..a259091943 --- /dev/null +++ b/files/de/web/html/element/caption/index.html @@ -0,0 +1,151 @@ +--- +title: <caption> +slug: Web/HTML/Element/caption +translation_of: Web/HTML/Element/caption +--- +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>Das <strong>HTML-Element <code><caption></code> </strong>(oder auch HTML-Tabellenüberschrift-Element) stellt den Titel einer Tabelle dar. Somit ist dieses immer das erste untergeordnete Element einer Tabelle ({{HTMLElement("table")}}). Das Layout wird über CSS festegelegt, es ist relativ zur Tabelle.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorie</a></th> + <td>Keine</td> + </tr> + <tr> + <th scope="row">erlaubter Inhalt</th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Fließender Inhalt</a>.</td> + </tr> + <tr> + <th scope="row">Auslassbare Tags</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">erlaubte elterliche Elemente</th> + <td>A {{HTMLElement("table")}} element, as its first descendant.</td> + </tr> + <tr> + <th scope="row">DOM-Schnittstelle</th> + <td>{{domxref("HTMLTableCaptionElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p>Dieses Dokument unterstützt die <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">globalen Attribute</a>.</p> + +<dl> + <dt>{{htmlattrdef("align")}} {{deprecatedGeneric('inline','HTML4.01')}} {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>This enumerated attribute indicates how the caption must be aligned with respect to the table. It may have the following values: + <ul> + <li><code>left</code>, displayed to the left of the table</li> + <li><code>top</code>, displayed before the the table</li> + <li><code>right</code>, displayed to the right of the table</li> + <li><code>bottom</code>, displayed under the table</li> + </ul> + + <div class="note"><strong>Usage note: </strong>Do not use this attribute, as it has been deprecated: the {{HTMLElement("caption")}} element should be styled using <a href="/en-US/docs/CSS" title="CSS">CSS</a>. To give a similar effect to the <code>align</code> attribute, use the the <a href="/en-US/docs/CSS" title="CSS">CSS</a> properties {{cssxref("caption-side")}} and {{cssxref("text-align")}}.</div> + </dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<p>Please see the {{HTMLElement("table")}} page for examples on {{HTMLElement("caption")}}</p> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'tabular-data.html#the-caption-element', '<caption>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-caption-element', '<caption>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/tables.html#h-11.2.2', '<caption>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Other table-related HTML Elements: {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};</li> + <li>CSS properties that may be specially useful to style the {{HTMLElement("caption")}} element: + <ul> + <li>{{cssxref("text-align")}}, {{cssxref("caption-side")}}.</li> + </ul> + </li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/de/web/html/element/center/index.html b/files/de/web/html/element/center/index.html new file mode 100644 index 0000000000..8697ffe2da --- /dev/null +++ b/files/de/web/html/element/center/index.html @@ -0,0 +1,41 @@ +--- +title: <center> +slug: Web/HTML/Element/center +tags: + - Deprecated + - Element + - HTML + - Referenz + - Web +translation_of: Web/HTML/Element/center +--- +<div> + {{deprecated_header()}}</div> +<h2 id="Übersicht">Übersicht</h2> +<p>Das HTML Center Element (<code><center></code>) ist ein <a href="/en-US/docs/HTML/Block-level_elements" title="HTML/Block-level_elements">Block-Level Element</a>, welches Paragraphen oder andere Block-Level Elemente und Inline Elemente enthalten kann. Der gesamte Inhalt des Elements wird horizontal zentriert, innerhalb des übergeordneten Elements (normalerweise das {{HTMLElement("body")}} Element). Dieses Element ist in HTML 4 (und XHTML 1) veraltet und wird nicht mehr angewendet, zu Gunsten der <a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a> {{Cssxref("text-align")}} Eigenschaft, welche auf {{HTMLElement("div")}} Elemente oder individuell auf {{HTMLElement("p")}} Elemente angewendet werden kann.</p> +<h2 id="DOM_Schnittstelle">DOM Schnittstelle</h2> +<p>Dieses Element implementiert die {{domxref("HTMLElement")}} Schnittstelle.</p> +<div class="note"> + <p><strong>Implementierungs Anmerkung:</strong> Bis einschließlich Gecko 1.9.2, implementiert Firefox die {{domxref("HTMLSpanElement")}} Schnittstelle für dieses Element.</p> +</div> +<h2 id="Example_1" name="Example_1">Beispiel 1</h2> +<pre class="brush: html"><center>Dieser Text wird zentriert. +<p>Ebenso dieser Paragraph.</p></center> +</pre> +<h2 id="Example_2" name="Example_2">Beispiel 2 (CSS Alternative)</h2> +<pre class="brush: html"><div style="text-align:center">Dieser Text wird zentriert. +<p>Ebenso dieser Paragraph.</p></div> +</pre> +<h2 id="Example_3" name="Example_3">Beispiel 3 (CSS alternative)</h2> +<pre class="brush: html"><p style="text-align:center">Dieser Text wird zentriert.<br> +Ebenso dieser Paragraph.</p> +</pre> +<h2 id="Notes" name="Notes">Anmerkung</h2> +<p>Bei Zuweisung der {{Cssxref("text-align")}}<code>:center</code> Eigenschaft zu einem {{HTMLElement("div")}} oder {{HTMLElement("p")}} Element, wird der <em>Inhalt</em> des Elements zentriert, während dessen Größe unverändert bleibt.</p> +<h2 id="Siehe_auch">Siehe auch</h2> +<ul> + <li>{{Cssxref("text-align")}}</li> + <li>{{Cssxref("display")}}</li> +</ul> +<div> + {{HTMLRef}}</div> diff --git a/files/de/web/html/element/cite/index.html b/files/de/web/html/element/cite/index.html new file mode 100644 index 0000000000..6766a93cbe --- /dev/null +++ b/files/de/web/html/element/cite/index.html @@ -0,0 +1,152 @@ +--- +title: <cite> +slug: Web/HTML/Element/cite +tags: + - Element + - HTML + - HTML Text-Level Semantik + - Referenz + - Web +translation_of: Web/HTML/Element/cite +--- +<h2 id="Übersicht">Übersicht</h2> + +<p>Das <strong>HTML <code><cite></code> Element</strong> (oder <em>HTML Citation Element</em>) repräsentiert eine Referenz zu einer kreativen Arbeit. Es muss den Titel der Arbeit, den Namen des Autors oder die URL Referenz, welche in abgekürzter Form als Metadaten vorliegen, zusätzlich zur Zitatangabe beinhalten.</p> + +<div class="note"> +<p><strong>Hinweis zur Benutzung:</strong></p> + +<ul> + <li>Eine kreative Arbeit kann ein Buch, eine Skizze, ein Essay, ein Gedicht, ein Ergebnis, ein Song, ein Script, ein Film, eine TV-Show, ein Spiel, eine Skulptur, ein Bild, eine Theaterproduktion, eine Oper, ein Musical, eine Ausstellung, ein Computer-Programm, eine Website, ein Blogpost, ein Kommentar, ein Forumeintrag, ein Tweet, ein schriftliches Statement, usw. sein.</li> + <li>Das {{htmlattrxref("cite", "blockquote")}} Attribut innerhalb eines {{HTMLElement("blockquote")}} oder {{HTMLElement("q")}} Elements kann für eine Online-Ressource einer Quelle genutzt werden.</li> +</ul> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorien</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Fließender Inhalt</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">Formulierungsinhalt</a>, greifbarer Inhalt.</td> + </tr> + <tr> + <th scope="row">Erlaubter Inhalt</th> + <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Tag Auslassung</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Erlaubte Elternelemente</th> + <td>Jedes Element, dass <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Formulierungsinhalt</a> erlaubt.</td> + </tr> + <tr> + <th scope="row">DOM Schnittstelle</th> + <td>{{domxref("HTMLElement")}} Bis einschließlich Gecko 1.9.2 (Firefox 4) hat Firefox dieses Element in die {{domxref("HTMLSpanElement")}} Schnittstelle implementiert.</td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p><span style="line-height: 21px;">Dieses Element schließt nur </span><a href="/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globale Attribute</a> ein.</p> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: html">Mehr Informationen können in <cite>[ISO-0000]</cite> gefunden werden.</pre> + +<p>Der HTML Code liefert folgendes Ergebnis:</p> + +<p>Mehr Informationen können in <cite>[ISO-0000]</cite> gefunden werden.</p> + +<h2 id="Anmerkungen">Anmerkungen</h2> + +<p>Um die standardisierte Kursiv-Darstellung des <cite> Elements zu umgehen, kann die <a href="/en-US/docs/CSS" title="CSS">CSS</a> {{cssxref("font-style")}} Eigenschaft genutzt werden.</p> + +<h2 id="Specifications" name="Specifications">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-cite-element', '<cite>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-cite-element', '<cite>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<cite>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Das {{HTMLElement("blockquote")}} Element für lange Zitate.</li> + <li>Das {{HTMLElement("q")}} Element für einzeilige Zitate.</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/de/web/html/element/code/index.html b/files/de/web/html/element/code/index.html new file mode 100644 index 0000000000..9738f9f66a --- /dev/null +++ b/files/de/web/html/element/code/index.html @@ -0,0 +1,147 @@ +--- +title: <code> +slug: Web/HTML/Element/code +tags: + - Code + - Element + - HTML + - HTML Text-Level Semantik + - Referenz + - Web +translation_of: Web/HTML/Element/code +--- +<h2 id="Übersicht">Übersicht</h2> + +<p>Das <em>HTML Code Element</em> (<code><code></code>) repräsentiert ein Fragment von Computer Code. Standardmäßig wird dieses Element in der Monospace Schriftart des Browsers dargestellt.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorien</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Fließender Inhalt</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">Formulierungsinhalt</a>, fühlbarer Inhalt.</td> + </tr> + <tr> + <th scope="row">Erlaubter Inhalt</th> + <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Formulierungsinhalt</a>.</td> + </tr> + <tr> + <th scope="row">Tag Wegfall</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Erlaubte Elternelemente</th> + <td>Jedes Element, das <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Formulierungsinhalt</a> akzeptiert.</td> + </tr> + <tr> + <th scope="row">DOM-Schnittstelle</th> + <td>{{domxref("HTMLElement")}} bis einschließlich Gecko 1.9.2 (Firefox 4) hat Firefox die {{domxref("HTMLSpanElement")}} Schnittstelle für dieses Element implementiert.</td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p><span style="line-height: 21px;">Dieses Element schließt nur </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globale Attribute</a><span style="line-height: 21px;"> ein.</span></p> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: html"><p>Normaler Text. <code>Das ist Code.</code> Normaler Text.</p> +</pre> + +<h3 id="Result" name="Result">Ergebnis</h3> + +<p>Normaler Text. <code>Das ist code.</code> Normaler Text.</p> + +<h2 id="Anmerkung">Anmerkung</h2> + +<p>Für den <code>code</code> Selektor kann eine CSS Regel definiert werden, um die Standard Schriftart des Browsers zu überschreiben. Vom Benutzer gesetzte Einstellungen haben Vorrang vor den CSS spezifischen Einstellungen.</p> + +<h2 id="Specifications" name="Specifications">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-code-element', '<code>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-code-element', '<code>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<code>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser-Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funktion</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basis Unterstützung</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funktion</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basis Unterstützung</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>{{HTMLElement("samp")}}</li> + <li>{{HTMLElement("kbd")}}</li> + <li>{{HTMLElement("command")}}</li> + <li>{{HTMLElement("var")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/de/web/html/element/col/index.html b/files/de/web/html/element/col/index.html new file mode 100644 index 0000000000..64d9cffcf1 --- /dev/null +++ b/files/de/web/html/element/col/index.html @@ -0,0 +1,240 @@ +--- +title: <col> +slug: Web/HTML/Element/col +translation_of: Web/HTML/Element/col +--- +<div> </div> + +<div><span id="result_box" lang="de"><span>Das <strong>HTML <code><col></code>-Element </strong>definiert eine Spalte innerhalb einer Tabelle und wird zum Definieren einer gemeinsamen Semantik für alle gängigen Zellen verwendet.</span> <span>Es wird allgemein innerhalb eines {{HTMLElement("colgroup")}} -Elements gefunden.</span></span></div> + +<div> </div> + +<div><span id="result_box" lang="de"><span>Auf dieses Element können CSS-Stilvorschriften für das Design von Spalten angewendet werden, aber nur wenige Attribute wirken sich auf die Spalte aus (siehe die CSS 2.1-Spezifikation für eine Liste).</span></span></div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Inhaltskategorien</a></th> + <td>Keine</td> + </tr> + <tr> + <th scope="row">Erlaubter Inhalt</th> + <td>Keiner, es ist ein {{Glossary("empty element")}}</td> + </tr> + <tr> + <th scope="row">Tag-Auslassung</th> + <td><span id="result_box" lang="de"><span>Das Start-Tag ist obligatorisch, aber da es sich um ein void-Element handelt, ist die Verwendung eines End-Tags nicht zulässig.</span></span></td> + </tr> + <tr> + <th scope="row">Erlaubte Elternelemente</th> + <td>Nur {{HTMLElement("colgroup")}}<span lang="de"><span>, obwohl es implizit definiert werden kann, da sein Start-Tag nicht obligatorisch ist.</span> <span>Das </span></span> {{HTMLElement("colgroup")}} <span lang="de"><span> darf kein </span></span> {{htmlattrxref("span", "colgroup")}} <span lang="de"><span> - Attribut haben.</span></span></td> + </tr> + <tr> + <th scope="row"><span class="short_text" id="result_box" lang="de"><span>Zulässige ARIA-Rollen</span></span></th> + <td>Keine</td> + </tr> + <tr> + <th scope="row">DOM Schnittstelle</th> + <td>{{domxref("HTMLTableColElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p><span class="short_text" id="result_box" lang="de"><span>Dieses Element enthält die globalen Attribute</span></span></p> + +<dl> + <dt>{{htmlattrdef("align")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd><span id="result_box" lang="de"><span>Dieses Aufzählungsattribut gibt an, wie die horizontale Ausrichtung der einzelnen Spaltenzelleninhalte behandelt wird.</span> <span>Mögliche Werte sind:</span></span> + <ul> + <li><code>left</code>, <span id="result_box" lang="de"><span>richtet den Inhalt links von der Zelle aus</span></span></li> + <li><code>center</code>, <span id="result_box" lang="de"><span>zentriert den Inhalt in der Zelle</span></span></li> + <li><code>right</code>, <span id="result_box" lang="de"><span>richtet den Inhalt auf der rechten Seite der Zelle aus</span></span></li> + <li><code>justify</code>, <span id="result_box" lang="de"><span>einfügen von Leerzeichen in den Textinhalt, so dass der Inhalt in der Zelle gerechtfertigt ist</span></span></li> + <li><code>char</code>, <span id="result_box" lang="de"><span>richtet den Textinhalt auf ein Sonderzeichen mit einem minimalen Offset aus, definiert durch htmlattrxref <char>, <col> und htmlattrxref <charoff>, <col> Attribute ;</span> </span><span class="short_text" id="result_box" lang="de"><span>nicht implementiert</span></span><span lang="de"><span>_inline (2212).</span></span></li> + </ul> + + <p><span id="result_box" lang="de"><span>Wenn dieses Attribut nicht gesetzt ist, wird der Wert von </span></span> {{htmlattrxref("align", "colgroup")}} des {{HTMLElement("colgroup")}} <span lang="de"><span>-Elements geerbt, zu dem dieses <code><col></code> -Element gehört.</span> <span>Wenn es keine gibt, wird der Wert <code>left</code> angenommen.</span></span></p> + + <div class="note"><strong>Note: </strong><span id="result_box" lang="de"><span>Verwenden Sie dieses Attribut nicht, da es im neuesten Standard veraltet (nicht unterstützt) ist.</span></span> + + <ul> + <li> Um den gleichen Effekt zu erzielen wie die Werte <code>left</code>, <code>center</code>, <code>right</code> or <code>justify</code>: + + <ul> + <li>Versuchen Sie nicht, die Eigenschaft {{cssxref("text-align")}} in einem Selektor festzulegen, der ein {{HTMLElement("col")}} enthält. Da {{HTMLElement("td")}} nicht von <code><col></code>-Element abhängen, werden sie nicht übernommen..</li> + <li>Wenn die Tabelle keines der {{htmlattrxref("colspan", "td")}}-Attribute verwendet, benutzen Sie bitte den <code>td:nth-child(an+b)</code>-CSS-Selektoren. Setzen Sie <code>a</code> auf null und <code>b</code> auf die Position der Tabellenspalte, z.B. <code>td:nth-child(2) { text-align: right; }</code>, um die zweite Zeile rechts auszurichten.</li> + <li><span id="result_box" lang="de"><span>Wenn die Tabelle ein Attribut </span></span> {{htmlattrxref("colspan", "td")}} <span lang="de"><span>verwendet, kann der Effekt durch Kombination geeigneter CSS-Attributselektoren wie <code>[colspan = n] </code>erzielt werden, obwohl dies nicht trivial ist.</span></span></li> + </ul> + </li> + <li><span id="result_box" lang="de"><span>Um den gleichen Effekt wie den <code>char</code>-Wert zu erzielen, können Sie in CSS3 den Wert von </span></span> {{htmlattrxref("char", "col")}} <span lang="de"><span>als Wert von </span></span> {{cssxref("text-align")}} <span lang="de"><span> verwenden.</span><span>(Inline nicht implementiert) .</span></span></li> + </ul> + + <ul> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt> + <dd><span id="result_box" lang="de"><span>Dieses Attribut definiert die Hintergrundfarbe jeder Zelle der Spalte</span></span>. <span id="result_box" lang="de"><span>Zugelassene Werte sind jeweils einer der 6-stelligen Hexadezimalcodes, wie in</span></span> <a class="external" href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a> definiert wurden, immer mit einem '#' vorangestellt. <span id="result_box" lang="de"><span>Außerdem kann einer der sechzehn vordefinierten Farbstrings verwendet werden:</span></span> + <table style="width: 80%;"> + <tbody> + <tr> + <td style="background-color: black; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>black</code> = "#000000"</td> + <td style="background-color: green; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>green</code> = "#008000"</td> + </tr> + <tr> + <td style="background-color: silver; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>silver</code> = "#C0C0C0"</td> + <td style="background-color: lime; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>lime</code> = "#00FF00"</td> + </tr> + <tr> + <td style="background-color: gray; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>gray</code> = "#808080"</td> + <td style="background-color: olive; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>olive</code> = "#808000"</td> + </tr> + <tr> + <td style="background-color: white; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>white</code> = "#FFFFFF"</td> + <td style="background-color: yellow; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>yellow</code> = "#FFFF00"</td> + </tr> + <tr> + <td style="background-color: maroon; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>maroon</code> = "#800000"</td> + <td style="background-color: navy; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>navy</code> = "#000080"</td> + </tr> + <tr> + <td style="background-color: red; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>red</code> = "#FF0000"</td> + <td style="background-color: blue; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>blue</code> = "#0000FF"</td> + </tr> + <tr> + <td style="background-color: purple; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>purple</code> = "#800080"</td> + <td style="background-color: teal; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>teal</code> = "#008080"</td> + </tr> + <tr> + <td style="background-color: fuchsia; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>fuchsia</code> = "#FF00FF"</td> + <td style="background-color: aqua; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>aqua</code> = "#00FFFF"</td> + </tr> + </tbody> + </table> + + <div class="note"><span id="result_box" lang="de"><span><u><strong>Hinweis zur Verwendung</strong></u>: Verwenden Sie dieses Attribut nicht, da es nicht standardgemäß ist und nur in einigen Versionen von Microsoft Internet Explorer implementiert ist: Das Element <code><col></code> sollte mit CSS formatiert werden.</span> <span>Verwenden Sie die CSS-Eigenschaft </span></span> {{cssxref("background-color")}} <span lang="de"><span> in den relevanten </span></span> {{HTMLElement("td")}}-Elementen<span lang="de"><span>, um einen mit dem <code>bgcolor</code>-Attribut vergleichbaren Effekt zu erzielen.</span></span></div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("char")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dt> </dt> + <dd> + <p><span lang="de"><span>Dieses Attribut wird verwendet, um das Zeichen festzulegen, an dem die Zellen in einer Spalte ausgerichtet werden sollen.</span> <span>Typische Werte hierfür sind ein Punkt (.) Beim Ausrichten von Zahlen oder Geldwerten.</span> <span>Wenn </span></span> {{htmlattrxref("align", "col")}} <span lang="de"><span> nicht auf <code>char</code> gesetzt ist, wird dieses Attribut ignoriert</span></span>;</p> + </dd> + <dd> + <div class="note"><span id="result_box" lang="de"><span><u><strong>Anmerkung</strong></u>: Verwenden Sie dieses Attribut nicht, da es im neuesten Standard veraltet (und nicht unterstützt) ist.</span> <span>Um den gleichen Effekt wie bei </span></span> {{htmlattrxref("char", "col")}} <span lang="de"><span> zu erzielen, können Sie in CSS3 den Zeichensatz mit dem </span></span> {{htmlattrxref("char", "col")}} <span lang="de"><span> Attribut als</span> <span>Wert der Eigenschaft </span></span> {{cssxref("text-align")}} <span lang="de"><span> einsetzen.</span></span></div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd><span id="result_box" lang="de"><span>Dieses Attribut gibt die Anzahl der Zeichen an, die die Spaltendaten von den vom char-Attribut angegebenen Ausrichtungszeichen versetzen sollen</span></span> + <div class="note"><strong><u>Anmerkung</u>: </strong><span id="result_box" lang="de"><span>Verwenden Sie dieses Attribut nicht, da es im aktuellen Standard veraltet (und nicht unterstützt) ist.</span></span></div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("span")}}</dt> + <dd><span id="result_box" lang="de"><span>Dieses Attribut enthält eine positive ganze Zahl, die die Anzahl aufeinanderfolgender Spalten angibt, die das <code><col></code> -Element überspannt.</span> <span>Wenn nicht vorhanden, ist der Standardwert <code>1</code>.</span></span></dd> +</dl> + +<dl> + <dt>{{htmlattrdef("valign")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd><span id="result_box" lang="de"><span>Dieses Attribut gibt die vertikale Ausrichtung des Texts in jeder Zelle der Spalte an.</span> <span>Mögliche Werte für dieses Attribut sind:</span></span></dd> + <dd> + <ul> + <li><code>baseline</code>, <span id="result_box" lang="de"><span>setzt</span></span><span lang="de"><span> den Text so nahe wie möglich an den unteren Rand der Zelle , richtet ihn aber an der Grundlinie der Zeichen anstatt am unteren Rand aus.</span> <span>Wenn alle Zeichen dieselbe Größe haben, hat dies den gleichen Effekt wie</span></span> <code>bottom</code></li> + <li><code>bottom</code>, setzt<span lang="de"><span> den Text so nahe wie möglich an den unteren Rand der Zelle</span></span></li> + <li><code>middle</code>, zentriert den Text in der Zelle</li> + <li><code>top</code>, <span id="result_box" lang="de"><span>setzt den Text so nahe wie möglich an den oberen Rand der Zelle</span></span></li> + </ul> + + <div class="note"><strong><u>Anmerkung</u>: </strong><span id="result_box" lang="de"><span>Verwenden Sie dieses Attribut nicht, da es im neuesten Standard veraltet (und nicht unterstützt) ist:</span></span> + + <ul> + <li><span id="result_box" lang="de"><span>Versuchen Sie nicht, die Eigenschaft {{cssxref ("vertical-align")}} in einem Selektor festzulegen, der ein HTMLElement <col> enthält.</span> <span>Da das</span></span> {{HTMLElement("td")}}-Element <span lang="de"><span> nicht vom</span></span> {{HTMLElement("col")}}-Element <span lang="de"><span>abhängt, werden sie nicht vererbt</span></span>.</li> + <li><span id="result_box" lang="de"><span>Wenn die Tabelle kein </span></span> {{htmlattrxref("colspan", "td")}}<span lang="de"><span> - Attribut verwendet, verwenden Sie den CSS-Selektor <code>td: nth-child (an + b)</code>, wobei a die Gesamtanzahl der Spalten in der Tabelle ist</span> <span>und b ist die Ordnungsposition der Spalte in der Tabelle.</span> <span>Erst nach diesem Selektor kann die Eigenschaft cssxref </span></span> {{cssxref("vertical-align")}} <span lang="de"><span> verwendet werden.</span></span></li> + <li><span id="result_box" lang="de"><span>Wenn die Tabelle ein </span></span> {{htmlattrxref("colspan", "td")}}<span lang="de"><span>- Attribut verwendet, kann der Effekt durch Kombination geeigneter CSS-Attributselektoren wie <code>[colspan = n]</code> erzielt werden, obwohl dies nicht trivial ist.</span></span></li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("width")}} {{obsolete_inline("html5")}}</dt> + <dd><span id="result_box" lang="de"><span>Dieses Attribut gibt eine Standardbreite für jede Spalte in der aktuellen Spaltengruppe an.</span> <span>Zusätzlich zu den Standardpixel- und -prozentwerten kann dieses Attribut das Sonderformat <code>0 *</code> annehmen, was bedeutet, dass die Breite jeder Spalte in der Gruppe die minimale Breite sein sollte, die erforderlich ist, um den Inhalt der Spalte aufzunehmen.</span> <span>Relative Breiten wie <code>0,5 *</code> können ebenfalls verwendet werden.</span></span></dd> +</dl> + +<h2 id="Beispiel"><span class="short_text" id="result_box" lang="de"><span>Beispiel</span></span></h2> + +<p><span id="result_box" lang="de"><span>Auf der Seite </span></span> {{HTMLElement("table")}} <span lang="de"><span> finden Sie Beispiele für <code><col></code>.</span></span></p> + +<h2 id="Spezifikationen"><span class="short_text" id="result_box" lang="de"><span>Spezifikationen</span></span></h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'tables.html#the-col-element', '<col>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-col-element', '<col>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/tables.html#h-11.2.4.2', '<col>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Initiale Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + +<div class="hidden"><span id="result_box" lang="de"><span>Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert.</span> <span>Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte</span></span> <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> <span id="result_box" lang="de"><span>und senden Sie uns eine Pull-Anfrage</span></span>.</div> + +<p>{{Compat("html.elements.col")}}</p> + +<h2 id="Siehe_auch"><span class="short_text" id="result_box" lang="de"><span>Siehe auch</span></span></h2> + +<ul> + <li><span id="result_box" lang="de"><span>Andere tabellenbezogene HTML-Elemente: </span></span> {{HTMLElement("caption")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};</li> + <li><span id="result_box" lang="de"><span>CSS-Eigenschaften und Pseudoklassen, die besonders nützlich sein können, um das <code><col></code> -Element zu formatieren:</span></span> + <ul> + <li><span id="result_box" lang="de"><span>Die Eigenschaft </span></span> {{cssxref("width")}} <span lang="de"><span>, um die Breite der Spalte zu steuern;</span></span></li> + <li><span id="result_box" lang="de"><span>Die Pseudoklasse </span></span> {{cssxref(":nth-child")}} <span lang="de"><span>, um die Ausrichtung auf die Zellen der Spalte festzulegen;</span></span></li> + <li><span id="result_box" lang="de"><span>Die </span></span> {{cssxref("text-align")}} <span lang="de"><span> -Eigenschaft, um den Inhalt aller Zellen auf dasselbe Zeichen wie '.'.</span></span></li> + </ul> + </li> +</ul> diff --git a/files/de/web/html/element/data/index.html b/files/de/web/html/element/data/index.html new file mode 100644 index 0000000000..49f4d271b0 --- /dev/null +++ b/files/de/web/html/element/data/index.html @@ -0,0 +1,90 @@ +--- +title: <data> +slug: Web/HTML/Element/data +translation_of: Web/HTML/Element/data +--- +<p><span id="result_box" lang="de"><span>Das HTML <data> -Element verknüpft einen gegebenen Inhalt mit einer maschinenlesbaren Übersetzung.</span> <span>Wenn der Inhalt zeit- oder datumsbezogen ist, muss das Element HTMLElement <time> verwendet werden.</span></span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Inhaltsverzeichnis</th> + <td>fließender Inhalt, gestaltender Inhalt, eindeutiger Inhalt.</td> + </tr> + <tr> + <th scope="row">Erlaubter Inhalt</th> + <td>gestaltender Inhalt.</td> + </tr> + <tr> + <th scope="row">Schlagwort Wegfall</th> + <td>Keiner</td> + </tr> + <tr> + <th scope="row">Erlaubte Eltern</th> + <td>Alle Elemente die ein gestaltenden Inhalt haben.</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>domxref("HTMLDataElement")</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes">Attributes</h2> + +<p><span id="result_box" lang="de"><span>Die Attribute dieses Elements enthalten die globalen Attribute.</span></span></p> + +<dl> + <dt>htmlattrdef("value")</dt> + <dd><span id="result_box" lang="de"><span>Dieses Attribut gibt die maschinenlesbare Übersetzung des Inhalts des Elements an.</span></span></dd> +</dl> + +<h2 id="Beispiel"><span class="short_text" id="result_box" lang="de"><span>Beispiel</span></span></h2> + +<p><span id="result_box" lang="de"><span>Das folgende Beispiel zeigt Produktnamen an, ordnet jedoch jedem Namen eine Produktnummer zu.</span></span></p> + +<pre class="brush: html"><p>New Products</p> +<ul> + <li><data value="398">Mini Ketchup</data></li> + <li><data value="399">Jumbo Ketchup</data></li> + <li><data value="400">Mega Jumbo Ketchup</data></li> +</ul> +</pre> + +<h2 id="Spezifikationen"><span class="short_text" id="result_box" lang="de"><span>Spezifikationen</span></span></h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>SpecName('HTML WHATWG', 'semantics.html#the-data-element', '<data>')</td> + <td>Spec2('HTML WHATWG')</td> + <td>No change from SpecName('HTML5 W3C')</td> + </tr> + <tr> + <td>SpecName('HTML5 W3C', 'text-level-semantics.html#the-data-element', '<data>')</td> + <td>Spec2('HTML5 W3C')</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div class="hidden"><span id="result_box" lang="de"><span>Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert.</span> <span>Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte https://github.com/mdn/browser-compat-data und senden Sie uns eine Pull-Anfrage.</span></span></div> + +<p>Compat("html.elements.data")</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The HTML HTMLElement <time> element.</li> +</ul> + +<p>HTMLRef</p> diff --git a/files/de/web/html/element/datalist/index.html b/files/de/web/html/element/datalist/index.html new file mode 100644 index 0000000000..ebb2ea5cbf --- /dev/null +++ b/files/de/web/html/element/datalist/index.html @@ -0,0 +1,106 @@ +--- +title: <datalist> +slug: Web/HTML/Element/datalist +tags: + - HTML + - HTML Formulare + - HTML5 + - Referenz + - Web +translation_of: Web/HTML/Element/datalist +--- +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>Das <strong>HTML <span style="font-family: courier new;"><datalist></span> Element</strong> enthält eine Liste von {{HTMLElement("option")}} Elementen, die mögliche Optionen für den Wert eines anderen Elementes repräsentieren.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/de/docs/HTML/Content_categories" title="HTML/Inhaltskategorien">Inhaltskategorien</a></th> + <td><a href="/de/docs/HTML/Content_categories#Flow_content" title="HTML/Inhaltskategorien#Flussinhalt">Flussinhalt</a>, <a href="/de/docs/HTML/Content_categories#Phrasing_content" title="HTML/Inhaltskategorien#Textinhalt">Textinhalt</a>.</td> + </tr> + <tr> + <th scope="row">Erlaubter Inhalt</th> + <td>Entweder <a href="/de/docs/HTML/Content_categories#Phrasing_content" title="HTML/Inhaltskategorien#Textinhalt">Textinhalt</a> oder null oder mehr {{HTMLElement("option")}} Elemente.</td> + </tr> + <tr> + <th scope="row">Tag-Auslassung</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Erlaubte Eltern-Elemente</th> + <td>Alle Elemente, die <a href="/de/docs/HTML/Content_categories#Phrasing_content" title="HTML/Inhaltskategorien#Textinhalt">Textinhalt</a> akzeptieren.</td> + </tr> + <tr> + <th scope="row">DOM-interface</th> + <td>{{domxref("HTMLDataListElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p><span style="line-height: 21px;">Dieses Element verfügt nur über die </span><a href="https://developer.mozilla.org/de/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Globale Attribute">globalen Attribute</a><span style="line-height: 21px;">.</span></p> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: html"><label for="myBrowser">Gib einen Browsernamen ein:</label> +<input list="browsers" id="myBrowser" name="myBrowser" /> +<datalist id="browsers"> + <option value="Chrome"> + <option value="Firefox"> + <option value="Internet Explorer"> + <option value="Opera"> + <option value="Safari"> +</datalist> +</pre> + +<p>{{EmbedLiveSample("Beispiele")}}</p> + +<p>Dieses HTML wird in Firefox 4 folgendermaßen gerendert:</p> + +<p><img alt="datalist.png" class="default internal" src="/@api/deki/files/4982/=datalist.png"></p> + +<h2 id="Specifications" name="Specifications">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-datalist-element', '<datalist>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'the-datalist-element.html#the-datalist-element', '<datalist>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + + + +<p>{{Compat("html.elements.datalist")}}</p> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Der folgende Polyfill wurde für den Support für ältere oder derzeit noch inkompatible Browser entwickelt:<br> + <a href="https://github.com/mfranzke/datalist-polyfill">datalist-polyfill</a></p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li class="last">Das {{HTMLElement("input")}} Element, und noch genauer sein {{htmlattrxref("list", "input")}} Attribut;</li> + <li class="last">Das {{HTMLElement("option")}} Element.</li> +</ul> + +<p class="last">{{HTMLRef}}</p> diff --git a/files/de/web/html/element/dd/index.html b/files/de/web/html/element/dd/index.html new file mode 100644 index 0000000000..503b72751a --- /dev/null +++ b/files/de/web/html/element/dd/index.html @@ -0,0 +1,140 @@ +--- +title: <dd> +slug: Web/HTML/Element/dd +tags: + - Element + - HTML + - HTML Gruppierungsinhalt + - Referenz + - Web +translation_of: Web/HTML/Element/dd +--- +<h2 id="Übersicht">Übersicht</h2> + +<p>Das <strong>HTML <code><dd></code> Element</strong> (oder <em>HTML Description Element</em>) indiziert die Beschreibung eines Begriffes innerhalb einer Description List ({{HTMLElement("dl")}} Element). Dieses Element kann nur als Kindelement auftreten und muss einem {{HTMLElement("dt")}} Element folgen.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorien</a></th> + <td>Keine.</td> + </tr> + <tr> + <th scope="row">Erlaubter Inhalt</th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">Fließender Inhalt</a>.</td> + </tr> + <tr> + <th scope="row">Tag Auslassung</th> + <td>Muss ein Start-Tag haben. Das End-Tag kann ausgelassen werden, wenn es direkt von einem <code><dd></code> Element gefolgt wird oder es keinen Inhalt im Elternelement mehr gibt.</td> + </tr> + <tr> + <th scope="row">Erlaubte Elternelemente</th> + <td>Nach einem {{HTMLElement("dt")}} Element oder einem <code><dl></code> Element, innerhalb eines {{HTMLElement("dl")}} Elements.</td> + </tr> + <tr> + <th scope="row">DOM Schnittstelle</th> + <td>{{domxref("HTMLElement")}} Bis einschließlich Gecko 1.9.2 (Firefox 4) hat Firefox die <a href="/en-US/docs/DOM/span" title="DOM/span"><span style="font-family: courier new;">HTMLSpanElement</span></a> Schnittstelle für dieses Element implementiert.</td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p><span style="line-height: 21px;">Dieses Element schließt </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globale Attribute</a><span style="line-height: 21px;"> ein.</span></p> + +<dl> + <dt>{{htmlattrdef("nowrap")}} {{Non-standard_inline}}</dt> + <dd>Wenn der Wert dieses Attributs auf <code>yes</code> steht, wird der Definitionstext nicht umbrechen. Der Standardwert für dieses Attribut lautet <code>no</code>.</dd> +</dl> + +<h2 id="Beispiel">Beispiel</h2> + +<p>Siehe <a href="/en-US/docs/HTML/Element/dl#examples" title="HTML/Element/dl#examples"><dl> Beispiele</a>.</p> + +<h2 id="Specifications" name="Specifications">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-dd-element', '<dd>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-dd-element', '<dd>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '<dd>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{HTMLELement("dl")}} Element</li> + <li>{{HTMLElement("dt")}} Element</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/de/web/html/element/del/index.html b/files/de/web/html/element/del/index.html new file mode 100644 index 0000000000..37a96da6df --- /dev/null +++ b/files/de/web/html/element/del/index.html @@ -0,0 +1,124 @@ +--- +title: <del> +slug: Web/HTML/Element/del +tags: + - Element + - HTML + - HTML edits + - Referenz + - Web +translation_of: Web/HTML/Element/del +--- +<div>{{HTMLRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Das <strong>HTML <code><del> E</code>lement</strong> (oder <em>HTML Deleted Text Element</em>) repräsentiert eine Textmenge, die aus einem Dokument gelöscht wurde. Dieses Element wird oftmals als durchgestrichener Text dargestellt.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorien</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">Formulierungsinhalt</a> oder <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">fließender Inhalt</a>.</td> + </tr> + <tr> + <th scope="row">Erlaubter Inhalt</th> + <td><a href="/en-US/docs/HTML/Content_categories#Transparent" title="HTML/Content categories#Transparent">Transparent</a>.</td> + </tr> + <tr> + <th scope="row">Tag Auslassung</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Erlaubte Elternelemente</th> + <td>Jedes Element, dass <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Formulierungsinhalt</a> erlaubt.</td> + </tr> + <tr> + <th scope="row">DOM Schnittstelle</th> + <td>{{domxref("HTMLModElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p><span style="line-height: 21px;">Dieses Element schließt </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globale Attribute</a><span style="line-height: 21px;"> ein.</span></p> + +<dl> + <dt>{{htmlattrdef("cite")}}</dt> + <dd>Eine URI als Quelle, die erläutert, warum der Text geändert wurde.</dd> + <dt>{{htmlattrdef("datetime")}}</dt> + <dd>Dieses Attribut indiziert das Datum und die Uhrzeit, wann der Text geändert wurde und muss ein <a class="external" href="http://www.w3.org/TR/html5/common-microsyntaxes.html#valid-date-string-with-optional-time" title="http://www.w3.org/TR/html5/common-microsyntaxes.html#valid-date-string-with-optional-time">gültiges Datum mit optionaler Uhrzeitangabe</a> sein. Wenn der Wert nicht als Datum mit optionaler Zeitangabe erkannt werden kann, hat dieses Element keinen Bezug zur Zeit.</dd> +</dl> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: html"><p><del>Dieser Text wurde gelöscht.</del></p></pre> + +<h3 id="Ergebnis">Ergebnis</h3> + +<div><del>Dieser Text wurde gelöscht.</del></div> + +<h2 id="Specifications" name="Specifications"> </h2> + +<h2 id="Specifications" name="Specifications">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'edits.html#the-del-element', '<del>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'edits.html#the-del-element', '<del>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.4', '<del>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{HTMLElement("ins")}} Element für das Einfügen in einen Text.</li> +</ul> diff --git a/files/de/web/html/element/details/index.html b/files/de/web/html/element/details/index.html new file mode 100644 index 0000000000..9f8786b656 --- /dev/null +++ b/files/de/web/html/element/details/index.html @@ -0,0 +1,97 @@ +--- +title: <details> +slug: Web/HTML/Element/details +tags: + - Element + - HTML + - HTML interactive Elemente + - HTML5 + - Referenz + - Web +translation_of: Web/HTML/Element/details +--- +<h2 id="Übersicht">Übersicht</h2> + +<p>Das <strong>HTML <code><details> </code>Element</strong> wird genutzt für Auskünfte, damit Benutzer zusätzliche Informationen erhalten können.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Inhaltskategorien</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Fließender Inhalt</a>, Sektionsursprung, interaktiver Inhalt, greifbarer Inhalt.</td> + </tr> + <tr> + <th scope="row">Erlaubter Inhalt</th> + <td>Ein {{HTMLElement("summary")}} Element gefolgt von <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">fließenden Inhalt</a>.</td> + </tr> + <tr> + <th scope="row">Tag Auslassung</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Erlaubte Elternelemente</th> + <td>Jedes Element, dass <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">fließenden Inhalt</a> erlaubt.</td> + </tr> + <tr> + <th scope="row">DOM Schnittstelle</th> + <td>{{domxref("HTMLDetailsElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p>Dieses Element schließt <a href="/en-US/docs/Web/HTML/Global_attributes">globale Attribute</a> ein.</p> + +<dl> + <dt>{{htmlattrdef("open")}}</dt> + <dd>Dieses Boolesche Attribut indiziert, ob die Details dem Benutzer beim Laden der Seite angezeigt werden. Standardmäßig steht dieser Wert auf 'false', sodass die Details versteckt sind.</dd> +</dl> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: html"><details> + <summary>Some details</summary> + <p>More info about the details.</p> +</details> +</pre> + +<h3 id="Live_Beispiel">Live Beispiel</h3> + +<p>{{EmbedLiveSample("Beispiel")}}</p> + +<h2 id="Specifications" name="Specifications">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'interactive-elements.html#the-details-element', '<details>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'the-details-element.html#the-details-element', '<details>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{Compat("html.elements.details")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{HTMLElement("summary")}} Element</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/de/web/html/element/dialog/index.html b/files/de/web/html/element/dialog/index.html new file mode 100644 index 0000000000..d08899bdad --- /dev/null +++ b/files/de/web/html/element/dialog/index.html @@ -0,0 +1,206 @@ +--- +title: <dialog> +slug: Web/HTML/Element/dialog +tags: + - Dialog + - Element + - Experimentell + - HTML + - HTML interaktive Elemente + - Referenz + - Web +translation_of: Web/HTML/Element/dialog +--- +<p>{{ SeeCompatTable() }}</p> + +<h2 id="Summary" name="Summary">Zusammenfassung</h2> + +<p>Das <strong>HTML <code><dialog></code> element</strong> stellte einen Dialog oder eine andere interaktive Komponente, so wie ein Fenster oder Unterfenster, dar. <code><form></code> Elemente können in einen Dialog Integriert werden in dem sie mit dem Attribut <code>method="dialog"</code> angegeben werden. Wenn eine solches Formular übertragen (submit) wird, wird der Dialog mit dem Rückgabewert (<code>returnValue</code> ) des <code>value</code> Attributes am benutzten Submit Button geschlossen.</p> + +<p>Das {{cssxref('::backdrop')}} CSS pseudo-element kann benutzt werden um Elemente hinter dem <code><dialog></code> Element zu verändern; So kann beispielsweise der Hintergrund abgedunkelt werden.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document#Sectioning_roots">sectioning root</a></td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a></td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th>Permitted parent elements</th> + <td>Jedes Element, das <a href="/en-US/docs/HTML/Content_categories#Flow_content">flow content</a> akzeptiert</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLDialogElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">Attribute</h2> + +<p>An diesem Element können die <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">Globalen Attribute</a> verwendet werden. Das <code>tabindex</code> Attribut darf am <code><dialog></code> Element nicht benutzt werden.</p> + +<dl> + <dt>{{htmlattrdef("open")}}</dt> + <dd>Der Dialog ist nach dem Laden des Dokumentes bereits geöffnet und aktiv. Ist das Attribut nicht gesetzt, so wird der Dialog nicht angezeigt.</dd> +</dl> + +<h2 id="Examples" name="Examples">Beispiele</h2> + +<h3 id="Beispiel_1">Beispiel 1</h3> + +<pre class="brush: html"><dialog open> + <p>Greetings, one and all!</p> +</dialog> +</pre> + +<h3 id="Beispiel_2">Beispiel 2</h3> + +<pre class="brush: html"><!-- Simple pop-up dialog box, containing a form --> +<dialog id="favDialog"> + <form method="dialog"> + <section> + <p><label for="favAnimal">Favorite animal:</label> + <select id="favAnimal" name="favAnimal"> + <option></option> + <option>Brine shrimp</option> + <option>Red panda</option> + <option>Spider monkey</option> + </select></p> + </section> + <menu> + <button id="cancel" type="reset">Cancel</button> + <button type="submit">Confirm</button> + </menu> + </form> +</dialog> + +<menu> + <button id="updateDetails">Update details</button> +</menu> + +<script> + (function() { + var updateButton = document.getElementById('updateDetails'); + var cancelButton = document.getElementById('cancel'); + var favDialog = document.getElementById('favDialog'); + + // Update button opens a modal dialog + updateButton.addEventListener('click', function() { + favDialog.showModal(); + }); + + // Form cancel button closes the dialog box + cancelButton.addEventListener('click', function() { + favDialog.close(); + }); + + })(); +</script> +</pre> + +<h2 id="Specifications" name="Specifications">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-dialog-element', '<dialog>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'interactive-elements.html#the-dialog-element', '<dialog>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>37</td> + <td>{{CompatNo()}} {{bug(840640)}}</td> + <td>{{CompatNo()}}</td> + <td>24</td> + <td>{{CompatNo()}}</td> + </tr> + <tr> + <td>Anchor points</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>Android Browser 37</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + </tr> + <tr> + <td>Anchor points</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_Auch">Siehe Auch</h2> + +<ul> + <li><a href="/en-US/docs/Web/Guide/HTML/Forms" title="/en-US/docs/Web/Guide/HTML/Forms">HTML forms guide</a>.</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/de/web/html/element/dir/index.html b/files/de/web/html/element/dir/index.html new file mode 100644 index 0000000000..092f9b8a4c --- /dev/null +++ b/files/de/web/html/element/dir/index.html @@ -0,0 +1,44 @@ +--- +title: <dir> +slug: Web/HTML/Element/dir +tags: + - Element + - HTML + - Obsolete + - Referenz + - Web +translation_of: Web/HTML/Element/dir +--- +<div> + {{Obsolete_header()}}</div> +<h2 id="Übersicht">Übersicht</h2> +<p>Das <em>HTML directory Element</em> (<code><dir></code>) repräsentiert ein Verzeichnis, namentlich eine Sammlung von Dateinamen.</p> +<div class="note"> + <strong>Hinweis zur Benutzung: </strong>Dieses Element sollte nicht mehr verwendet werden. In den frühen HTML Spezifikationen, genauer gesagt seit HTML4, ist dieses Element veraltet und in <a href="/en-US/docs/Web/Guide/HTML/HTML5" title="/en-US/docs/Web/Guide/HTML/HTML5">HTML5</a> somit obsolet. Es sollte das {{HTMLElement("ul")}} Element stattdessen verwendet werden.</div> +<h2 id="DOM_Schnittstelle">DOM Schnittstelle</h2> +<p>Dieses Element implementiert die {[domxref("HTMLDirectoryElement")}} Schnittstelle.</p> +<h2 id="Attribute">Attribute</h2> +<p>Dieses Element schließt <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">globale Attribute</a> ein.</p> +<dl> + <dt> + {{htmlattrdef("compact")}}</dt> + <dd> + Dieses Boolesche Attribut verweist darauf, ob die angezeigte Liste kompakt dargestellt werden soll. Die Interpretation dieses Attributs ist abhängig vom sogenannten User Agent und funktioniert nicht in allen Browsern.<br> + <div class="note"> + <strong>Hinweis zur Benutzung: </strong>Dieses Attribut sollte nicht mehr verwendet werden, seit dem es veraltet ist. Das {{HTMLElement("dir")}} Element sollte mit Hilfe von <a href="/en-US/docs/CSS" title="CSS">CSS</a> designt werden. Um einen ähnlichen Effekt wie das <code>compact</code> Attribut zu erreichen, kann die <a href="/en-US/docs/CSS" title="CSS">CSS</a> Eigenschaft {{cssxref("line-height")}} mit einem Wert von <code>80%</code> genutzt werden.</div> + </dd> +</dl> +<h2 id="Siehe_auch">Siehe auch</h2> +<ul> + <li>Andere Listen-basierte HTML Elemente: {{HTMLElement("ol")}}, {{HTMLElement("ul")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}};</li> + <li>CSS Eigenschaft die besonders wertvoll sein könnten, um das <code><dir></code> Element zu stylen: + <ul> + <li>Die {{cssxref('list-style')}} Eigenschaft, nützlich um die Art des Ranks darzustellen.</li> + <li><a href="/en-US/docs/CSS_Counters" title="CSS_Counters">CSS counters</a>, nützlich um mit komplexen verschachtelten Listen zu arbeiten.</li> + <li>Die {{Cssxref('line-height')}} Eigenschaft, nützlich um das {{htmlattrxref("compact", "dir")}} Attribut zu imitieren.</li> + <li>Die {{cssxref('margin')}} Eigenschaft, nützlich um die Einrückung zu kontrollieren.</li> + </ul> + </li> +</ul> +<div> + {{HTMLRef}}</div> diff --git a/files/de/web/html/element/div/index.html b/files/de/web/html/element/div/index.html new file mode 100644 index 0000000000..b56ea2b22c --- /dev/null +++ b/files/de/web/html/element/div/index.html @@ -0,0 +1,117 @@ +--- +title: <div> +slug: Web/HTML/Element/div +tags: + - Element + - HTML + - HTML Gruppierungsinhalt + - 'HTML:Flow content' + - Referenz + - Web +translation_of: Web/HTML/Element/div +--- +<div>{{HTMLRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Das <a href="/de/docs/Web/HTML">HTML</a>-Element<strong> <code><div></code></strong> (Englisch: <em>HTML Document Division Element</em>) ist ein allgemeiner Container für fließenden Inhalt, dem keine semantische Bedeutung zugeordnet wird.</p> + +<p>Der wesentliche Unterschied zwischen <code><div></code> und anderen Block-Elementen wie beispielsweise {{HTMLElement("article")}} oder {{HTMLElement("p")}} ist die semantische Bedeutung bzw. das Fehlen dieser. Während <code><article></code> einen Artikel, einen eigenständigen Bereich eines Dokuments darstellt und <code><p></code> einen Textabsatz, gibt <code><div></code> seinem Inhalt keine Bedeutung.<br> + <code><div></code> sollte deshalb nur genutzt werden, falls kein anderes Block-Element eine zutreffendere Aussage macht.</p> + +<p>Der Einsatzbereich von <code><div></code> ist die Gruppierung von Elementen alleine zum Zweck der Gestaltung oder des programmatischen Zugriffs (mit Hilfe des <strong>class</strong>- oder <strong>id</strong>-Attributs), oder weil sie die gleichen Attribut-Werte besitzen, wie zum Beispiel das Attribut <strong>lang</strong>.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorien</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Fließender Inhalt</a>, greifbarer Inhalt.</td> + </tr> + <tr> + <th scope="row">Erlaubter Inhalt</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Fließender Inhalt</a>.</td> + </tr> + <tr> + <th scope="row">Tag Auslassung</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Erlaubte Elternelemente</th> + <td>Jedes Element, dass <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">fließenden Inhalt</a> erlaubt.</td> + </tr> + <tr> + <th scope="row">DOM-Schnittstelle</th> + <td>{{domxref("HTMLDivElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p>Dieses Element unterstützt nur die <a href="/en-US/docs/Web/HTML/Global_attributes">globalen Attribute</a>, insbesondere {{htmlattrxref("class")}} und {{htmlattrxref("id")}}.</p> + +<p>{{HTMLVersionInline(5)}} {{obsolete_inline}} Das <strong>align</strong>-Attribut ist für <code><div></code>-Elemente nicht mehr zulässig.</p> + +<h2 id="Beispiel">Beispiel</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="beispiel"> + <p>Dies ist ein sehr interessanter Hinweis + in einem hübsch dekorierten Kasten. + </p> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.beispiel { + width: 15em; + border: 1px solid #333; + box-shadow: 8px 8px 5px #444; + padding: 8px 12px; + background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc); +}</pre> + +<h3 id="Ergebnis">Ergebnis</h3> + +<p>{{EmbedLiveSample("Beispiel", 650, 60)}}</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-div-element', '<div>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-div-element', '<div>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.4', '<div>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Semantische Sektionselemente: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}</li> + <li>{{HTMLElement("span")}} Element für die Darstellung von Formulierungsinhalten</li> +</ul> diff --git a/files/de/web/html/element/dl/index.html b/files/de/web/html/element/dl/index.html new file mode 100644 index 0000000000..7145a49a1d --- /dev/null +++ b/files/de/web/html/element/dl/index.html @@ -0,0 +1,222 @@ +--- +title: <dl> +slug: Web/HTML/Element/dl +tags: + - Element + - HTML + - HTML Gruppierungsinhalt + - Referenz + - Web +translation_of: Web/HTML/Element/dl +--- +<p>Das <strong>HTML <code><dl></code> Element</strong> (oder <em>HTML</em> <em>Description List Element</em>) umfasst eine Liste von Begriffspaaren und Beschreibungen. Üblicherweise wird das Element zur Implementierung eines Glossars oder zur Anzeige von Metadaten (eine Liste von Schlüsselwertpaaren) genutzt.</p> + +<p>Vor HTML5, war <dl> bekannt als Definition List.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorien</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Fließender Inhalt</a>, wenn das <code><dl></code> Elementkind nur ein Wertepaar beinhaltet, dann greifbarer Inhalt.</td> + </tr> + <tr> + <th scope="row">Erlaubter Inhalt</th> + <td>Null oder mehr {{HTMLElement("dt")}} Elemente, jedes gefolgt von einem oder mehreren {{HTMLElement("dd")}} Elementen.</td> + </tr> + <tr> + <th scope="row">Tag Auslassung</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Erlaubte Elternelemente</th> + <td>Jedes Element, das <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">fließenden Inhalt</a> erlaubt.</td> + </tr> + <tr> + <th scope="row">DOM Schnittstelle</th> + <td>{{domxref("HTMLDListElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p><span style="line-height: 21px;">Dieses Element schließt </span><a href="/de/docs/Web/HTML/Globale_Attribute" style="line-height: 21px;" title="HTML/Global attributes">globale Attribute</a><span style="line-height: 21px;"> ein.</span></p> + +<dl> + <dt>{{htmlattrdef("compact")}} {{Non-standard_inline}}</dt> + <dd>Zwingt die Beschreibung dazu, in derselben Linie zu erscheinen wie der Begriff. Dieses Attribut wird aktuell nicht unterstützt.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Einzelbegriff_und_Beschreibung">Einzelbegriff und Beschreibung</h3> + +<pre class="brush: html"><dl> + <dt>Firefox</dt> + <dd>A free, open source, cross-platform, graphical web browser + developed by the Mozilla Corporation and hundreds of volunteers.</dd> + + <!-- other terms and definitions --> +</dl> +</pre> + +<p>Ausgabe:</p> + +<p><img alt="Image:HTML-dl1.png" src="/@api/deki/files/241/=HTML-dl1.png"></p> + +<h3 id="Multiple_Begriffe_einzelne_Beschreibung">Multiple Begriffe, einzelne Beschreibung</h3> + +<pre class="brush: html"><dl> + <dt>Firefox</dt> + <dt>Mozilla Firefox</dt> + <dt>Fx</dt> + <dd>A free, open source, cross-platform, graphical web browser + developed by the Mozilla Corporation and hundreds of volunteers.</dd> + + <!-- other terms and definitions --> +</dl> +</pre> + +<p>Ausgabe:</p> + +<p><img alt="Image:HTML-dl2.png" src="/@api/deki/files/242/=HTML-dl2.png"></p> + +<h3 id="Einzelbegriff_multiple_Beschreibungen">Einzelbegriff, multiple Beschreibungen</h3> + +<pre class="brush: html"><dl> + <dt>Firefox</dt> + <dd>A free, open source, cross-platform, graphical web browser + developed by the Mozilla Corporation and hundreds of volunteers.</dd> + <dd>The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox, + is a mostly herbivorous mammal, slightly larger than a domestic cat + (60 cm long).</dd> + + <!-- other terms and definitions --> +</dl> +</pre> + +<p>Ausgabe:</p> + +<p><img alt="Image:HTML-dl3.png" src="/@api/deki/files/243/=HTML-dl3.png"></p> + +<h3 id="Multiple_Begriffe_und_Beschreibungen">Multiple Begriffe und Beschreibungen</h3> + +<p>Es ist ebenfalls möglich, multiple Begriffe und Beschreibungen zu definieren, wenn man die oberen Beispiele kombiniert.</p> + +<h3 id="Metadata">Metadata</h3> + +<p>Description Lists sind nützlich um Metadaten als Wertepaar-Listen anzuzeigen.</p> + +<pre><dl> + <dt>Name</dt> + <dd>Godzilla</dd> + <dt>Born</dt> + <dd>1952</dd> + <dt>Birthplace</dt> + <dd>Japan</dd> + <dt>Color</dt> + <dd>Green</dd> +</dl> +</pre> + +<p>Tipp: Es kann hilfreich sein, Separatoren für Schlüsselwerte in CSS3 zu definieren, wie zum Beispiel:</p> + +<div> +<pre class="brush: css">dt:after { + content: ": "; +}</pre> +</div> + +<h2 id="Anmerkungen">Anmerkungen</h2> + +<p>Weder dieses Element, noch das {{HTMLElement("ul")}} Element, sollten genutzt werden, um bloß eine Einrückung vorzunehmen. Es funktioniert zwar, wird in der Praxis jedoch nicht angewendet und verfehlt die Definition einer Description List.</p> + +<p>Um die Einrückung eines Begriffs zu ändern, sollte die <a href="/de/docs/Web/CSS" title="CSS">CSS</a> {{cssxref("margin")}} Eigenschaft genutzt werden.</p> + +<h2 id="Specifications" name="Specifications">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-dl-element', '<dl>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-dl-element', '<dl>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '<dl>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Kompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{HTMLElement("dt")}} Element</li> + <li>{{HTMLElement("dd")}} Element</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/de/web/html/element/dt/index.html b/files/de/web/html/element/dt/index.html new file mode 100644 index 0000000000..769ab49a25 --- /dev/null +++ b/files/de/web/html/element/dt/index.html @@ -0,0 +1,135 @@ +--- +title: <dt> +slug: Web/HTML/Element/dt +tags: + - Element + - HTML + - HTML Gruppierungsinhalt + - Referenz + - Web +translation_of: Web/HTML/Element/dt +--- +<h2 id="Übersicht">Übersicht</h2> + +<p>Das <strong>HTML <code><dt></code> Element</strong> (oder HTML Definition Term Element) identifiziert einen Begriff in einer Definitionsliste. Dieses Element kann nur als Kindelement eines {{HTMLElement("dl")}} Elements vorkommen. Normalerweise wird es gefolgt von einem {{HTMLElement("dd")}} Element. Mehrere <code><dt></code> Elemente in einer Reihe indizieren verschiedene Begriffe, die jeweils vom nächsten {{HTMLElement("dd")}} Element definiert werden.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorien</a></th> + <td>Keine.</td> + </tr> + <tr> + <th scope="row">Erlaubter Inhalt</th> + <td>{{todo}} <a href="/en-US/docs/HTML/Content_categories#Flowing_content" title="HTML/Content_categories#Phrasing_content">Fließender Inhalt</a>, jedoch ohne {{HTMLElement("header")}}, {{HTMLElement("footer")}}, Sektionsinhalt oder Nachfahren von Kopfinhalten.</td> + </tr> + <tr> + <th scope="row">Tag Auslassung</th> + <td>Muss ein Start-Tag besitzen. Das End-Tag kann ausgelassen werden, vorausgesetzt es folgt direkt ein <code><dd></code> Element oder es gibt keinen weiteren Inhalt im Elternelement.</td> + </tr> + <tr> + <th scope="row">Erlaubte Elternelemente</th> + <td>Vor einem {{HTMLElement("dt")}} oder einem {{HTMLElement("dd")}} Element, innerhalb eines {{HTMLElement("dl")}} Elements.</td> + </tr> + <tr> + <th scope="row">DOM Schnittstelle</th> + <td>{{domxref("HTMLElement")}} Bis einschließlich Gecko 1.9.2 (Firefox 4) hat Firefox die <a href="/en-US/docs/DOM/span" title="DOM/span"><span style="font-family: courier new;">HTMLSpanElement</span></a> Schnittstelle für dieses Element implementiert.</td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p><span style="line-height: 21px;">Dieses Attribut schließt </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globale Attribute</a><span style="line-height: 21px;"> ein.</span></p> + +<h2 id="Beispiel">Beispiel</h2> + +<p>Siehe <a href="/en-US/docs/HTML/Element/dl#Examples" title="HTML/Element/dl#Examples">definition list</a>.</p> + +<h2 id="Specifications" name="Specifications">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-dt-element', '<dt>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-dt-element', '<dt>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '<dt>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{HTMLElement("dd")}} Element</li> + <li>{{HTMLElement("dl")}} Element</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/de/web/html/element/em/index.html b/files/de/web/html/element/em/index.html new file mode 100644 index 0000000000..2ea23affbf --- /dev/null +++ b/files/de/web/html/element/em/index.html @@ -0,0 +1,152 @@ +--- +title: <em> +slug: Web/HTML/Element/em +translation_of: Web/HTML/Element/em +--- +<h2 id="Übersicht">Übersicht</h2> + +<p>Das HTML Element<em> Emphasis</em> <strong><em></strong> stellt das eingeschlossene Wort <em>kursiv</em> dar. Wenn das <strong><code><em></code></strong> ein Nachfahr von <em><strong></em> ist, wird dessen Text sowohl <em>kursiv</em> als auch <strong>fett</strong> dargestellt.</p> + +<div class="note"><strong>Anmerkung:</strong> Normalerweise wird dieses Element in kursiv Schrift angezeigt. Sie können mit CSS jeden Text fett oder kursiv ausgeben und auch die Standartformatierung eines Browsers für die Elemente wie <strong> und <em> überschreiben. Verwenden Sie <cite> Elemente für Zitate oder Quellenverweise. Man nimmt es z.B. für Titel oder Bücher, Namen eines Lieds oder ein Konzert, Theaterstück usw. ; <cite> ist nur für die Quelle gedacht, nicht für das, was Sie daraus zitieren. Verwenden Sie <strong> Element um einen wichtigen Text zu kennzeichnen, während <em> die Betonung vermittelt. Sie verwenden sie je nach inhaltlicher Anforderung einzeln oder zusammen.</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Inhaltsverzeichnis</th> + <td>fließender Inhalt, gestaltender Inhalt, eindeutiger Inhalt</td> + </tr> + <tr> + <th scope="row">Nicht erlaubter Inhalt</th> + <td>Ausdrucksinhalt</td> + </tr> + <tr> + <th scope="row">Tag wegfall</th> + <td>keiner ; kleine Anmerkung= Tag in diesem Sinne heisst "Schlagwort", im Zusammenhang mit HTML belasse ich das Wort TAG im Orginalen, zum besseren Verständnis.</td> + </tr> + <tr> + <th scope="row">Erlaubtes Elternelement</th> + <td> + <p>Alle Elemente die Inhaltsformulierung akzeptieren</p> + </td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implementiert die {{domxref("HTMLSpanElement")}} Schnittstelle für dieses Element.</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes">Attributes</h2> + +<p>Dieses Element beinhaltet nur die <a href="/en-US/docs/Web/HTML/Global_attributes">globalen Eigenschaften</a>.</p> + +<h2 id="Example">Example</h2> + +<p><span id="result_box" lang="de"><span>Das Element <em> wird oft verwendet, um einen impliziten oder expliziten Kontrast anzugeben.</span></span></p> + +<pre class="brush: html"><p> + In HTML 5, what was previously called <em>blockorientiert</em> content is now called <em>dynamisch</em> content. +</p></pre> + +<h3 id="Result" name="Result">Result</h3> + +<p><span id="result_box" lang="de"><span>In HTML 5 wird der Inhalt, der zuvor als <em>blockorientiert</em>er-Inhalt bezeichnet wurde, wird jetzt als <em>dynamisch</em>er-Inhalt bezeichnet.</span></span></p> + +<h2 id="<i>_vs._<em>"><i> vs. <em></h2> + +<p><span id="result_box" lang="de"><span>Es ist für neue Entwickler oft verwirrend, warum es so viele Elemente gibt, um die Betonung auf etwas Text auszudrücken.</span> <span><i> und <em> sind vielleicht eine der häufigsten.</span> <span>Warum sollten Sie <em> </ em> vs <i> </ i> verwenden?</span> <span>Sie produzieren genau das gleiche Ergebnis, nicht wahr?</span></span></p> + +<p><span id="result_box" lang="de"><span>Nicht genau.</span> <span>Das visuelle Ergebnis ist standardmäßig das gleiche - beide Tags(<em>Schlagwörter</em>) rendern den Inhalt kursiv.</span> <span>Aber die semantische Bedeutung ist anders.</span> <span>Das <em> -Tag stellt die Betonung des Inhalts dar, während das <i> -Tag Text darstellt, der von der normalen Prosa abgesetzt wird, wie z. B. der Name eines Films oder Buchs, ein Fremdwort oder wenn sich der Text auf die</span> <span>Definition eines Wortes statt seiner semantischen Bedeutung.</span></span></p> + +<p><span id="result_box" lang="de"><span>Ein Beispiel für <em> könnte lauten: "Just <em>do</em> it already!", oder: "</span></span>We <em>had</em> to do something about it<span lang="de"><span>".</span> <span>Eine Person oder Software, die den Text liest, würde die Wörter in Kursivschrift mit Betonung aussprechen.</span></span></p> + +<p><span id="result_box" lang="de"><span>Ein Beispiel für <i> könnte sein: "</span></span>The <em>Queen Mary</em> sailed last night<span lang="de"><span>".</span> <span>Hier gibt es keine zusätzliche Betonung oder Bedeutung für das Wort "Queen Mary".</span> <span>Es wird lediglich angedeutet, dass es sich nicht um eine Königin namens Mary handelt, sondern um ein Schiff namens Queen Mary.</span> <span>Ein weiteres Beispiel für <i> könnte sein: "</span></span>The word <em>the</em> is an article<span lang="de"><span>"</span></span></p> + +<p> </p> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-em-element', '<em>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-em-element', '<em>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<em>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li>HTMLElement i</li> +</ul> + +<div>HTML Referenz</div> diff --git a/files/de/web/html/element/embed/index.html b/files/de/web/html/element/embed/index.html new file mode 100644 index 0000000000..edbb17c4fe --- /dev/null +++ b/files/de/web/html/element/embed/index.html @@ -0,0 +1,99 @@ +--- +title: <embed> +slug: Web/HTML/Element/embed +translation_of: Web/HTML/Element/embed +--- +<p><span id="result_box" lang="de"><span>Das HTML-Element <embed> stellt einen Integrationspunkt für eine externe Anwendung oder einen interaktiven Inhalt dar (mit anderen Worten ein Plug-in).</span></span></p> + +<p><span id="result_box" lang="de"><span>Hinweis ("Dieses Thema dokumentiert nur das Element, das als Teil von HTML5 definiert ist. Es behandelt keine frühere, nicht standardisierte Implementierung des Elements.")</span></span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Inhaltsverzeichnis</th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Fließender Inhalt</a>, gestaltender Inhalt, eingebundener, interaktiver Inhalt, darstellender Inhalt.</td> + </tr> + <tr> + <th scope="row"><span class="short_text" id="result_box" lang="de"><span>Erlaubter Inhalt</span></span></th> + <td><span class="short_text" id="result_box" lang="de"><span>Keine, es ist ein Glossar ("leeres Element").</span></span></td> + </tr> + <tr> + <th scope="row"><span class="short_text" id="result_box" lang="de"><span>Tag-Auslassung</span></span></th> + <td><span id="result_box" lang="de"><span>Muss ein Start-Tag haben und darf kein End-Tag haben.</span></span></td> + </tr> + <tr> + <th scope="row"><span class="short_text" id="result_box" lang="de"><span>Erlaubte Eltern</span></span></th> + <td><span id="result_box" lang="de"><span>Jedes Element, das eingebetteten Inhalt akzeptiert.</span></span></td> + </tr> + <tr> + <th scope="row"><span class="short_text" id="result_box" lang="de"><span>Zulässige ARIA-Rollen</span></span></th> + <td>ARIARole("application"), ARIARole("document"), ARIARole("img"), ARIARole("presentation")</td> + </tr> + <tr> + <th scope="row">DOM Schnittstelle</th> + <td>domxref("HTMLEmbedElement")</td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p><span id="result_box" lang="de"><span>Die Attribute dieses Elements enthalten die globalen Attribute.</span></span></p> + +<dl> + <dt>htmlattrdef("height")</dt> + <dd><span id="result_box" lang="de"><span>Die angezeigte Höhe der Ressource in CSS-Pixeln.</span> <span>- (nur absolute Werte. KEINE Prozentsätze)</span></span></dd> + <dt>htmlattrdef("src")</dt> + <dd><span class="short_text" id="result_box" lang="de"><span>Die URL der eingebetteten Ressource</span></span></dd> + <dt>htmlattrdef("type")</dt> + <dd><span id="result_box" lang="de"><span>Der zu verwendende MIME-Typ, um das zu instanziierende Plug-In auszuwählen.</span></span></dd> + <dt>htmlattrdef("width")</dt> + <dd><span id="result_box" lang="de"><span>Die angezeigte Breite der Ressource in CSS-Pixeln.</span> <span>- (nur absolute Werte. KEINE Prozentsätze)</span></span></dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: html"><embed type="video/quicktime" src="movie.mov" width="640" height="480"> +</pre> + +<h2 id="Spezifikation">Spezifikation</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>SpecName('HTML WHATWG', 'embedded-content.html#the-embed-element', '<embed>')</td> + <td>Spec2('HTML WHATWG')</td> + <td> </td> + </tr> + <tr> + <td>SpecName('HTML5 W3C', 'embedded-content-0.html#the-embed-element', '<embed>')</td> + <td>Spec2('HTML5 W3C')</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_kompatibilität">Browser kompatibilität</h2> + +<div class="note"> +<p><strong>Note</strong>: <span id="result_box" lang="de"><span>Es gibt derzeit einen Implementierungsunterschied zwischen Browsern.</span> <span>Während Blink (Chrome, Opera) den Inhalt der HTML-Ressource anzeigt, zeigt Firefox eine allgemeine Meldung an, dass der Inhalt ein Plug-in benötigt (siehe Bug ("730768")).</span> <span>Es wird empfohlen, das Element <object> oder <iframe> zu verwenden.</span></span></p> +</div> + +<div class="hidden"><span id="result_box" lang="de"><span>Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert.</span> <span>Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte https://github.com/mdn/browser-compat-data und senden Sie uns eine Pull-Anfrage.</span></span></div> + +<p>Compat("html.elements.embed")</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><span id="result_box" lang="de"><span>Andere Elemente, die zum Einbetten von Inhalten verschiedener Typen verwendet werden, sind HTMLElement ("audio"), HTMLElement ("canvas"), HTMLElement ("iframe"), HTMLElement ("</span> <span>img "), MathMLElement (" math "), HTMLElement (" Objekt "), SVgelement (" svg ") und HTMLElement (" video ").</span></span></li> +</ul> + +<p> HTMLRef</p> diff --git a/files/de/web/html/element/fieldset/index.html b/files/de/web/html/element/fieldset/index.html new file mode 100644 index 0000000000..c901ee0dc3 --- /dev/null +++ b/files/de/web/html/element/fieldset/index.html @@ -0,0 +1,489 @@ +--- +title: <fieldset> +slug: Web/HTML/Element/fieldset +translation_of: Web/HTML/Element/fieldset +--- +<div>HTMLRef</div> + +<p><span id="result_box" lang="de"><span>Das <strong>HTML <fieldset> -Element</strong> wird verwendet, um mehrere Steuerelemente sowie Bezeichnungen (HTMLElement ("label")) in einem Webformular zu gruppieren. </span> </span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Inhaltsverzeichnis</th> + <td>fließender-Inhalt, sektion Wurzel, gelistete, formordnender Element, eindeutiger Inhalt.</td> + </tr> + <tr> + <th scope="row"><span class="short_text" id="result_box" lang="de"><span>Erlaubter Inhalt</span></span></th> + <td><span id="result_box" lang="de"><span>Ein optionales HTMLElement <legend>, gefolgt von einem fließendem Inhalt.</span></span></td> + </tr> + <tr> + <th scope="row"><span class="short_text" id="result_box" lang="de"><span>Tag-Auslassung</span></span></th> + <td>Keine</td> + </tr> + <tr> + <th scope="row"><span class="short_text" id="result_box" lang="de"><span>Erlaubte Eltern</span></span></th> + <td><span class="short_text" id="result_box" lang="de"><span>Jedes Element, das den flow content akzeptiert.</span></span></td> + </tr> + <tr> + <th scope="row"><span class="short_text" id="result_box" lang="de"><span>Zulässige ARIA-Rollen</span></span></th> + <td>ARIARole("group"), ARIARole("presentation")</td> + </tr> + <tr> + <th scope="row">DOM Schnittstelle</th> + <td>{{domxref("HTMLFieldSetElement")}}</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Anmerkung:</strong> <span id="result_box" lang="de"><span>Im Gegensatz zu fast jedem anderen Element schlägt die WHATWG-HTML-Rendering-Spezifikation cssxref ("min-width") vor: min-content als Teil des Standardstils für HTMLElement ("fieldset") und viele Browser implementieren</span> <span>solches Styling (oder etwas, das es annähert).</span></span></p> +</div> + +<div class="note"> +<p><strong>Anmerkung:</strong> <span id="result_box" lang="de"><span>Mit dem Element HTMLElement ("fieldset") wird erwartet, dass es einen neuen Kontext für die Blockformatierung herstellt (siehe HTML5-Spezifikation).</span></span></p> +</div> + +<h2 id="Attribute">Attribute</h2> + +<p><span class="short_text" id="result_box" lang="de"><span>Dieses Element enthält die globalen Attribute.</span></span></p> + +<dl> + <dt>htmlattrdef("disabled") HTMLVersionInline(5)</dt> + <dd><span id="result_box" lang="de"><span>Wenn dieses boolesche Attribut gesetzt ist, sind die Formularsteuerelemente, die seine Nachfolger sind, mit Ausnahme der Nachfolger des ersten optionalen Elements HTMLElement ("legend"), deaktiviert, d.h. nicht editierbar.</span> <span>Sie erhalten keine Browserereignisse wie Mausklicks oder Fokus-bezogene Ereignisse.</span> <span>Oft zeigen Browser solche Steuerelemente als grau an.</span></span></dd> + <dt>htmlattrdef("form") HTMLVersionInline(5)</dt> + <dd><span id="result_box" lang="de"><span>Dieses Attribut hat den Wert des id-Attributs des HTMLElement ("form") , mit dem es verknüpft ist.</span> <span>Ihr Standardwert ist die ID des nächsten HTMLElement ("Formular") , von dem sie abstammt.</span></span></dd> + <dt>htmlattrdef("name") HTMLVersionInline(5)</dt> + <dd><span class="short_text" id="result_box" lang="de"><span>Der Name, der der Gruppe zugeordnet ist</span></span><br> + + <div class="note"><span id="result_box" lang="de"><span>Die Bezeichnung für das Feldset wird durch das erste HTMLElement ("legend") angegeben, das ein untergeordnetes Element(Kind Element) dieses Feldsatzes ist.</span></span></div> + </dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Example_1_Form_with_fieldset_legend_and_label">Example #1: Form with fieldset, legend, and label</h3> + +<pre class="brush: html"><form action="test.php" method="post"> + <fieldset> + <legend>Title</legend> + <input type="radio" id="radio"> + <label for="radio">Click me</label> + </fieldset> +</form></pre> + +<h3 id="Example_2_Simulieren_eines_editierbaren_HTMLElement_(select)_durch_ein_Feldset_von_Radioboxen_und_Textboxen_*">Example #2: <span id="result_box" lang="de"><span>Simulieren eines editierbaren HTMLElement ("select") durch ein Feldset von Radioboxen und Textboxen *</span></span></h3> + +<p><span id="result_box" lang="de"><span>Das folgende Beispiel besteht aus reinem HTML und CSS.</span> <span>Es gibt keinen JavaScript-Code.</span></span></p> + +<p><span id="result_box" lang="de"><span>Seien Sie gewarnt, dass Bildschirmleser und Hilfsgeräte das folgende Formular nicht korrekt interpretieren.</span> <span>Dieses Beispiel wäre ungültiger HTML-Code, wenn die richtigen Elemente verwendet würden.</span></span></p> + +<pre class="brush: html"><!doctype html> +<html> +<head> +<meta charset="UTF-8" /> +<title>Editable [pseudo]select</title> +<style type="text/css"> + +/* Generic form fields */ + +fieldset.elist, input[type="text"], textarea, select, +option, fieldset.elist ul, fieldset.elist > legend, +fieldset.elist input[type="text"], +fieldset.elist > legend:after { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +input[type="text"] { + padding: 0 20px; +} + +textarea { + width: 500px; + height: 200px; + padding: 20px; +} + +textarea, input[type="text"], fieldset.elist ul, +select, fieldset.elist > legend { + border: 2px #cccccc solid; + border-radius: 10px; +} + +input[type="text"], fieldset.elist, select, +fieldset.elist > legend { + height: 32px; + font-family: Tahoma; + font-size: 14px; +} + +input[type="text"]:hover, textarea:hover, +select:hover, fieldset.elist:hover > legend { + background-color: #ddddff; +} + +select { + padding: 4px 20px; +} + +option { + height: 30px; + padding: 5px 4px; +} + +option:not(:checked), textarea:focus { + background-color: #ffcccc; +} + +fieldset.elist > legend:after, +fieldset.elist label { + height: 28px; +} + +input[type="text"], fieldset.elist { + width: 316px; +} + +input[type="text"]:focus { + background: #ffcccc url("data:image/gif; + base64,R0lGODlhEAAQANU5APnoxuvr6+uxPdvb2+ + rq6ri4uO7qxunp6dPT06SHV+/rx8vLy+ + nezLO0sbe3t9Ksas+qaaCEV8rKyp2dnf39/ + QAAAK6ursifZHFxcc/ + Qzu3mxYyMjExCJnV1dc6maO7u7o+ + Pj2tXNoaGhtfDpKCDVu3lxM+ + tcaKEV9bW1qOFVWNjY8KrisTExNra2nBbObGxsby8vO/ + mu7Kyso9ZAuzs7MSgAIiKhf///8zMzP/// + wAAAAAAAAAAAAAAAAAAAAAAACH5BAEAADkALAAAAAAQ + ABAAAAaXwJxwSCwOYzWkMpkkZmoAqDQaJdpqAqw2m53 + NRjlboAarFczomcE0C99o8DgNMVM8Tm3bbYDr9x11Dw + kzDG5yc2oQJIRCenx/MxoeETM2Q3pxATMlF4MYlo17O + AsdLispMyAioIY0BzMcITMTKBasjgssFTMqGxItMjYU + oTQBBAQHxgE0wZcfMtDRMi/QrA022NnaNg1CQQA7") + no-repeat 2px center !important; +} + +input[type="text"]:focus, textarea:focus, +select:focus, fieldset.elist > legend { + border: 2px #ccaaaa solid; +} + +fieldset { + border: 2px #af3333 solid; + border-radius: 10px; +} + +/* Editable [pseudo]select +(i.e. fieldsets with [class=elist]) */ + +fieldset.elist { + display: inline-block; + position: relative; + vertical-align: middle; + overflow: visible; + padding: 0; + margin: 0; + border: none; +} + +fieldset.elist ul { + position: absolute; + width: 100%; + max-height: 320px; + padding: 0; + margin: 0; + overflow: hidden; + background-color: transparent; +} + +fieldset.elist:hover ul { + background-color: #ffffff; + border: 2px #af3333 solid; + left: 2px; + overflow: auto; +} + +fieldset.elist ul > li { + list-style-type: none; + background-color: transparent; +} + +fieldset.elist label { + display: none; + width: 100%; +} + +fieldset.elist input[type="text"] { + width: 100%; + height: 30px; + line-height: 30px; + border: none; + background-color: transparent; + border-radius: 0; +} + +fieldset.elist > legend { + display: block; + margin: 0; + padding: 0 0 0 5px; + position: absolute; + width: 100%; + cursor: default; + background-color: #ccffcc; + line-height: 30px; + font-style: italic; +} + +fieldset.elist:hover > legend { + position: relative; + overflow: hidden; +} + +fieldset.elist > legend:after { + width: 20px; + content: "\2335"; + float: right; + text-align: center; + border-left: 2px #cccccc solid; + font-style: normal; + cursor: default; +} + +fieldset.elist:hover > legend:after { + background-color: #99ff99; +} + +fieldset.elist ul input[type="radio"] { + display: none; +} + +fieldset.elist input[type="radio"]:checked ~ label { + display: block; + width: 292px; + background-color: #ffffff; +} + +fieldset.elist:hover +input[type="radio"]:checked ~ label { + width: 100%; +} + +fieldset.elist:hover label { + display: block; + height: 100%; +} + +fieldset.elist label:hover { + background-color: #3333ff !important; +} + +fieldset.elist:hover +input[type="radio"]:checked ~ label { + background-color: #aaaaaa; +} + +</style> + +</head> +<body> + +<form method="get" action="test.php"> + +<fieldset> + <legend>Order a T-Shirt</legend> + <p>Write your name (simple textbox): + <input type="text" /></p> + <p>Choose your size (simple select): + <select> + <option value="s">Small</option> + <option value="m">Medium</option> + <option value="l">Large</option> + <option value="xl">Extra Large</option> + </select></p> + <div>What address do you want to use? + (editable pseudoselect) + <fieldset class="elist"> + <legend>Address&hellip;</legend> + <ul> + <li><input type="radio" value="1" + id="address-switch_1" checked + /><label for="address-switch_1" + ><input type="text" + value="19 Quaker Ridge Rd. Bethel CT 06801" + /></label></li> + <li><input type="radio" value="2" + id="address-switch_2" + /><label for="address-switch_2" + ><input type="text" + value="1000 Coney Island Ave. + Brooklyn NY 11230" + /></label></li> + <li><input type="radio" value="3" + id="address-switch_3" + /><label for="address-switch_3" + ><input type="text" + value="2962 Dunedin Cv. Germantown TN 38138" + /></label></li> + <li><input type="radio" value="4" + id="address-switch_4" + /><label for="address-switch_4" + ><input type="text" + value="915 E 7th St. Apt 6L. Brooklyn NY 11230" + /></label></li> + </ul> + </fieldset> + </div> + <p>Write a comment:<br /> + <textarea></textarea></p> + <p><input type="reset" value="Reset" /> + <input type="submit" value="Send!" /></p> +</fieldset> + +</form> + +</body> +</html> +</pre> + +<p>Betrachten Sie dieses Beispiel in Aktion.</p> + +<h2 id="Spezifikation">Spezifikation</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>SpecName('HTML WHATWG', 'forms.html#the-fieldset-element', '<fieldset>')</td> + <td>Spec2('HTML WHATWG')</td> + <td>Definition of the <code>fieldset</code> element</td> + </tr> + <tr> + <td>SpecName('HTML WHATWG', 'rendering.html#the-fieldset-and-legend-elements')</td> + <td>Spec2('HTML WHATWG')</td> + <td>Suggested default rendering of the <code>fieldset</code> and <code>legend</code> elements</td> + </tr> + <tr> + <td>SpecName('HTML5 W3C', 'forms.html#the-fieldset-element', '<fieldset>')</td> + <td>Spec2('HTML5 W3C')</td> + <td> </td> + </tr> + <tr> + <td>SpecName('HTML4.01', 'interact/forms.html#h-17.10', '<fieldset>')</td> + <td>Spec2('HTML4.01')</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>disabled</code> attribute</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>12</td> + <td>6</td> + </tr> + <tr> + <td>Establish a new block formatting</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>disabled</code> attribute</td> + <td>4.4</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>6.0</td> + </tr> + <tr> + <td>Establish a new block formatting</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <span id="result_box" lang="de"><span>Nicht alle Formularsteuerungsnachkommen eines deaktivierten Fieldsets sind in IE11 ordnungsgemäß deaktiviert.</span> <span>siehe IE Bug 817488: Eingabe [Typ = "Datei"] nicht deaktiviert in deaktiviertem Feldset und IE Bug 962368: Kann Eingabe [Typ = "Text"] innerhalb von Feldset [deaktiviert] bearbeiten.</span></span></p> + +<h2 id="Bugs">Bugs</h2> + +<ul> + <li><a href="https://bugs.webkit.org/show_bug.cgi?id=123507">WebKit bug 123507</a> - <code>min-width: {{cssxref("-webkit-min-content")}}</code> on fieldset</li> + <li><span id="result_box" lang="de"><span>StackOverflow-Diskussion mit Workarounds für die oben genannten Fehler</span></span></li> +</ul> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Andere form-bezogene Elemente: HTMLElement("form"), HTMLElement("legend"), HTMLElement("label"), HTMLElement("button"), HTMLElement("select"), HTMLElement("datalist"), HTMLElement("optgroup"), HTMLElement("option"), HTMLElement("textarea"), HTMLElement("keygen"), HTMLElement("input"), HTMLElement("output"), HTMLElement("progress") and HTMLElement("meter").</li> +</ul> diff --git a/files/de/web/html/element/font/index.html b/files/de/web/html/element/font/index.html new file mode 100644 index 0000000000..c57e2e9135 --- /dev/null +++ b/files/de/web/html/element/font/index.html @@ -0,0 +1,53 @@ +--- +title: <font> +slug: Web/HTML/Element/font +tags: + - HTML + - Referenz + - Schrift + - Tags + - Textformatierung +translation_of: Web/HTML/Element/font +--- +<div>{{obsolete_header}}</div> + +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>Das <em>HTML Font Element</em> (<span style="font-family: courier new;"><font></span>) definiert die Textgröße, Textfarbe und Schriftart für seinen Inhalt.</p> + +<div class="note"> +<p><em>Notiz zur Verwendung: </em></p> + +<p><strong>Benutzen Sie dieses Element nicht!</strong> Obwohl es sich in HTML 3.2 normalisierte, wurde es in HTML 4.01 abgelehnt. Zu dieser Zeit verknüpfte es nur die Gestaltung, ab HTML5 ist es dann veraltet.</p> + +<p>Startend mit HTML 4, werden Gestaltungsinformationen nicht mit HTML (außer durch das {{HTMLElement("style")}}-Element oder das <strong>style</strong>-Attribut jedes Elementes) übermittelt. Für eine moderne Web-Entwicklung sollten diese Informationen in <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> ausgelagert werden.</p> + +<p>Die bisherige Wirkung des {{HTMLElement("font")}}-Elementes kann genauso, oder sogar noch besser durch die <a href="/en-US/docs/Web/CSS/CSS_Fonts">CSS Schriftarten</a> in den CSS-Einstellungen erzielt werden.</p> +</div> + +<h2 id="Attribute">Attribute</h2> + +<p>Wie alle anderen Elemente auch, unterstützt dieses Element die <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">globalen Attribute</a>.</p> + +<dl> + <dt>{{htmlattrdef("color")}}</dt> + <dd>Dieses Attribut legt die Textfarbe durch die Eingabe eines Farbennamens oder einer speziellen Farbe im hexadezimalen #RRGGBB-Format fest.</dd> + <dt>{{htmlattrdef("face")}}</dt> + <dd>Dieses Attribut beinhaltet eine durch Kommata getrennte Liste von einem oder mehreren Schriftarten. Der Text des Dokuments im Standard-Stil wird durch die erste, vom Browser unterstützte, Schriftart dargestellt. Wenn keine genannte Schriftart auf dem lokalen System installiert ist, wird der Browser die typische Standard-Schriftart verwenden.</dd> + <dt>{{htmlattrdef("size")}}</dt> + <dd>Dieses Attribut gibt die Schriftgröße als Zahl von <span style="font-family: courier new;">1</span> bis <span style="font-family: courier new;">7</span> (<span style="font-family: courier new;">1</span> als kleinstes und <span style="font-family: courier new;">3</span> als Standard) an. Es kann auch durch einen relativen Wert, wie <span style="font-family: courier new;">+2</span> oder <span style="font-family: courier new;">-3</span>, der den Wert vom {{htmlattrxref("size", "basefont")}}-Attribut des {{HTMLElement("basefont")}}-Elementes oder relativ zum Standardwert <span style="font-family: courier new;">3</span> als Grundlage verwendet, festgelegt werden.</dd> +</dl> + +<h2 id="DOM-Schnittstelle">DOM-Schnittstelle</h2> + +<p>Dieses Element implementiert die {{domxref("HTMLFontElement")}}-Schnittstelle.</p> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + +<h3 id="Notizen_zu_Gecko">Notizen zu Gecko</h3> + +<p>Vor Gecko 15.0 {{geckoRelease("15.0")}}, verarbeitete der Browser verbotene Werte für das <code>size</code>-Attribut nicht korrekt. Es hat keine verbotenen Werte für relative Werte akzeptiert. Nun kürzt der Browser diese im Bereich von -10 zu +10 korrekt.</p> + +<p>Gecko 15.0 entfernte auch die Unterstützung für die <code>font-weight</code> und <code>point-size</code>-Attribute im <code><font></code>-Element; Diese waren keine Standard-Werte und Gecko war die einzige Umgebung, die dies noch unterstützte.</p> + +<div>{{HTMLRef}}</div> diff --git a/files/de/web/html/element/footer/index.html b/files/de/web/html/element/footer/index.html new file mode 100644 index 0000000000..1e6b96fbc1 --- /dev/null +++ b/files/de/web/html/element/footer/index.html @@ -0,0 +1,99 @@ +--- +title: <footer> +slug: Web/HTML/Element/footer +tags: + - Element + - HTML + - HTML Sektionen + - HTML5 + - Referenz + - Web +translation_of: Web/HTML/Element/footer +--- +<div>{{HTMLRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Das <strong>HTML <code><footer></code> Element</strong> repräsentiert eine Fußzeile für den nahestehendsten Sektionsinhalt oder das <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document#Sectioning_root" title="Sections and Outlines of an HTML5 document#Sectioning root">Sektionsquellen</a> Element (also das nahestehendste Element wie zum Beispiel {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}}, {{HTMLElement("section")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("body")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}}, {{HTMLElement("td")}}). Eine Fußzeile enthält typischerweise Informationen über den Autor der Sektion, die Copyright-Daten oder Links zu verwandten Dokumente.</p> + +<div class="note"> +<p><strong>Hinweis zur Benutzung:</strong></p> + +<ul> + <li>Informationen über den Autor sollten in ein {{HTMLElement("address")}} Element eingebettet werden, welches wiederum in einem <code><footer></code> Element stehen kann.</li> + <li>Das <code><footer></code> Element ist kein Sektionsinhalt und führt deshalb auch keine neue Sektion in der <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Begrenzung</a> ein.</li> +</ul> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorien</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Fließender Inhalt</a>, greifbarer Inhalt.</td> + </tr> + <tr> + <th scope="row">Erlaubter Inhalt</th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Fließender Inhalt</a>, jedoch kein <code><footer></code> oder {{HTMLElement("header")}} Nachfahre.</td> + </tr> + <tr> + <th scope="row">Tag Auslassung</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Erlaubte Elternelemente</th> + <td>Jedes Element, dass <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">fließenden Inhalt</a> erlaubt. Das <code><footer></code> Element muss kein Nachfahre eines {{HTMLElement("address")}}, {{HTMLElement("header")}} oder anderem <code><footer></code> Element sein.</td> + </tr> + <tr> + <th scope="row">DOM Schnittstelle</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p>Dieses Element schließt nur <a href="/en-US/docs/HTML/Global_attributes">globale Attribute</a> ein.</p> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: html"><footer> + Hier ein paar Copyright Informationen oder stattdessen Informationen über den &lt;Artikel&gt;? +</footer> +</pre> + +<h2 id="Specifications" name="Specifications">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-footer-element', '<footer>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-footer-element', '<footer>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("html.elements.footer")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Andere Sektions-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("header")}}, {{HTMLElement("section")}}, {{HTMLElement("address")}};</li> + <li class="last"><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sektionen und Begrenzungen eines HTML5 Dokuments</a>.</li> +</ul> diff --git a/files/de/web/html/element/frame/index.html b/files/de/web/html/element/frame/index.html new file mode 100644 index 0000000000..2e044d7369 --- /dev/null +++ b/files/de/web/html/element/frame/index.html @@ -0,0 +1,52 @@ +--- +title: <frame> +slug: Web/HTML/Element/Frame +translation_of: Web/HTML/Element/frame +--- +<div>{{HTMLRef}}{{Deprecated_header}}</div> + +<p><code><frame></code> ist ein HTML Element dass einen bestimmten Bereich definiert, indem ein anderes HTML Dokument angezeigt werden kann. Ein Frame sollte innerhalb eines {{HTMLElement("frameset")}}s verwendet werden.</p> + +<p>Es wird davon abgeraten das <code><frame></code> Element zu verwenden, da es Nachteile wie Performance-Probleme hat und nicht von Screen Readern unterstützt wird. Anstatt des <code><frame></code> Elements sollte man einen {{HTMLElement("iframe")}} bevorzugen.</p> + +<h2 id="Attribute">Attribute</h2> + +<p>Wie alle HTML Elemente, unterstütz dieses Element die <a href="/en-US/docs/HTML/Global_attributes">globalen Attribute</a>.</p> + +<dl> + <dt>{{htmlattrdef("src")}}</dt> + <dd>Dieses Attribut gibt an welches Dokument im Frame angezeigt wird.</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>Dieses Attribut wird für die Kennzeichnung von Frames verwendet. Ohne die Angabe einer Kennzeichnung öffnet sich ein Link in dem Frame, in dem er sich befindet – dem übergeordneten Frame. Für mehr Informationen siehe das {{htmlattrxref("target","a")}} Attribut.</dd> + <dt>{{htmlattrdef("noresize")}}</dt> + <dd>Dieses Attribut verhindert das Anpassen der Größe des Frames durch Benutzer.</dd> + <dt>{{htmlattrdef("scrolling")}}</dt> + <dd>Dieses Attribut gibt an ob eine Scrollbar angezeigt werden solle. Wenn das Attribut nicht gesetzt ist, fügt der Browser eine Scrollbar hinzu, wenn sie benötigt wird. Es gibt zwei Optionen: <code>yes</code> zeigt die Scrollbar an, auch wenn sie nicht notwendig ist und <code>no</code> bei der keine Scrollbar angezeigt wird auch <em>wenn</em> sie benötigt werden würde.</dd> + <dt>{{htmlattrdef("marginheight")}}</dt> + <dd>Dieses Attribut gibt die Höhe des margin zwischen Frames an.</dd> + <dt>{{htmlattrdef("marginwidth")}}</dt> + <dd>Dieses Attribut gibt die Breite des margin zwischen Frames an.</dd> + <dt>{{htmlattrdef("frameborder")}}</dt> + <dd>Dieses Attribut gibt die Möglichkeit einen Rahmen für das Frame zu definieren.</dd> +</dl> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: html"><frameset cols="50%,50%"> + <frame src="https://developer.mozilla.org/en/HTML/Element/iframe" /> + <frame src="https://developer.mozilla.org/en/HTML/Element/frame" /> +</frameset> +</pre> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + + + +<p>{{Compat("html.elements.frame")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{HTMLElement("frameset")}}</li> + <li>{{HTMLElement("iframe")}}</li> +</ul> diff --git a/files/de/web/html/element/h1-h6/index.html b/files/de/web/html/element/h1-h6/index.html new file mode 100644 index 0000000000..1c8aa07e0f --- /dev/null +++ b/files/de/web/html/element/h1-h6/index.html @@ -0,0 +1,72 @@ +--- +title: h1-h6 +slug: Web/HTML/Element/h1-h6 +tags: + - HTML + - HTML Elemente + - HTML Referenz +translation_of: Web/HTML/Element/Heading_Elements +--- +<h3 id="Übersicht">Übersicht</h3> + +<p>Die <strong>Überschriftenelemente</strong> bestehen aus sechs verschiedenen Leveln. <code><h1></code> ist die Überschrift mit der höchsten Gewichtung und <code><h6></code> mit der kleinsten. Ein Überschriften-Element beschreibt das Thema des Bereiches, welcher der Überschrift folgt. Überschriften können auch verwendet werden, um ein Inhaltsverzeichnis für ein Dokument automatisch zu erstellen.</p> + +<ul> + <li>Element Typ: <a href="/de/HTML/Block-level_Elemente" title="de/HTML/Block-level_Elemente">block-level</a></li> + <li>Erlaubter Inhalt: <a href="/de/HTML/Inline_Elemente" title="de/HTML/Inline_Elemente">inline</a></li> +</ul> + +<h3 id="Beispiel">Beispiel</h3> + +<h4 id="Alle_Überschriften">Alle Überschriften</h4> + +<pre> <h1>Überschrift Level 1</h1> + <h2>Überschrift Level 2</h2> + <h3>Überschrift Level 3</h3> + <h4>Überschrift Level 4</h4> + <h5>Überschrift Level 5</h5> + <h6>Überschrift Level 6</h6> +</pre> + +<p>Dieses HTML gibt das Folgende aus:</p> + +<p><img alt="Image:HTML-headers2.png" class="internal" src="/@api/deki/files/245/=HTML-headers2.png"></p> + +<h4 id="Beispielseite">Beispielseite</h4> + +<pre> <h1>Heading elements</h1> + + <h2>Summary</h2> + <p>Some text here...</p> + + <h2>Examples</h2> + <h3>Example 1</h3> + <p>Some text here...</p> + + <h3>Example 2</h3> + <p>Some text here...</p> + + <h2>See also</h2> + <p>Some text here...</p> +</pre> + +<p>Dieses HTML gibt das Folgende aus:</p> + +<p><img alt="Image:HTML-headers1.png" class="internal" src="/@api/deki/files/244/=HTML-headers1.png"></p> + +<h3 id="Hinweise">Hinweise</h3> + +<p>Es sollte kein tieferes Überschriftenlevel verwendet werden, um die Schriftgröße zu vermindern. Stattdessen sollte die Größe über die <a href="/de/CSS" title="de/CSS">CSS</a> <a href="/de/CSS/font-size" title="de/CSS/font-size">font-size</a> Eigenschaft festgelegt werden.</p> + +<p>Es sollte vermieden werden Überschriftenlevel zu überspringen. Es sollte immer von <code><h1> ausgegangen werden</code>, danach <code><h2></code> und so weiter. Außerdem sollte versucht werden nur eine Überschrift des ersten Levels in einem Dokument zu benutzen.</p> + +<p>Die Gruppierung von Überschriften und Inhalte kann über <a href="/de/HTML/Element/div" title="de/HTML/Element/div"><code><div></code></a> Element realisiert werden.</p> + +<h3 id="Siehe_auch">Siehe auch</h3> + +<ul> + <li><a href="/de/HTML/Element/p" title="de/HTML/Element/p">HTML Paragraph Element</a></li> + <li><a href="/de/HTML/Element/div" title="de/HTML/Element/div">HTML Division Element</a></li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/de/web/html/element/head/index.html b/files/de/web/html/element/head/index.html new file mode 100644 index 0000000000..1c71988bda --- /dev/null +++ b/files/de/web/html/element/head/index.html @@ -0,0 +1,28 @@ +--- +title: head +slug: Web/HTML/Element/head +tags: + - HTML + - HTML Elemente + - HTML Referenz +translation_of: Web/API/HTMLHeadElement +--- +<p>Das <code><head></code> HTML Element legt den Kopf eines Dokuments fest. In diesem werden Informationen für das Dokument angegeben, darunter der Dokumententitel und Meta-Daten.</p> + +<h3 id="Beispiel">Beispiel</h3> + +<pre class="eval"><html> + <head> + <title>Seitentitel</title> + </head> +</html> +</pre> + +<h3 id="Spezifikationen">Spezifikationen</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/html401/struct/global.html#h-7.4.1">HTML 4.01 #head</a></li> + <li><a class="external" href="http://www.w3.org/TR/html5/semantics.html#the-head-element-0">HTML5 #head</a></li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/de/web/html/element/header/index.html b/files/de/web/html/element/header/index.html new file mode 100644 index 0000000000..61a4a0349d --- /dev/null +++ b/files/de/web/html/element/header/index.html @@ -0,0 +1,143 @@ +--- +title: <header> +slug: Web/HTML/Element/header +tags: + - Element + - HTML + - HTML Sektionen + - HTML5 + - Referenz + - Web +translation_of: Web/HTML/Element/header +--- +<div>{{HTMLRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Das <strong>HTML <code><header></code> Element</strong> repräsentiert eine Gruppe von Einführungs- oder Navigationshilfen. Es kann ein paar Kopfelemente beinhalten, jedoch auch andere Elemente wie zum Beispiel ein Logo, ein Suchfeld, usw.</p> + +<div class="note"> +<p><strong>Hinweis zur Benutzung:</strong></p> + +<ul> + <li>Das <code><header></code> Element ist kein Sektionsinhalt und führt deshalb auch keine neue Sektion in der <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Begrenzung</a> ein.</li> +</ul> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorien</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Fließender Inhalt</a>, greifbarer Inhalt.</td> + </tr> + <tr> + <th scope="row">Erlaubter Inhalt</th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Fließender Inhalt</a>, jedoch kein <code><header></code> oder {{HTMLElement("footer")}} Nachfahre</td> + </tr> + <tr> + <th scope="row">Tag Auslassung</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Erlaubte Elternelemente</th> + <td>Jedes Element, dass <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">fließenden Inhalt</a> erlaubt. Ein <code><header></code> Element darf kein Nachfahre von einem {{HTMLElement("address")}}, {{HTMLElement("footer")}} oder anderem {{HTMLElement("header")}} Element sein.</td> + </tr> + <tr> + <th scope="row">DOM Schnittstelle</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p><span style="line-height: 21px;">Dieses Element schließt nur </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globale Attribute</a><span style="line-height: 21px;"> ein.</span></p> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: html"><header> + hier ein Logo +</header> +</pre> + +<h2 id="Specifications" name="Specifications">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-header-element', '<header>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-header-element', '<header>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>5</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>9.0</td> + <td>11.10</td> + <td>4.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.2</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>9.0</td> + <td>11.0</td> + <td>5.0 (iOS 4.2)</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Eine detailliertere Beschreibung: <a class="external" href="http://html5doctor.com/the-header-element/" title="The header element | HTML5 Doctor">The header element | HTML5 Doctor</a></li> + <li>Andere Sektions-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("address")}};</li> + <li class="last"><a class="deki-ns current" href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sektionen und Bregrenzungen eines HTML5 Dokuments</a>.</li> +</ul> diff --git a/files/de/web/html/element/hr/index.html b/files/de/web/html/element/hr/index.html new file mode 100644 index 0000000000..b4bba99ae2 --- /dev/null +++ b/files/de/web/html/element/hr/index.html @@ -0,0 +1,57 @@ +--- +title: hr +slug: Web/HTML/Element/hr +tags: + - HTML + - HTML Elemente + - HTML Referenz +translation_of: Web/HTML/Element/hr +--- +<h3 id="Übersicht">Übersicht</h3> + +<p>Das <strong>HTML <hr> - Element</strong> (hr für engl.: <em>horizontal rule</em>) wird verwendet, um eine horizontale Linie einzufügen, die Bereiche im Dokument von einander trennt. Die Linie wird normalerweise als angehobene oder hervorstehende Linie gerendert.</p> + +<h3 id="Attribute">Attribute</h3> + +<dl> + <dt>{{htmlattrdef("align")}} {{deprecated_inline}}</dt> + <dd>Legt die Ausrichtung der Linie fest. Wird kein Wert angegeben, ist der Standardwert <code>left</code>.</dd> + <dt>{{htmlattrdef("color")}} {{Non-standard_inline}}</dt> + <dd>Legt die Farbe der Linie durch einen Farbnamen oder einen hexadezimalen Wert fest.</dd> + <dt>{{htmlattrdef("noshade")}} {{deprecated_inline}}</dt> + <dd>Deaktiviert den Schatten.</dd> + <dt>{{htmlattrdef("size")}} {{deprecated_inline}}</dt> + <dd>Legt die Höhe der Linie in Pixeln fest.</dd> + <dt>{{htmlattrdef("width")}} {{deprecated_inline}}</dt> + <dd>Legt die Länge der Linie durch eine prozentuale Angabe oder eine Angabe in Pixeln fest.</dd> +</dl> + +<h3 id="Beispiel">Beispiel</h3> + +<pre> <p>Das ist der erste Absatz des Texts. Das ist der erste Absatz des Texts. + Das ist der erste Absatz des Texts. Das ist der erste Absatz des Texts.</p> + + <hr> + + <p>Das ist der zweite Absatz des Texts. Das ist der zweite Absatz des Texts. + Das ist der zweite Absatz des Texts. Das ist der zweite Absatz des Texts.</p> +</pre> + +<p>Dieses HTML gibt das Folgende aus:</p> + +<p>Das ist der erste Absatz des Texts. Das ist der erste Absatz des Texts. Das ist der erste Absatz des Texts. Das ist der erste Absatz des Texts.</p> + +<hr> +<p>Das ist der zweite Absatz des Texts. Das ist der zweite Absatz des Texts. Das ist der zweite Absatz des Texts. Das ist der zweite Absatz des Texts.</p> + +<h3 id="Hinweis">Hinweis</h3> + +<p>Um das Aussehen der Linie zu verändern oder die Abstände zu definieren, sollten <a href="/de/CSS" title="de/CSS">Cascading Style Sheets</a> verwendet werden.</p> + +<h3 id="Siehe_auch">Siehe auch</h3> + +<ul> + <li><a href="/de/HTML/Element/p" title="de/HTML/Element/p">HTML Paragraph Element</a></li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/de/web/html/element/html/index.html b/files/de/web/html/element/html/index.html new file mode 100644 index 0000000000..54c1bf51a1 --- /dev/null +++ b/files/de/web/html/element/html/index.html @@ -0,0 +1,157 @@ +--- +title: <html> +slug: Web/HTML/Element/html +tags: + - Element + - HTML + - HTML Elemente + - HTML Referenz + - HTML Wurzel Element + - Referenz + - Web +translation_of: Web/HTML/Element/html +--- +<h2 id="Übersicht">Übersicht</h2> + +<p>Das <em>HTML Wurzel Element</em> (<strong><code><html></code></strong>) repäsentiert die Wurzel eines HTML Dokuments. Alle anderen Elemente müssen ein Nachfahre dieses Elements sein.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/de/docs/HTML/Content_categories" title="HTML/Content_categories">Inhalt Kategorien</a></th> + <td>Keine.</td> + </tr> + <tr> + <th scope="row">Erlaubter Inhalt</th> + <td>Ein {{HTMLElement("head")}} Element, gefolgt von einem {{HTMLElement("body")}} Element.</td> + </tr> + <tr> + <th scope="row">Tag Wegfall</th> + <td>Der Anfangstag darf weggelassen werden, wenn der erste Code kein Kommentar ist.<br> + Der Endtag darf weggelassen werden, wenn auf das Element unmittelbar kein Kommentar folgt.</td> + </tr> + <tr> + <th scope="row">Erlaubte Elternelemente</th> + <td>Als das Wurzelelement eines Dokuments oder wo auch immer ein Fragment eines Unterdokuments in einem zusammengesetzten Dokument erlaubt ist.</td> + </tr> + <tr> + <th scope="row">DOM Schnittstelle</th> + <td>{{domxref("HTMLHtmlElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p><span style="line-height: 21px;">Dieses Element enhält die </span><a href="https://developer.mozilla.org/de/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globale Attribute</a><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{htmlattrdef("manifest")}} {{HTMLVersionInline(5)}} {{Gecko_minversion_inline(1.9)}}</dt> + <dd>Gibt die URI einer manifesten Quelle an, die Quellen anzeigen, welche lokal gespeichert werden sollen. Siehe <a href="/de/docs/HTML/Using_the_application_cache" title="/en-US/docs/HTML/Using_the_application_cache">Benutzung des Application Cache</a> für weitere Details.</dd> + <dt>{{htmlattrdef("version")}} {{deprecatedGeneric('inline','HTML4.01')}} {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>Gibt die Version der Definition des HTML Dokumententyps an, welches das aktuelle Dokument besitzt. Dieses Attribut ist nicht benötigt, weil die Versionsinformation in der Deklaration des Dokumententyps diese Information bereits liefert und ist damit überflüssig.</dd> + <dt>{{htmlattrdef("xmlns")}}</dt> + <dd>Gibt den XML Namensraum des Dokuments an. Der Standardwert ist "http://www.w3.org/1999/xhtml". Das ist in XHTML essentiell, doch in HTML5 optional.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Der benutzte DOCTYPE wird im folgenden Beispiel benutzt, um HTML5 anzuzeigen.</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> ... </head> + <body> ... </body> +</html></pre> + +<h2 id="Notizen">Notizen</h2> + +<p>Weil das <code><html></code> Element das erste Element außer Kommentare in einem Dokument ist, wird es als das Wurzelelement bezeichnet. Obwohl dieser Tag mit <a href="/en-US/docs/HTML" title="HTML">HTML</a> nicht notwendig anzugeben ist oder nur angedeutet werden kann, muss es in <a href="/en-US/docs/XHTML" title="XHTML">XHTML</a> geöffnet und geschlossen sein.</p> + +<h2 id="Specifications" name="Specifications">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-html-element', '<html>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'semantics.html#the-html-element', '<html>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.3', '<html>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser-Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funktion</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basis Unterstützung</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funktion</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basis Unterstützung</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>MathML Top-Level Element: {{MathMLElement("math")}}</li> + <li>SVG Top-Level Element: {{SVGElement("svg")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/de/web/html/element/i/index.html b/files/de/web/html/element/i/index.html new file mode 100644 index 0000000000..a1b7fb8e88 --- /dev/null +++ b/files/de/web/html/element/i/index.html @@ -0,0 +1,156 @@ +--- +title: <i> +slug: Web/HTML/Element/i +tags: + - HTML + - Textformatierung + - semantisch + - tag +translation_of: Web/HTML/Element/i +--- +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>Das <strong>HTML-Element <code><i></code> </strong>hebt einen Teil vom Rest eines Textes ab um ein Beispiel, einen Fachbegriff, einen Ausdruck aus einer Fremdsprache oder die Gedanken einer fiktionalen Figur deutlicher vom Rest abzugrenzen. Das Element stellt diese Inhalte dann <em>kursiv</em> dar.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">I</a>nhaltliche Kategorien</th> + <td> + <p><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Fließtexte</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Ausdruckstext,</a> greifbarer/offensichtlicher Inhalt</p> + </td> + </tr> + <tr> + <th scope="row">Zugelassener Inhalt</th> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Phrasing_content/">ausdrückender Inhalt</a></td> + </tr> + <tr> + <th scope="row">Unterdrückte Tags</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Erlaubte elterliche Elemente</th> + <td> + <p>Sämtliche Elemente mit <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">ausdrückendem Inhalt</a>.<br> + <br> + (Textform!)</p> + </td> + </tr> + <tr> + <th scope="row">DOM-Schnittstelle</th> + <td>{{domxref("HTMLElement")}} Seit Gecko 1.9.2 (Firefox 4) inklusive unterstützt Firefox die {{domxref("HTMLSpanElement")}}-Schnittstelle für dieses Element.</td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p>Dieses Element unterstützt nur die <a href="/en-US/docs/Web/HTML/Global_attributes">Globalen Attribute</a>.</p> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: html"><p>Der lateinische Ausdruck <i>Veni, vidi, vici</i> wird häufig in Musik, Kunst und Literatur verwendet.</p> +</pre> + +<h3 id="Result" name="Result">Ergebnis</h3> + +<p>Der lateinische Ausdruck <em>Veni, vidi, vici</em> wird häufig in Kunst, Musik und Literatur verwendet. </p> + +<h2 id="Notizen">Notizen</h2> + +<p>In früheren Versionen der HTML-Spezifikation war der <code><i></code>-Tag nur ein Element um den angezeigten Text zu formatieren, ähnlich wie der <code><b>-T</code>ag für die Darstellung von fettem Text verwendet wird.</p> + +<p>Diese Funktion wurde zunehmend unüblicher: Heute werden <code><i></code>-Tags häufiger für semantische Abgrenzungen als für Textformatierungen verwendet. Trotzdem stellen die Browser den Text kursiv dar, auch wenn diese Funktion per Definiton nicht mehr erwünscht ist.</p> + +<p>Wir empfehlen, dieses Element nur zu verwenden, wenn kein anderes passenderes Element gefunden werden kann. Zum Beispiel:</p> + +<ul> + <li>Benutzen Sie das Element {{HTMLElement("em")}}, um Betonungen darszustellen.</li> + <li>Benutzen Sie das Element {{HTMLElement("strong")}}, um einen Textabschnitt als wichtig darzustellen.</li> + <li>Benutzen Sie das Element {{HTMLElement("mark")}}, um Relevanz darzustellen.</li> + <li>Um ein kreatives Werk (ein Buch, ein Bühnenwerk oder ein Musikstück) kennzuzeichnen, wird das Element "{{HTMLElement("cite")}}" verwendet.</li> + <li>Verwenden Sie das Element {{HTMLElement("dfn")}}, um definierende Instanzen kennzuzeichnen.</li> +</ul> + +<p>Eine gute Idee ist es auch, das <strong>class</strong>-Attribut zu verwenden, um zu definieren, warum und wie das Element verwendet wird.</p> + +<h2 id="Specifications" name="Specifications">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-i-element', '<i>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-i-element', '<i>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<b>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funktion</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>grundlegend</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funktion</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>grundlegend</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>{{HTMLRef}}</p> diff --git a/files/de/web/html/element/iframe/index.html b/files/de/web/html/element/iframe/index.html new file mode 100644 index 0000000000..3549bfb18a --- /dev/null +++ b/files/de/web/html/element/iframe/index.html @@ -0,0 +1,44 @@ +--- +title: iframe +slug: Web/HTML/Element/iframe +tags: + - HTML + - HTML Elemente + - HTML Referenz +translation_of: Web/HTML/Element/iframe +--- +<p>Mit dem <code><iframe></code> HTML Element („inline frame“) kann eine weitere HTML Seite in die aktuelle Seite eingebunden werden.</p> + +<p>Genau wie <a href="/de/HTML/Element/frame" title="de/HTML/Element/frame"><frame></a>s, verfügen <code><iframe></code>s über ein <code><a href="/de/DOM/window.frames" title="de/DOM/window.frames">window.frame</a></code> Pseudo-Array.</p> + +<h3 id="Attribute">Attribute</h3> + +<p>Legt den Namen des Frames fest, sodass dieser Ziel eines <a href="/de/HTML/Element/a" title="de/HTML/Element/a">HTML Anker Element</a> (mit dem <code>target</code> Attribut) werden kann.</p> + +<dl> + <dt>src</dt> + <dd>Bestimmt die URL der Seite, die eingebunden werden soll.</dd> + <dt>width</dt> + <dd>Gibt die Breite des Frames in Prozent oder in Pixeln an.</dd> + <dt>height</dt> + <dd>Gibt die Höhe des Frames in Prozent oder in Pixeln an.</dd> + <dt>frameborder</dt> + <dd>Legt die Breite des Frame-Rahmens fest.</dd> + <dt>name</dt> +</dl> + +<h3 id="Scripting">Scripting</h3> + +<p>Mit dem DOM <code>iframe</code> Element können Scripte Zugang zum <a href="/de/DOM/window" title="de/DOM/window"><code>window</code></a> Objekt der eingebundenen HTML Seite über die <code>contentWindow</code> Eigenschaft erhalten. Die <code>contentDocument</code> Eigenschaft bezieht sich auf das Dokument innerhalb des <code>iframe</code> Elements (gleichbedeutend zu <code>contentWindow.document</code>), wird aber nicht von Internet Explorer Versionen vor IE8 unterstützt.</p> + +<p>Aus dem Inneren eines Frames kann ein Script über <code><a href="/de/DOM/window.parent" title="de/DOM/window.parent">window.parent</a></code> einen Bezug zum Elternelement herstellen.</p> + +<p>Die Scripte, die versuchen Zugang zum Inhalt eines Frames zu erhalten, unterliegen der <a href="/de/JavaSkripts_gleicher_Herkunft" title="de/JavaSkripts_gleicher_Herkunft">„Same-origin policy“</a>, und können auf die meisten Eigenschaften nicht zugreifen, wenn das Dokument von einer anderen Domain geladen wird. Das betrifft auch Skripte innerhalb eines Frames, die versuchen sich Zugang zum übergeordneten Fenster zu verschaffen. Domain-übergreifende Kommunikation kann per <code><a href="/de/DOM/window.postMessage" title="de/DOM/window.postMessage">window.postMessage</a></code> erreicht werden.</p> + +<h3 id="Beispiel">Beispiel</h3> + +<pre>var iframe = window.getElementsByTagName( "iframe" )[ 0 ]; +alert( "Frame title: " + iframe.contentWindow.title ); +</pre> + +<p>{{HTMLRef}}</p> diff --git a/files/de/web/html/element/image/index.html b/files/de/web/html/element/image/index.html new file mode 100644 index 0000000000..56814f7701 --- /dev/null +++ b/files/de/web/html/element/image/index.html @@ -0,0 +1,48 @@ +--- +title: <image> +slug: Web/HTML/Element/image +tags: + - Element + - HTML + - HTML-Element + - HTML-Element-Referenz + - HTML-Referenz + - Nicht-Standard + - Obsolet + - Referenz +translation_of: Web/HTML/Element/image +--- +<div>{{obsolete_header}}</div> + +<div>{{non-standard_header}}</div> + +<p>Das HTML-Element <code><image></code> ist ein Überbleibsel einer alten Version von HTML, welche im Laufe der Zeit obsolet geworden ist; Stattdessen wird dazu geraten das Standard {{HTMLElement("img")}}-Element zu verwenden. Tatsächlich verwendet die Spezifikation wortwörtlich die Worte "Frag nicht" zur Beschreibung des Elements.</p> + +<div class="note"> +<p><strong>Nicht benutzen!<em> </em></strong>Um Bilder darzustellen, verwende das übliche {{HTMLElement("img")}}-Element.</p> +</div> + +<p>Auch wenn Browser versuchen werden, eine automatische Konvertierung in ein {{HTMLElement("img")}}-Element vorzunehmen, wird das nicht immer so sein, und auch wird der Versuch nicht immer glücken, wegen der unterschiedlichen Wege dorthin. Also benutze das Element einfach nicht, wenn dir an deinen Nutzern etwas gelegen ist.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>Es war vielleicht einmal Bestandteil der Spezifikation, aber niemand scheint sich mehr daran zu erinnern. Sicher ist, es ist kein Bestandteil mehr. Vermeide es wie die Pest.</p> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>Im Allgemeinen werden Browser versuchen das Element in ein <code><img></code> abzubilden, jedoch nur wenn das {{htmlattrxref("src", "img")}}-Attribute ebenso angegeben ist. Die Erstellung eines<code> <image></code>-Elements ohne ein <code>src</code>-Attribut resultiert in ein <code>HTMLElement</code>-Objekt mit dem lokalen Elementnamen "image". Wenn das Element jedoch mit einem <code>src</code>-Attribut erstellt wurde, ist das Ergebnis stattdessen ein <code>HTMLImageElement</code> und sein lokaler Elementname wird geändert zu "img".</p> + +<p>Dennoch bedeutet dies nicht, dass es eine gute Idee ist das Element zu nutzen. Ist es nämlich nicht.</p> + + + +<p>{{Compat("html.elements.image")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{HTMLElement("img")}}: Die richtige Art ein Bild in einem Dokument anzuzeigen.</li> + <li>{{HTMLElement("picture")}}: Eine mächtigere und richtige Art ein Bild in einem Dokument anzuzeigen.</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/de/web/html/element/img/index.html b/files/de/web/html/element/img/index.html new file mode 100644 index 0000000000..01c64c5747 --- /dev/null +++ b/files/de/web/html/element/img/index.html @@ -0,0 +1,348 @@ +--- +title: <img> +slug: Web/HTML/Element/img +translation_of: Web/HTML/Element/img +--- +<p>{{HTMLRef}}</p> + +<p>Das Element <strong><img></strong> fügt eine Grafik in ein Dokument ein.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorien</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Fließender Inhalt</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">gestaltender Inhalt</a>, eingebetteter Inhalt, fühlbarer Inhalt.<br> + Falls das Attribut {{htmlattrxref("usemap", "img")}} gesetzt ist, gehört das Element auch zu den interaktiven Inhalten.</td> + </tr> + <tr> + <th scope="row">Erlaubter Inhalt</th> + <td>Keiner, es ist ein {{Glossary("leeres Element")}}.</td> + </tr> + <tr> + <th scope="row">Tag-Verwendung</th> + <td>Muss einen Start-Tag, darf jedoch keinen End-Tag haben.</td> + </tr> + <tr> + <th scope="row">Erlaubte Elternelemente</th> + <td>Jedes Element, das gestaltenden Inhalt erlaubt.</td> + </tr> + <tr> + <th scope="row">DOM-Schnittstelle</th> + <td>{{domxref("HTMLImageElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes">Attributes</h2> + +<p>Dieses Element unterstützt die <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">globalen Attribute</a>.</p> + +<dl> + <dt>{{htmlattrdef("align")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>Ausrichtung der Grafik im Verhältnis zu ihrer Umgebung.<br> + Benutzen Sie stattdessen die CSS-Eigenschaft {{cssxref('vertical-align')}}.</dd> + <dt>{{htmlattrdef("alt")}}</dt> + <dd>Text, der vom Browser alternativ statt der Grafik angezeigt werden kann, zum Beispiel falls sie noch nicht heruntergeladen wurde, bei Übertragungsfehlern oder falls sie in keinem <a href="#Supported_image_formats" title="HTML/Element/Img#Supported image formats">unterstützten Format</a> vorliegt. Der Benutzer kann die Grafikdarstellung auch abgeschaltet haben oder einen Browser benutzen, der keine Grafik darstellen kann.</dd> + <dd>Der Text sollte das von der Grafik Dargestellte kurz und sinnvoll wiedergeben, so dass der Inhalt, den sie transportieren, ersichtlich wird. Ist dies nicht möglich, sollte das Attribut weggelassen werden.</dd> + <dd>Reine Dekorationselemente sollten hingegen mit einem leeren Attribut (<code>alt=""</code>) eingefügt werden; Alternativtexte wie "Roter Punkt" sind unbedingt zu vermeiden!</dd> + <dd> + <div class="note"> + <p><strong>Hinweis:</strong> Eine aussagekräftige Beschreibung des Bildes ist vor allem für die Barrierefreiheit von elementarer Bedeutung!<br> + Dies gilt auch für das leere Attribut <code>alt=""</code>. Browser können die (Ersatz-) Darstellung des img-Elements in diesem Fall ganz überspringen, was merklich der Übersichtlichkeit dient – niemand möchte einen Text vorgelesen bekommen, ständig von nutzlosen Hinweisen wie "Roter Punkt" unterbrochen.</p> + </div> + </dd> + <dt>{{htmlattrdef("border")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>Breite des Rahmens um die Grafik. Benutzen Sie stattdessen die CSS-Eigenschaft {{cssxref('border')}}.</dd> + <dt>{{htmlattrdef("crossorigin")}} {{HTMLVersionInline(5)}}</dt> + <dd>Ist dieses Attribut gesetzt, wird die betreffende Grafik mittels <a href="/en-US/docs/CORS_Enabled_Image" title="CORS_Enabled_Image">CORS </a>(Cross-Origin Resource Sharing) abgerufen, wahlweise ohne den Benutzer zu authentifizieren oder mit: + <dl> + <dt><code>"anonymous"</code></dt> + <dd>Es wird eine CORS-basierte Anfrage durchgeführt, jedoch wird keine Benutzerauthentifizierung mitgesendet (Cookies, X.509-Zertifikat, HTTP-Authentifizierung).</dd> + <dt><code>"use-credentials"</code></dt> + <dd>Es wird eine CORS-basierte Anfrage durchgeführt, gegebenenfalls mit Benutzerauthentifizierung (Cookies, X.509-Zertifikat, HTTP-Authentifizierung).</dd> + </dl> + Hat das Attribut einen ungültigen Wert, wird stattdessen die Einstellung <strong>anonymous</strong> angenommen.<br> + Fehlt das crossorigin-Attribut, wird die Grafik ohne CORS heruntergeladen (d.h. ohne die HTTP-Kopfzeile {{HTTPHeader('Origin')}}).</dd> + <dd>Damit das Dokument uneingeschränkt auf die Grafik zugreifen kann (zum Beispiel im {{HTMLElement("canvas")}}-Element), muss der Server zusätzlich mit einer {{HTTPHeader('Access-Control-Allow-Credentials')}}-Angabe antworten, die den Ursprung des Dokuments einschließt.</dd> + <dd>Weitere Informationen sind im Artikel über <a href="/en-US/docs/HTML/CORS_settings_attributes" title="CORS settings attributes">CORS-Attribute</a> nachzulesen.</dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>Tatsächliche Höhe der Grafik in {{HTMLVersionInline(5)}} CSS-Pixeln, in {{HTMLVersionInline(4)}} Bildschirmpixeln oder als prozentualer Wert.</dd> + <dt>{{htmlattrdef("hspace")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>Breite des Innenabstands links und rechts der Grafik. Benutzen Sie stattdessen die CSS-Eigenschaften {{cssxref('padding-left')}} und {{cssxref('padding-right')}} bzw. {{cssxref('padding')}}.</dd> + <dt>{{htmlattrdef("ismap")}}</dt> + <dd>Serverseitig verweissensitive Grafik. Ist dieses Attribut gesetzt, werden bei jedem Klick die betreffenden Mauskoordinaten an den Server gesendet. + <div class="note"> + <p><strong>Hinweis: </strong>Dieses Attribut ist nur bei <code><img></code>-Elementen erlaubt, die sich innerhalb eines {{htmlelement("a")}}-Elements mit einem gültigen {{htmlattrxref("href","a")}}-Attribut befinden.</p> + </div> + </dd> + <dt>{{htmlattrdef("longdesc")}}</dt> + <dd>URL einer längeren Beschreibung des Bildes, die als Ergänzung zum <strong>alt</strong>-Text dient.</dd> + <dt>{{htmlattrdef("name")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>Name des Elements. Benutzen Sie stattdessen das <strong>id</strong>-Attribut.</dd> + <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt> + <dd>Definiert, was beim Abruf der Grafik als verweisende URL in der HTTP-Kopfzeile {{HTTPHeader('Referer')}} an den Server gesendet werden soll: + <ul> + <li><code>"no-referrer"</code>: Es wird nichts gesendet.</li> + <li>"<code>no-referrer-when-downgrade</code>": Wurde das die Grafik enthaltende Dokument über eine gesicherte Verbindung (HTTPS) abgerufen, wird nur dann <em>keine</em> verweisende URL gesendet, falls die Grafik über eine <em>ungesicherte</em> Verbindung abgerufen wird.<br> + Dies ist das Standardverhalten des Browsers, falls nichts anderes angegeben wurde.</li> + <li><code>"origin"</code>: Es wird der Ursprung des Dokuments gesendet, üblicherweise das Protokoll, die Domain und gegebenenfalls der Port (zum Beispiel <code>http://example.com:88</code>).</li> + <li>"<code>origin-when-cross-origin</code>": Wie <code>origin</code>, jedoch nur, falls die Grafik von einem anderen Server abgerufen wird. Ist der Server der gleiche, wird die vollständige URL des Dokuments, einschließlich Pfad, gesendet.</li> + <li><code>"unsafe-url"</code>: Es wird immer die vollständige verweisende URL gesendet (jedoch ohne Fragmentbezeichner, Benutzername und Passwort).<br> + Dies ist unsicher, da zuvor über gesicherte Verbindungen abgerufene Informationen (die URL des Dokuments) auch über nichtgesicherte gesendet werden könnten (als verweisende URL beim Abruf der Grafik).</li> + </ul> + + <div class="note"> + <p><strong>Hinweis: </strong>In älteren Versionen hieß dieses Attribut <code>referrer</code>.</p> + </div> + </dd> + <dt>{{htmlattrdef("sizes")}}{{HTMLVersionInline(5)}}</dt> + <dd>Mit dem <code>sizes</code>-Attribut wird die Anzeigegröße der Grafik in Abhängigkeit von der Größe des Anzeigegeräts festgelegt. Es enthält mehrere, durch Kommata getrennte Einträge, jeweils bestehend aus: + <ol> + <li>einer CSS-Medienbedingung, zum Beispiel <code>(max-width: 480px)</code>. Diese Angabe entfällt für den letzten Eintrag.</li> + <li>einer CSS-Größenangabe.</li> + </ol> + + <p>Anhand dieser Einträge wählt der Browser eine der in <code>srcset</code> gebenenen Grafikquellen, sofern diese mit Breitenangaben ('<code>w</code>') versehen sind.<br> + Fehlt das <code>srcset</code>-Attribut oder enthält es keine Breitenangaben, wird <code>sizes</code> ignoriert.</p> + </dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>URL der Grafik. Dieses Attribut ist zwingend erforderlich.<br> + Browser, die <code>srcset</code> unterstützen, behandeln <code>src</code> als Grafik mit einer Pixeldichte von <code>1x</code>, sofern keine andere Grafik mit dieser Dichte in <code>srcset</code> aufgeführt ist oder falls <code>srcset</code> '<code>w</code>'-Bezeichner enthält.</dd> + <dt>{{htmlattrdef("srcset")}}{{HTMLVersionInline(5)}}</dt> + <dd><code>srcset</code> erlaubt das Bereitsstellen derselben Grafik in verschiedenen Versionen für niedrig- und hochauflösende Anzeigegeräte. Letztere profitieren von der höheren Bildqualität -bei größerer Datenmenge-, erstere von der geringeren Datenmenge.</dd> + <dd><code>srcset</code> enthält mehrere – durch Kommata getrennte – Einträge, jeweils bestehend aus: + <ol> + <li>einer URL,</li> + <li>optional, Leerzeichen gefolgt von einem Kennwert: + <ul> + <li>der tatsächlichen Breite dieser Quelle (positive Ganzzahl) gefolgt von dem Buchstaben <code>w</code>. Dieser Wert steht in Abhängigkeit zu den Einträgen im <code>sizes</code>-Attribut.</li> + <li>eine abstrakte Pixeldichte in Form einer positiven Kommazahl gefolgt von dem Buchstaben <code>x</code>.</li> + </ul> + </li> + </ol> + + <p>Ist kein Kennwert gegeben, wird für die jeweilige Quelle <code>1x</code> angenommen.</p> + + <p>Breitenangaben und Pixeldichten dürfen nicht gleichzeitig verwendet werden. Doppelte Kennwerte (zum Beispiel zwei Quellen desselben <code>srcset</code>-Attributs mit dem Kennwert '<code style="font-style: normal;">4x</code>') sind ebenfalls nicht erlaubt.</p> + + <p>Die Entscheidung, welche Quelle genutzt wird, obliegt alleine dem Browser. Neben den Eigenschaften der Anzeige können so auch Benutzereinstellungen oder die Internetverbindung berücksichtigt werden.</p> + </dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>Breite der Grafik in {{HTMLVersionInline(5)}} CSS-Pixeln, {{HTMLVersionInline(4)}} Bildschirmpixeln oder als prozentuale Angabe.</dd> + <dt>{{htmlattrdef("usemap")}}</dt> + <dd>Verweissensitive Grafik; das usemap-Attribut enthält das URL-Fragment (beginnend mit '#') der zugehörigen <a href="/en-US/docs/HTML/Element/map" title="HTML/Element/Map">Karte</a>. + <div class="note"> + <p><strong>Hinweis: </strong><code>usemap</code> kann nicht benutzt werden, falls sich das <code><img></code>-Element in einem {{htmlelement("a")}}- oder {{HTMLElement("button")}}-Element befindet. Die Verwendung würde mit <code>ismap</code> kollidieren.</p> + </div> + </dd> + <dt>{{htmlattrdef("vspace")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>Breite des Innenabstands über und unter der Grafik. Benutzen Sie stattdessen die CSS-Eigenschaften {{cssxref('padding-top')}} und {{cssxref('padding-bottom')}} bzw. {{cssxref('padding')}}.</dd> +</dl> + +<h2 id="Unterstützte_Grafikformate">Unterstützte Grafikformate</h2> + +<p>Der HTML-Standard gibt nicht vor, welche Grafikformate unterstützt werden müssen. JPEG und GIF sind in allen grafischen Browsern zu finden, ebenso mittlerweile das etwas jüngere PNG. Die Unterstützung für SVG ist beim Internet Explorer und älteren Android-Versionen nur rudimentär vorhanden, breite Unterstützung gibt es erst durch seit 2015 erschienene Browser (insbesondere des Internet-Explorer-Nachfolgers Edge).</p> + +<p>Gecko unterstützt die folgenden Formate:</p> + +<ul> + <li><a class="external" href="http://en.wikipedia.org/wiki/JPEG" title="http://en.wikipedia.org/wiki/JPEG">JPEG</a></li> + <li><a class="external" href="http://en.wikipedia.org/wiki/Graphics_Interchange_Format" title="http://en.wikipedia.org/wiki/Graphics_Interchange_Format">GIF</a>, einschließlich animierter</li> + <li><a class="external" href="http://en.wikipedia.org/wiki/Portable_Network_Graphics" title="http://en.wikipedia.org/wiki/Portable_Network_Graphics">PNG</a></li> + <li><a href="/en-US/docs/Animated_PNG_graphics" title="Animated PNG graphics">APNG</a> {{gecko_minversion_inline("1.9.2")}}</li> + <li><a href="/en-US/docs/SVG" title="SVG">SVG</a> {{gecko_minversion_inline("2.0")}}</li> + <li><a class="external" href="http://en.wikipedia.org/wiki/BMP_file_format" title="http://en.wikipedia.org/wiki/BMP_file_format">BMP</a></li> + <li><a class="external" href="http://en.wikipedia.org/wiki/ICO_%28file_format%29" title="http://en.wikipedia.org/wiki/ICO_%28file_format%29">BMP ICO</a></li> + <li><a class="external" href="http://en.wikipedia.org/wiki/ICO_%28file_format%29" title="http://en.wikipedia.org/wiki/ICO_%28file_format%29">PNG ICO</a> {{gecko_minversion_inline("9.0")}}</li> +</ul> + +<div class="note"> +<p><strong>Hinweis:</strong> Das <a class="external" href="http://en.wikipedia.org/wiki/X_BitMap" title="http://en.wikipedia.org/wiki/X_BitMap">XBM</a>-Format wird seit Gecko 1.9.2 nicht mehr unterstützt.</p> +</div> + +<h2 id="Beeinflussung_durch_CSS">Beeinflussung durch CSS</h2> + +<p>CSS behandelt <code><img></code> als <a href="/en-US/docs/CSS/Replaced_element" title="CSS/Replaced_element">ersetztes Element</a>.</p> + +<p>Bei der Verwendung im <code>inline</code>-Modus zusammen mit {{cssxref("vertical-align")}}<code>: baseline</code> wird die Unterkante der Grafik an der Grundline des Elternelements ausgerichtet, da die Grafik selbst keine Grundline besitzt.</p> + +<p>Ob eine Grafik festgelegte Abmessungen, d.h. Breite und Höhe hat, hängt vom Grafiktyp ab. SVG-Grafiken verfügen zum Beispiel nicht unbedingt darüber, sie erhalten ihre tatsächlichen Abmessungen aus ihrer Verwendung.</p> + +<h2 id="Fehlerbehandlung">Fehlerbehandlung</h2> + +<p>Schlägt die Übertragung oder Darstellung der Grafik fehl, wird die wurde mittels {{htmlattrxref("onerror")}} festgelegte Ereignisbehandlung ausgeführt. Mögliche Ursachen sind unter anderem:</p> + +<ul> + <li>Das {{htmlattrxref("src", "img")}}-Attribute ist leer oder <code>null</code>.</li> + <li>Die für <code>src</code> angegebene URL ist die gleiche wie die des Dokuments.</li> + <li>Die Grafikdaten sind unlesbar beschädigt oder auch nur, falls weder <code>width</code> noch <code>height</code> angegeben sind, in einer Weise, die es unmöglich macht, Abmessungen auszulesen.</li> + <li>Das Grafikformat wird vom {{Glossary("Browser")}} nicht unterstützt.</li> +</ul> + +<h2 id="Beispiel_1">Beispiel 1</h2> + +<pre class="brush: html"><img src="mdn-logo-sm.png" alt="MDN"> +</pre> + +<p><img alt="MDN" src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"></p> + +<h2 id="Beispiel_2_Anklickbare_Grafik_als_Verweis">Beispiel 2: Anklickbare Grafik als Verweis</h2> + +<pre class="brush: html"><a href="https://developer.mozilla.org/"><img src="mdn-logo-sm.png" alt="MDN"></a></pre> + +<p><a href="https://developer.mozilla.org/"><img alt="MDN" src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"> </a></p> + +<h2 id="Beispiel_3_Das_srcset-Attribut">Beispiel 3: Das <code>srcset</code>-Attribut</h2> + +<p>Das <code>src</code>-Attribut hat als Vorgabe den Wert <code>1x</code> bei Browsern, die <code>srcset</code> unterstützen.</p> + +<pre class="brush: html"> <img src="mdn-logo-sm.png" + alt="MDN" + srcset="mdn-logo-HD.png 2x"></pre> + +<h2 id="Beispiel_4_Die_Benutzung_von_srcset_und_size">Beispiel 4: Die Benutzung von <code>srcset</code> und <code>size </code></h2> + +<p>Browser, die <code>srcset</code> unterstützen, ignorieren <code>src</code> bei der Benutzung des Bezeichners '<code>w</code>'. Trifft im Beispiel die Bedingung <code>(min-width: 600px)</code> zu, ist die Grafik 200px breit, andernfalls 50vw (50% der Breite des Anzeigegeräts).</p> + +<pre class="brush: html" style="font-size: 14px;"> <img src="clock-demo-thumb-200.png" + alt="Clock" + srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w" + sizes="(min-width: 600px) 200px, 50vw"></pre> + +<h2 id="Specifications" name="Specifications">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Hinweis</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td> + <td>{{Spec2('Referrer Policy')}}</td> + <td>Attribut <code>referrer</code> hinzugefügt.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-img-element', '<img>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-img-element', '<img>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.2', '<img>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Eigenschaft</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td><img></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>srcset</code> </td> + <td>{{CompatChrome(34.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("32.0")}} (behind a pref)</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera(21)}}</td> + <td>{{CompatSafari(7.1)}}</td> + </tr> + <tr> + <td><code>referrer</code> </td> + <td>{{CompatChrome(46.0)}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("42.0")}} (behind a pref)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Eigenschaft</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>srcset</code> </td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(34.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>21</td> + <td>iOS 8</td> + <td>{{CompatChrome(34.0)}}</td> + </tr> + <tr> + <td><code>referrer</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(46.0)}} [1]</td> + <td>{{CompatGeckoMobile("42.0")}} (behind a pref)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(46.0)}} [1]</td> + </tr> + </tbody> +</table> + +<p>[1] Zuschaltbar als <code>referrerpolicy</code> implementiert.</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>HTML-Elemente {{HTMLElement("picture")}}, {{HTMLElement("object")}} und {{HTMLElement("embed")}}.</li> +</ul> + +<div> </div> diff --git a/files/de/web/html/element/index.html b/files/de/web/html/element/index.html new file mode 100644 index 0000000000..a623bb8edd --- /dev/null +++ b/files/de/web/html/element/index.html @@ -0,0 +1,249 @@ +--- +title: Element +slug: Web/HTML/Element +tags: + - HTML Elemente + - HTML Referenz +translation_of: Web/HTML/Element +--- +<div>{{HTMLSidebar("Elements")}}</div> + +<h2 id="HTML_Elemente">HTML Elemente</h2> + +<p>In dieser Liste sind alle HTML-Elemente aufgelistet, die in HTML5 oder vorherigen Versionen spezifiziert wurden. Wenn die Elemente in spitzen Klammern eingeschlossen sind, sind es HTML-Tags (<code><elementenname></code>). Elemente sind "Entities", die spezifizieren, wie das HTML-Dokument aufgebaut ist. Außerdem bestimmen sie, welcher Inhaltstyp in welchem Teil des HTML-Dokuments eingefügt werden sollte.</p> + +<p>Diese Seite listet alle aktuellen Standard-HTML-Tags auf, aber auch obsolete. Elemente, die erst in HTML5 eingeführt wurden, werden referenziert, wobei die anderen Elemente in HTML5 auch gültig sind.</p> + +<p>In HTML wird ein Element über das Start-Tag definiert und wenn das Element weiteren Inhalt enthält, wird ein Ende-Tag angefügt, das einen Slash <code></elementenname></code> beinhaltet. Einige Elemente müssen nicht geschlossen werden, wie z.B. das <code><img></code>-Tag. Diese Elemente werden auch void-Elemente genannt. Das HTML–Dokument besteht aus beliebig vielen Elementen, wobei diese Struktur der Elemente als Baum bezeichnet wird. Jedes Element repräsentiert den Inhalt über den Tag-Namen. So repräsentiert das <code><title></code>-Element den Titel des Dokuments. Weitere Elemente finden sie in der Liste.</p> + +<p>Die Elemente, die mit dem <a href="https://developer.mozilla.org/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="https://developer.mozilla.org/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a> Symbol gekennzeichnet sind, wurden in HTML5 eingeführt. Einige hier gelistete Elemente wurden in der HTML5 Spezifikation erweitert oder modifiziert. Elemente, die veraltet oder keine Standardelemente sind, sind ausgegraut. Es wird davon abgeraten diese Elemente in neuen Webseiten zu benutzen und sie sollten von existierenden Seiten entfernt werden, um unerwünschtes Verhalten zu vermeiden. </p> + +<p>Das Symbol {{FontAwesomeIcon("icon-cogs")}} kennzeichnet die Elemente, die in <a href="http://www.w3.org/TR/components-intro/" title="http://www.w3.org/TR/components-intro/">Web Components collection of specifications </a>definiert wurden.</p> + +<div class="index widgeted"><span id="A">A</span> + +<ul> + <li>{{ HTMLElement("a") }}</li> + <li>{{ HTMLElement("abbr") }}</li> + <li><s class="obsoleteElement">{{ HTMLElement("acronym") }}</s></li> + <li>{{ HTMLElement("address") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("applet") }}</s></li> + <li>{{ HTMLElement("area") }}</li> + <li class="html5">{{ HTMLElement("article") }}</li> + <li class="html5">{{ HTMLElement("aside") }}</li> + <li class="html5">{{ HTMLElement("audio") }}</li> +</ul> +<span id="B">B</span> + +<ul> + <li>{{ HTMLElement("b") }}</li> + <li>{{ HTMLElement("base") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("basefont") }}</s></li> + <li class="html5">{{ HTMLElement("bdi") }}</li> + <li>{{ HTMLElement("bdo") }}</li> + <li><s class="nonStdElement">{{ HTMLElement("bgsound") }}</s></li> + <li><s class="obsoleteElement">{{ HTMLElement("big") }}</s></li> + <li><s class="nonStdElement">{{ HTMLElement("blink") }}</s></li> + <li>{{ HTMLElement("blockquote") }}</li> + <li>{{ HTMLElement("body") }}</li> + <li>{{ HTMLElement("br") }}</li> + <li>{{ HTMLElement("button") }}</li> +</ul> +<span id="C">C</span> + +<ul> + <li class="html5">{{ HTMLElement("canvas") }}</li> + <li>{{ HTMLElement("caption") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("center") }}</s></li> + <li>{{ HTMLElement("cite") }}</li> + <li>{{ HTMLElement("code") }}</li> + <li>{{ HTMLElement("col") }}</li> + <li>{{ HTMLElement("colgroup") }}</li> + <li class="webcomp">{{ HTMLElement("content")}}</li> + <li></li> +</ul> +<span id="D">D</span> + +<ul> + <li class="html5">{{ HTMLElement("data") }}</li> + <li class="html5">{{ HTMLElement("datalist") }}</li> + <li>{{ HTMLElement("dd") }}</li> + <li class="webcomp">{{ HTMLElement("decorator")}}</li> + <li>{{ HTMLElement("del") }}</li> + <li class="html5">{{ HTMLElement("details") }}</li> + <li>{{ HTMLElement("dfn") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("dir") }}</s></li> + <li>{{ HTMLElement("div") }}</li> + <li>{{ HTMLElement("dl") }}</li> + <li>{{ HTMLElement("dt") }}</li> +</ul> +<span id="E">E</span> + +<ul> + <li class="webcomp">{{ HTMLElement("element")}}</li> + <li>{{HTMLElement("em") }}</li> + <li class="html5">{{ HTMLElement("embed") }}</li> +</ul> +<span id="F">F</span> + +<ul> + <li>{{ HTMLElement("fieldset") }}</li> + <li class="html5">{{ HTMLElement("figcaption") }}</li> + <li class="html5">{{ HTMLElement("figure") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("font") }}</s></li> + <li class="html5">{{ HTMLElement("footer") }}</li> + <li>{{ HTMLElement("form") }}</li> + <li><s class="obsoleteElement">{{ HTMLElement("frame") }}</s></li> + <li><s class="obsoleteElement">{{ HTMLElement("frameset") }}</s></li> +</ul> +<span id="G">G H</span> + +<ul> + <li>{{ HTMLElement("h1") }}</li> + <li>{{ HTMLElement("h2") }}</li> + <li>{{ HTMLElement("h3") }}</li> + <li>{{ HTMLElement("h4") }}</li> + <li>{{ HTMLElement("h5") }}</li> + <li>{{ HTMLElement("h6") }}</li> + <li>{{ HTMLElement("head") }}</li> + <li class="html5">{{ HTMLElement("header") }}</li> + <li class="html5"><s class="deprecatedElement obsoleteElement">{{ HTMLElement("hgroup") }}</s></li> + <li>{{ HTMLElement("hr") }}</li> + <li>{{ HTMLElement("html") }}</li> +</ul> +<span id="I">I</span> + +<ul> + <li>{{ HTMLElement("i") }}</li> + <li>{{ HTMLElement("iframe") }}</li> + <li>{{ HTMLElement("img") }}</li> + <li>{{ HTMLElement("input") }}</li> + <li>{{ HTMLElement("ins") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("isindex") }}</s></li> +</ul> +<span id="J">J K</span> + +<ul> + <li>{{ HTMLElement("kbd") }}</li> + <li class="html5">{{ HTMLElement("keygen") }}</li> +</ul> +<span id="L">L</span> + +<ul> + <li>{{ HTMLElement("label") }}</li> + <li>{{ HTMLElement("legend") }}</li> + <li>{{ HTMLElement("li") }}</li> + <li>{{ HTMLElement("link") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("listing") }}</s></li> +</ul> +<span id="M">M</span> + +<ul> + <li class="html5">{{HTMLElement("main")}}</li> + <li>{{ HTMLElement("map") }}</li> + <li class="html5">{{ HTMLElement("mark") }}</li> + <li><s class="nonStdElement">{{ HTMLElement("marquee") }}</s></li> + <li class="html5">{{ HTMLElement("menu") }}</li> + <li class="html5">{{ HTMLElement("menuitem") }}</li> + <li>{{ HTMLElement("meta") }}</li> + <li class="html5">{{ HTMLElement("meter") }}</li> +</ul> +<span id="N">N</span> + +<ul> + <li class="html5">{{ HTMLElement("nav") }}</li> + <li><s class="nonStdElement">{{ HTMLElement("nobr") }}</s></li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("noframes") }}</s></li> + <li>{{ HTMLElement("noscript") }}</li> +</ul> +<span id="O">O</span> + +<ul> + <li>{{ HTMLElement("object") }}</li> + <li>{{ HTMLElement("ol") }}</li> + <li>{{ HTMLElement("optgroup") }}</li> + <li>{{ HTMLElement("option") }}</li> + <li class="html5">{{ HTMLElement("output") }}</li> +</ul> +<span id="P">P</span> + +<ul> + <li>{{ HTMLElement("p") }}</li> + <li>{{ HTMLElement("param") }}</li> + <li class="html5">{{ HTMLElement("picture") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("plaintext") }}</s></li> + <li>{{ HTMLElement("pre") }}</li> + <li class="html5">{{ HTMLElement("progress") }}</li> +</ul> +<span id="Q">Q</span> + +<ul> + <li>{{ HTMLElement("q") }}</li> +</ul> +<span id="R">R</span> + +<ul> + <li class="html5">{{ HTMLElement("rp") }}</li> + <li class="html5">{{ HTMLElement("rt") }}</li> + <li class="html5">{{ HTMLElement("ruby") }}</li> +</ul> +<span id="S">S</span> + +<ul> + <li>{{ HTMLElement("s") }}</li> + <li>{{ HTMLElement("samp") }}</li> + <li>{{ HTMLElement("script") }}</li> + <li class="html5">{{ HTMLElement("section") }}</li> + <li>{{ HTMLElement("select") }}</li> + <li class="webcomp">{{ HTMLElement("shadow")}}</li> + <li>{{ HTMLElement("small") }}</li> + <li class="html5">{{ HTMLElement("source") }}</li> + <li><s class="nonStdElement">{{ HTMLElement("spacer") }}</s></li> + <li>{{ HTMLElement("span") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("strike") }}</s></li> + <li>{{ HTMLElement("strong") }}</li> + <li>{{ HTMLElement("style") }}</li> + <li>{{ HTMLElement("sub") }}</li> + <li class="html5">{{ HTMLElement("summary") }}</li> + <li>{{ HTMLElement("sup") }}</li> +</ul> +<span id="T">T</span> + +<ul> + <li>{{ HTMLElement("table") }}</li> + <li>{{ HTMLElement("tbody") }}</li> + <li>{{ HTMLElement("td") }}</li> + <li class="webcomp">{{ HTMLElement("template")}}</li> + <li>{{ HTMLElement("textarea") }}</li> + <li>{{ HTMLElement("tfoot") }}</li> + <li>{{ HTMLElement("th") }}</li> + <li>{{ HTMLElement("thead") }}</li> + <li class="html5">{{ HTMLElement("time") }}</li> + <li>{{ HTMLElement("title") }}</li> + <li>{{ HTMLElement("tr") }}</li> + <li class="html5">{{ HTMLElement("track") }}</li> + <li><s class="obsoleteElement">{{ HTMLElement("tt") }}</s></li> +</ul> +<span id="U">U</span> + +<ul> + <li>{{ HTMLElement("u") }}</li> + <li>{{ HTMLElement("ul") }}</li> +</ul> +<span id="V">V</span> + +<ul> + <li>{{ HTMLElement("var") }}</li> + <li class="html5">{{ HTMLElement("video") }}</li> +</ul> +<span id="W">W</span> + +<ul> + <li class="html5">{{ HTMLElement("wbr") }}</li> +</ul> +<span id="X">X Y Z </span> + +<ul> + <li><span id="X"><s class="deprecatedElement obsoleteElement">{{ HTMLElement("xmp") }}</s></span></li> +</ul> +</div> diff --git a/files/de/web/html/element/input/button/index.html b/files/de/web/html/element/input/button/index.html new file mode 100644 index 0000000000..d36dc8944b --- /dev/null +++ b/files/de/web/html/element/input/button/index.html @@ -0,0 +1,246 @@ +--- +title: <input type ="button"> +slug: Web/HTML/Element/Input/button +tags: + - Eingabeelement + - Element + - HTML + - Referenz +translation_of: Web/HTML/Element/input/button +--- +<p>{{HTMLRef}}</p> + +<p><span class="seoSummary">Das HTML <code><strong><input type="button"></strong></code> Element ist eine bestimmte Version des <strong><code><input></code></strong> Elements. Es wird benutzt, um einen anklickbaren Button zu generieren, der jedoch keinen voreingestellten Wert hat.</span></p> + +<p>Browser generieren einen Controller für clickbare Buttons ohne Standartwert. Ein Button kann beliebige Beschriftungen besitzen. Der Controller selbst variiert von Browser zu Browser.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th> + <td><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Interactive_content" title="HTML/Content categories#Interactive content">Interactive content</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Form_listed" title="HTML/Content categories#Form listed">listed</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Form_labelable" title="HTML/Content categories#Form labelable">labelable</a>, and <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Form_submittable" title="HTML/Content categories#Form submittable">submittable</a> <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Form-associated_" title="HTML/Content categories#Form-associated ">form-associated</a> element, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>None, both the starting and ending tag are mandatory. </td> + </tr> + <tr> + <th scope="row">Permitted parent elements</th> + <td>Any element that accepts <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement" title="The HTMLButtonElement interface provides properties and methods (beyond the <button> object interface it also has available to them by inheritance) for manipulating the layout and presentation of button elements."><code>HTMLButtonElement</code></a></td> + </tr> + <tr> + <th scope="row">Element Typ</th> + <td>Inline</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes">Attributes</h2> + +<p>Dieses Element kann zusätzlich zu den <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">globalen Attribute</a> jedes der folgenden besitzen:</p> + +<dl> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd> + <p>This Boolean attribute indicates that the user cannot interact with the button. If this attribute is not specified, the button inherits its setting from the containing element, for example {{HTMLElement("fieldset")}}; if there is no containing element with the <code><strong>disabled</strong></code> attribute set, then the button is enabled. The disabled control's value isn't submitted with the form and the <code>click</code> event <a class="external" href="https://html.spec.whatwg.org/multipage/forms.html#enabling-and-disabling-form-controls:-the-disabled-attribute">will not be dispatched</a> on disabled controls.</p> + </dd> + <dd> + <p>Firefox will, unlike other browsers, by default, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic disabled state</a> of a {{HTMLElement("button")}} across page loads. Use the {{htmlattrxref("autocomplete","button")}} attribute to control this feature.</p> + </dd> + <dt>{{htmlattrdef("autofocus")}} {{HTMLVersionInline(5)}}</dt> + <dd>This Boolean attribute lets you specify that the button should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form-associated element in a document can have this attribute specified.</dd> + <dt>{{htmlattrdef("autocomplete")}} {{non-standard_inline}}</dt> + <dd>The use of this attribute on a {{HTMLElement("button")}} is nonstandard and Firefox-specific. By default, unlike other browsers, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">Firefox persists the dynamic disabled state</a> of a {{HTMLElement("button")}} across page loads. Setting the value of this attribute to <code>off</code> (i.e., <code>autocomplete="off"</code>) disables this feature.</dd> + <dt>{{htmlattrdef("form")}} {{HTMLVersionInline(5)}}</dt> + <dd>The form element that the button is associated with (its <em>form owner</em>). The value of the attribute must be the <strong>id</strong> attribute of a {{HTMLElement("form")}} element in the same document. If this attribute is not specified, the <code><button></code> element must be a descendent of a form element. This attribute enables you to place <code><button></code> elements anywhere within a document, not just as descendents of their {{HTMLElement("form")}} elements.</dd> + <dt>{{htmlattrdef("formenctype")}}</dt> + <dd>Since the input element is a submit button, the <code><strong>formenctype</strong></code> attribute specifies the type of content that is used to submit the form to the server. Possible values are: + <ul> + <li><code>application/x-www-form-urlencoded</code>: The default value if the attribute is not specified.</li> + <li><code>multipart/form-data</code>: This value is used if an {{HTMLElement("input")}} element is used with the {{htmlattrxref("type","input")}} attribute set to <code>file</code>.</li> + <li><code>text/plain</code></li> + </ul> + + <p>If this attribute is specified, it overrides the {{htmlattrxref("enctype","form")}} attribute of the element's form owner.</p> + </dd> + <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline(5)}}</dt> + <dd>The URI of a program that processes the information submitted by the button. If specified, it overrides the {{htmlattrxref("action","form")}} attribute of the button's form owner.</dd> + <dt>{{htmlattrdef("formmethod")}}</dt> + <dd>Since the input element is a submit button, the <code><strong>formmethod</strong></code> attribute specifies the HTTP method that the browser uses to submit the form. Possible values are: + <ul> + <li><code>post</code>: The data from the form is included in the body of the form and is sent to the server.</li> + <li><code>get</code>: The data from the form is appended to the <strong>form</strong> attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.</li> + </ul> + + <p>If specified, this attribute overrides the {{htmlattrxref("method","form")}} attribute of the element's form owner.</p> + </dd> + <dt>{{htmlattrdef("formnovalidate")}}</dt> + <dd>Since the input element is a submit button, the <code><strong>formnovalidate </strong></code>attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the {{htmlattrxref("novalidate","form")}} attribute of the element's form owner. This is a Boolean attribute.</dd> + <dt>{{htmlattrdef("formtarget")}}</dt> + <dd>Since the input element is a submit button, the <code><strong>formtarget</strong></code> attribute is a name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a <em>browsing context</em> (for example, tab, window, or inline frame). If this attribute is specified, it overrides the {{htmlattrxref("target", "form")}} attribute of the element's form owner. The following keywords have special meanings: + <ul> + <li>_<code>self</code>: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.</li> + <li><code>_blank</code>: Load the response into a new unnamed browsing context.</li> + <li><code>_parent</code>: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as <code>_self</code>.</li> + <li><code>_top</code>: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as <code>_self</code>.</li> + </ul> + </dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd><span class="tlid-translation translation" lang="de"><span title="">Der Name der Schaltfläche, der mit den Formulardaten übermittelt wird.</span></span></dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>The type of the button. Possible values are: + <ul> + <li><code>submit</code>: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.</li> + <li><code>reset</code>: The button resets all the controls to their initial values.</li> + <li><code>button</code>: The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.</li> + </ul> + </dd> + <dt>{{htmlattrdef("value")}}</dt> + <dd>The initial value of the button.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush:html"><input type="button" value="Klick mich"> +</pre> + +<p>Das erstellt einen neuen Button mit der Beschriftung: 'Klick mich'.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table" style="height: 137px; width: 1065px;"> + <tbody> + <tr> + <td>Specification</td> + <td>Status</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-button-element', '<button>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-button-element', '<button>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.5', '<button>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibiltiy">Browser Compatibiltiy</h2> + +<table class="standard-table"> + <caption>Browser Compatibility</caption> + <tbody> + <tr> + <td>Feature</td> + <td>Chrome</td> + <td>Gecko (Firefox)</td> + <td>Internet Explorer</td> + <td>Opera</td> + <td>Safari</td> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>formenctype</code> attribute</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.6</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>formmethod</code> attribute</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>autofocus</code> attribute</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>9.6</td> + <td>5.0</td> + </tr> + <tr> + <td><code>formaction</code> attribute</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption>Mobile Browser Compatibility</caption> + <tbody> + <tr> + <td>Feature</td> + <td>Android</td> + <td>Gecko (Firefox Mobile)</td> + <td>Internet Explorer Mobile</td> + <td>Opera Mobile</td> + <td>Safari Mobile</td> + </tr> + <tr> + <td>Basic Support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>formaction </code>attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>formenctype </code>attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>formmethod</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The generic {{HTMLElement("input")}} element and the interface used to manipulate it, {{domxref("HTMLInputElement")}}</li> +</ul> diff --git a/files/de/web/html/element/input/checkbox/index.html b/files/de/web/html/element/input/checkbox/index.html new file mode 100644 index 0000000000..5d2af0d966 --- /dev/null +++ b/files/de/web/html/element/input/checkbox/index.html @@ -0,0 +1,352 @@ +--- +title: <input type="checkbox"> +slug: Web/HTML/Element/Input/checkbox +tags: + - Element + - HTML + - HTML forms + - Input + - Input Types + - Reference + - checkbox + - form +translation_of: Web/HTML/Element/input/checkbox +--- +<div>{{HTMLRef}}</div> + +<p>{{htmlelement("input")}}-Elemente vom Typ <strong><code>checkbox</code></strong> werden standardmäßig als Kästchen gerendert, die mit einem Häkchen versehen (angeklickt) sind, wenn sie aktiviert sind, ähnlich wie man es von offiziellen Formularen kennt. Das exakte Erscheinungsbild hängt vom System ab, auf dem der Browser läuft. Normalerweise ist es ein Quadrat aber es kann auch abgerundete Ecken haben. Eine Checkbox erlaubt die Auswahl eines einzelnen Wertes zur Übertragung in einer Form (oder nicht).</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-checkbox.html", "tabbed-standard")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</div> + +<div class="note"> +<p><strong>Anmerkung</strong>: <a href="/en-US/docs/Web/HTML/Element/input/radio">Radio buttons</a> sind Checkboxen ähnlich, jedoch mit einer wichtigen Ausnahme - Radiobuttons sind in einem Satz gruppiert, in dem nur ein Radiobutton aktiviert sein kann, während Checkboxen es erlauben, einen einzelnen Wert an- und auszuschalten. Dort wo mehrere Steuerelemente exisiteren, erlauben es Radiobuttons, eines davon zu selektieren, während Checkboxen mehrere Werte setzen können.</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>Ein {{domxref("DOMString")}} der den Wert der Checkbox repräsentiert.</td> + </tr> + <tr> + <td><strong>Events</strong></td> + <td>{{event("change")}} und {{event("input")}}</td> + </tr> + <tr> + <td><strong>Supported common attributes</strong></td> + <td><code>checked</code></td> + </tr> + <tr> + <td><strong>IDL attributes</strong></td> + <td><code>{{anch("checked")}}</code> und <code>{{anch("value")}}</code></td> + </tr> + <tr> + <td><strong>Methods</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Value">Value</h2> + +<p>Ein {{domxref("DOMString")}} der den Wert der checkbox repräsentiert. Dies findet man nicht clientseitig, aber auf Servern ist dies der Wert (<strong><code>value</code></strong>), der beim Übermitteln der Daten mit dem Checkbox-<strong><code>name </code></strong>übergeben wird. Sehen wir uns folgendes Beispiel an:</p> + +<pre class="brush: html"><form> + <div> + <input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter"> + <label for="subscribeNews">Subscribe to newsletter?</label> + </div> + <div> + <button type="submit">Subscribe</button> + </div> +</form></pre> + +<p>{{EmbedLiveSample('Value', 600, 60)}}</p> + +<p>In diesem Beispiel haben wir einen Namen <code>subscribe</code> und einen Wert <code>newsletter</code>. Wenn die Form übertragen wird, wird das name/value pair <code>subscribe=newsletter</code> sein.</p> + +<p>Wird das <code>value</code>-Attribut weggelassen, ist der default value für die Checkbox <code>on</code>, in diesem Fall würden also die übertragenen Daten <code>subscribe=on</code> sein.</p> + +<div class="note"> +<p><strong>Anmerkung</strong>: Wenn beim Übertragen der Form eine Checkbox nicht angeklickt (unchecked) ist, so wird kein Wert vorgesehen, der den unchecked-Status repräsentiert (z.B. <code>value=unchecked</code>); der Wert wird überhaupt nicht zum Server übertragen. Wenn Sie einen default-Wert für die Checkbox übertrgen wollen, können Sie - eventuell durch JavaScript generiert - ein {{HTMLElement("input/hidden", '<input type="hidden">')}} in die Form einbauen, das den selben <code>name</code> and <code>value</code> wie die Checkbox hat.</p> +</div> + +<h2 id="Zusätzliche_Attribute">Zusätzliche Attribute</h2> + +<p>Zusätzlich zu den allgemeinen Attributen, die von allen {{HTMLElement("input")}}-Elementen geteilt werden, unterstützen "<code>checkbox</code>"-Inputs die folgenden Attribute:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attribute</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("checked")}}</code></td> + <td>Boolean; wenn vorhanden, wird die Checkbox standardmäßig auf <code>on</code> gestellt.</td> + </tr> + <tr> + <td><code>{{anch("readonly")}}</code></td> + <td>Boolean; wenn vorhanden, wird das Erscheinungsbild abgeändert, so dass angezeigt wird, dass der Wert nicht geändert werden kann.</td> + </tr> + <tr> + <td><code>{{anch("value")}}</code></td> + <td>Der String, der beim Übertragen der Form benutzt wird, wenn die Checkbox den Wert <code>on </code>hat.</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefchecked">{{htmlattrdef("checked")}}</h3> + +<p>Ein Boolean-Attribut, das angibt, ob die Checkbox standardmäßig <code>checked</code> ist oder nicht (wenn die Seite gelaoden wird). Es gibt nicht an, ob diese Checkbox aktuell den Status checked hat: Wenn der Status der Checkbox sich ändert, gibt dieses Content Attribut die Änderung nicht wieder. (Nur das {{domxref("HTMLInputElement")}}’s <code>checked</code> IDL Attribut wird aktualisiert)</p> + +<div class="note"> +<p><strong>Anmerkung:</strong> Anders als andere Eingabe-Steuerelemente ist eine Checkbox nur dann in den übermittelten Daten vorhanden, wenn die Checkbox angeklickt (<code>checked</code>) ist. Wenn das der Fall ist, wird der Wert der Checkbox (<code>value</code>) als die Eingabe übermittelt.</p> +</div> + +<p>Anders als andere Browser, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">speichert </a>Firefox standardmäßig den dynamischen Status von <code><input></code> zwischen mehreren Seitenaufrufen. Benutzen Sie das {{htmlattrxref("autocomplete","input")}}-Attribut, um dieses Feature zu steuern.</p> + +<h3 id="htmlattrdefreadonly">{{htmlattrdef("readonly")}}</h3> + +<p>Ein Boolean-Attribut, das angibt, ob der Wert dieser Checkbox durch den Benutzer geändert werden kann oder nicht. Bedenken Sie, dass dieses Attribut nur die Erscheinungsform der Checkbox ändert, typischweise, indem eine graue Farbe für Linien und Hintergrund verwendet werden. Dieses Attribut hat jedoch keinen Einfluss auf den Status der Checkbox, der auch immer noch vom Benutzer geändert werden kann. Wenn Sie darüber hinaus verhindern wollen, dass der Benutzer den Status der Checkbox ändert, müssen Sie das <code>disabled</code>-Attribut verwenden. Wenn Sie jedoch das <code>disabled</code>-Attribut verwenden, bedenken Sie, dass der Wert des Steuerelements nicht übertragen wird, wenn die Form übermittelt wird.</p> + +<h3 id="htmlattrdefvalue">{{htmlattrdef("value")}}</h3> + +<p>Das <code>value</code>-Attribut ist eines der Attribute, das alle {{HTMLElement("input")}}s teilen. Es bietet jedoch einen speziellen Nutzen für Inputs vom Typ <code>checkbox</code>: Wenn eine Form übermittelt wird, werden Checkboxen nur dann übermittelt, wenn sie aktuell angeklickt sind, und der übermittelte Wert ist der Wert aus dem <code>value</code>-Attribut. Wenn der Wert nicht anderweitig spezifiziert ist, ist es standarsmäßig der String <code>on</code>. Dies wird im Abschnitt {{anch("Value")}} demonstriert.</p> + +<h2 id="checkbox_inputs_benutzen">checkbox inputs benutzen</h2> + +<p>Wir haben oben schon die gängisten Nutzungsmöglichkeiten von Checkoxen gesehen. Lassen Sie uns nun die weiteren Features betrachten, die Sie vielleicht brauchen werden.</p> + +<h3 id="Mit_multiple_checkboxes_umgehen">Mit multiple checkboxes umgehen</h3> + +<p>Das Besipiel oben enthielt nur eine Checkbox; in Wirklichkeit werden Sie wahrscheinlich mehrere Checkboxen entdecken. Wenn sie keinen Bezug haben, dann können sie alle separat betrachtet werden, so wie oben gezeigt. Wenn sie jedoch in Beziehung zueinander stehen, sind die Dinge nicht mehr so einfach.</p> + +<p>Im folgenden Demo bauen wir mehrere Checkboxen ein, um dem Benutzer zu erlauben, seine Interessen auszuwählen. (Ganze Version im {{anch("Beispiele")}}-Abschnitt).</p> + +<pre class="brush: html"><fieldset> + <legend>Choose your interests</legend> + <div> + <input type="checkbox" id="coding" name="interest" value="coding"> + <label for="coding">Coding</label> + </div> + <div> + <input type="checkbox" id="music" name="interest" value="music"> + <label for="music">Music</label> + </div> +</fieldset></pre> + +<p>{{EmbedLiveSample('Handling_multiple_checkboxes', 600, 100)}}</p> + +<p>In diesem Beispiel werden Sie sehen, dass wir jeder Checkbox den selben <code>name</code> gegeben haben. Wenn beide Checkboxen checked sind und dann die Form übermittelt wird, werden Sie einen String mit name/value pairs wie folgt erhalten: <code>interest=coding&interest=music</code>. Wenn der String den Server erreicht, müssen Sie ihn anders parsen als ein assoziatives Array, so dass alle Werte und nicht nur der letzte von <code>interest</code> ermittelt werden. Für eine Technik, die mit PHP eingesetzt wird, sehen Sie sich dieses Beispiel an: <a class="question-hyperlink" href="http://stackoverflow.com/questions/18745456/handle-multiple-checkboxes-with-a-single-serverside-variable">Handle Multiple Checkboxes with a Single Serverside Variable</a>.</p> + +<h3 id="Checkboxen_auf_checked_setzen">Checkboxen auf 'checked' setzen</h3> + +<p>Um eine Checkbox auf den Wert 'checked' zu setzen, geben Sie ihm einfach das <code>checked</code>-Attribute. Sehen Sie sich das Beispiel unten an:</p> + +<pre class="brush: html"><fieldset> + <legend>Choose your interests</legend> + <div> + <input type="checkbox" id="coding" name="interest" value="coding" checked> + <label for="coding">Coding</label> + </div> + <div> + <input type="checkbox" id="music" name="interest" value="music"> + <label for="music">Music</label> + </div> +</fieldset></pre> + +<p>{{EmbedLiveSample('Checking_boxes_by_default', 600, 100)}}</p> + +<h3 id="Einen_größeren_Click-Bereich_für_die_Checkbox_vorsehen">Einen größeren Click-Bereich für die Checkbox vorsehen</h3> + +<p>In den Beispielen oben werden Sie gesehen haben, dass man den Wert der Checkbox ebenso umschalten kann, indem man auf das {{htmlelement("label")}}-Element klickt, das mit der Checkbox verbunden ist, wie wenn man auf die Checkbox selbst klickt. Das ist ein wirklich hilfreiches Feature von HTML Form Labels, das es einfacher macht, die Option anzuklicken, die man möchte, speziell auf kleinen Bildschirmen wie z.B. bei Smartphones.</p> + +<p>Neben der Benutzbarkeit ist dies ein guter Grund, die <code><label></code>-Elemente in der Form sauber aufzusetzen.</p> + +<h3 id="Checkboxen_mit_unbestimmbarem_Wert">Checkboxen mit unbestimmbarem Wert</h3> + +<p>Zusätzlich zu den Status-Werten <code>checked </code>und <code>unchecked </code>gibt es einen dritten Status, den eine Checkbox annehmen kann: <strong>indeterminate</strong>. Dies ist ein Status, bei dem man nich sagen kann, ob das Element <code>on</code> oder <code>off</code> ist. Dies wird gesetzt durch die {{domxref("HTMLInputElement")}} object's <code>indeterminate</code> Eigenschaft via JavaScript (es kann nicht durch HTML gesetzt werden):</p> + +<pre class="brush: js">inputInstance.indeterminate = true;</pre> + +<p>Eine Checkbox im indeterminate-Status hat in den meisten Browsern eine horizontale Linie in der Box (es sieht ein bisschen wie ien Bindestrich oder ein Minus-Zeichen aus) anstatt eines Häkchens.</p> + +<p>Es gibt nicht viele Fälle, in denen diese Eigenschaft sinnvoll eingesetzt werden kann. Am häufigsten ist der Gebrauch, wenn eine Checkbox eine Gruppe von Unteroptionen (die ebenfalls Checkboxen sind) beherbergt.Wenn alle Unteroptionen angeklickt (<code>checked</code>) sind, dann ist die übergeordnete Checkbox auch <code>checked</code>, sind alle Unteroptionen <code>unchecked</code>, so ist die übergeordnete Checkbox ebenfalls <code>unchecked</code>. In allen anderen Fällen hätte die übergeordnete Checkbox den Status <code>indeterminate</code> .</p> + +<p>Im Besipiel unten kann man dies sehen (Dank an <a href="https://css-tricks.com/indeterminate-checkboxes/">CSS Tricks</a> für die Inspiration). In diesem Beispiel halten wir Zutaten vor, die für ein Rezept gesammelt werden. Wenn Sie eine Zutaten-Checkbox an- oder ausklicken, prüft eine JavaScript-Funktion die Gesamtzahl der ausgewählten Zutaten.</p> + +<ul> + <li>Wenn keine Checkboxen den Status <code>checked</code> haben, hat die Rezept-Checkbox den Status <code>unchecked</code></li> + <li>Wenn eine oder zwei den Status <code>checked</code> haben, wird der Status der Rezept-Checkbox auf <code>indeterminate</code> gesetzt.</li> + <li>Sind alle drei Checkboxen angeklickt, wird der Status der Rezeot.Checkbox auf <code>checked</code> gesetzt.</li> +</ul> + +<p>In diesem Fall wird also der <code>indeterminate</code>-Status benutzt, um anzuzeigen, dass das Sammeln der Zutaten begonnen hat, das Rezept aber noch nicht komplett ist.</p> + +<pre class="brush: js" id="line1"> var overall = document.querySelector('input[id="EnchTbl"]'); + var ingredients = document.querySelectorAll('ul input'); + + overall.addEventListener('click', function(e) { + e.preventDefault(); + }); + + for(var i = 0; i < ingredients.length; i++) { + ingredients[i].addEventListener('click', updateDisplay); + } + + function updateDisplay() { + var checkedCount = 0; + for(var i = 0; i < ingredients.length; i++) { + if(ingredients[i].checked) { + checkedCount++; + } + } + + if(checkedCount === 0) { + overall.checked = false; + <strong>overall.indeterminate = false;</strong> + } else if(checkedCount === ingredients.length) { + overall.checked = true; + <strong>overall.indeterminate = false;</strong> + } else { + overall.checked = false; + <strong>overall.indeterminate = true;</strong> + } + }</pre> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/indeterminate-example/index.html", '100%', 200)}}</p> + +<div class="note"> +<p><strong>Anmerkung</strong>: Wenn Sie eine From mit einer indeterminate Checkbox übermitteln, passiert dasselbe, wie wenn die Checkbox den Status unchecked hat - es werden keine Daten übermittelt, die die Checkbox repräsentieren.</p> +</div> + +<h2 id="Gültigkeitsprüfung">Gültigkeitsprüfung</h2> + +<p>Checkboxen unterstützen <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">validation</a> (Gültigkeitsprüfung) (allen {{HTMLElement("input")}}s verfügbar). Jedoch werden die meisten {{domxref("ValidityState")}}s immer <code>false</code> sein. Wenn die Checkbox das {{htmlattrxref("required", "input")}}-Attribut hat, aber nicht angeklickt ist, then {{domxref("ValidityState.valueMissing")}}, dann wird der Wert <code>true</code> sein.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Das folgende Beispiel ist eine erweiterte Version des "multiple checkboxes"-Beispiels, das wir oben gesehen haben. — es hat mehr Standard-Optionen, plus eine "andere" Checkbox, die, wenn sie angeklickt wird, verursacht, dass eine Textbox erscheint, in die man einen Wert für die "andere" Option eingeben kann. Dies wird durch einen einfachen javaScript-Block erreicht. Das Beispiel enthält ebenso etwas CSS, um das Styling zu verbessern.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><form> + <fieldset> + <legend>Choose your interests</legend> + <div> + <input type="checkbox" id="coding" name="interest" value="coding"> + <label for="coding">Coding</label> + </div> + <div> + <input type="checkbox" id="music" name="interest" value="music"> + <label for="music">Music</label> + </div> + <div> + <input type="checkbox" id="art" name="interest" value="art"> + <label for="art">Art</label> + </div> + <div> + <input type="checkbox" id="sports" name="interest" value="sports"> + <label for="sports">Sports</label> + </div> + <div> + <input type="checkbox" id="cooking" name="interest" value="cooking"> + <label for="cooking">Cooking</label> + </div> + <div> + <input type="checkbox" id="other" name="interest" value="other"> + <label for="other">Other</label> + <input type="text" id="otherValue" name="other"> + </div> + <div> + <button type="submit">Submit form</button> + </div> + </fieldset> +</form></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +form { + width: 600px; + margin: 0 auto; +} + +div { + margin-bottom: 10px; +} + +fieldset { + background: cyan; + border: 5px solid blue; +} + +legend { + padding: 10px; + background: blue; + color: cyan; +} +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">var otherCheckbox = document.querySelector('input[value="other"]'); +var otherText = document.querySelector('input[id="otherValue"]'); +otherText.style.visibility = 'hidden'; + +otherCheckbox.addEventListener('change', () => { + if(otherCheckbox.checked) { + otherText.style.visibility = 'visible'; + otherText.value = ''; + } else { + otherText.style.visibility = 'hidden'; + } +});</pre> + +<p>{{EmbedLiveSample('Examples', '100%', 300)}}</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#checkbox-state-(type=checkbox)', '<input type="checkbox">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#checkbox-state-(type=checkbox)', '<input type="checkbox">')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + + + +<p>{{Compat("html.elements.input.input-checkbox")}}</p> + +<h2 id="Weiterführende_Informationen">Weiterführende Informationen</h2> + +<ul> + <li>{{HTMLElement("input")}} and the {{domxref("HTMLInputElement")}} interface which implements it.</li> + <li>The {{cssxref(":checked")}} and {{cssxref(":indeterminate")}} CSS selectors let you style checkboxes based on their current state</li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Compatibility of CSS properties</a></li> +</ul> diff --git a/files/de/web/html/element/input/index.html b/files/de/web/html/element/input/index.html new file mode 100644 index 0000000000..92754c05f9 --- /dev/null +++ b/files/de/web/html/element/input/index.html @@ -0,0 +1,1411 @@ +--- +title: <input> +slug: Web/HTML/Element/Input +tags: + - Element + - Formulare + - HTML + - HTML Formulare + - HTML input tag + - NeedsMobileBrowserCompatibility + - Referenz + - Web +translation_of: Web/HTML/Element/input +--- +<div>{{draft}}{{HTMLRef}}</div> + +<p>Das <strong>HTML-Element <code><input></code></strong> ermöglicht es, interaktive Bedienelemente für webbasierte Formulare zu erstellen, die Daten vom Benutzer entgegennehmen.<br> + Eine große Bandbreite verschiedener Eingabedaten und Bedienelemente ist verfügbar, abhängig je nach Gerät und {{Glossary("user agent")}}. Das <code><input></code> Element ist eine der mächtigsten und komplexesten von allen HTML-Elemente, da es eine ungeheure Anzahl an Kombinationen aus Eingabetypen und Attributen besitzt.</p> + +<h2 id="Beispiel">Beispiel</h2> + +<p>Um einen Eindruck davon zu bekommen, wie die unterschiedlichen Typen des <input>-Elements aussehen, kannst du die Werte des Attributs <strong>type</strong> im folgenden editierbaren Live-Beispiel ändern. Die Ausgabe verändert sich, während du tippst. In jedem Fall erzeugt der Anfangswert <code>text</code> eine einfache Textausgabe. Du kannst andere Werte ausprobieren, etwa <code>number</code>, <code>color</code>, <code>checkbox</code>, <code>radio</code>, <code>date</code>, <code>file</code>, <code>month</code>, <code>password</code>, <code>range</code> oder <code>time</code>.</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/editable-input-example/editable_input.html", '100%', 230)}}</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, listed, submittable, resettable, form-associated element, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>.<br> + Wenn der {{htmlattrxref("type", "input")}} nicht den Wert <code>hidden</code> hat, dann ein label-bares Element, mit greifbarem Inhalt.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td>Keiner, das ist ein leeres Element.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>Muss ein Start-Tag und darf kein End-Tag haben</td> + </tr> + <tr> + <th scope="row">Erlaubte Elternknoten</th> + <td>Jedes Element, das <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a> erlaubt.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td> + <ul> + <li><code>type=button</code>: {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}</li> + <li><code>type=checkbox</code>: {{ARIARole("button")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("option")}}, {{ARIARole("switch")}}</li> + <li><code>type=image</code>: {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}</li> + <li><code>type=radio</code>: {{ARIARole("menuitemradio")}}</li> + <li><code>type=color|date|datetime|datetime-local|email|file</code>: None</li> + <li><code>type=hidden|month|number|password|range|research</code>: None</li> + <li><code>type=search|submit|tel|text|url|week</code>: None</li> + </ul> + </td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLInputElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="sect1"></h2> + +<h2 id="Arten_des_<input>-Elements">Arten des <input>-Elements</h2> + +<p>Wie ein <input> sich verhält ist stark von seinem <strong>type</strong>-Attribut abhängig. Deshalb werden dessen Werte in einer eigenen Referenz beschrieben. Fehlt das Attribut, gilt der Standardwert <code>text</code>.</p> + +<p><code>type</code> kann folgende Werte annehmen:</p> + +<ul> + <li><a href="https://developer.mozilla.org/de-DE/docs/Web/HTML/Element/input/button">button</a>: Ein Knopf zum Drücken ohne voreingestelltes Verhalten. </li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox">checkbox</a>: Ein Kästchen zum Auswählen. Das <strong>value</strong>-Attribut muss benutzt werden, um den Wert zu definieren, den dieses Element übermittelt. Mit dem <strong>checked</strong>-Attribut kann angezeigt werden, dass das Element ausgewählt ist. Es ist auch möglich das <strong>indeterminate</strong>-Attribut zu verwenden, um anzuzeigen, dass das Kästchen sich in einem undefinierten Zustand befindet (auf den meisten Plattformen wird dies durch eine horizontale Linie durch das Kästchen dargestellt).</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color">color</a>: {{HTMLVersionInline("5")}} Ein Bedienelement zum Festlegen einer Farbe. Die Benutzerschnittstelle einer Farbauswahl muss nichts anderes tun, als einfache Farben als Text anzunehmen. (<a href="http://www.w3.org/TR/html5/forms.html#color-state-(type=color)">mehr Infos</a>).</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date">date</a>: {{HTMLVersionInline("5")}} Ein Bedienelement zum Eingeben eines Datum (Jahr, Monat und Tag, ohne Uhrzeit).</li> + <li><a href="/de/docs/Web/HTML/Element/input/datetime-local">datetime-local</a>: {{HTMLVersionInline("5")}} Ein Bedienelement zum Eingeben eines Datums mit Uhrzeit, ohne Zeitzone.</li> + <li><a href="/de/docs/Web/HTML/Element/input/email">email</a>: {{HTMLVersionInline("5")}} Ein Feld zum Bearbeiten einer E-Mail-Adresse. Der Eingabewert wird vor dem Übermitteln darauf überprüft, ob er entweder leer ist oder eine einzelne, valide E-Mail-Adresse enthält. Die CSS-Pseudoklassen {{cssxref(":valid")}}- und {{cssxref(":invalid")}} werden entsprechend gesetzt.</li> + <li><code>file</code>: Ein Bedienelement, das den Nutzer eine Datei auswählen lässt. Das <strong>accept</strong>-Attribut definiert die Art der auswählbaren Dateien.</li> + <li><code>hidden</code>: Ein unsichtbares Bedienelement, dessen Wert aber dennoch an den Server übermittelt wird.</li> + <li><code>image</code>: Ein graphischer Knopf zum Abschicken. Das <strong>src</strong>-Attribut ist erforderlich, um die Quelle des Bildes anzugeben. Im ebenfalls verpflichtenden a<strong>lt</strong>-Attribut ist alternativer Text zu definieren. Die <strong>height</strong>- und <strong>width</strong>-Attribute können benutzt werden um die Größe des Bildes in Pixeln anzugeben. </li> + <li><code>month</code>: {{HTMLVersionInline("5")}} Ein Bedienelement zum Eingeben von Monat und Jahr, ohne Zeitzone.</li> + <li><code>number</code>: {{HTMLVersionInline("5")}} Ein Bedienelement zum Eingeben einer Gleitkommazahl. </li> + <li><code>password</code>: Ein einzeiliges Textfeld, dessen Wert verschleiert wird. Das <strong>maxlength</strong>-Attribut legt die maximale Länge des einzugebenden Wertes fest. + <div class="note"><strong>Bemerkung</strong>: Alle Formulare mit sensitiven Daten wie Passwörter (z.B. Anmeldeformulare) sollten über HTTPS ausgeliefert werden. Firefox warnt mit verschiedenen Methoden vor unsicheren Anmeldeverfahren (siehe <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Insecure_passwords">Insecure passwords</a>). Andere Browser bieten ähnliche Mechanismen.</div> + </li> + <li><code>radio</code>: Ein Schaltknopf. Das <strong>value</strong>-Attribut muss verwendet werden, um den von diesem Element übermittelten Wert festzulegen. Das <strong>checked</strong>-Attribut definiert, ob es standardmäßig angewählt ist. Schaltknöpfe mit demselben Wert für das <strong>name</strong>-Attribut gehören zur selben Gruppe. Nur jeweils ein Schaltknopf einer Gruppe kann angewählt sein. </li> + <li><code>range</code>: {{HTMLVersionInline("5")}} Ein Bedienelement zum Eintragen einer Zahl, deren genauer Wert unwichtig ist. Sind die entsprechenden Attribute nicht festgelegt, gelten folgende Voreinstellungen: + <ul> + <li><code>min</code>: 0</li> + <li><code>max</code>: 100</li> + <li><code>value</code>: <code>min</code> + (<code>max</code>-<code>min</code>)/2, or <code>min</code> if <code>max</code> is less than <code>min</code></li> + <li><code>step</code>: 1</li> + </ul> + </li> + <li><code>reset</code>: Ein Knopf, der den Inhalt des Formulars auf die Standardwerte zurücksetzt. </li> + <li><code>search</code>: {{HTMLVersionInline("5")}} Ein einzeiliges Textfeld zur Eingabe von Suchbegriffen. Zeilenumbrüche werden automatisch aus dem Eingabewert entfernt. </li> + <li><code>submit</code>: Ein Knopf zum Übermitteln des Formulars. </li> + <li><code>tel</code>: {{HTMLVersionInline("5")}} Ein Bedienelement zum Anzeigen einer Telefonnummer. Zeilenumbrüche werden automatisch aus dem Eingabewert entfernt, sonst werden keine anderen Regeln erzwungen. Attribute wie pattern und <strong>maxlength</strong> können verwendet werden, um zulässige Werte einzuschränken. Die CSS-Pseudoklassen {{cssxref(":valid")}}- und {{cssxref(":invalid")}} werden entsprechend gesetzt.</li> + <li><code>text</code>: Ein einzeiliges Textfeld; Zeilenumbrüche werden automatisch aus dem Eingabewert entfernt. </li> + <li><code>time</code>: {{HTMLVersionInline("5")}} Ein Bedienelement zum Eingeben einer Uhrzeit ohne Zeitzone.</li> + <li><code>url</code>: {{HTMLVersionInline("5")}} Ein Feld zum Eingeben einer URL. Der Eingabewert wird vor dem Übermitteln darauf überprüft, ob er leer oder eine korrekte, absolute URL ist. Attribute wie <strong>pattern</strong> und <strong>maxlength</strong> können verwendet werden um zulässige Werte einzuschränken. Die CSS-Pseudoklassen {{cssxref(":valid")}}- und {{cssxref(":invalid")}} werden entsprechend gesetzt.</li> + <li><code>week</code>: {{HTMLVersionInline("5")}} Ein Bedienelement zum Eingeben eines Datums bestehend aus einer Jahreszahl und einer Wochennummer, ohne Zeitzone.</li> +</ul> + +<p>Einige Werte für das <strong>type</strong>-Attribut sind jetzt überflüssg:</p> + +<ul> + <li><code>datetime</code>: {{HTMLVersionInline("5")}} {{deprecated_inline}} {{obsolete_inline}} Ein Bedienelement zum Eingeben eines Datums mit Uhrzeit (Stunde, Minute, Sekunde und Bruchteil einer Sekunde). Diese Eigenschaft wurde <a href="https://github.com/whatwg/html/issues/336">in WHATWG HTML entfernt</a>.</li> +</ul> + +<dl> + <dt> + <h2 id="Attribute">Attribute</h2> + + <h3 id="Globale_<input>-Attribute">Globale <input>-Attribute</h3> + </dt> +</dl> + +<p>Dieser Abschnitt beschreibt die für alle Arten des <code>input</code>-Elements verfügbaren Attribute. Nicht-globale Attribute – und globale, die sich bei unterschiedlichen <code>input</code>-Elementen anders verhalten – werden bei diesen Elementen behandelt.</p> + +<div class="note"> +<p><strong>Bemerkung</strong>: Das gilt auch für die globalen HTML-Attribute</p> +</div> + +<ul> + <li>Ein zulässiger MIME-Typ ohne Erweiterungen</li> + <li><code>audio/*</code> für Klang-Dateien {{HTMLVersionInline("5")}}</li> + <li><code>video/*</code> für Video-Dateien {{HTMLVersionInline("5")}}</li> + <li><code>image/*</code> für Bild-dateien {{HTMLVersionInline("5")}}</li> +</ul> + +<dl> + <dt>{{htmlattrdef("type")}}</dt> + <dd>Die Art des Bedienelements. Siehe {{anch("Arten des <input>-Elements")}} für die einzelnen Typen. </dd> + <dt>{{htmlattrdef("accept")}}</dt> + <dd>Ist der Wert des <strong>type</strong>-Attributes <code>file</code>, beschreibt dieses Attribut die Art der Dateien, die der Server akzeptiert. Sonst wird es ignoriert. Der Wert muss eine durch Kommata getrennte Liste eindeutiger Werte sein:</dd> + <dt>{{htmlattrdef("accesskey")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline", "HTML5")}}</dt> + <dd>Ein einzelnes Zeichen, dass der Benutzer drücken kann, um den Fokus zu diesem Feld zu bewegen. Dieses Attribute ist in HTML5 global.</dd> + <dt>{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</dt> + <dd>Definiert einen "Aktionstipp", der festlegt wie die Eingabetaste auf Geräten mit virtueller Tastatur erscheint. Zulässige Werte sind <code>go</code>, <code>done</code>, <code>next</code>, <code>search</code> und <code>send</code>. Sie werden automatisch der passenden Zeichenkette zugeordnet. Groß-/Kleinschreibung spielt keine Rolle.</dd> + <dt>{{htmlattrdef("autocapitalize")}} {{non-standard_inline}}</dt> + <dd>Dieses Attribut ist nicht standardisiert. <a href="https://developers.google.com/web/updates/2015/04/autocapitalize">Chrome</a> und iOS Safari Mobile kontrollieren damit, ob und wie eingegebener Text automatisch in Großbuchstaben gewandelt wird. Die nicht veralteten Werte sind ab IOS 5 verfügbar. Zulässige Werte sind: + <ul> + <li><code>none</code>: Automatische Großschreibung abschalten.</li> + <li><code>sentences</code>: Satzanfänge automatisch groß schreiben.</li> + <li><code>words</code>: Wortanfänge automatisch groß schreiben.</li> + <li><code>characters</code>: Alles automatisch großschreiben.</li> + <li><code>on</code>: {{deprecated_inline}} Seit iOS 5 veraltet.</li> + <li><code>off</code>: {{deprecated_inline}} Seit iOS 5 veraltet.</li> + </ul> + <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html#//apple_ref/doc/uid/TP40008058-autocapitalize"><code>autocapitalize</code> documentation</a> in der Safari HTML Reference.</dd> + <dt>{{htmlattrdef("autocomplete")}} {{HTMLVersionInline("5")}}</dt> + <dd>Dieses Attribute gibt an, ob der Browser den Wert des Eingabeelements automatisch vervollständigen kann. </dd> + <dd>Zulässige Werte sind: + <ul> + <li><code>off</code>: Der Anwender muss jedesmal einen Wert in dieses Feld eintragen oder das Dokument stellt ein eigenes Verfahren für das Vervollständigen bereit. Der Browser vervollständigt das Feld nicht automatisch.</li> + <li><code>on</code>: Der Browser kann den Wert automatisch vervollständigen, ausgehend von dem, was der Benutzer in der Vergangenheit eingetragen hat. Dieser Wert gibt jedoch keinen Hinweis über die erwarteten Eingaben.</li> + <li><code>name</code>: Vollständiger Name.</li> + <li><code>honorific-prefix: Titel oder Anrede</code> (z.B. "Herr", "Frau", "Dr."</li> + <li><code>given-name</code>: Rufname.</li> + <li><code>additional-name</code>: Weitere Vornamen.</li> + <li><code>family-name</code>: Nachname.</li> + <li><code>honorific-suffix</code>: Namensanhängel (z.B. "Jr.", "B.Sc.", "II").</li> + <li><code>nickname: Spitzname</code></li> + <li><code>email</code>: E-Mail-Adresse</li> + <li><code>username</code>: Nutzername</li> + <li><code>new-password</code>: Ein neues Passwort (z.B. beim Erzeugen eines neuen Accounts oder beim Ändern eines Passworts).</li> + <li><code>current-password</code></li> + <li><code>organization-title</code>: Berufsbezeichnung (z.B. "Software-Ingenieur", "Senior Vice President", "Stellvertretender Direktor").</li> + <li><code>organization</code></li> + <li><code>street-address</code>: Adresse</li> + <li><code>address-line1</code>, <code>address-line2</code>, <code>address-line3</code>, <code>address-level4</code>, <code>address-level3</code>, <code>address-level2</code>, <code>address-level1</code></li> + <li><code>country</code></li> + <li><code>country-name</code></li> + <li><code>postal-code: Postleitzahl</code></li> + <li><code>cc-name</code>: Vollständiger Name wie auf dem Zahlungsinstrument angegeben.</li> + <li><code>cc-given-name</code></li> + <li><code>cc-additional-name</code></li> + <li><code>cc-family-name</code></li> + <li><code>cc-number</code>: Code, der das Zahlungsinstrument identifiziert (z.B. die Kreditkartennummer).</li> + <li><code>cc-exp:</code> Ablaufdatum des Zahlungsinstruments.</li> + <li><code>cc-exp-month</code></li> + <li><code>cc-exp-year</code></li> + <li><code>cc-csc</code>: Sicherheitscode des Zahlungsinstruments.</li> + <li><code>cc-type</code>: Art des Zahlungsinstruments (e.g. Visa).</li> + <li><code>transaction-currency</code></li> + <li><code>transaction-amount</code></li> + <li><code>language</code>: Bevorzugte Sprache, gültiges BCP 47 Sprach-Tag.</li> + <li><code>bday: Geburtsdatum</code></li> + <li><code>bday-day</code></li> + <li><code>bday-month</code></li> + <li><code>bday-year</code></li> + <li><code>sex</code>: Geschlechtliche Identität (z.B. weiblich), beliebiger Text ohne Zeilenumbrüche.</li> + <li><code>tel</code>: Telefonnummer</li> + <li><code>url</code>: Homepage oder andere Webseite, die zur Firma, Person, Adresse oder der Kontaktinformation in den anderen mit diesem Feld verbundenen Feldern gehört.</li> + <li><code>photo</code>: Foto, Icon oder anderes Bild, das zur Firma, Person, Adresse oder der Kontaktinformation in den anderen mit diesem Feld verbundenen Feldern gehört.</li> + </ul> + + <p>Der <a href="https://html.spec.whatwg.org/multipage/forms.html#autofill">WHATWG Standard</a> enthält weitere Details zu diesem Thema</p> + + <p>Ist <strong>autocomplete</strong> für ein Eingabeelement nicht angegeben, verwendet der Browser das <strong>autocomplete</strong>-Attribut des Formular-Eigentümers für dieses Element. Der Formular-Eigentümer ist entweder das <code>form</code>-Element, von dem dieses <code>input</code>-Element abstammt oder das <code>form</code>-Element, dessen <strong>id</strong> im <strong>form</strong>-Attribut des Eingabelements angegeben ist. Mehr Informationen dazu bei {{htmlattrxref("autocomplete", "form")}} in {{HTMLElement("form")}}.</p> + + <p>Das <strong>autocomplete</strong>-Attribute kontrolliert auch, ob Firefox (anders als andere Browser) die Atribute <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">disabled und checked eines Eingabeelements zwischen Ladevorgängen der Seite</a> erhält. Diese Funktion ist normalerweise aktiv, es wird durch Setzen von <strong>autocomplete</strong> auf <code>off</code> abgeschaltet. Das gilt auch für solche Eingabefelder, für die das <strong>autocomplete</strong>-Attribut normalerweise wegen des Werts von <strong>type</strong> nicht wirkt. Siehe {{bug(654072)}}.</p> + + <p>Bei den meisten modernen Browsern (einschließlich Firefox 38+, Google Chrome 34+, IE11+) verhindert das Setzen von <strong>autocomplete</strong> nicht, dass der Passwort-Manager dem Nutzer anbietet, seine Login-Daten zu speichern und gegebenenfalls anschließend automatisch einzutragen. Siehe <a href="https://developer.mozilla.org/de/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#The_autocomplete_attribute_and_login_fields">the autocomplete attribute and login fields</a>.</p> + </dd> + <dt>{{htmlattrdef("autofocus")}} {{HTMLVersionInline("5")}}</dt> + <dd>Dieses boolesche Attribut gibt an, dass ein Eingabeelement den Fokus bekommt, wenn die Seite lädt, es sei denn, der Nutzer wechselt ihn, etwa durch Tippen in ein anderes Feld. Nur ein Form-Element in einem Dokument darf das <code><strong>autofocus</strong></code>-Attribut besitzen. Es kann nicht gesetzt werden, wenn das <strong><code>type</code></strong>-Attribut <code>hidden</code> ist. Das heißt, man kann den Fokus nicht automatisch auf ein unsichtbares Element setzen. + <div class="note"><strong>Bemerkung</strong>: Der Einsatz des <strong><code>autofocus</code></strong>-Attributs kann für Nutzer assistiver Technologien (Screenreader etc.) eine <strong>Barriere</strong> darstellen, da Inhalte der Seite übersprungen werden, ohne erfasst werden zu können. Dies kann damit umgangen werden, indem <a href="http://www.brucelawson.co.uk/2009/the-accessibility-of-html-5-autofocus/">zusätzlicher beschreibender Text</a> hinzugefügt wird.</div> + </dd> + <dt>{{htmlattrdef("capture")}}</dt> + <dd> + <p>Ist das <strong>type-</strong>Attribute <code>file</code>, weist das Vorhandensein dieses boolschen Attributs darauf hin, dass das direkte Mitschneiden von Medien per <a href="https://www.w3.org/TR/html-media-capture/#dfn-media-capture-mechanism">media capture mechanism</a> bevorzugt ist.</p> + </dd> + <dt>{{htmlattrdef("checked")}}</dt> + <dd>Ist das <strong>type</strong>-Attribute <code>radio</code> oder <code>checkbox</code>, setzt dieses boolsche Attribut das Element auf vorausgewählt. Sonst wird das Attribut ignoriert.</dd> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd>Dieses boolsche Attribut gewährleistet, dass der Nutzer mit dem Eingabeelement nicht interagieren kann. Insbesondere In particular erhalten so abgeschaltete Elemente <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#enabling-and-disabling-form-controls">keine Click-Events</a>. Außerdem wird der Wert eines abgeschalteten Elements beim Übertragen des Formulars nicht übermittelt. Das Attribute wird ignoriert, wenn das <strong>type</strong>-Attribut den Wert <code>hidden</code> hat.</dd> + <dt>{{htmlattrdef("form")}} {{HTMLVersionInline("5")}}</dt> + <dd>Das <code>form</code>-Element, zu dem dieses Eingabeelement gehört (sein "Formulareigentümer"). Der Wert dieses Attributs muss die <strong>id</strong> eines {{HTMLElement("form")}}-Elements im selben Dokument sein. Fehlt das Attribut, muss das Eingabeelement Abkömmling eines {{HTMLElement("form")}}-Elements sein. Das Attribut ermöglicht es, Eingabeelemente irgendwo in einem Dokument zu platzieren, nicht nur als Abkömmlinge eines <code>form</code>-Elements. Ein Eingabeelement darf nur zu einem Formular gehören.</dd> + <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline("5")}}</dt> + <dd>The URI of a program that processes the information submitted by the input element, if it is a submit button or image. If specified, it overrides the {{htmlattrxref("action","form")}} attribute of the element's form owner.</dd> + <dt>{{htmlattrdef("formenctype")}} {{HTMLVersionInline("5")}}</dt> + <dd>If the input element is a submit button or image, this attribute specifies the type of content that is used to submit the form to the server. Possible values are: + <ul> + <li><code>application/x-www-form-urlencoded</code>: The default value if the attribute is not specified.</li> + <li><code>multipart/form-data</code>: Use this value if you are using an {{HTMLElement("input")}} element with the {{htmlattrxref("type","input")}} attribute set to <code>file</code>.</li> + <li><code>text/plain</code></li> + </ul> + + <p>If this attribute is specified, it overrides the {{htmlattrxref("enctype","form")}} attribute of the element's form owner.</p> + </dd> + <dt>{{htmlattrdef("formmethod")}} {{HTMLVersionInline("5")}}</dt> + <dd>If the input element is a submit button or image, this attribute specifies the HTTP method that the browser uses to submit the form. Possible values are: + <ul> + <li><code>post</code>: The data from the form is included in the body of the form and is sent to the server.</li> + <li><code>get</code>: The data from the form are appended to the <strong>form</strong> attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.</li> + </ul> + + <p>If specified, this attribute overrides the {{htmlattrxref("method","form")}} attribute of the element's form owner.</p> + </dd> + <dt>{{htmlattrdef("formnovalidate")}} {{HTMLVersionInline("5")}}</dt> + <dd>If the input element is a submit button or image, this Boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the {{htmlattrxref("novalidate","form")}} attribute of the element's form owner.</dd> + <dt>{{htmlattrdef("formtarget")}} {{HTMLVersionInline("5")}}</dt> + <dd>If the input element is a submit button or image, this attribute is a name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a <em>browsing context</em> (for example, tab, window, or inline frame). If this attribute is specified, it overrides the {{htmlattrxref("target", "form")}} attribute of the elements's form owner. The following keywords have special meanings: + <ul> + <li>_<code>self</code>: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.</li> + <li><code>_blank</code>: Load the response into a new unnamed browsing context.</li> + <li><code>_parent</code>: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as <code>_self</code>.</li> + <li><code>_top</code>: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as <code>_self</code>.</li> + </ul> + </dd> + <dt>{{htmlattrdef("height")}} {{HTMLVersionInline("5")}}</dt> + <dd>If the value of the <strong>type</strong> attribute is <code>image</code>, this attribute defines the height of the image displayed for the button.</dd> + <dt>{{htmlattrdef("inputmode")}} {{HTMLVersionInline("5")}}</dt> + <dd>A hint to the browser for which keyboard to display. This attribute applies when the value of the <strong>type</strong> attribute is text, password, email, or url. Possible values are: + <ul> + <li><code>verbatim</code>: Alphanumeric, non-prose content such as usernames and passwords.</li> + <li><code>latin</code>: Latin-script input in the user's preferred language with typing aids such as text prediction enabled. For human-to-computer communication such as search boxes.</li> + <li><code>latin-name</code>: As <em>latin</em>, but for human names.</li> + <li><code>latin-prose</code>: As <em>latin</em>, but with more aggressive typing aids. For human-to-human communication such as instant messaging for email.</li> + <li><code>full-width-latin</code>: As <em>latin-prose</em>, but for the user's secondary languages.</li> + <li><code>kana</code>: Kana or romaji input, typically hiragana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.</li> + <li><code>katakana</code>: Katakana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.</li> + <li><code>numeric</code>: Numeric input, including keys for the digits 0 to 9, the user's preferred thousands separator character, and the character for indicating negative numbers. Intended for numeric codes, e.g. credit card numbers. For actual numbers, prefer using <input type="number"></li> + <li><code>tel</code>: Telephone input, including asterisk and pound key. Use <input type="tel"> if possible instead.</li> + <li><code>email</code>: Email input. Use <input type="email"> if possible instead.</li> + <li><code>url</code>: URL input. Use <input type="url"> if possible instead.</li> + </ul> + </dd> + <dt>{{htmlattrdef("list")}} {{HTMLVersionInline("5")}}</dt> + <dd>Identifies a list of pre-defined options to suggest to the user. The value must be the <strong>id</strong> of a {{HTMLElement("datalist")}} element in the same document. The browser displays only options that are valid values for this input element. This attribute is ignored when the <strong>type</strong> attribute's value is <code>hidden</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, or a button type.</dd> + <dt>{{htmlattrdef("max")}} {{HTMLVersionInline("5")}}</dt> + <dd>The maximum (numeric or date-time) value for this item, which must not be less than its minimum (<strong>min</strong> attribute) value.</dd> + <dt>{{htmlattrdef("maxlength")}}</dt> + <dd>If the value of the <strong>type</strong> attribute is <code>text</code>, <code>email</code>,<code> search</code>, <code>password</code>, <code>tel</code>, or <code>url</code>, this attribute specifies the maximum number of characters (in Unicode code points) that the user can enter; for other control types, it is ignored. It can exceed the value of the <strong>size</strong> attribute. If it is not specified, the user can enter an unlimited number of characters. Specifying a negative number results in the default behavior; that is, the user can enter an unlimited number of characters. The constraint is evaluated only when the value of the attribute has been changed.</dd> + <dt>{{htmlattrdef("min")}} {{HTMLVersionInline("5")}}</dt> + <dd>The minimum (numeric or date-time) value for this item, which must not be greater than its maximum (<strong>max</strong> attribute) value.</dd> + <dt>{{htmlattrdef("minlength")}} {{HTMLVersionInline("5")}}</dt> + <dd>If the value of the <strong>type</strong> attribute is <code>text</code>, <code>email</code>,<code> search</code>, <code>password</code>, <code>tel</code>, or <code>url</code>, this attribute specifies the minimum number of characters (in Unicode code points) that the user can enter; for other control types, it is ignored.</dd> + <dt>{{htmlattrdef("multiple")}} {{HTMLVersionInline("5")}}</dt> + <dd>This Boolean attribute indicates whether the user can enter more than one value. This attribute applies when the <strong>type</strong> attribute is set to <code>email</code> or <code>file</code>; otherwise it is ignored.</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>The name of the control, which is submitted with the form data.</dd> + <dt>{{htmlattrdef("pattern")}} {{HTMLVersionInline("5")}}</dt> + <dd>A regular expression that the control's value is checked against. The pattern must match the entire value, not just some subset. Use the <strong>title</strong> attribute to describe the pattern to help the user. This attribute applies when the value of the <strong>type</strong> attribute is <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code> or <code>email</code>; otherwise it is ignored. The regular expression language is the same as JavaScript's. The pattern is not surrounded by forward slashes.</dd> + <dt>{{htmlattrdef("placeholder")}} {{HTMLVersionInline("5")}}</dt> + <dd>A hint to the user of what can be entered in the control . The placeholder text must not contain carriage returns or line-feeds. This attribute applies when the value of the <strong>type</strong> attribute is <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code> or <code>email</code>; otherwise it is ignored. + <div class="note"><strong>Note:</strong> Do not use the <code>placeholder</code> attribute instead of a {{HTMLElement("label")}} element. Their purposes are different: the {{HTMLElement("label")}} attribute describes the role of the form element; that is, it indicates what kind of information is expected, the <code>placeholder</code> attribute is a hint about the format the content should take. There are cases in which the <code>placeholder</code> attribute is never displayed to the user, so the form must be understandable without it.</div> + </dd> + <dt>{{htmlattrdef("readonly")}}</dt> + <dd>This Boolean attribute indicates that the user cannot modify the value of the control. + <p>{{HTMLVersionInline("5")}} This attribute is ignored if the value of the <strong>type</strong> attribute is <code>hidden</code>, <code>range</code>, <code>color</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, or a button type.</p> + </dd> + <dt>{{htmlattrdef("required")}} {{HTMLVersionInline("5")}}</dt> + <dd>This attribute specifies that the user must fill in a value before submitting a form. It cannot be used when the <strong>type</strong> attribute is <code>hidden</code>, <code>image</code>, or a button type (<code>submit</code>, <code>reset</code>, or <code>button</code>). The {{cssxref(":optional")}} and {{cssxref(":required")}} CSS pseudo-classes will be applied to the field as appropriate.</dd> + <dt>{{htmlattrdef("selectionDirection")}} {{HTMLVersionInline("5")}}</dt> + <dd>The direction in which selection occurred. This is "forward" if the selection was made from left-to-right in an LTR locale or right-to-left in an RTL locale, or "backward" if the selection was made in the opposite direction. This can be "none" if the selection direction is unknown.</dd> + <dt>{{htmlattrdef("size")}}</dt> + <dd>The initial size of the control. This value is in pixels unless the value of the <strong>type</strong> attribute is <code>text</code> or <code>password</code>, in which case, it is an integer number of characters. Starting in HTML5, this attribute applies only when the <strong>type</strong> attribute is set to <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code>, <code>email</code>, or <code>password</code>; otherwise it is ignored. In addition, the size must be greater than zero. If you don't specify a size, a default value of 20 is used.</dd> + <dt>{{htmlattrdef("spellcheck")}} {{HTMLVersionInline("5")}}</dt> + <dd>Setting the value of this attribute to <code>true</code> indicates that the element needs to have its spelling and grammar checked. The value <code>default</code> indicates that the element is to act according to a default behavior, possibly based on the parent element's own <code>spellcheck</code> value. The value <code>false</code> indicates that the element should not be checked.</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>If the value of the <strong>type</strong> attribute is <code>image</code>, this attribute specifies a URI for the location of an image to display on the graphical submit button; otherwise it is ignored.</dd> + <dt>{{htmlattrdef("step")}} {{HTMLVersionInline("5")}}</dt> + <dd>Works with the <strong>min</strong> and <strong>max</strong> attributes to limit the increments at which a numeric or date-time value can be set. It can be the string <code>any</code> or a positive floating point number. If this attribute is not set to <code>any</code>, the control accepts only values at multiples of the step value greater than the minimum.</dd> + <dt>{{htmlattrdef("tabindex")}} element-specific in {{HTMLVersionInline(4)}}, global in {{HTMLVersionInline("5")}}</dt> + <dd>The position of the element in the tabbing navigation order for the current document.</dd> + <dt>{{htmlattrdef("usemap")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline", "HTML5")}}</dt> + <dd>The name of a {{HTMLElement("map")}} element to as an image map.</dd> + <dt>{{htmlattrdef("value")}}</dt> + <dd>The initial value of the control. This attribute is optional except when the value of the <strong>type</strong> attribute is <code>radio</code> or <code>checkbox</code>.<br> + Note that when reloading the page, Gecko and IE <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=46845#c186">will ignore the value specified in the HTML source</a>, if the value was changed before the reload.</dd> + <dt>{{htmlattrdef("width")}} {{HTMLVersionInline("5")}}</dt> + <dd>If the value of the <strong>type</strong> attribute is <code>image</code>, this attribute defines the width of the image displayed for the button.</dd> + <dt>{{htmlattrdef("x-moz-errormessage")}} {{non-standard_inline}}</dt> + <dd>This Mozilla extension allows you to specify the error message to display when a field doesn't successfully validate.</dd> +</dl> + +<h2 id="Notes">Notes</h2> + +<h3 id="File_inputs">File inputs</h3> + +<div class="note"> +<p><strong>Note:</strong> Starting in {{Gecko("2.0")}}, calling the <code>click()</code> method on an {{HTMLElement("input")}} element of type "file" opens the file picker and lets the user select files. See <a href="/en-US/docs/Using_files_from_web_applications">Using files from web applications</a> for an example and more details.</p> +</div> + +<p>You can't set the value of a file picker from a script; doing something like the following has no effect:</p> + +<pre class="brush: js">var e = getElementById("someFileInputElement"); +e.value = "foo"; +</pre> + +<h3 id="Error_messages">Error messages</h3> + +<p>If you want Firefox to present a custom error message when a field fails to validate, you can use the <code>x-moz-errormessage</code> attribute to do so:</p> + +<pre class="brush: html"><input type="email" x-moz-errormessage="Please specify a valid email address."> +</pre> + +<p>Note, however, that this is not standard and will not have an effect on other browsers.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="A_simple_input_box">A simple input box</h3> + +<pre class="brush: html"><!-- A basic input --> +<input type="text" name="input" value="Type here"> +</pre> + +<p><input></p> + +<h3 id="A_common_use-case_scenario">A common use-case scenario</h3> + +<pre class="brush: html"><!-- A common form that includes input tags --> +<form action="getform.php" method="get"> + First name: <input type="text" name="first_name" /><br /> + Last name: <input type="text" name="last_name" /><br /> + E-mail: <input type="email" name="user_email" /><br /> +<input type="submit" value="Submit" /> +</form> +</pre> + +<h3 id="Using_mozactionhint_on_Firefox_mobile">Using mozactionhint on Firefox mobile</h3> + +<p>You can use the {{htmlattrxref("mozactionhint", "input")}} attribute to specify the text for the label of the enter key on the virtual keyboard when your form is rendered on Firefox mobile. For example, to have a "Next" label, you can do this:</p> + +<pre class="brush: html"><input type="text" mozactionhint="next" name="sometext" /> +</pre> + +<p>The result is:</p> + +<p><a href="/@api/deki/files/4970/=mozactionhint.png"><img alt="mozactionhint.png" class="default internal" src="/@api/deki/files/4970/=mozactionhint.png?size=webview" style="border: 1px solid black; height: 350px; width: 210px;"></a></p> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-input-element.html#the-input-element', '<input>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-input-element', '<input>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'forms.html#h-17.4', '<form>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2 or earlier</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=button</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>3</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=checkbox</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}<br> + {{CompatGeckoDesktop("1.9.2")}} for <code>indeterminate</code> value</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=color</td> + <td>21.0</td> + <td> + <p>{{CompatGeckoDesktop("29.0")}} (Not for Windows Touch yet)</p> + </td> + <td>{{CompatNo}}</td> + <td>11.01</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>type=date</td> + <td>5.0 (recognized but no UI)</td> + <td>{{CompatNo}}<br> + {{unimplemented_inline("446510")}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}} (recognized but no UI)</td> + </tr> + <tr> + <td>type=datetime</td> + <td>5.0 (recognized but no UI)</td> + <td>{{CompatNo}}<br> + {{unimplemented_inline("446510")}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}} (recognized but no UI)</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=datetime-local</td> + <td>5.0 (recognized but no UI)</td> + <td>{{CompatNo}}<br> + {{unimplemented_inline("446510")}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}} (recognized but no UI)</td> + </tr> + <tr> + <td>type=email</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>type=file</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>3.02</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=hidden</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=image</td> + <td>1.0</td> + <td>Gecko 2.0 only sends x and y coordinates when clicked, not longer the name/value of the element</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=month</td> + <td>5.0 (recognized but no UI)</td> + <td>{{CompatNo}}<br> + {{unimplemented_inline("446510")}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}} (recognized but no UI)</td> + </tr> + <tr> + <td>type=number</td> + <td>6.0 (Localization in Chrome 11)</td> + <td>{{CompatGeckoDesktop("29.0")}}</td> + <td>10<br> + (recognized but no UI)</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=password</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=radio</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}<br> + {{CompatGeckoDesktop("1.9.2")}} for <code>indeterminate</code> value</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=range</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("23.0")}}</td> + <td>10</td> + <td>10.62 (11.01 added support for a default value)</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=reset</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=search</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>11.01</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=submit</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=tel</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>11.01</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>type=text</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=time</td> + <td>5.0 (recognized but no UI)</td> + <td>{{CompatNo}}<br> + {{unimplemented_inline("446510")}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}} (recognized but no UI)</td> + </tr> + <tr> + <td>type=url</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>type=week</td> + <td>5.0 (recognized but no UI)</td> + <td>{{CompatNo}}<br> + {{unimplemented_inline("446510")}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}} (recognized but no UI)</td> + </tr> + <tr> + <td>accept=[MIME type]</td> + <td>8.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>accept=audio/*</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}<br> + Filters for the following audio file extensions: .aac, .aif, .flac, .iff, .m4a, .m4b, .mid, .midi, .mp3, .mpa, .mpc, .oga, .ogg, .ra, .ram, .snd, .wav, .wma</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>accept=video/*</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}<br> + Filters for the following video file extensions: .avi, .divx, .flv, .m4v, .mkv, .mov, .mp4, .mpeg, .mpg, .ogm, .ogv, .ogx, .rm, .rmvb, .smil, .webm, .wmv, .xvid</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>accept=image/*</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}<br> + Filters for the following image file extensions: .jpe, .jpg, .jpeg, .gif, .png, .bmp, .ico, .svg, .svgz, .tif, .tiff, .ai, .drw, .pct, .psp, .xcf, .psd, .raw</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>accesskey</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>6</td> + <td>1.0</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>mozactionhint</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>autocomplete</td> + <td>17.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>5</td> + <td>9.6</td> + <td>5.2</td> + </tr> + <tr> + <td>autofocus</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>9.6</td> + <td>5.0</td> + </tr> + <tr> + <td>checked</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>disabled</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>6</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>form</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formaction</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>5.2</td> + </tr> + <tr> + <td>formenctype</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formmethod</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>5.2</td> + </tr> + <tr> + <td>formnovalidate</td> + <td>5.0 (in 6.0 only worked with HTML5 doctype, validation support in 7.0 was disabled and re-enabled in 10.0)</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formtarget</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>5.2</td> + </tr> + <tr> + <td>height</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>1.0</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>inputmode</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>list</td> + <td>20.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>9.6</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>max</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>maxlength</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>min</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>minlength</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>multiple</td> + <td>1.0 (supported for type=file and type=email as of 5.0)</td> + <td>{{CompatGeckoDesktop("1.9.2")}} for <strong>type</strong>=file<br> + {{CompatVersionUnknown}} for <strong>type</strong>=email</td> + <td>10</td> + <td>1.0 (10.62 support for type=file and as of 11.01 type=email)</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>name</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>pattern</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>9.6</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>placeholder</td> + <td>10.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>11.00</td> + <td>5.0</td> + </tr> + <tr> + <td>readonly</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>6 (missing for <strong>type</strong> of <code>checkbox</code>, <code>radio</code>)</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>required</td> + <td>5.0 (support for select element as of 10)</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>9.6</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>size</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>spellcheck</td> + <td>10.0</td> + <td>{{CompatGeckoDesktop("1.9.2")}}</td> + <td>10</td> + <td>11.0</td> + <td>4.0</td> + </tr> + <tr> + <td>src</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>step</td> + <td>6.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>5.0</td> + </tr> + <tr> + <td>tabindex</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>6 (elements with tabindex > 0 are not navigated)</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>width</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>1.0</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=button</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=checkbox</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=color</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("27.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>type=date</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>5.0</td> + </tr> + <tr> + <td>type=datetime</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=datetime-local</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=email</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>3.1 (no validation but gives a specific keyboard)</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=file</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=hidden</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=image</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=month</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=number</td> + <td>2.3 (no validation but gives a specific keyboard)</td> + <td>{{CompatGeckoMobile("29.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>4.0 (no validation but gives a specific keyboard)</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=password</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=radio</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=range</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>5.0</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=reset</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=search</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>4.0</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=submit</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=tel</td> + <td>2.3</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>3.1</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=text</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=time</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=url</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>3.1 (no validation but gives a specific keyboard)</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=week</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>accept=[MIME type]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>accept=audio/*</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>accept=image/*</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>accept=video/*</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>accesskey</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>autocomplete</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>autofocus</td> + <td>3.2</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>checked</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>disabled</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>form</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formaction</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>5.0</td> + </tr> + <tr> + <td>formenctype</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formmethod</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>5.0</td> + </tr> + <tr> + <td>formnovalidate</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formtarget</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>5.0</td> + </tr> + <tr> + <td>height</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>list</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>max</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}} {{bug("556010")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>maxlength</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>min</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}} {{bug("556010")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>minlength</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>multiple</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>name</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0</td> + </tr> + <tr> + <td>pattern</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>placeholder</td> + <td>2.3</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>11.10</td> + <td>4</td> + </tr> + <tr> + <td>readonly</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>required</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>size</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>spellcheck</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>11.0</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>src</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>step</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}} {{bug("556009")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>tabindex</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>width</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Gecko_notes">Gecko notes</h3> + +<p>Starting in Gecko 9.0 {{geckoRelease("9.0")}}, Firefox for Android lets users capture images using their camera and upload them, without having to leave the browser. Web developers can implement this feature by simply specifying setting the <code>accept</code> attribute's value to "image/*" on their <code>file</code> input, like this:</p> + +<p><code><input type="file" accept="image/*"></code></p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Other form-related elements: {{HTMLElement("form")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li> + <li><a class="external" href="http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text">Cross-browser HTML5 placeholder text</a></li> +</ul> diff --git a/files/de/web/html/element/ins/index.html b/files/de/web/html/element/ins/index.html new file mode 100644 index 0000000000..7c80f9d2ea --- /dev/null +++ b/files/de/web/html/element/ins/index.html @@ -0,0 +1,122 @@ +--- +title: <ins> +slug: Web/HTML/Element/ins +tags: + - Element + - HTML + - HTML edits + - Referenz + - Web +translation_of: Web/HTML/Element/ins +--- +<h2 id="Übersicht">Übersicht</h2> + +<p>Das <strong>HTML <code><ins></code> Element</strong> (oder <em>HTML Inserted Text</em>) repräsentiert eine Menge an Text, die nachträglich in das Dokument eingefügt wurde.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorien</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">Formulierungsinhalt</a> oder <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">fließender Inhalt</a>.</td> + </tr> + <tr> + <th scope="row">Erlaubter Inhalt</th> + <td><a href="/en-US/docs/HTML/Content_categories#Transparent" title="HTML/Content categories#Transparent">Transparent</a>.</td> + </tr> + <tr> + <th scope="row">Tag Auslassung</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Erlaubte Elternelemente</th> + <td>Jedes Element, dass <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Formulierungsinhalt</a> erlaubt.</td> + </tr> + <tr> + <th scope="row">DOM Schnittstelle</th> + <td>{{domxref("HTMLModElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p><span style="line-height: 21px;">Dieses Element schließt </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globale Attribute</a><span style="line-height: 21px;"> ein.</span></p> + +<dl> + <dt>{{htmlattrdef("cite")}}</dt> + <dd>Dieses Attribut definiert die URI einer Quelle, die die Änderung ausgelöst hat, wie zum Beispiel eine Ticketnummer in einem Bugtrack-System.</dd> + <dt>{{htmlattrdef("datetime")}}</dt> + <dd>Dieses Attribut indiziert das Datum und die Uhrzeit, wann der Text geändert wurde und muss ein <a class="external" href="http://www.w3.org/TR/2011/WD-html5-20110525/common-microsyntaxes.html#valid-date-string-with-optional-time" title="http://www.w3.org/TR/html5/common-microsyntaxes.html#valid-date-string-with-optional-time">gültiges Datum mit optionaler Uhrzeit</a> sein. Wenn der Wert nicht als Datum mit optionaler Zeitangabe erkannt werden kann, hat dieses Element keinen Bezug zur Zeit.</dd> +</dl> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: html"><ins>Dieser Text wurde hinzugefügt.</ins></pre> + +<h3 id="Ergebnis">Ergebnis</h3> + +<p><ins>Dieser Text wurde hinzugefügt.</ins></p> + +<h2 id="Specifications" name="Specifications">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'edits.html#the-ins-element', '<ins>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'edits.html#the-ins-element', '<ins>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.4', '<ins>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{HTMLElement("del")}} Element um gelöschten Inhalt zu markieren</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/de/web/html/element/legend/index.html b/files/de/web/html/element/legend/index.html new file mode 100644 index 0000000000..9f31eac6cc --- /dev/null +++ b/files/de/web/html/element/legend/index.html @@ -0,0 +1,97 @@ +--- +title: <legend> +slug: Web/HTML/Element/legend +translation_of: Web/HTML/Element/legend +--- +<p>The <strong>HTML <code><legend></code> element</strong> represents a caption for the content of its parent {{HTMLElement("fieldset")}}.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Inhaltskategorien</a></th> + <td>Keine.</td> + </tr> + <tr> + <th scope="row">Zugelassener Inhalt</th> + <td>Definiert eine Überschrift für einen Formularbereich welches durch ein Fieldset zusammengefasst wurde.</td> + </tr> + <tr> + <th scope="row">Tag Verwendung</th> + <td>Start-Tag und End-Tag notwendig.</td> + </tr> + <tr> + <th scope="row">Elternelemente</th> + <td>Legend kann nur innerhalb von fieldset stehen</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td> </td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p>Dieses Element unterstützt die <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">globalen Attribute</a>.</p> + +<h2 id="Examples">Examples</h2> + +<p><fieldset><br> + <legend>Geschlecht</legend><br> + <label for="man"><br> + <input type="radio" name="geschlecht" value="man"> Männlich</label><br> + <label for="woman"><br> + <input type="radio" name="geschlecht" value="woman"> Weiblich</label><br> + </fieldset></p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "forms.html#the-legend-element", "<legend>")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Definition of the <code>legend</code> element</td> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "rendering.html#the-fieldset-and-legend-elements")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Suggested default rendering of the <code>fieldset</code> and <code>legend</code> elements</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "forms.html#the-legend-element", "<legend>")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("HTML4.01", "interact/forms.html#h-17.10", "<legend>")}}</td> + <td>{{Spec2("HTML4.01")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + + + +<p>{{Compat("html.elements.legend")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Others form-related elements: {{HTMLElement("form")}}, {{HTMLElement("option")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/de/web/html/element/li/index.html b/files/de/web/html/element/li/index.html new file mode 100644 index 0000000000..2647622b12 --- /dev/null +++ b/files/de/web/html/element/li/index.html @@ -0,0 +1,193 @@ +--- +title: <li> +slug: Web/HTML/Element/li +tags: + - Element + - HTML + - HTML Gruppierender Inhalt + - Referenz + - Web +translation_of: Web/HTML/Element/li +--- +<div>{{HTMLRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Das HTML Element <em>list item</em> <code><li> </code>wird verwendet, um einen Listeneintrag innerhalb einer geordneten Liste ({{HTMLElement("ol")}}) oder einer ungeordneten Liste ({{HTMLElement("ul")}}) oder einem Menü ({{HTMLElement("menu")}}) auszuzeichnen. In Menüs und ungeordneten Listen werden Listeneinträge normalerweise mit Aufzählungszeichen dargestellt. In geordneten Listen werden sie normalerweise mit einem aufsteigendem Zähler wie einer Nummer oder einem Buchstaben auf der linken Seite dargestellt.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/de/docs/Web/Guide/HTML/Inhaltskategorien">Inhaltskategorien</a></th> + <td>Keine</td> + </tr> + <tr> + <th scope="row">Erlaubter Inhalt</th> + <td><a href="/de/docs/Web/Guide/HTML/Inhaltskategorien#Fließender+Inhalt">Fließender Inhalt</a></td> + </tr> + <tr> + <th scope="row">Tagauslassung</th> + <td>Der Endtag kann weggelassen werden, falls ihm direkt ein weiteres {{HTMLElement("li")}} Element folgt oder falls sein Elternelement keine weiteren Inhalte hat.</td> + </tr> + <tr> + <th scope="row">Erlaubte Elternelemente</th> + <td>Ein {{HTMLElement("ul")}}, {{HTMLElement("ol")}} oder {{HTMLElement("menu")}} Element. Obwohl es nicht spezifikationsgerechter Verwendung entspricht, kann das veraltete {{HTMLElement("dir")}} ebenfalls als Elternelement verwendet werden.</td> + </tr> + <tr> + <th scope="row">DOM Schnittstelle</th> + <td>{{domxref("HTMLLIElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p>Dieses Element enthält die <a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">globalen Attribute</a>.</p> + +<dl> + <dt>{{htmlattrdef("value")}} </dt> + <dd>Legt die Zahl fest, mit der die Nummerierung in einem {{HTMLElement("ol")}} Element beginnen soll. Dies geschieht unabhängig vom Typ der Nummerierung. Römische Zahlen und Buchstaben können allerdings nicht als Wert angegeben werden, der einzig akzeptierte Wert ist eine Zahl. Listeneinträge, die dem Eintrag mit dem <code>value</code> Attribut folgen, werden die Nummerierung fortführen, die festgelegt wurde. Das <code>value</code> Attribut hat für eine ungeordnete Liste keine Bedeutung.</dd> + <dd>{{Note("Dieses Attribut wurde in HTML4 missbilligt, jedoch in HTML5 neu eingeführt.")}} + <div class="note"> + <p><strong>Hinweis:</strong> Vor {{Gecko("9.0")}} wurden negative Werte fälschlicherweise zu 0 konvertiert. Seit {{Gecko("9.0")}} werden alle Ganzzahlwerte korrekt interpretiert.</p> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("type")}} {{Deprecated_inline}}</dt> + <dd>Dieses Zeichen legt den Aufzählungstyp fest:</dd> + <dd> + <ul> + <li><code>a</code>: Kleinbuchstaben</li> + <li><code>A</code>: Großbuchstaben</li> + <li><code>i</code>: kleingeschriebene, römische Nummerierung</li> + <li><code>I</code>: großgeschriebene römische Nummerierung</li> + <li><code>1</code>: Zahlen</li> + </ul> + Die Festlegung eines Typs in einem {{HTMLElement("ol")}} Element wird für das ganze Element verwendet, wenn nicht innerhalb eines <code><li></code> Elements etwas anderes angegeben wird.</dd> +</dl> + +<div class="note"><strong>Hinweis:</strong> Dieses Attribut ist veraltet. Es sollte stattdessen die CSS {{cssxref("list-style-type")}} Eigenschaft verwendet werden.</div> + +<h2 id="Beispiele">Beispiele</h2> + +<div id="Beispiel_1"> +<pre class="brush: html"><ol> + <li>Erster Eintrag</li> + <li>Zweiter Eintrag</li> + <li>Dritter Eintrag</li> +</ol> +</pre> +</div> + +<p>Ergibt:</p> + +<p>{{EmbedLiveSample("Beispiel_1")}}</p> + +<div id="Beispiel_2"> +<pre class="brush: html" id="Beispiel_2"><ul> + <li>Erster Eintrag</li> + <li>Zweiter Eintrag</li> + <li>Dritter Eintrag</li> +</ul> +</pre> +</div> + +<p>Ergibt:</p> + +<p>{{EmbedLiveSample("Beispiel_2")}}</p> + +<p>Für detailliertere Beispiele siehe die Seiten für {{HTMLElement("ol")}} und {{HTMLElement("ul")}}.</p> + +<h2 id="Spezifikation">Spezifikation</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-li-element', '<li>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'the-li-element.html#the-li-element', '<li>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'lists.html#h-10.2', '<li>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Andere Listenbezogene HTML-Elemente: {{HTMLElement("ul")}}, {{HTMLElement("ol")}}, {{HTMLElement("menu")}} und das veraltete {{HTMLElement("dir")}};</li> + <li>CS- Eigenschaften, die besonders nützlich zur Gestaltung des <code><li></code> Elements sind: + <ul> + <li>die {{cssxref("list-style")}}-Eigenschaft, um festzulegen, wie die Nummerierung dargestellt wird</li> + <li><a href="https://developer.mozilla.org/Web/Guide/CSS/Counters">CSS Counters</a>, um komplexe verschachtelte Listen zu erstellen</li> + <li>die {{cssxref("margin")}} Eigenschaft, um den Einzug der Listeneinträge zu steuern</li> + </ul> + </li> +</ul> diff --git a/files/de/web/html/element/link/index.html b/files/de/web/html/element/link/index.html new file mode 100644 index 0000000000..a17b05667d --- /dev/null +++ b/files/de/web/html/element/link/index.html @@ -0,0 +1,361 @@ +--- +title: <link> +slug: Web/HTML/Element/link +tags: + - Element + - HTML + - Metadaten + - Referenz + - Web +translation_of: Web/HTML/Element/link +--- +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>Das <em>HTML-Link-Element</em> (<strong><link></strong>) spezifiziert Beziehungen zwischen dem aktuellen Dokument und einer externen Ressource. Mögliche Anwendungen für dieses Element sind die Definition eines relationalen Rahmens für die Navigation. Dieses Element wird am häufigsten verwendet, um mit Style Sheets zu verlinken.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td>Metadata content. If {{htmlattrxref("itemprop", "link")}} is present: <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content"> phrasing content</a></td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td>None, it is an {{Glossary("empty element")}}.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>As it is a void element, the <span title="syntax-start-tag">start tag</span> must be present and the <span title="syntax-end-tag">end tag</span> must not be present</td> + </tr> + <tr> + <th scope="row">Permitted parent elements</th> + <td>Any element that accepts metadata elements. If {{htmlattrxref("itemprop", "link")}} is present: any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLLinkElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p>Dieses Element beinhaltet die <a href="/de/docs/Web/HTML/Globale_Attribute">Globalen Attribute</a>.</p> + +<p> </p> + +<dl> + <dt>{{htmlattrdef("charset")}}{{obsolete_inline}}</dt> + <dd>Dieses Attribut definiert die Zeichenkodierung der verlinkten Ressource. Der Wert ist eine durch Leerzeichen und/oder Komma getrennte Liste von Zeichensätzen gemäß <a href="http://tools.ietf.org/html/rfc2045">RFC 2045</a>. Der Standardwert ist ISO-8859-1. + <div class="note"><strong>Verwendungshinweis</strong>: Dieses Attribut ist in HTML5 obsolet und <strong>darf von den Autoren nicht verwendet werden</strong>. Um seine Wirkung zu erzielen, verwenden Sie den <font face="Courier New, monospace"><font color="#000000">Content-Type</font></font> HTTP-Header auf der verlinkten Ressource.</div> + </dd> + <dd> </dd> + <dt>{{htmlattrdef("crossorigin")}} {{HTMLVersionInline(5)}}</dt> + <dd>Dieses aufgezählte Attribut gibt an, ob das Abrufen des zugehörigen Bildes mit CORS erfolgen muss oder nicht. <a href="/en-US/docs/CORS_Enabled_Image">CORS-fähige Bilder</a> können im Element {{HTMLElement("canvas")}} wiederverwendet werden, ohne verunreinigt zu werden. Die zulässigen Werte sind: + <dl> + <dt>anonymous</dt> + <dd> + <p>Es wird eine ursprungsübergreifende Anforderung (z.B. mit <code>Origin:</code> HTTP-Header) durchgeführt. Es werden jedoch keine Anmeldeinformationen gesendet (d.h. es wird kein Cookie, kein X.509-Zertifikat und keine HTTP Basic-Authentifizierung gesendet). Wenn der Server der Ursprungsseite keine Anmeldeinformationen übergibt (indem er den <code>Access-Control-Allow-Origin:</code> HTTP-Header nicht setzt), wird das Bild verfälscht und seine Verwendung eingeschränkt.</p> + </dd> + <dt>use-credentials</dt> + <dd>Eine ursprungsübergreifende Anforderung (z.B. mit <code>Origin:</code> HTTP-Header) wird mit Anmeldeinformationen ausgeführt (d.h. es wird ein Cookie, ein Zertifikat und eine HTTP-Basic-Authentifizierung durchgeführt). Wenn der Server der Ursprungsseite keine Anmeldeinformationen gibt (über <code>Access-Control-Allow-Credentials:</code> HTTP-Header), wird das Bild verfälscht und seine Verwendung eingeschränkt.</dd> + </dl> + Wenn nicht vorhanden, wird die Ressource ohne CORS-Anfrage geholt (d.h. ohne den <code>Origin:</code> HTTP-Header zu senden), wodurch verhindert wird, dass sie in {{HTMLElement('canvas')}}} Elementen verwendet wird. Wenn ungültig, wird es so behandelt, als ob das aufgezählte Schlüsselwort <strong>anonymous</strong> verwendet wurde. Weitere Informationen finden Sie unter Attribute der <a href="/en-US/docs/Web/HTML/CORS_settings_attributes">CORS-Einstellungen</a>.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("disabled")}} {{Non-standard_inline}}</dt> + <dd>Dieses Attribut wird verwendet, um eine Linkbeziehung zu deaktivieren. In Verbindung mit Scripting kann dieses Attribut verwendet werden, um verschiedene Style-Sheet-Beziehungen ein- und auszuschalten. + <div class="note"> + <p><strong>Hinweis</strong>: Während es im HTML-Standard kein <code>disabled</code> Attribut hat, <strong>gibt</strong> es im DOM-Objekt des <code>HTMLLinkElement</code> ein <code>disabled</code> Attribut.</p> + + <p>Die Verwendung von <code>disabled</code> als HTML-Attribut ist nicht standardisiert und wird nur von einigen Browsern verwendet (<a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=27677">W3 #27677</a>). <strong>Verwenden Sie es nicht.</strong> Um einen ähnlichen Effekt zu erzielen, verwenden Sie eine der folgenden Techniken:</p> + + <p>Wenn das Attribut <code>disabled</code> direkt zu dem Element auf der Seite hinzugefügt wurde, darf stattdessen nicht das Element {{HTMLElement("link")}}} aufgenommen werden;<br> + Setzt die <code>disabled</code> <strong>Eigenschaft</strong> des <code>StyleSheet</code> DOM Objekts über Skripting.</p> + + <p> </p> + </div> + </dd> +</dl> + +<p><strong>{{htmlattrdef("href")}}</strong></p> + +<p>Dieses Attribut gibt die URL der verlinkten Ressource an. Eine URL kann absolut oder relativ sein.</p> + +<dl> + <dt>{{htmlattrdef("hreflang")}}</dt> + <dd>Dieses Attribut gibt die Sprache der verlinkten Ressource an. Es ist rein beratend. Erlaubte Werte werden von <a href="http://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a> für HTML5 und von <a href="http://www.ietf.org/rfc/rfc1766.txt">RFC1766</a> für HTML 4 bestimmt, verwenden Sie dieses Attribut nur, wenn das Attribut {{htmlattrxref("href", "a")}}} vorhanden ist.</dd> + <dt>{{htmlattrdef("media")}}</dt> + <dd>Dieses Attribut gibt das Medium an, für das die verknüpfte Ressource gilt. Sein Wert muss eine <a href="/de/docs/Web/CSS/Media_Queries/Using_media_queries">Medienanfrage</a> sein. Dieses Attribut ist vor allem bei der Verknüpfung mit externen Stylesheets nützlich, da es dem Benutzeragenten ermöglicht, das am besten geeignete für das Gerät auszuwählen, auf dem es läuft. + <div class="note"><strong>Verwendungshinweis</strong><strong>: </strong> + <ul> + <li>In HTML 4 kann dies nur eine einfache, durch Leerzeichen getrennte Liste von Mediendaten sein, d.h. <a href="/de/docs/Web/CSS/@media">Medientypen und -gruppen</a>, die als Werte für dieses Attribut definiert und erlaubt sind, wie z.B. <code>print</code>, <code>screen</code>, <code>aural</code>, <code>braille</code>. HTML5 erweiterte dies auf jede Art von <a href="/de/docs/Web/CSS/Media_Queries/Using_media_queries">Medienabfragen</a>, die eine Obermenge der zulässigen Werte von HTML 4 darstellen.</li> + <li>Browser, die die <a href="/de/docs/Web/CSS/Media_Queries/Using_media_queries">CSS3-Medienabfragen</a> nicht unterstützen, erkennen nicht unbedingt den passenden Link; vergessen Sie nicht, Fallback-Links zu setzen, den in HTML 4 definierten eingeschränkten Satz von Medienabfragen.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("methods")}} {{Non-standard_inline}}</dt> + <dd>Der Wert dieses Attributs gibt Auskunft über die Funktionen, die an einem Objekt ausgeführt werden können. Die Werte werden im Allgemeinen vom HTTP-Protokoll bei der Verwendung angegeben, aber es könnte (aus ähnlichen Gründen wie beim <strong>Titelattribut</strong>) sinnvoll sein, Beratungsinformationen im Voraus in den Link aufzunehmen. So kann beispielsweise der Browser eine andere Darstellung eines Links in Abhängigkeit von den angegebenen Methoden wählen; etwas, das durchsuchbar ist, kann ein anderes Symbol erhalten, oder ein externer Link kann mit dem Hinweis auf das Verlassen der aktuellen Website dargestellt werden. Dieses Attribut wird weder gut verstanden noch unterstützt, auch nicht vom definierenden Browser, dem Internet Explorer 4. Siehe <a href="http://msdn.microsoft.com/en-us/library/ms534168%28VS.85%29.aspx">Methodeneigenschaften (MSDN)</a>.</dd> + <dt>{{htmlattrdef("rel")}}</dt> + <dd>Dieses Attribut bezeichnet eine Beziehung des verknüpften Dokuments zum aktuellen Dokument. Das Attribut muss eine durch Leerzeichen getrennte Liste der <a href="/en-US/docs/Web/HTML/Link_types">Werte der Link-Typen</a> sein. Die häufigste Verwendung dieses Attributs ist die Angabe eines Links zu einem externen Stylesheet: Das <strong>rel</strong>-Attribut ist auf <code>stylesheet</code> gesetzt, und das <strong>href</strong>-Attribut ist auf die URL eines externen Stylesheets gesetzt, um die Seite zu formatieren. WebTV unterstützt auch die Verwendung des Wertes <code>next</code> für <strong>rel</strong>, um die nächste Seite in einer Dokumentserie vorzuladen.</dd> + <dt>{{htmlattrdef("rev")}}{{obsolete_inline}}</dt> + <dd>The value of this attribute shows the relationship of the current document to the linked document, as defined by the {{htmlattrxref("href", "link")}} attribute. The attribute thus defines the reverse relationship compared to the value of the <strong>rel</strong> attribute. <a href="/en-US/docs/Web/HTML/Link_types">Link types values</a> for the attribute are similar to the possible values for {{htmlattrxref("rel", "link")}}. + <div class="note"><strong>Usage note: </strong>This attribute is obsolete in HTML5. <strong>Do not use it</strong>. To achieve its effect, use the {{htmlattrxref("rel", "link")}} attribute with the opposite <a href="/en-US/docs/Web/HTML/Link_types">link types values</a>, e.g. <span style="font-family: courier new;">made</span> should be replaced by <span style="font-family: courier new;">author</span>. Also this attribute doesn't mean <em>revision</em> and must not be used with a version number, which is unfortunately the case on numerous sites.</div> + </dd> + <dt>{{htmlattrdef("sizes")}} {{HTMLVersionInline(5)}}</dt> + <dd>This attribute defines the sizes of the icons for visual media contained in the resource. It must be present only if the {{htmlattrxref("rel","link")}} contains the <span style="font-family: courier new;">icon</span> <a href="/en-US/docs/Web/HTML/Link_types">link types value</a>. It may have the following values: + <ul> + <li><code>any</code>, meaning that the icon can be scaled to any size as it is in a vectorial format, like <code>image/svg+xml</code>.</li> + <li>a white-space separated list of sizes, each in the format <span style="font-family: courier new;"><em><width in pixels></em>x<em><height in pixels></em></span> or <span style="font-family: courier new;"><em><width in pixels></em>X<em><height in pixels></em></span>. Each of these sizes must be contained in the resource.</li> + </ul> + + <div class="note"><strong>Usage note: </strong> + + <ul> + <li>Most icon format are only able to store one single icon; therefore most of the time the {{htmlattrxref("sizes")}} contains only one entry. Among the major browsers, only the Apple's ICNS format allows the storage of multiple icons, and this format is only supported in WebKit.</li> + <li>Apple's iOS does not support this attribute, hence Apple's iPhone and iPad use special, non-standard <a href="/en-US/docs/Web/HTML/Link_types">link types values</a> to define icon to be used as Web Clip or start-up placeholder: <span style="font-family: courier new;">apple-touch-icon</span> and <span style="font-family: courier new;">apple-touch-startup-icon</span>.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("target")}}{{Non-standard_inline}}</dt> + <dd>Defines the frame or window name that has the defined linking relationship or that will show the rendering of any linked resource.</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>This attribute is used to define the type of the content linked to. The value of the attribute should be a MIME type such as <strong>text/html</strong>, <strong>text/css</strong>, and so on. The common use of this attribute is to define the type of style sheet linked and the most common current value is <strong>text/css</strong>, which indicates a Cascading Style Sheet format.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<h3 id="Including_a_stylesheet">Including a stylesheet</h3> + +<p>To include a stylesheet in a page, use the following syntax:</p> + +<pre class="brush: html"><link href="style.css" rel="stylesheet"> +</pre> + +<h3 id="Providing_alternative_stylesheets">Providing alternative stylesheets</h3> + +<p>You can also specify <a href="/en-US/docs/Web/CSS/Alternative_style_sheets">alternative style sheets</a>.</p> + +<p>The user can choose which style sheet to use by choosing it from the View>Page Style menu. This provides a way for users to see multiple versions of a page.</p> + +<pre class="brush: html"><link href="default.css" rel="stylesheet" title="Default Style"> +<link href="fancy.css" rel="alternate stylesheet" title="Fancy"> +<link href="basic.css" rel="alternate stylesheet" title="Basic"> +</pre> + +<h3 id="Stylesheet_load_events">Stylesheet load events</h3> + +<p>You can determine when a style sheet has been loaded by watching for a <code>load</code> event to fire on it; similarly, you can detect if an error has occurred while processing a style sheet by watching for an <code>error</code> event:</p> + +<pre class="brush: html"><script> +function sheetLoaded() { + // Do something interesting; the sheet has been loaded +} + +function sheetError() { + alert("An error occurred loading the stylesheet!"); +} +</script> + +<link rel="stylesheet" href="mystylesheet.css" onload="sheetLoaded()" onerror="sheetError()"> +</pre> + +<div class="note"><strong>Note:</strong> The <code>load</code> event fires once the stylesheet and all of its imported content has been loaded and parsed, and immediately before the styles start being applied to the content.</div> + +<h2 id="Notes">Notes</h2> + +<ul> + <li>A <code><link></code> tag can occur only in the head element; however, there can be multiple occurrences of <code><link></code>.</li> + <li>HTML 3.2 defines only the <strong>href</strong>, <strong>rel</strong>, <strong>rev</strong>, and <strong>title</strong> attributes for the link element.</li> + <li>HTML 2 defines the <strong>href</strong>, <strong>methods</strong>, <strong>rel</strong>, <strong>rev</strong>, <strong>title</strong>, and <strong>urn</strong> attributes for the <code><link></code> element. The <strong>methods</strong> and <strong>urn</strong> attributes were later removed from the specifications.</li> + <li>The HTML and XHTML specifications define event handlers for the <code><link></code> element, but it is unclear how they would be used.</li> + <li>Under XHTML 1.0, empty elements such as <code><link></code> require a trailing slash: <code><link /></code>.</li> +</ul> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-link-element', '<link>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-link-element', '<link>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.3', '<link>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Alternative stylesheets</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>disabled</code> attribute {{Non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>methods</code> attribute {{Non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>4.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>sizes</code> attribute</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}} {{bug("441770")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>load</code> and <code>error</code> events</td> + <td> + <p>19 (Webkit: 535.23)</p> + + <p>({{webkitbug(38995)}})</p> + </td> + <td>{{CompatGeckoDesktop("9.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>11.60</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>crossorigin</code> attribute</td> + <td>{{CompatChrome("25")}}</td> + <td>{{CompatGeckoDesktop("18.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera("15")}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Alternative stylesheets</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>disabled</code> attribute {{Non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>methods</code> attribute {{Non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>4.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>sizes</code> attribute</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}} {{bug("441770")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>load</code> and <code>error</code> events</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("9.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>crossorigin</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("18.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="http://pieisgood.org/test/script-link-events/">Ryan Grove's <script> and <link> node event compatibility chart</a></li> +</ul> + +<p id=".7B.7BHTMLRef.7D.7D">{{HTMLRef}}</p> diff --git a/files/de/web/html/element/main/index.html b/files/de/web/html/element/main/index.html new file mode 100644 index 0000000000..eb330b2279 --- /dev/null +++ b/files/de/web/html/element/main/index.html @@ -0,0 +1,175 @@ +--- +title: <main> +slug: Web/HTML/Element/main +tags: + - Element + - HTML + - HTML Gruppierender Inhalt + - Referenz +translation_of: Web/HTML/Element/main +--- +<h2 id="Übersicht">Übersicht</h2> + +<p>Das <em>HTML Main Element</em> (<strong><main></strong>)<strong> </strong>kann als ein Container für den leitenden Inhalt benutzt werden. Der Hauptteil besteht aus Inhalt, der direkt bezogen oder auf das zentrale Thema eines Bereichs oder der zentralen Funktionalität einer Applikation aufbaut. Der Inhalt sollte zum Dokument einzigartig sein, ausgenommen jeglicher Inhalt, welcher auf dem gesamten Dokument wiederholt ist wie zum Beispiel Seitenleisten, Navigationlinks, Information über das Urheberrecht, Seitenlogos, und Sucheingaben (augenommen, wenn die Hauptfunktion eine Sucheingabe ist). Anders als {{HTMLElement("article")}} und {{HTMLElement("section")}}, trägt dieses Element dem Entwurf des Dokuments nicht bei.</p> + +<div class="note"><strong>Hinweis:</strong> + +<ul> + <li><code><main></code> <strong>darf kein</strong> Nachfolger eines {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}} oder {{HTMLElement("nav")}} Elements sein.</li> + <li><strong>Nur ein</strong> <a href="http://www.w3.org/TR/html51/semantics.html#the-main-element">main</a> Element kann pro Dokument verwendet werden.</li> +</ul> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Inhalt Kategorien</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">Fließender Inhalt</a>, fühlbarer Inhalt.</td> + </tr> + <tr> + <th scope="row">Erlaubter Inhalt</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">Fließender Inhalt</a>.</td> + </tr> + <tr> + <th scope="row">Tag-Wegfall</th> + <td>Keine; Sowohl Anfangs- als auch End-Tag sind erforderlich.</td> + </tr> + <tr> + <th scope="row">Erlaubte Elternelemente</th> + <td>Alle Elemente, die <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">fließenden Inhalt</a> akzeptieren.</td> + </tr> + <tr> + <th scope="row">DOM-Schnittstelle</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p><span style="line-height: 21px;">Das Element enthält ausschließlich <a href="/de/docs/Web/HTML/Globale_Attribute">globale Attribute</a></span><span style="line-height: 21px;">.</span></p> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: html"><!-- Anderer Inhalt --> + +<main> + <h1>Äpfel</h1> + <p>Der Apfel ist das Kernobst des Apfelbaumes.</p> + + <article> + <h2>Rote Köstlichkeiten</h2> + <p>Diese hervorragenden roten Äpfel sind die verbreitetsten + wie man sie in Supermärkten finden kann.</p> + <p>... </p> + <p>... </p> + </article> + + <article> + <h2>Großmütterchen</h2> + <p>Diese saftigen grünen Äpfel sind eine großartige Füllung + für meine Apfelkuchen.</p> + <p>... </p> + <p>... </p> + </article> + +</main> + +<!-- Anderer Inhalt --></pre> + +<h2 id="Specifications" name="Specifications">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#the-main-element', '<main>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Die Einschränkung der Nichtnutzung von <code><main></code> als ein Nachfahre eines {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, oder {{HTMLElement("nav")}} Elements wurde aufgehoben.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'grouping-content.html#the-main-element', '<main>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Keine Änderung von {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-main-element', '<main>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Ursprüngliche Definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser-Kompatibilität</h2> + +<p>Das <code><main></code> Element wird flächendeckend unterstützt (ausgenommen für Internet Explorer). Es wird vorgeschlagen, bis das <main> Element von Internet Explorer unterstützt wird, <code>das</code> <code>"main"</code> ARIA role dem <code><main></code> Element hinzufügen:</p> + +<pre class="brush: html"><main role="main"> + ... +</main> +</pre> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funktion</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basis Unterstützung</td> + <td>Chrome 26</td> + <td>{{ CompatGeckoDesktop("21.0") }}</td> + <td>{{CompatNo()}}</td> + <td>Opera 16</td> + <td>Safari 7</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funktion</th> + <th>Android</th> + <th>Firefox Mobil (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobil</th> + <th>Safari Mobil</th> + </tr> + <tr> + <td>Basis Unterstützung</td> + <td>{{CompatNo()}}</td> + <td>{{ CompatGeckoMobile("21.0") }}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="sect1"> </h2> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Basis Strukturelemente: {{HTMLElement("html")}}, {{HTMLElement("head")}}, {{HTMLElement("body")}}</li> + <li>Sektionzugehörige Elemente: {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, oder {{HTMLElement("nav")}}</li> +</ul> + +<p> </p> diff --git a/files/de/web/html/element/map/index.html b/files/de/web/html/element/map/index.html new file mode 100644 index 0000000000..a15d594470 --- /dev/null +++ b/files/de/web/html/element/map/index.html @@ -0,0 +1,116 @@ +--- +title: <map> +slug: Web/HTML/Element/map +tags: + - Element + - HTML + - HTML eingebetteter Inhalt + - Multimedia + - Referenz + - Web +translation_of: Web/HTML/Element/map +--- +<h2 id="Übersicht">Übersicht</h2> + +<p>Das <strong>HTML-Element </strong><strong><code><map></code></strong> wird zusammen mit {{HTMLElement("area")}} benutzt um ein Image Map zu definieren (eine klickbare Fläche).</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Kategorien für den Inhalt</th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">Eralubter Inhalt</th> + <td>Any <a href="/en-US/docs/HTML/Content_categories#Transparent_content_model" title="https://developer.mozilla.org/en/HTML/Content_categories#Transparent_content_model">transparent</a> element.</td> + </tr> + <tr> + <th scope="row">Auslassung von Tags</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Erlaubte elterliche Elemente</th> + <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">DOM-Schnittstelle</th> + <td>{{domxref("HTMLMapElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p><span style="line-height: 21px;">Dieses Element verwendet die </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globalen Attribute</a><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{htmlattrdef("name")}}</dt> + <dd>Das Attribut "name" gibt der Map einen Namen, damit sie referenziert werden kann. Das Attribut muss vorhanden sein und muss einen Wert beinhalten, der nicht null ist und keine Leerzeichen beinhaltet. Der Wert des "name"-Attributs darf nicht mit dem "name"-Attribut eines anderen Map-Elements im selben Dokument übereinstimmen, ungeachtet der Groß-/Kleinschreibung. Falls das "id"-Attribut verwendet wird, müssen beide Attribute den selben Wert haben.</dd> +</dl> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: html"><map> + <area shape="circle" coords="200,250,25" href="another.htm" /> + <area shape="default" /> +</map> +</pre> + +<h2 id="Specifications" name="Specifications">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-map-element.html#the-map-element', '<map>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-map-element', '<map>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.6.1', '<map>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("html.elements.map")}}</p> + +<h3 id="Notizen_zu_Gecko">Notizen zu Gecko</h3> + +<p>[1] Startend mit Gecko 5.0 {{geckoRelease("5.0")}}, wurden leere Karten nicht länger übersprungen zugunsten für nicht-leere Karten, als diese im eigenen Modus passten. Zum Beispiel im folgenden HTML-Dokument:</p> + +<pre class="brush: html"><map name="a"></map> +<map name="a"> + <area shape="rect" coords="25,25,75,75" href="#fail"> +</map> +<img usemap="#a" src="image.png"> +</pre> + +<p>Vor Gecko 5.0 musste das {{HTMLElement("img")}}-Element zur zweiten, nicht-leeren Karte, passen. Nun passt es auch zum Ersten, auch wenn die Karte leer ist.</p> + +<p>[2] Von Firefox 17 ist das Standard-Aussehen des <code><map></code> HTML-Elementes <code>display: inline;</code> und nicht mehr <code>display: block;</code>.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{HTMLElement("a")}}</li> + <li>{{HTMLElement("area")}}</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/de/web/html/element/marquee/index.html b/files/de/web/html/element/marquee/index.html new file mode 100644 index 0000000000..4c8150bf43 --- /dev/null +++ b/files/de/web/html/element/marquee/index.html @@ -0,0 +1,216 @@ +--- +title: <marquee> +slug: Web/HTML/Element/marquee +tags: + - Element + - HTML + - Referenz + - Veraltet + - Web + - marquee +translation_of: Web/HTML/Element/marquee +--- +<div>{{HTMLRef}}</div> + +<div>{{obsolete_header}}</div> + +<p>Das HTML Element <marquee> wird dazu benutzt um ein scrollendes Textfeld einzufügen. Sie können mithilfe der Attribute kontrollieren, was passiert, wenn der Text das Ende des Textfeldes erreicht. </p> + +<div class="warning"> +<p>Das <code><marquee></code> Element ist <strong>veraltet</strong> und muss bzw. soll nicht mehr verwendet werden. Obwohl manche Browser es immernoch unterstützen, ist es nicht erforderlich. Es wird davon abgeraten, dieses Tag zu benutzen, da es das schlimmste ist, was Sie ihren Besuchern antun können.</p> +</div> + +<h2 id="Attribute">Attribute</h2> + +<dl> + <dt>{{htmlattrdef("behavior")}}</dt> + <dd>Bestimmt, wie sich der Text innerhalb des marquee-tags bewegt. Mögliche Optionen send "scroll", "slide" und "alternate". Der Standardwert ist "scroll" und wird automatisch benutzt, falls kein Wert definiert wird.</dd> + <dt>{{htmlattrdef("bgcolor")}}</dt> + <dd>Bestimmt die Hintergrundfarbe mittels einer der Standardfarben, dem RGB- bzw. dem Hexadezimalwert.</dd> + <dt>{{htmlattrdef("direction")}}</dt> + <dd>Legt die Bewegungsrichtung innerhalb des marquee-tags fest. Mögliche Optionen sind "left", "right", "up" und "down". Der Standardwert ist "left" und wird automatisch benutzt, falls kein Wert definiert wird.</dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>Definiert die Höhe in Pixel- oder Prozentwerten.</dd> + <dt>{{htmlattrdef("hspace")}}</dt> + <dd>Definiert den horizontalen Außenabstand.</dd> + <dt>{{htmlattrdef("loop")}}</dt> + <dd>Definiert, wie oft die Aktion (scroll, slide, alternate) ausgeführt wird. Der Standardwert ist -1, was bedeutet, dass der Inhalt des Marquee-tags in Dauerschleife dargestellt wird.</dd> + <dt>{{htmlattrdef("scrollamount")}}</dt> + <dd>Definiert den Wert eines Intervalls in Pixel. Der Standardwert beträgt 6.</dd> + <dt>{{htmlattrdef("scrolldelay")}}</dt> + <dd>Definiert den Intervall zwischen jeder Bewegung in Millisekunden. Der Standardwert ist 85. <strong>Merke:</strong> Jeder Wert, der kleiner als 60 ist, wird ignoriert und der Wert 60 wird stattdessen verwendet, außer "truespeed" ist definiert.</dd> + <dt>{{htmlattrdef("truespeed")}}</dt> + <dd>Standardmäßig werden scrolldelays, die kleiner als 60 sind ignoriert. Wenn "truespeed" verwendet wird, ist dies jedoch nicht der Fall.</dd> + <dt>{{htmlattrdef("vspace")}}</dt> + <dd>Definiert den vertikalen Außenabstand in Pixel- oder Prozentwerten.</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>Definiert die Breite in Pixel- oder Prozentwerten.</dd> +</dl> + +<h2 id="Event_handlers" name="Event_handlers">Event-Handler</h2> + +<dl> + <dt>{{htmlattrdef("onbounce")}}</dt> + <dd>Startet, wenn der Text das Ende des zuvor definierten Marquee-tags erreicht hat. Diese Option ist jedoch nur verfügbar, wenn das Attribut "alternate" als "behavior" verwendet wird.</dd> + <dt>{{htmlattrdef("onfinish")}}</dt> + <dd>Startet, wenn das Attribut "loop" abgeschlossen ist. Diese Option ist jedoch nur verfügbar, wenn für das Attribut "loop" ein größerer Wert als 0 gewählt wurde.</dd> + <dt>{{htmlattrdef("onstart")}}</dt> + <dd>Startet gleichzeitig mit dem Marquee-tag.</dd> +</dl> + +<h2 id="Methods" name="Methods">Methoden</h2> + +<dl> + <dt>start</dt> + <dd>Startet das Marquee-tag.</dd> + <dt>stop</dt> + <dd>Stoppt das Marquee-tag.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: html"><marquee>Dieser Text bewegt sich von rechts nach links</marquee> + +<marquee direction="up">Dieser Text bewegt sich von unten nach oben</marquee> + +<marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid"> + <marquee behavior="alternate"> + Dieser Text prallt am Rand ab. + </marquee> +</marquee></pre> + +<p>{{EmbedLiveSample("Examples", 600, 450)}}</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Erklärung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'obsolete.html#the-marquee-element-2', '<marquee>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> + <p>Wird veraltet zugunsten von CSS dargestellt, jedoch muss die erwartete "behavior" für die umgekehrte Kompatibilität festgelegt werden.</p> + </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'obsolete.html#the-marquee-element-0', '<marquee>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Wird veraltet zugunsten von CSS dargestellt, jedoch muss die erwartete "behavior" für die umgekehrte Kompatibilität festgelegt werden.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibiltät">Browser Kompatibiltät</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>2.0</td> + <td>7.2</td> + <td>1.2</td> + </tr> + <tr> + <td><code>truespeed</code> attribute</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>4.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>hspace/vspace</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>loop</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>truespeed</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>hspace/vspace</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>loop</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/de/web/html/element/nav/index.html b/files/de/web/html/element/nav/index.html new file mode 100644 index 0000000000..b3c2f32231 --- /dev/null +++ b/files/de/web/html/element/nav/index.html @@ -0,0 +1,106 @@ +--- +title: nav +slug: Web/HTML/Element/nav +tags: + - Element + - HTML + - HTML Sektionen + - Referenz + - Web +translation_of: Web/HTML/Element/nav +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">Das <strong>HTML Element <code><nav></code></strong> zeichent einen Seitenbereich aus, der dazu bestimmt ist Navigationslinks bereitzustellen, die entweder zum aktuellen Dokument oder zu anderen Dokumenten zeigen. Häufige Beispiele für Navigationsbereiche sind Menüs, Inhaltsverzeichnisse oder andere Verzeichnisse.</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/de/docs/Web/Guide/HTML/Inhaltskategorien">Inhaltskategorien</a></th> + <td><a href="/de/docs/Web/Guide/HTML/Inhaltskategorien#Fließender_Inhalt">Fließender Inhalt</a>, <a href="/de/docs/Web/Guide/HTML/Inhaltskategorien#Unterteilender_Inhalt">Unterteilender Inhalt</a>, <a href="/de/docs/Web/Guide/HTML/Inhaltskategorien#Fühlbarer_Inhalt">Fühlbarer Inhalt</a>.</td> + </tr> + <tr> + <th scope="row">Erlaubter Inhalt</th> + <td><a href="/de/docs/Web/Guide/HTML/Inhaltskategorien#Fließender_Inhalt">Fließender Inhalt</a>.</td> + </tr> + <tr> + <th scope="row">Tag Wegfall</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Erlaubte Elternelemente</th> + <td>Alle Elemente die <a href="/de/docs/Web/Guide/HTML/Inhaltskategorien#Fließender_Inhalt">fließenden Inhalt</a> akzeptieren.</td> + </tr> + <tr> + <th scope="row">Erlaubte ARIA-Rollen</th> + <td>Keine</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p>Dieses Element besitzt nur die <a href="/de/docs/Web/HTML/Globale_Attribute">globalen Attribute</a>.</p> + +<h2 id="Verwendungshinweise">Verwendungshinweise</h2> + +<ul> + <li>Es ist nicht nötig, dass alle Links in einen <code><nav></code> Element enthalten sind. Die Benutzung von <code><nav></code> ist nur für wichtige Abschnitte von Navigationslinks beabsichtigt; normalerweise enthält das {{HTMLElement("footer")}} Element eine Liste von Links, welche nicht in einem {{HTMLElement("nav")}} Element beinhaltet sein müssen.</li> + <li>Ein Dokument darf mehrere {{HTMLElement("nav")}} Elemente enthalten, zum Beispiel, eins für die Seitennavigation und eins für seiteninterne Navigation. <code><a href="/de/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code> kann benutzt werden um Barrierefreiheit zu fördern (siehe <a href="/en-US/docs/Web/HTML/Element/Heading_Elements#Labeling_section_content">Beispiel</a>).</li> + <li>User-Agents, wie Bildschirmleser zur Unterstützung von Menschen mit Behinderung, können dieses Element benutzen, um zu entscheiden, ob das anfängliche Rendering von Navigationsinhalt ausgelassen werden kann.</li> +</ul> + +<h2 id="Beispiel">Beispiel</h2> + +<p>In diesem Beispiel wird das <code><nav></code> Element benutzt, um eine ungeordnete Liste ({{HTMLElement("ul")}}) von Links. Mit entsprechenden CSS kann dies als Seitenleiste, Navigationsleiste oder Drop-Down-Menü verwendet werden.</p> + +<pre class="brush: html"><nav class="menu"> + <ul> + <li><a href="#">Startseite</a></li> + <li><a href="#">Über</a></li> + <li><a href="#">Kontakt</a></li> + </ul> +</nav> +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-nav-element', '<nav>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Keine Änderung seit dem letzten W3C Schnapschuss.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-nav-element', '<nav>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Anfängliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + + + +<p>{{Compat("html.elements.nav")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Other section-related elements: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li> + <li class="last"><a class="deki-ns current" href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sections and outlines of an HTML5 document</a>.</li> + <li class="last"><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Navigation_Role">ARIA: Navigation role</a></li> +</ul> diff --git a/files/de/web/html/element/noembed/index.html b/files/de/web/html/element/noembed/index.html new file mode 100644 index 0000000000..b0b13f7bb0 --- /dev/null +++ b/files/de/web/html/element/noembed/index.html @@ -0,0 +1,41 @@ +--- +title: '<noembed>: Das Embed Fallback Element (veraltet)' +slug: Web/HTML/Element/noembed +tags: + - Element + - Embedded content + - Reference + - Veraltet + - noembed +translation_of: Web/HTML/Element/noembed +--- +<div>{{HTMLRef}}{{Non-standard_header}}{{obsolete_header}}</div> + +<p><span class="seoSummary">Das <code><strong><noembed></strong></code>-Element ist eine veraltete, nicht standardisierte Möglichkeit, alternativen oder "Fallback"-Inhalt für Browser bereitzustellen, die das Element {{HTMLElement("embed")}} oder den Typ des <a href="/de/docs/Web/Guide/HTML/Content_categories#Embedded_content">eingebetteten Inhalts</a> nicht unterstützen den ein Autor verwenden möchte.</span> Dieses Element wurde in HTML 4.01 und höher als veraltet gekennzeichnet, um stattdessen den Fallback-Inhalt zwischen den öffnenden und schließenden Tags eines {{HTMLElement("object")}}-Elements zu platzieren.</p> + +<div class="note"> +<p>Hinweis: Während dieses Element derzeit noch in vielen Browsern funktioniert, ist es veraltet und sollte nicht verwendet werden. Verwenden Sie stattdessen {{HTMLElement("object")}} mit Fallback-Inhalt zwischen den öffnenden und schließenden Tags des Elements.</p> +</div> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', '#noembed', '<noembed>')}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td>Non-conforming feature.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("html.elements.noembed")}}</p> diff --git a/files/de/web/html/element/noscript/index.html b/files/de/web/html/element/noscript/index.html new file mode 100644 index 0000000000..552fdbafed --- /dev/null +++ b/files/de/web/html/element/noscript/index.html @@ -0,0 +1,103 @@ +--- +title: <noscript> +slug: Web/HTML/Element/noscript +tags: + - Element + - HTML + - HTML scripting + - Referenz + - Web +translation_of: Web/HTML/Element/noscript +--- +<div>{{HTMLRef}}</div> + +<p>Das <strong>HTML Element <code><noscript></code> </strong>definiert einen HTML Abschnitt, der eingefügt werden soll, wenn ein Skripttyp auf der Seite nicht unterstützt wird oder wenn Skripting nicht aktiviert ist.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/de/docs/HTML/Content_categories" title="HTML/Content_categories">lnhaltskategorien</a></th> + <td><a href="/de/docs/HTML/Content_categories#Metadata_content" title="HTML/Content_categories#Metadata_content">Metadaten</a>, <a href="/de/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">flow content</a>, <a href="/de/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Erlaubter Inhalt</th> + <td>Wenn skripten deaktiviert ist und es ein Element im {{HTMLElement("head")}} Element ist: ohne bestimmte Reihenfolge, mehrere oder kein {{HTMLElement("link")}} Elemente, kein oder mehrere {{HTMLElement("style")}} Elemente, und kein oder mehrere {{HTMLElement("meta")}} Elemente.<br> + Wenn skripten deaktiviert ist und es kein Element im {{HTMLElement("head")}} Element ist: jedes nicht-darstellbare Element, aber kein <code><noscript></code> Element darf unter den Unterelementen sein.<br> + Sonst: flow content oder phrasing content.</td> + </tr> + <tr> + <th scope="row">Tageinschränkungen</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Erlaubte Überelemente</th> + <td>Jedes Element, welches <a href="/de/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a> erlaubt, wenn es kein <code><noscript></code> Element ist, oder in einem {{HTMLElement("head")}} Element (ausser für ein HTML Dokument), hier auch: nur, wenn es kein <code><noscript></code> Element ist.</td> + </tr> + <tr> + <th scope="row">Erlaubte ARIA Rollen</th> + <td>Keine</td> + </tr> + <tr> + <th scope="row">DOM Schnittstelle</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p><span style="line-height: 21px;">Dieses Element inkludiert </span><a href="/de/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globale Attribute</a><span style="line-height: 21px;">.</span></p> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: html"><noscript> + <!-- Anker Link zu einer externe Datei --> + <a href="http://www.mozilla.com/">Externer Link</a> +</noscript> +<p>Rockt!</p> +</pre> + +<h3 id="Resultat_wenn_skripten_aktiviert_ist">Resultat wenn skripten aktiviert ist</h3> + +<p>Rockt!</p> + +<h3 id="Resultat_wenn_skripten_deaktiviert_ist">Resultat wenn skripten deaktiviert ist</h3> + +<p><a class="external" href="http://www.mozilla.com/">Externer Link</a></p> + +<p>Rockt!</p> + +<h2 id="Specifications" name="Specifications">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'scripting-1.html#the-noscript-element', '<noscript>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'the-noscript-element.html#the-noscript-element', '<noscript>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'scripts.html#h-18.3.1', '<noscript>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("html.elements.noscript")}}</p> diff --git a/files/de/web/html/element/object/index.html b/files/de/web/html/element/object/index.html new file mode 100644 index 0000000000..ebab466113 --- /dev/null +++ b/files/de/web/html/element/object/index.html @@ -0,0 +1,176 @@ +--- +title: <object> +slug: Web/HTML/Element/object +tags: + - Element + - HTML + - HTML eingebetteter Inhalt + - Referenz + - Web +translation_of: Web/HTML/Element/object +--- +<h2 id="Summary">Summary</h2> + +<p>Das <strong>HTML <code><object></code> Element</strong> (oder auch <em>HTML Embedded Object Element</em>) repräsentiert eine externe Resource die entweder als Bild, eingebetteter Browser Context oder eine Resource die von einem Plugin geöffnet wird.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>; <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>; <a href="/en-US/docs/HTML/Content_categories#Embedded_content" title="HTML/Content categories#Embedded content">embedded content</a>, palpable content; Bei besitzen des Attributs <strong>usemap: </strong><a href="/en-US/docs/HTML/Content_categories#Interactive_content" title="HTML/Content categories#Interactive content">interactive content</a>; <a href="/en-US/docs/HTML/Content_categories#Form_listed" title="HTML/Content categories#Form listed">listed</a>, <a href="/en-US/docs/HTML/Content_categories#Form_submittable" title="HTML/Content categories#Form submittable">submittable</a> <a href="/en-US/docs/HTML/Content_categories#Form-associated_content" title="HTML/Content categories#Form-associated content">form-associated</a> element.</td> + </tr> + <tr> + <th scope="row">Erlaubter Inhalt</th> + <td>Null oder mehrere {{HTMLElement("param")}} Elemente, dann <a href="/en-US/docs/HTML/Content_categories#Transparent_content_models" title="HTML/Content categories#Transparent content models">Transparent content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parent elements</th> + <td>Jedes Element das <a href="/en-US/docs/HTML/Content_categories#Embedded_content" title="HTML/Content categories#Embedded content">embedded content</a> erlaubt.</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLObjectElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes">Attributes</h2> + +<p><span style="line-height: 21px;">Dieses Element enthält die </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{htmlattrdef("archive")}} {{HTMLVersionInline(4)}} only; {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>Eine durch Leerzeichen getrennte Liste von URIs für die Archive der Resourcen dieses <em>objects</em>.</dd> + <dt>{{htmlattrdef("border")}} {{deprecatedGeneric('inline','HTML4.01')}}; {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>Rahmenbreite in Pixeln.</dd> + <dt>{{htmlattrdef("classid")}} {{HTMLVersionInline(4)}} only; {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>URI die Object implementiert. Kann mit oder anstatt des <strong>data</strong> Attributes benutzt werden.</dd> + <dt>{{htmlattrdef("codebase")}} {{HTMLVersionInline(4)}} only; {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>Der Ursprungspfad zum auflösen der relativen URIs die durch <strong>classid</strong>, <strong>data</strong>, oder <strong>archive</strong> spezifiziert werden. Falls nicht spezifiziert, ist der Ursprungspfad der URI, document.</dd> + <dt>{{htmlattrdef("codetype")}} {{HTMLVersionInline(4)}} only; {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>Inhaltstype der Daten die durch <strong>classid</strong> spezifiziert werden.</dd> + <dt>{{htmlattrdef("data")}}</dt> + <dd>Valide URL der Adressressource. Wenigstens eine muss für <strong>data</strong> und <strong>type</strong> angegeben werden.</dd> + <dt>{{htmlattrdef("declare")}} {{HTMLVersionInline(4)}} only; {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>Bei vorhanden sein dieses Boolschen Attributes, wird das Element lediglich deklariert. <em>Object </em>muss durch ein nachfolgendes <code><object></code> Element instanziiert werden. In HTML5, wiederholt sich <object> komplett sodass jede Resource wiederbenutzt wird.</dd> + <dt>{{htmlattrdef("form")}} {{HTMLVersionInline(5)}}</dt> + <dd>Das form Element, falls vorhanden, sodass das <em>object mit dieser Form identifiziert wird </em>(seinem <em>form Besitzer</em>). Der Wert muss eine ID eines {{HTMLElement("form")}} Elements im selben <em>document</em> sein.</dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>Rahmenhöhe in Pixeln.</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>Name des gültigen Browsing Contexts (HTML5), oder der Name oder Name der <em>control </em>(HTML 4).</dd> + <dt>{{htmlattrdef("standby")}} {{HTMLVersionInline(4)}} only; {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>Eine Nachricht die angezeigt wird, während die <em>object</em> Implementierung und Daten geladen werden.</dd> + <dt>{{htmlattrdef("tabindex")}} {{HTMLVersionInline(4)}} only; {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>Tabbing Position im aktuellen <em>document</em>.</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd><a href="/en-US/docs/Glossary/Content_type">content type</a> der Resource wie in <strong>data</strong> spezifiziert. Wenigsten ein <strong>data</strong> und <strong>type</strong> müssen definiert sein.</dd> + <dt>{{htmlattrdef("usemap")}}</dt> + <dd><em>hash-name</em> Referenz zu einem {{HTMLElement("map")}} Element; d.h. ein '#' gefolgt der Value eines {{htmlattrxref("name", "map")}} von einem map Element.</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>Anzeigebreite in PixelnThe width of the display resource, in CSS pixels.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Flash_Video_einbetten">Flash Video einbetten</h3> + +<pre class="brush: html"><!-- Einbetten eines Flash Videos --> +<object data="move.swf" type="application/x-shockwave-flash"></object> + +<!-- <span style="font-size: 1rem;"> Einbetten eines Flash Videos</span><span style="font-size: 1rem;"> mit Parametern --></span> +<object data="move.swf" type="application/x-shockwave-flash"> + <param name="foo" value="bar"> +</object> +</pre> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-iframe-element.html#the-object-element', '<object>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-object-element', '<object>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.3', '<object>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{HTMLElement("param")}}</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/de/web/html/element/ol/index.html b/files/de/web/html/element/ol/index.html new file mode 100644 index 0000000000..c480203a78 --- /dev/null +++ b/files/de/web/html/element/ol/index.html @@ -0,0 +1,157 @@ +--- +title: ol +slug: Web/HTML/Element/ol +tags: + - HTML + - HTML Elemente + - HTML Referenz +translation_of: Web/HTML/Element/ol +--- +<h2 id="Übersicht">Übersicht</h2> + +<p>Das HTML Element <em>ordered list</em> <ol> wird verwendet, um eine geordnete Liste zu definieren. Die Aufzählung kann in unterschiedlichen Formen geschehen, darunter Buchstaben, römische Zahlen und reguläre Zahlen. Die einzelnen Einträge innerhalb der Liste werden über <a href="/de/HTML/Element/li" title="de/HTML/Element/li">Listen</a> (<a href="/de/HTML/Element/li" title="de/HTML/Element/li"><li></a>) Elemente in das <code><ol></code> Element eingefügt.</p> + +<ul> + <li>Element Typ: <a href="/de/HTML/Block-level_Elemente">block-level</a></li> + <li>Erlaubter Inhalt: <a href="/de/HTML/Element/li" title="de/HTML/Element/li">li</a></li> +</ul> + +<h2 id="Attribute">Attribute</h2> + +<dl> + <dt>{{htmlattrdef("start")}} {{HTMLVersionInline(5)}}</dt> + <dd>Legt einen Startwert für die Aufzählung der Listeneinträge fest. Dies geschieht unabhängig vom Typ der Nummerierung. Römische Zahlen und Buchstaben können allerdings nicht als Wert angegeben werden, der einzig akzeptierte Wert ist eine Zahl. Um die Aufzählung mit dem Buchstaben "C" zu beginnen, schreibt man einfach: <code><ol type="A" start="3"></code>.</dd> + <dd> + <div class="note"> + <p>Das Start-Attribut wurde in HTML4 als deprecated markiert, allerdings in HTML5 wieder integriert.</p> + </div> + </dd> + <dt>{{htmlattrdef("type")}} {{HTMLVersionInline(5)}}</dt> + <dd> + <p>Wird verwendet, um das Aufzählungszeichen der Liste festzulegen. Die Werte sind in der <a href="/de/HTML3.2" title="de/HTML3.2">HTML3.2</a> Spezifikation festgelegt und in der „transitional“ Version von <a href="/de/HTML4.01" title="de/HTML4.01">HTML 4.0/4.01</a> sind <code>circle</code>, <code>disc</code>, und <code>square</code> aufgeführt. Der Browser kann über unterschiedliche Zeichen entscheiden, abhängig vom Grad der Verschachtelung, wenn das type Attribut nicht verwendet wird. Das WebTV Interface unterstützt auch ein <code>triangle</code> Zeichen. Dieses Attribut ist veraltet, es sollte die <a href="/de/CSS" title="de/CSS">CSS</a> <a href="/de/CSS/list-style-type" title="de/CSS/list-style-type">list-style-type</a> Eigenschaft stattdessen verwendet werden.</p> + + <div class="note"> + <p>Das Type-Attribut wurde in HTML4 als deprecated markiert, allerdings in HTML5 wieder integriert.</p> + </div> + </dd> + <dt>{{htmlattrdef("compact")}} {{ Deprecated_inline() }}</dt> + <dd>Gibt an, dass die Liste in einer kompakten Form gerendert werden soll. Die Interpretation dieses Attributs hängt vom Browser ab.</dd> + <dd> + <div class="note"> + <p>Das Compact-Attribut wurde seit HTML4 als deprecated markiert und sollte nicht weiter benutzt werden.</p> + + <p>einen ähnlichen Effekt kann man mit der CSS-Eigenschaft {{cssxref("line-height")}} und einem Wert von <code>80%</code> erzielen.</p> + </div> + </dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Einfaches_Beispiel">Einfaches Beispiel</h3> + +<pre> <ol> + <li>Erster Eintrag</li> + <li>Zweiter Eintrag</li> + <li>Dritter Eintrag</li> + </ol> +</pre> + +<p>Dieses HTML gibt das Folgende aus:</p> + +<ol> + <li>Erster Eintrag</li> + <li>Zweiter Eintrag</li> + <li>Dritter Eintrag</li> +</ol> + +<h3 id="Verwendung_des_start_Attributs">Verwendung des <code>start</code> Attributs</h3> + +<pre> <ol start="7"> + <li>Erster Eintrag</li> + <li>Zweiter Eintrag</li> + <li>Dritter Eintrag</li> + </ol> +</pre> + +<p>Dieses HTML gibt das Folgende aus:</p> + +<ol start="7"> + <li>Erster Eintrag</li> + <li>Zweiter Eintrag</li> + <li>Dritter Eintrag</li> +</ol> + +<h3 id="Verschachtelte_Listen">Verschachtelte Listen</h3> + +<pre> <ol> + <li>Erster Eintraf</li> + <li>Zweiter Eintrag <!-- Achtung, das schließende </li> Tag wird hier nicht notiert! --> + <ol> + <li>Zweiter Eintrag erster Untereintrag</li> + <li>Zweiter Eintrag zweiter Untereintrag</li> + <li>Zweiter Eintrag dritter Untereintrag</li> + </ol> + </li> <!-- Hier ist das schließende </li> Tag angegeben! --> + <li>Dritter Eintrag</li> + </ol> +</pre> + +<p>Dieses HTML gibt das Folgende aus:</p> + +<ol> + <li>Erster Eintrag</li> + <li>Zweiter Eintrag + <ol> + <li>Zweiter Eintrag erster Untereintrag</li> + <li>Zweiter Eintrag zweiter Untereintrag</li> + <li>Zweiter Eintrag dritter Untereintrag</li> + </ol> + </li> + <li>Dritter Eintrag</li> +</ol> + +<h3 id="Verschachtelte_<ul>_und_<ol>">Verschachtelte <ul> und <ol></h3> + +<pre> <ol> + <li>Erster Eintrag</li> + <li>Zweiter Eintrag <!-- Achtung, das schließende </li> Tag wird hier nicht notiert! --> + <ul> + <li>Zweiter Eintrag erster Untereintrag</li> + <li>Zweiter Eintrag zweiter Untereintrag</li> + <li>Zweiter Eintrag dritter Untereintrag</li> + </ul> + </li> <!-- Hier ist das schließende </li> Tag angegeben! --> + <li>Dritter Eintrag</li> + </ol> +</pre> + +<p>Dieses HTML gibt das Folgende aus:</p> + +<ol> + <li>Erster Eintrag</li> + <li>Zweiter Eintrag + <ul> + <li>Zweiter Eintrag erster Untereintrag</li> + <li>Zweiter Eintrag zweiter Untereintrag</li> + <li>Zweiter Eintrag dritter Untereintrag</li> + </ul> + </li> + <li>Dritter Eintrag</li> +</ol> + +<h2 id="Hinweise">Hinweise</h2> + +<p>Es können so viele Listen, wie man möchte verschachtelt werden, <code><ul></code> und <code><ol></code> in jeder Reihenfolge.</p> + +<p>Um die Einrückung von Listen zu verändern sollte die <a href="/de/CSS" title="de/CSS">CSS</a> <a href="/de/CSS/margin" title="de/CSS/margin">margin</a> Eigenschaft verwendet werden.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/HTML/Element/li" title="de/HTML/Element/li">HTML List item Element</a></li> + <li><a href="/de/HTML/Element/ul" title="de/HTML/Element/ul">HTML ungeordnete Liste</a></li> + <li><a href="/de/CSS/list-style" title="de/CSS/list-style">CSS list-style Eigenschaft</a></li> + <li><a href="/de/CSS_Counters" title="de/CSS_Counters">CSS Counters</a></li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/de/web/html/element/optgroup/index.html b/files/de/web/html/element/optgroup/index.html new file mode 100644 index 0000000000..0f64b6a5d7 --- /dev/null +++ b/files/de/web/html/element/optgroup/index.html @@ -0,0 +1,161 @@ +--- +title: <optgroup> +slug: Web/HTML/Element/optgroup +tags: + - Element + - HTML + - HTML Formulare + - Referenz + - Web +translation_of: Web/HTML/Element/optgroup +--- +<h2 id="Übersicht">Übersicht</h2> + +<p>In einem Webformular erstellt das <code><optgroup></code> HTML Element eine Gruppe von Optionen innerhalb eines {{HTMLElement("select")}} Elements.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/de/docs/Web/Guide/HTML/Inhaltskategorien" title="HTML/Content_categories">Inhaltskategorien</a></th> + <td>Keine</td> + </tr> + <tr> + <th scope="row">Erlaubter Inhalt</th> + <td>Keine oder mehrere {{HTMLElement("option")}} Elemente.</td> + </tr> + <tr> + <th scope="row">Tag Auslassung</th> + <td>Der Starttag ist zwingend. Der Endtag ist optional, falls dem Element direkt ein weiteres <span style="font-family: courier new;"><optgroup></span> Element folgt oder falls das Elternelement keine weiteren Inhalte hat.</td> + </tr> + <tr> + <th scope="row">Erlaubte Elternelemente</th> + <td>Ein {{HTMLElement("select")}} Element.</td> + </tr> + <tr> + <th scope="row">DOM Schnittstelle</th> + <td>{{domxref("HTMLOptGroupElement")}}</td> + </tr> + </tbody> +</table> + +<p>{{Note("<code><optgroup></code> Elemente können nicht verschachtelt werden.")}}</p> + +<h2 id="Attribute">Attribute</h2> + +<p>Dieses Element beinhaltet die <a href="/de/docs/Web/HTML/Globale_Attribute" title="HTML/Global attributes">globalen Attribute</a>.</p> + +<dl> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd>Falls dieses boolsche Attribut gesetzt ist, ist keines der Optionsgruppenelemente auswählbar. Oft grauen Browser diese Optionen aus und sie erhalten keine Ereignisse wie Mausklicks oder Fokus bezogene Ereignisse.</dd> + <dt>{{htmlattrdef("label")}}</dt> + <dd>Der Name der Optionsgruppe, welchen der Browser verwenden kann, um die Optionen in der Benutzerschnittstelle zu beschreiben. Dieses Attribut ist zwingend, falls dieses Element benutzt wird.</dd> +</dl> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: html"><select> + <optgroup label="Gruppe 1"> + <option>Option 1.1</option> + </optgroup> + <optgroup label="Gruppe 2"> + <option>Option 2.1</option> + <option>Option 2.2</option> + </optgroup> + <optgroup label="Gruppe 3" disabled> + <option>Option 3.1</option> + <option>Option 3.2</option> + <option>Option 3.3</option> + </optgroup> +</select> +</pre> + +<h3 id="Ergebnis">Ergebnis</h3> + +<p>{{EmbedLiveSample("Beispiel")}}</p> + +<h2 id="Spezifikation">Spezifikation</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-optgroup-element', '<optgroup>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-optgroup-element', '<optgroup>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '<optgroup>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Andere Formular bezogene Elemente: {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("option")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/de/web/html/element/option/index.html b/files/de/web/html/element/option/index.html new file mode 100644 index 0000000000..b52686ddc7 --- /dev/null +++ b/files/de/web/html/element/option/index.html @@ -0,0 +1,155 @@ +--- +title: <option> +slug: Web/HTML/Element/option +tags: + - Element + - Formulare + - HTML + - HTML Formulare + - Referenz + - Web +translation_of: Web/HTML/Element/option +--- +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>Im Rahmen eines Web Formulars erzeugt das <strong>HTML<em> </em><code><option></code><em> </em>Element </strong>einen innerhalb eines HTML5 {{HTMLElement("select")}}, {{HTMLElement("optgroup")}} oder {{HTMLElement("datalist")}} Elements zur Auswahl angezeigten Eintrag.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorie</a></th> + <td>Keine.</td> + </tr> + <tr> + <th scope="row">Zugelassene Inhalte</th> + <td>Text mit bedarfsweise in HTML Sequenzen umgewandelten Spezial- und Sonderzeichen, wie z.B. <code>&eacute;</code>.</td> + </tr> + <tr> + <th scope="row">Verhalten bei Auslassung</th> + <td>Im Gegensatz zum einleitenden Tag kann das beendende Tag ausgelassen werden, sofern diesem direkt ein weiteres <code><option></code> oder {{HTMLElement("optgroup")}} Element folgt, oder aber, wenn das Elternelement keine weiteren Inhalte enthält.</td> + </tr> + <tr> + <th scope="row">Zugelassene Elternelemente</th> + <td>Ein {{HTMLElement("select")}}, {{HTMLElement("optgroup")}} oder {{HTMLElement("datalist")}} Element.</td> + </tr> + <tr> + <th scope="row">DOM Schnittstelle</th> + <td>{{domxref("HTMLOptionElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p><span style="line-height: 21px;">Dieses Element berücksichtigt die </span><a href="/en-US/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globalen Attribute</a><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd>Dieser boolesche Wert kennzeichnet diesen Eintrag als nicht auswählbar. Im Regelfall werden nicht auswählbare Einträge in der Darstellung ausgegraut und erhalten keine Benachrichtigungen über Mausclicks, Fokus etc. mehr vom Browser. Ein Element kann darüber hinaus auch deshalb nicht auswählbar sein, weil ein ihm übergeordnetes {{HTMLElement("optgroup")}} Element inaktiviert ist.</dd> + <dt>{{htmlattrdef("label")}}</dt> + <dd>Dieses Attribut kann eine kurze erläuternde Informationen zur Bedeutung der jeweiligen Auswahl enthalten. Wurde dem <code><strong>label</strong></code> Attribut kein Inhalt explizit zugewiesen, enthält es den Textinhalt des Auswahlpunktes selbst. + <div class="note"><em>Hinweis zur Nutzung: </em>Ein <code><strong>label</strong></code> Attribut sollte lediglich eine kurze Erläuterung enthalten, wie sie z.B. im Rahmen eines Auswahlmenüs sinnvoll ist. Für längere Beschreibungen, z.B. den neben Radiobuttons und Auswahlschaltflächen angezeigten Text, wurde das <strong><code>value</code></strong> Attribut vorgesehen.</div> + </dd> + <dt>{{htmlattrdef("selected")}}</dt> + <dd>Wenn angegeben, kennzeichnet dieser boolesche Wert, ob die betreffende Auswahl initial bereits als angewählt gekennzeichnet ist. Wenn das betreffende<span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;"><option></code><span style="line-height: 1.5;"> Element einem {{HTMLElement("select")}} Element untergeordnet ist, dessen Attribut für Mehrfachauswahl {{htmlattrxref("multiple", "select")}} nicht gesetzt ist, darf nur ein einziges </span><code style="font-style: normal; line-height: 1.5;"><option></code><span style="line-height: 1.5;"> Element des beinhaltenden {{HTMLElement("select")}} über ein </span><strong style="line-height: 1.5;">selected</strong><span style="line-height: 1.5;"> Attribut verfügen.</span></dd> + <dt>{{htmlattrdef("value")}}</dt> + <dd>Dieses Attribut kann eine textuelle Erläuterung zur Bedeutung der betreffenden Auswahl enthalten. Wurde diesem Attribut kein Inhalt explizit zugewiesen, enthält es den Textinhalt des Auswahlpunktes selbst<span style="line-height: 1.5;">.</span></dd> + <dd> + <div class="note"><em>Hinweis zur Nutzung: </em>Ein <code style="font-style: italic;"><strong>label</strong></code> Attribut sollte lediglich eine kurze Erläuterung enthalten, wie sie z.B. im Rahmen eines Auswahlmenüs sinnvoll ist. Für längere Beschreibungen, z.B. den neben Radiobuttons und Auswahlschaltflächen angezeigten Text, wurde das <strong><code>value</code></strong> Attribut vorgesehen.</div> + </dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Siehe Beispiele bei {{HTMLElement("select")}}.</p> + +<h2 id="Specifications" name="Specifications">Spezifikation</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-option-element', '<option>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-option-element', '<option>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '<option>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browserunterstützung</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Grundlegend unterstützt</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1.0")}} [1]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegend unterstützt</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}} [1]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Gecko_notes">Gecko notes</h3> + +<p>[1] In Versionen vor Gecko 7.0, {{geckoRelease("7.0")}}, enthielt ein nicht explizit spezifiziertes label Attribut fälschlicherweise überhaupt keinen Inhalt, anstatt den textuellen Inhalt des Auswahlpunktes selbst.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Weitere Elemente mit Bezug auf Formulare: {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} und {{HTMLElement("meter")}}.</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/de/web/html/element/p/index.html b/files/de/web/html/element/p/index.html new file mode 100644 index 0000000000..3a9bcf34a1 --- /dev/null +++ b/files/de/web/html/element/p/index.html @@ -0,0 +1,155 @@ +--- +title: p +slug: Web/HTML/Element/p +tags: + - HTML + - HTML Elemente + - HTML Referenz +translation_of: Web/HTML/Element/p +--- +<h2 id="Übersicht">Übersicht</h2> + +<p>Das <strong><p></strong>-Element erzeugt einen Absatz, den zusammenhängenden Abschnitt eines längeren Textes. In HTML kann <code><p></code> jedoch für jedwede Art von zu gruppierendem, zusammenhängendem Inhalt genutzt werden, zum Beispiel Bilder oder Formularfelder.</p> + +<p><code><p></code> ist eines der am häufigsten benutzen HTML-Elemente.</p> + +<p>{{EmbedInteractiveExample("pages/tabbed/p.html", "tabbed-standard")}}</p> + +<p><code><p></code> ist ein <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements">Blockelement</a>; als solches wird es automatisch beendet, sobald ein anderes Blockelement vor seinem eigenen schließenden </p> erscheint.</p> + +<h2 id="Attribute">Attribute</h2> + +<p>Dieses Element unterstützt lediglich die <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">globalen Attribute</a>.</p> + +<div class="note"> +<p><strong>Hinweis:</strong> Das <code>align</code>-Attribut sollte nicht mehr benutzt werden.</p> +</div> + +<h2 id="Beispiel">Beispiel</h2> + +<h3 id="HTML">HTML</h3> + +<pre><p> +Das ist der erste Absatz des Textes. Das ist der erste Absatz des Textes. +Das ist der erste Absatz des Textes. Das ist der erste Absatz des Textes. +</p> + +<p> +Das ist der zweite Absatz des Textes. Das ist der zweite Absatz des Textes. +Das ist der zweite Absatz des Textes. Das ist der zweite Absatz des Textes. +</p> +</pre> + +<h3 id="Ergebnis">Ergebnis</h3> + +<p>Das ist der erste Absatz des Textes. Das ist der erste Absatz des Textes. Das ist der erste Absatz des Textes. Das ist der erste Absatz des Textes.</p> + +<p>Das ist der zweite Absatz des Textes. Das ist der zweite Absatz des Textes. Das ist der zweite Absatz des Textes. Das ist der zweite Absatz des Textes.</p> + +<h2 id="Absätze_gestalten">Absätze gestalten</h2> + +<p>Zwei Absätze werden üblicherweise durch einen leeren Zwischenraum voneinander getrennt. {{glossary("CSS")}} ermöglicht jedoch vielfältige Gestaltungsmöglichkeiten, etwa den Einzug der ersten Zeile:</p> + +<h3 id="HTML_2">HTML</h3> + +<pre class="brush: html"><p>Separating paragraphs with blank lines is easiest +for readers to scan, but they can also be separated +by indenting their first lines. This is often used +to take up less space, such as to save paper in print.</p> + +<p>Writing that is intended to be edited, such as school +papers and rough drafts, uses both blank lines and +indentation for separation. In finished works, combining +both is considered redundant and amateurish.</p> + +<p>In very old writing, paragraphs were separated with a +special character: ¶, the <i>pilcrow</i>. Nowadays, this +is considered claustrophobic and hard to read.</p> + +<p>How hard to read? See for yourself: + <button data-toggle-text="Oh no! Switch back!">Use pilcrow for paragraphs</button> +</p> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">p { + margin: 0; + text-indent: 3ch; +} + +p.pilcrow { + text-indent: 0; + display: inline; +} +p.pilcrow + p.pilcrow::before { + content: " ¶ "; +}</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">document.querySelector('button').addEventListener('click', function (event) { + document.querySelectorAll('p').forEach(function (paragraph) { + paragraph.classList.toggle('pilcrow'); + }); + var newButtonText = event.target.dataset.toggleText; + var oldText = event.target.innerText; + event.target.innerText = newButtonText; + event.target.dataset.toggleText = oldText; +});</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample('Styling_paragraphs')}}</p> + +<h2 id="Barrierefreiheit">Barrierefreiheit</h2> + +<p>Das Aufteilen eines Dokuments in mehrere Absätze erleichtert das Verständnis des Inhalts für alle Nutzergruppen erheblich.</p> + +<p>Bildschirmleseprogramme und ähnliche Hilfsmittel verfügen darüber hinaus über Bedienelemente, mit denen Absätze übersprungen werden können. Dies erlaubt blinden Nutzern das schnelle Überfliegen eines Textes, ähnlich wie die Leerzeilen sehenden Nutzern Orientierungspunkte bieten.</p> + +<p>Leere <code><p></code>-Elemente und auch mehrere aufeinanderfolgende <code><br></code>-Zeilenumbrüche, deren einziger Nutzen das Vergrößeren des visuellen Abstandes ist, führen bei Bildschirmleseprogrammen oft zu einer verwirrenden Ausgabe: Es werden Absätze angekündigt, die eigentlich gar nicht vorhanden sind.</p> + +<p>Auf die Dauer kann dieses Verhalten frustrierend sein. Abstände sollten deshalb ausschließlich mit {{glossary("CSS")}} erzeugt werden. CSS ermöglicht zudem eine wesentlich feinere Kontrolle der Maße.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{HTMLElement("hr")}}</li> + <li>{{HTMLElement("br")}}</li> +</ul> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-p-element', '<p>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Keine Änderung.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-p-element', '<p>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td><code>align</code>-Attribut ist überflüssig.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.1', '<p>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Erste Definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilät">Browserkompatibilät</h2> + + + +<p>{{Compat("html.elements.p")}}</p> diff --git a/files/de/web/html/element/picture/index.html b/files/de/web/html/element/picture/index.html new file mode 100644 index 0000000000..60bf6d78cd --- /dev/null +++ b/files/de/web/html/element/picture/index.html @@ -0,0 +1,103 @@ +--- +title: <picture> +slug: Web/HTML/Element/picture +translation_of: Web/HTML/Element/picture +--- +<div>{{HTMLRef}}</div> + +<p>Das <strong>HTML-Element <code><picture></code> </strong>ist ein Container, der zur Angabe mehrerer {{HTMLElement("source")}}s (Bildquellen) für ein {{HTMLElement("img")}} dient. Der Browser wird die Quelle verwenden, die aufgrund des gegenwärtigen Seitenlayouts (die Begrenzungen der Box, in der das Bild auftaucht) und dem Anzeigegerät (z.B. ein normales or hiDPI-Gerät) am geeignesten erscheint.</p> + +<h2 id="Usage_Context">Usage Context</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, phrasing content, embedded content</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td>Null oder mehr {{HTMLElement("source")}}-Elemente, gefolgt von einem {{HTMLElement("img")}}-Element, optional vermischt mit Skript-unterstützenden Elementen.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parent elements</th> + <td> + <p>Jegliches Element, das eingebetteten Inhalt erlaubt.</p> + </td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLPictureElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p>Dieses Element beinhaltet nur <a href="/en-US/docs/Web/HTML/Global_attributes">globale Attribute</a>.</p> + +<h2 id="Beispiel_1_Verwendung_des_Attributs_media">Beispiel 1: Verwendung des Attributs <code>media</code></h2> + +<p>Das Attribut <code>media</code> erlaubt die Angabe eines Media-Query, das der User Agent auswertet, um das gewünschte {{HTMLElement("source")}}-Element auszuwählen. Wenn ein Media Query zu <code>false</code> evaluiert, wird das {{HTMLElement("source")}}-Element übersprungen.</p> + +<pre class="brush: html"><picture> + <source srcset="mdn-logo-wide.png" media="(min-width: 600px)"> + <img src="mdn-logo-narrow.png" alt="MDN"> +</picture> +</pre> + +<h2 id="Beispiel_2_Verwendung_des_Attributs_type">Beispiel 2: Verwendung des Attributs <code>type</code></h2> + +<p>Das Attribut type erlaubt die Angabe eines MIME-Typs für Ressourcen, die im Attribut srcset des Elements {{HTMLElement("source")}} angegeben sind. Wenn der User Agent den angegebenen Typ nicht unterstützt, wird das {{HTMLElement("source")}}-Element übersprungen.</p> + +<pre class="brush: html"><picture> + <source srcset="mdn-logo.svg" type="image/svg+xml"> + <img src="mdn-logo.png" alt="MDN"> +</picture> +</pre> + +<p> </p> + +<h2 id="Beispiel_3_Verwendung_des_Attributs_srcset">Beispiel 3: Verwendung des Attributs <code>srcset</code></h2> + +<p>Das Attribut srcset erlaubt es verschiedene Bildgrößen auszuliefern. Höhere Auflösungen werden bei höheren Zoomstufen im Browser, oder bei Bildschirmen mit hohen Pixeldichten (DPI) geladen.</p> + +<pre class="brush: html"><picture> + <source srcset="mdn-logo.png 1x, mdn-logo_x2.png 2x, mdn-logo_x3.png 3x"> + <img src="mdn-logo.png" alt="MDN"> +</picture></pre> + +<p> </p> + +<h2 id="Spezifikation">Spezifikation</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-picture-element', '<picture>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("html.elements.picture")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{HTMLElement("img")}}-Element</li> +</ul> diff --git a/files/de/web/html/element/pre/index.html b/files/de/web/html/element/pre/index.html new file mode 100644 index 0000000000..e57979b3d3 --- /dev/null +++ b/files/de/web/html/element/pre/index.html @@ -0,0 +1,37 @@ +--- +title: pre +slug: Web/HTML/Element/pre +translation_of: Web/HTML/Element/pre +--- +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>Dieses Element repräsentiert vorformatierten Text. Text innerhalb dieses Elements wird typischerweise nicht-proportional und genauso wie in der Datei angegeben angezeigt. Leerstellen - sogenannte whitespaces - werden dargestellt wie eingegeben..</p> + +<h2 id="Attribute">Attribute</h2> + +<p>Wie alle anderen HTML Elemente besitzt dieses Element die <a href="/en/HTML/Global_attributes" rel="internal">globalen Attribute</a>.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: html"><!-- Beispiel CSS code --> +<pre> +body { + color:red; +} +</pre> +</pre> + +<h3 id="Ergebnis">Ergebnis</h3> + +<pre>body { + color:red; +} +</pre> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>CSS: {{ Cssxref('white-space') }}, {{ Cssxref('word-break') }}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/de/web/html/element/progress/index.html b/files/de/web/html/element/progress/index.html new file mode 100644 index 0000000000..c256dec21a --- /dev/null +++ b/files/de/web/html/element/progress/index.html @@ -0,0 +1,175 @@ +--- +title: <progress> +slug: Web/HTML/Element/progress +tags: + - Element + - HTML + - HTML Formulare + - HTML5 + - Referenz + - Web +translation_of: Web/HTML/Element/progress +--- +<h2 id="Übersicht">Übersicht</h2> + +<p>Das <strong>HTML<em> </em><code><progress></code> Element</strong> wird benutzt, um den Fortschritt einer Aufgabe zu visualisieren. Während die Einzelheiten dem Browser überlassen werden, wird es üblicherweise als Fortschrittsanzeige angezeigt. Javascript kann den Wert der Fortschrittsanzeige manipulieren.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Inhalt Kategorien</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Fließender Inhalt</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Formuliereder Inhalt</a>, bezeichbarer Inhalt, fühlbarer Inhalt.</td> + </tr> + <tr> + <th scope="row">Erlaubter Inhalt</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Formulierender Inhalt</a>, doch es darf kein <code><progress></code> Element unter seinen Nachfahren sein.</td> + </tr> + <tr> + <th scope="row">Tag Wegfall</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Erlaubte Elternelemente</th> + <td>Alle Elemente, die <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">formuliereden Inhalt</a> akzeptieren.</td> + </tr> + <tr> + <th scope="row">DOM-Schnittstelle</th> + <td>{{domxref("HTMLProgressElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p><span style="line-height: 21px;">Das Element enthält die </span><a href="/en-US/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globalen Attribute</a><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{ htmlattrdef("max") }}</dt> + <dd>Das Attribut beschreibt, wie viel Arbeit die Aufgabe, angezeigt bei dem <code>progress</code> Element, benötigt. Das <code>max</code> Attribut, wenn vorhanden, muss größer als Null sein und eine gültige Zahl binnen floating point number sein.</dd> + <dt>{{ htmlattrdef("value") }}</dt> + <dd>Das Atttribut gibt an, wie viel Arbeit der gesamten Aufgabe schon verrichtet wurde. Es muss eine gültige Zahl binnen floating point number zwischen 0 und <code>max</code> oder zwischen 0 und 1, falls <code>max</code> wegfällt, sein. Falls kein <code>value</code> (Wert) Attribut gegeben ist, ist die Fortschrittsanzeige unbestimmt; dies zeigt an, dass eine Aktivität ohne eine festgelegte ungefähre Restdauer fortläuft.</dd> +</dl> + +<p>Sie können die {{ cssxref("-moz-orient") }} Eigenschaft nutzen, um festzulegen, ob die Fortschrittsanzeige horizontal (der Standard) oder vertikal gerendert werden soll. Die {{ cssxref(":indeterminate") }} Pseudo-Klasse kann benutzt werden, um unbestimmte Fortschrittsanzeigen zuzuorden.</p> + +<dl> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: html"><progress value="70" max="100">70 %</progress> +</pre> + +<h3 id="Resultat">Resultat</h3> + +<p>{{ EmbedLiveSample("Beispiele", 200, 50) }}</p> + +<p>Das Endergebnis sieht auf Mac OS X so aus:</p> + +<p><img alt="The progress bar seen in OS X Mavericks" class="default internal" src="https://mdn.mozillademos.org/files/6863/Screenshot%202014-01-30%2011.14.30.png" style="height: 24px; width: 167px;"></p> + +<p>Das Endergebnis sieht auf Windows so aus:</p> + +<p><img alt="progress-firefox.JPG" class="default internal" src="/@api/deki/files/6031/=progress-firefox.JPG"></p> + +<h3 id="Zusätzliche_Bespiele">Zusätzliche Bespiele</h3> + +<p>Siehe auch {{ cssxref("-moz-orient") }}.</p> + +<h2 id="Specifications" name="Specifications">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-progress-element', '<progress>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-progress-element', '<progress>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Ursprünliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funktion</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basis Unterstützung</td> + <td>6.0</td> + <td>{{ CompatGeckoMobile("6.0") }} [1]<br> + {{ CompatGeckoMobile("14.0")}} [2]</td> + <td>10</td> + <td>11.0</td> + <td>5.2</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funktion</th> + <th>Android</th> + <th>Firefox Mobil (Gecko)</th> + <th>IE Mobil</th> + <th>Opera Mobil</th> + <th>Safari Mobil</th> + </tr> + <tr> + <td>Basis Unterstützung</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatGeckoMobile("6.0") }} [1]<br> + {{ CompatGeckoMobile("14.0")}} [2]</td> + <td>{{ CompatNo() }}</td> + <td>11.0</td> + <td>7 [3]</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Gecko liefert das {{ cssxref("::-moz-progress-bar") }} Pseudo-Element, welches Sie das Aussehen des Inneren der Fortschrittsanzeige verändern lässt, wie groß der Fortschritt schon ist.<br> + Vor Gecko 14.0 {{ geckoRelease("14.0") }} wurde das <code><progress></code> Element inkorrekterweise als ein Formularelement klassifiziert und hatte daher ein <code>form</code> Attribut. Dieser Fehler wurde jedoch behoben.</p> + +<p>[2] Gecko liefert das {{ cssxref("::-moz-progress-bar") }} Pseudo-element, welches Sie das Aussehen des Inneren der Fortschrittsanzeige verändern lässt, wie groß der Fortschritt schon ist.</p> + +<p>[3] Safari auf iOS unterstützt die unbestimmte Fortschrittsanzeige nicht. (Stattdessen wird 0% Fortschritt angezeigt).</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{htmlelement("meter")}}</li> + <li>{{ cssxref(":indeterminate") }}</li> + <li>{{ cssxref("-moz-orient") }}</li> + <li>{{ cssxref("::-moz-progress-bar") }}</li> + <li>{{ cssxref("::-ms-fill") }}</li> + <li>{{ cssxref("::-webkit-progress-bar") }}</li> + <li>{{ cssxref("::-webkit-progress-value") }}</li> + <li>{{ cssxref("::-webkit-progress-inner-element") }}</li> +</ul> + +<p>{{ HTMLRef }}</p> diff --git a/files/de/web/html/element/q/index.html b/files/de/web/html/element/q/index.html new file mode 100644 index 0000000000..efcee4ad6f --- /dev/null +++ b/files/de/web/html/element/q/index.html @@ -0,0 +1,155 @@ +--- +title: <q> +slug: Web/HTML/Element/q +tags: + - Element + - HTML + - HTML Text-Level Semantik + - Referenz + - Web +translation_of: Web/HTML/Element/q +--- +<div>{{HTMLRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Das <strong>HTML <code><q></code> Element</strong> (oder <em>HTML Quote Element</em>) indiziert, dass es sich bei dem eingeschlossenen Text um ein kurzes Zitat handelt. Dieses Element ist speziell für kurze Zitate gedacht, die keinen Umbruch benötigen; für längere Zitate sollte das {{HTMLElement("blockquote")}} Element verwendet werden.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorien</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Fließender Inhalt</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">Formulierungsinhalt</a>, greifbarer Inhalt.</td> + </tr> + <tr> + <th scope="row">Erlaubter Inhalt</th> + <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Formulierungsinhalt</a>.</td> + </tr> + <tr> + <th scope="row">Tag Auslassung</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Erlaubte Elternelemente</th> + <td>Jedes Element, dass <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Formulierungsinhalt</a> erlaubt.</td> + </tr> + <tr> + <th scope="row">DOM Schnittstelle</th> + <td>{{domxref("HTMLQuoteElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p><span style="line-height: 21px;">Dieses Element schließt nur </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globale Attribute</a><span style="line-height: 21px;"> ein.</span></p> + +<dl> + <dt>{{htmlattrdef("cite")}}</dt> + <dd>Der Wert des Attributs ist eine URL, die zu dem Quelldokument oder der Quellnachricht der Information führt. Dieses Attribut zielt darauf ab, auf Informationen zu zeigen, die den Kontext oder die Referenz des Zitats näher erläutern.</dd> +</dl> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre class="brush: html"><p>Jedes mal, wenn Kenny stirbt, sagt Stan + <q cite="http://en.wikipedia.org/wiki/Kenny_McCormick#Cultural_impact"> + Oh mein Gott, sie haben Kenny getötet! + </q>. +</p> +</pre> + +<p>Dieser HTML Code liefert folgendes Ergebnis:</p> + +<p>Jedes mal, wenn Kenny stirbt, sagt Stan <q cite="http://en.wikipedia.org/wiki/Kenny_McCormick#Cultural_impact">Oh mein Gott, sie haben Kenny getötet!</q>.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-q-element', '<q>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-q-element', '<q>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.2', '<q>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Anmerkungen">Anmerkungen</h3> + +<p>Die meisten modernen Standard-basierten Browser, wie Mozilla Firefox, Opera, und Safari sollten Anführungszeichen um das <code><q></code> Element hinzufügen.</p> + +<p>Manche Browser, wie der Internet Explorer, ändern die Darstellung nicht, ermöglichen jedoch eine Darstellungsregel für Zitate festzulegen.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Das {{HTMLElement("blockquote")}} Element für lange Zitate.</li> + <li>Das {{HTMLElement("cite")}} Element für Quellangaben.</li> +</ul> diff --git a/files/de/web/html/element/s/index.html b/files/de/web/html/element/s/index.html new file mode 100644 index 0000000000..877ec73bb5 --- /dev/null +++ b/files/de/web/html/element/s/index.html @@ -0,0 +1,70 @@ +--- +title: <s> +slug: Web/HTML/Element/s +tags: + - Element + - HTML + - HTML Textlevelsemantiken + - NeedsCompatTable + - Referenz + - Web +translation_of: Web/HTML/Element/s +--- +<div>{{HTMLRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Das <em>HTML Strikethrough Element</em> (<code><s></code>) stellt Text mit einer durchgestrichenen Linie dar. Benutzt wird das <code><s></code> Element um zu repräsentieren, dass Dinge nicht länger relevant oder zutreffend sind. <code><s></code> ist jedoch nicht dafür geeignet, um Dokumentenänderungen anzuzeigen - hierfür sollten das {{HTMLElement("del")}} und das {{HTMLElement("ins")}} Element genutzt werden.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorien</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">Formulierungsinhalt</a> oder <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">fließender Inhalt</a>.</td> + </tr> + <tr> + <th scope="row">Erlaubter Inhalt</th> + <td><a href="/en-US/docs/HTML/Content_categories#Transparent" title="HTML/Content categories#Transparent">Transparent</a>.</td> + </tr> + <tr> + <th scope="row">Tag Auslassung</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Erlaubte Elternelemente</th> + <td>Jedes Element, dass <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Formulierungsinhalt</a> erlaubt.</td> + </tr> + <tr> + <th scope="row">DOM Schnittstelle</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p><span style="line-height: 21px;">Dieses Element schließt nur </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globale Attribute</a><span style="line-height: 21px;"> ein.</span></p> + +<h2 id="DOM_Schnittstelle">DOM Schnittstelle</h2> + +<p>Dieses Element implementiert die <code><a href="/en-US/docs/DOM/element" title="DOM/element">HTMLElement</a></code> Schnittstelle.</p> + +<div class="note"><strong>Hinweis zur Implementierung: </strong>Bis einschließlich Gecko 1.9.2, hat Firefox die <a href="/en-US/docs/DOM/span" title="DOM/span"><code>HTMLSpanElement</code></a> Schnittstelle für dieses Element implementiert.</div> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush:html"><s>Heute im Angebot: Lachs</s> AUSVERKAUFT<br /> +<span style="text-decoration:line-through;">Heute im Angebot: Lachs</span> AUSVERKAUFT</pre> + +<h3 id="Ergebnis">Ergebnis</h3> + +<p><s>Heute im Angebot: Lachs</s> AUSVERKAUFT<br> + <s style="text-decoration: line-through;">Heute im Angebot: Lachs</s> AUSVERKAUFT</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Das {{HTMLElement("strike")}} Element, der Vorgänger des {{HTMLElement("s")}} Elements ist veraltet und sollte nicht mehr genutzt werden.</li> + <li>Das {{HTMLElement("del")}} Element, welches genutzt werden sollte, wenn Daten <em>gelöscht</em> wurden.</li> + <li>Die CSS {{cssxref("text-decoration")}} Eigenschaft um die visuellen Aspekte des {{HTMLElement("s")}} Elements zu archivieren.</li> +</ul> diff --git a/files/de/web/html/element/section/index.html b/files/de/web/html/element/section/index.html new file mode 100644 index 0000000000..85155a81ed --- /dev/null +++ b/files/de/web/html/element/section/index.html @@ -0,0 +1,170 @@ +--- +title: '<section>: um Abschnitten zu erstellen' +slug: Web/HTML/Element/section +tags: + - Element + - HTML + - HTML 5 + - HTML section + - Unterteilung +translation_of: Web/HTML/Element/section +--- +<div>{{HTMLRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Das <em>HTML Element Section </em>(<code><section></code>) stellt eine allgemeine Unterteilung des Dokumentes dar, z.B. eine thematische Gruppierung des Inhaltes typischerweise mit einer Überschrift. Jeder <code><section></code> Abschnitt sollte identifizierbar sein, üblicherweise durch Einfügen einer Überschrift (<code><a href="http://www.w3.org/html/wg/drafts/html/master/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a></code>-<code><a href="http://www.w3.org/html/wg/drafts/html/master/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h6</a></code> Element) als Kindelement des <code><section></code> Elementes.</p> + +<p>Zum Beispiel sollte jedes Navigationsmenü in ein <code><nav></code> Element eingebettet sein, eine Liste von Suchergebnissen und eine Anzeige einer Karte hat kein solch spezifisches Element und könnte daher in eine <code><section></code> eingebettet werden.</p> + +<div class="note"> +<p><em>Hinweis zur Benutzung:</em></p> + +<ul> + <li>Wenn der Inhalt des {{HTMLElement("section")}} Elementes sinnvoll getrennt zu syndizieren ist, benutzt man stattdessen das {{HTMLElement("article")}} Element.</li> + <li>{{HTMLElement("section")}} soll nicht als allgemeines Containerelement benutzt werden; dafür gibt es {{HTMLElement("div")}}. Insbesondere gilt dies, wenn die Einteilung ausschließlich für CSS-Zwecke gedacht ist. Als Faustformel gilt, dass ein mit {{HTMLElement("section")}} ausgezeichneter Abschnitt auch in der Gliederung des Dokumentes erscheinen sollte.</li> +</ul> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Inhaltskategorien</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Fließender Inhalt</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Sectioning_content">Abschnitte</a>, greifbarer Inhalt.</td> + </tr> + <tr> + <th scope="row">Erlaubter Inhalt</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Fließender Inhalt</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Erlaubte Elternelemente</th> + <td>Jedes Element das <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a> erlaubt. Beachte, dass das {{HTMLElement("section")}} kein Nachkomme des {{HTMLElement("address")}} Elementes sein darf.</td> + </tr> + <tr> + <th scope="row">DOM Schnittstelle</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p>Dieses Element enthält nur <a href="/en-US/docs/Web/HTML/Global_attributes">globale Attribute</a>.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: html"><section> + <h1>Heading</h1> + <p>Bunch of awesome content</p> +</section> +</pre> + +<h2 id="Beispiel_2">Beispiel 2</h2> + +<h3 id="Bisher">Bisher</h3> + +<pre class="brush: html"><div> + <h2>Heading</h2> + <img>some image</img> +</div> +</pre> + +<h3 id="Jetzt">Jetzt</h3> + +<pre class="brush: html"><section> + <h2>Heading</h2> + <img>some image</img> +</section> +</pre> + +<h2 id="sect1"></h2> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-section-element', '<section>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sections.html#the-section-element', '<section>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-section-element', '<section>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>5</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>9.0</td> + <td>11.10</td> + <td>4.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.2</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>9.0</td> + <td>11.0</td> + <td>5.0 (iOS 4.2)</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Andere mit Section 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("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li> + <li><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document">Sections and outlines of an HTML5 document</a>.</li> +</ul> diff --git a/files/de/web/html/element/shadow/index.html b/files/de/web/html/element/shadow/index.html new file mode 100644 index 0000000000..4072f6237b --- /dev/null +++ b/files/de/web/html/element/shadow/index.html @@ -0,0 +1,159 @@ +--- +title: <shadow> +slug: Web/HTML/Element/Shadow +translation_of: Web/HTML/Element/shadow +--- +<h2 id="Summary" name="Summary">Zusammenfassung</h2> + +<p>Das <strong><a href="/en-US/docs/Web/HTML">HTML</a> <code><shadow></code></strong> Element wird als shadow DOM {{glossary("insertion point")}} genutzt. Es kann eventuell gesehen werden, wenn mehrerere shadow roots unter einem shadow host erstellt wurden. Es wird mit <a href="/en-US/docs/Web/Web_Components">Web Components</a> genutzt.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Kategorien des Inhalts</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Transparent_content_model" title="HTML/Content_categories#Transparent_content_model">Transparenter Inhalt</a>.</td> + </tr> + <tr> + <th scope="row">Zulässiger Inhalt</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>.</td> + </tr> + <tr> + <th scope="row">Tags</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Zulässige Eltern-Elemente</th> + <td>Any element that accepts flow content.</td> + </tr> + <tr> + <th scope="row">DOM Schnittstelle</th> + <td>{{domxref("HTMLShadowElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">Attribute</h2> + +<p>Dieses Element inkludiert die <a href="/en-US/docs/Web/HTML/Global_attributes">Globalen Attribute</a>.</p> + +<h2 id="Beispiel">Beispiel</h2> + +<p>Hier ist ein einfaches Beispiel, welches das <code><shadow></code> Element verwendet. Es ist eine HTML-Datei mit allem was benötigt wird.</p> + +<div class="note"> +<p><strong>Notiz:</strong> Dies ist eine experimentelle Technologie. Damit dieser Code funktioniert muss ihr Browser Web Components unterstützen. <a href="/en-US/docs/Web/Web_Components#Enabling_Web_Components_in_Firefox">Aktivieren von Web Components in Firefox</a>.</p> +</div> + +<pre class="brush: html"><html> + <head></head> + <body> + + <!-- This <div> will hold the shadow roots. --> + <div> + <!-- This heading will not be displayed --> + <h4>My Original Heading</h4> + </div> + + <script> + // Get the <div> above with its content + var origContent = document.querySelector('div'); + // Create the first shadow root + var shadowroot1 = origContent.createShadowRoot(); + // Create the second shadow root + var shadowroot2 = origContent.createShadowRoot(); + + // Insert something into the older shadow root + shadowroot1.innerHTML = + '<p>Older shadow root inserted by &lt;shadow&gt;</p>'; + // Insert into younger shadow root, including <shadow>. + // The previous markup will not be displayed unless + // <shadow> is used below. + shadowroot2.innerHTML = + '<shadow></shadow> <p>Younger shadow root, displayed because it is the youngest.</p>'; + </script> + + </body> +</html> +</pre> + +<p>Das obige Beispiel sollte folgendes anzeigen.</p> + +<p><img alt="shadow example" src="https://mdn.mozillademos.org/files/10083/shadow-example.png" style="height: 343px; width: 641px;"></p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="spec-table standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('Shadow DOM', "#the-shadow-element", "shadow")}}</td> + <td>{{Spec2('Shadow DOM')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>35</td> + <td>{{CompatGeckoDesktop("28")}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>26</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>37</td> + <td>{{CompatGeckoMobile("28")}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Wenn Shadow DOM nicht in Firefox aktiviert ist, verhalten sich <code><shadow></code> Elemente wie {{domxref("HTMLUnknownElement")}}. Shadow DOM wurde erstmals in Firefox 33 implementiert und steckt hinter der Einstellung <code>dom.webcomponents.enabled</code>, welche standardmäßig aktiviert ist.</p> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/Web/Web_Components">Web Components</a></li> + <li>{{HTMLElement("content")}}, {{HTMLElement("template")}}, {{HTMLElement("element")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/de/web/html/element/strong/index.html b/files/de/web/html/element/strong/index.html new file mode 100644 index 0000000000..dfa167e89a --- /dev/null +++ b/files/de/web/html/element/strong/index.html @@ -0,0 +1,49 @@ +--- +title: strong +slug: Web/HTML/Element/strong +tags: + - HTML + - HTML Elemente + - HTML Referenz +translation_of: Web/HTML/Element/strong +--- +<div class="note"> +<p><strong>Hinweis:</strong> Dieser Artikel ist nicht vollständig.</p> +</div> + +<p>Das HTML <code><strong></code> Element gibt dem Text eine starke Betonung. Typischerweise wird dieser dann in Fettdruck dargestellt.</p> + +<h3 id="DOM_Interface">DOM Interface</h3> + +<p>Dieses Element implementiert das <code><a href="/de/DOM/element" title="de/DOM/element">HTMLElement</a></code> Interface.</p> + +<div class="note"> +<p><strong>Implementationshinweis:</strong> Bis einschließlich Gecko 1.9.2 implementiert Firefox das <a href="/de/DOM/span" title="de/DOM/span"><span style="font-family: courier new;">HTMLSpanElement</span></a> Interface für dieses Element.</p> +</div> + +<h4 id="Beispiel">Beispiel</h4> + +<pre class="eval"> <p> + + Wenn x ausgeführt werden soll, ist es <strong>notwendig</strong> vorher y auszuführen. + + </p> +</pre> + +<h4 id="Ergebnis">Ergebnis</h4> + +<p>Wenn x augeführt werden soll, ist es <strong>notwendig</strong> vorher y auszuführen.</p> + +<h3 id="Bold_vs._Strong">Bold vs. Strong</h3> + +<p>Meist ist es besonders für neue Entwickler verwunderlich, warum es so viele Wege gibt, ein und die selbe Sache auszudrücken. <code><b></code> und <code><strong></code> ist ein gutes Beispiel dafür. Warum <strong></strong> gegenüber <b></b> bevorzugen? Der Tag-Name ist doch länger und es wird letztlich das gleiche angezeigt.</p> + +<p>Vielleicht nicht ganz, denn <code>strong</code> ist eine logische und <code>bold</code> eine äußerliche Aussage. Logische Aussagen trennen Präsentation vom Inhalt und daher bieten sie mehr Möglichkeiten zum Ausdruck eines betonten Texts. Anstatt den Text einfach nur in Fettdruck darzustellen, könnte <code><strong></code> auch rot, in größerer Schrift, unterstrichen oder in einer anderen Art dargestellt werden. Es macht mehr Sinn die Präsentationseigenschaften von strong zu verändern als die von bold. Das kommt daher, weil bold eine äußerliche Aussage tätigt und keine Trennung von Präsentation und Inhalt stattfindet. Eine Änderung an der äußerlichen Gestaltung von bold, welche bold z.B. nicht mehr als Fettdruck gestalten würde, wäre verwirrend und unlogisch.</p> + +<h3 id="Siehe_auch">Siehe auch</h3> + +<ul> + <li><a href="/de/HTML/Element/b" title="de/HTML/Element/b">HTML bold Element</a></li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/de/web/html/element/summary/index.html b/files/de/web/html/element/summary/index.html new file mode 100644 index 0000000000..544ab58ab3 --- /dev/null +++ b/files/de/web/html/element/summary/index.html @@ -0,0 +1,106 @@ +--- +title: <summary> +slug: Web/HTML/Element/summary +tags: + - Element + - HTML + - HTML5 + - Referenz + - Web + - Élément(2) +translation_of: Web/HTML/Element/summary +--- +<h2 id="Übersicht">Übersicht</h2> + +<p>Das HTML <em>summary </em>Element (<code><summary></code>) wird für Zusammenfassungen oder Legenden für den Inhalt eines {{HTMLElement("details")}} Elements verwendet.</p> + +<div class="note"><strong>Hinweis:</strong> Wenn das <code><summary></code> Element ausgelassen wird, wird stattdessen die Titelzeile des "details" Bereich genutzt.</div> + +<h2 id="Anwendung">Anwendung</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td>Erlaubter Inhalt</td> + <td><a href="/en/HTML/Content_categories#Phrasing_content" title="en/HTML/Content categories#Phrasing content">Formulierungsinhalt</a></td> + </tr> + <tr> + <td>Tag Auslassung</td> + <td>None, both the start tag and the end tag are mandatory.</td> + </tr> + <tr> + <td>Erlaubte Elternelemente</td> + <td>Das {{ HTMLElement("details") }} Element.</td> + </tr> + <tr> + <td>Standard</td> + <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#the-summary-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#the-summary-element">HTML5, section 4.11.2</a></td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p><span style="line-height: 21px;">Dieses Element schließt nur </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globale Attribute</a><span style="line-height: 21px;"> ein.</span></p> + +<h2 id="DOM_Schnittstelle">DOM Schnittstelle</h2> + +<p>Dieses Element implementiert die <code><a href="/en/DOM/element" title="en/DOM/element">HTMLElement</a></code> Schnittstelle.</p> + +<h2 id="Beispiel">Beispiel</h2> + +<details style="color: blue; margin-left: 15px; margin-bottom: 10px;"> +<p style="color: red;">In summation, get details from the link on the next line</p> +</details> + +<p style="margin-bottom: 10px;">Siehe {{HTMLElement("details")}} Seite für Beispiele des <summary> Elements.</p> + +<h2 id="Specifications" name="Specifications">Spezifikation</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'interactive-elements.html#the-summary-element', '<summary>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'interactive-elements.html#the-summary-element', '<summary>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p> </p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p> </p> + +<p>{{Compat("html.elements.summary")}}</p> + +<p> </p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<p> </p> + +<ul> + <li>{{ HTMLElement("details") }}</li> +</ul> + +<p> </p> + +<div class="noinclude">{{ languages({ "de": "de/HTML/Element/summary", "ja": "ja/HTML/Element/summary" }) }}</div> + +<p> </p> + +<div class="noinclude">{{HTMLRef}}</div> diff --git a/files/de/web/html/element/table/index.html b/files/de/web/html/element/table/index.html new file mode 100644 index 0000000000..51e7e3b93f --- /dev/null +++ b/files/de/web/html/element/table/index.html @@ -0,0 +1,448 @@ +--- +title: <table> +slug: Web/HTML/Element/table +tags: + - Element + - Reference + - Tables + - Web +translation_of: Web/HTML/Element/table +--- +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>Das <em>HTML-Tabellen-Element </em>(<code><table></code>) repräsentiert Daten in zwei oder mehr Dimensionen.</p> + +<div class="note"><strong>Hinweis: </strong>Bevor es <a href="/en-US/docs/CSS" title="CSS">CSS</a> gab, wurden HTML-{{HTMLElement("table")}}-Elemente oft für das Seitenlayout verwendet. Von dieser Nutzung wird seit HTML 4 abgeraten, und das {{HTMLElement("table")}}-Element <strong style="font-weight: bold;">sollte nicht</strong> für Layoutzwecke verwendet werden.</div> + +<h2 id="Nutzungskontext">Nutzungskontext</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content categories">Inhaltskategorien</a></td> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Fließ-Inhalt</a></td> + </tr> + <tr> + <td>Erlaubter Inhalt</td> + <td> + <div class="content-models"> + <div id="table-mdls">In dieser Reihenfolge: + <ul> + <li>ein optionales {{HTMLElement("caption")}}-Element,</li> + <li>null oder mehr {{HTMLElement("colgroup")}}-Elemente,</li> + <li>ein optionales {{HTMLElement("thead")}}-Element,</li> + <li>eine der beiden Alternativen: + <ul> + <li>ein {{HTMLElement("tfoot")}}-Element, gefolgt von: + <ul> + <li>null oder mehr {{HTMLElement("tbody")}}-Elementen,</li> + <li>oder einem oder mehr {{HTMLElement("tr")}}-Elementen,</li> + </ul> + </li> + <li>eine zweite Alternative gefolgt von einem optionalen {{HTMLElement("tfoot")}}-Element: + <ul> + <li>entweder null oder mehr {{HTMLElement("tbody")}}-Elemente,</li> + <li>oder ein oder mehr {{HTMLElement("tr")}}-Elemente</li> + </ul> + </li> + </ul> + </li> + </ul> + </div> + </div> + </td> + </tr> + <tr> + <td>Tag-Auslassung</td> + <td>Keine, sowohl das Start-Tag als auch das End-Tag sind Pflicht</td> + </tr> + <tr> + <td>Erlaubte Eltern-Elemente</td> + <td>Jedes Element, das Fließ-Inhalt akzeptiert</td> + </tr> + <tr> + <td>Normatives Dokument</td> + <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-table-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-table-element">HTML5, Abschnitt 4.9.1</a> (<a class="external" href="http://www.w3.org/TR/REC-html40/struct/tables.html#edef-TABLE" title="http://www.w3.org/TR/REC-html40/struct/tables.html#edef-TABLE">HTML4.01, Abschnitt 11.2.1</a>)</td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p><span style="line-height: 21px;">Dieses Element beinhaltet die </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globalen Attribute</a><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{htmlattrdef("align")}} {{Deprecated_inline}}</dt> + <dd>Dieses aufgezählte Attribut gibt an, wie die Tabelle im beinhaltenden Dokument ausgerichtet werden muss. Es kann die folgenden Werte haben: + <ul> + <li><span>left</span>, bedeutet, dass die Tabelle links im Dokument angezeigt werden soll;</li> + <li><span>center</span>, bedeutet, dass die Tabelle mittig im Dokument angezeigt werden soll;</li> + <li><span>right</span>, bedeutet, dass die Tabelle rechts im Dokument angezeigt werden soll.</li> + </ul> + + <div class="note"><strong>Hinweis: </strong> + + <ul> + <li><strong>Verwenden Sie dieses Attribut nicht</strong>, da es überholt ist: das {{HTMLElement("table")}}-Element sollte mit <a href="/en-US/docs/CSS" title="CSS">CSS</a> angepasst werden. Um einen ähnlichen Effekt zu erreichen wie mit dem align-Attribut, sollten die <a href="/en-US/docs/CSS" title="CSS">CSS</a>-Eigenschaften "text-align" und "vertical-align" verwendet werden.</li> + <li>Vor Firefox 4 unterstützte Firefox, nur im Quirks-Modus, auch die Werte <code>middle</code>, <code>absmiddle</code>, und <code>abscenter</code> als Synonyme von <code>center</code><em>. </em></li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("bgcolor")}} {{Deprecated_inline}}</dt> + <dd>Dieses Attribut definiert die Hintergrundsfarbe von der Tabelle und deren Inhalt. Die Farbe entspricht einem 6-stelligen Hexadezimalcode definiert in <a class="external" href="http://www.w3.org/Graphics/Color/sRGB" title="http://www.w3.org/Graphics/Color/sRGB">sRGB</a> mit einem vorangestellten '#'. Es kann auch einer der sechszehn vordefinierten Farbnamen benutzt werden: + <table> + <tbody> + <tr> + <td style="width: 24px; background-color: black;"> </td> + <td><span>black</span> = "#000000"</td> + <td style="width: 24px; background-color: green;"> </td> + <td><span>green</span> = "#008000"</td> + </tr> + <tr> + <td style="width: 24px; background-color: silver;"> </td> + <td><span>silver</span> = "#C0C0C0"</td> + <td style="width: 24px; background-color: lime;"> </td> + <td><span>lime</span> = "#00FF00"</td> + </tr> + <tr> + <td style="width: 24px; background-color: gray;"> </td> + <td><span>gray</span> = "#808080"</td> + <td style="width: 24px; background-color: olive;"> </td> + <td><span>olive</span> = "#808000"</td> + </tr> + <tr> + <td style="width: 24px; background-color: white;"> </td> + <td><span>white</span> = "#FFFFFF"</td> + <td style="width: 24px; background-color: yellow;"> </td> + <td><span>yellow</span> = "#FFFF00"</td> + </tr> + <tr> + <td style="width: 24px; background-color: maroon;"> </td> + <td><span>maroon</span> = "#800000"</td> + <td style="width: 24px; background-color: navy;"> </td> + <td><span>navy</span> = "#000080"</td> + </tr> + <tr> + <td style="width: 24px; background-color: red;"> </td> + <td><span>red</span> = "#FF0000"</td> + <td style="width: 24px; background-color: blue;"> </td> + <td><span>blue</span> = "#0000FF"</td> + </tr> + <tr> + <td style="width: 24px; background-color: purple;"> </td> + <td><span>purple</span> = "#800080"</td> + <td style="width: 24px; background-color: teal;"> </td> + <td><span>teal</span> = "#008080"</td> + </tr> + <tr> + <td style="width: 24px; background-color: fuchsia;"> </td> + <td><span>fuchsia</span> = "#FF00FF"</td> + <td style="width: 24px; background-color: aqua;"> </td> + <td><span>aqua</span> = "#00FFFF"</td> + </tr> + </tbody> + </table> + + <div class="note"><strong>Gebrauchshinweis:</strong> Es wird von der Benutzung dieses Attributs abgeraten, da es veraltet ist. Das {{HTMLElement("table")}} Element sollte mit <a href="/de/docs/Web/CSS" title="CSS">CSS</a> formatiert werden. Um einen ähnlichen Effekt zu erzielen sollte das <a href="/de/docs/Web/CSS" title="CSS">CSS </a>Attribut {{cssxref("background-color")}} verwendet werden.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("border")}} {{Deprecated_inline}}</dt> + <dd>Dieser Integer Wert definiert die Breite des Rahmens in Pixeln. Wenn er auf <span>0</span> gesetzt wird, dann impliziert es, dass das {{htmlattrxref("frame", "table")}} Attribut auf <span>void</span> gesetzt ist. + <div class="note"><strong>Gebrauchshinweis: </strong> Es wird von der Benutzung dieses Attributs abgeraten, da es veraltet ist. Das {{HTMLElement("table")}} Element sollte mit <a href="/de/docs/Web/CSS" title="CSS">CSS</a> formatiert werden.. Um einen ähnlichen Effekt wie das border Attribut zu erzielen sollten die <a href="/de/docs/Web/CSS" title="CSS">CSS</a> Eigenschaften {{cssxref("border")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}} und{{cssxref("border-style")}} benutzt werden.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("cellpadding")}} {{Deprecated_inline}}</dt> + <dd>This attribute defines the space between the content of a cell and the border, displayed or not, of it. If it is a pixel length, this pixel-sized space will be applied on all four sides; if it is a percentage length, the content will be centered and the total vertical space (top and bottom) will represent this percentage. The same is true for the total horizontal space (left and right). + <div class="note"><strong>Usage note: </strong>Do not use this attribute, as it has been deprecated: the {{HTMLElement("table")}} element should be styled using <a href="/en-US/docs/CSS" title="CSS">CSS</a>. To give a similar effect than the <span>border</span> attribute, use the <a href="/en-US/docs/CSS" title="CSS">CSS</a> property {{cssxref("border-collapse")}} with the value collapse on the {{HTMLElement("table")}} element itself, and the property {{cssxref("padding")}} on the {{HTMLElement("td")}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("cellspacing")}} {{Deprecated_inline}}</dt> + <dd>This attribute defines the size, in percentage or in pixels, of the space between two cells (both horizontally and vertically), between the top of the table and the cells of the first row, the left of the table and the first column, the right of the table and the last column and the bottom of the table and the last row. + <div class="note"><strong>Usage note: </strong>Do not use this attribute, as it has been deprecated: the {{HTMLElement("table")}} element should be styled using <a href="/en-US/docs/CSS" title="CSS">CSS</a>. To give a similar effect than the <span>border</span> attribute, use the <a href="/en-US/docs/CSS" title="CSS">CSS</a> property {{cssxref("border-collapse")}} with the value collapse on the {{HTMLElement("table")}} element itself, and the property {{cssxref("margin")}} on the {{HTMLElement("td")}} element.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("frame")}} {{Deprecated_inline}}</dt> + <dd>This enumerated attribute defines which side of the frame surrounding the table must be displayed. It may have the following values: + <table style="width: 668px;"> + <tbody> + <tr> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><span>above</span></td> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><span>below</span></td> + </tr> + <tr> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><span>hsides</span></td> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><span>vsides</span></td> + </tr> + <tr> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><span>lhs</span></td> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><span>rhs</span></td> + </tr> + <tr> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><span>border</span></td> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><span>box</span></td> + </tr> + <tr> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><span>void</span></td> + </tr> + </tbody> + </table> + + <div class="note"><strong>Usage note: </strong>Do not use this attribute, as it has been deprecated: the {{HTMLElement("table")}} element should be styled using <a href="/en-US/docs/CSS" title="CSS">CSS</a>. To give a similar effect than the <span>frame</span> attribute, use the <a href="/en-US/docs/CSS" title="CSS">CSS</a> properties {{cssxref("border-style")}} and {{cssxref("border-width")}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("rules")}} {{Deprecated_inline()}}</dt> + <dd>This enumerated attribute defines where rules, i.e. lines, should appear in a table. It can have the following values: + <ul> + <li><span>none</span>, which indicates the no rules will be displayed; it is the default value;</li> + <li><span>groups</span>, which will make the rules to be displayed between row groups (defined by the {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} and {{HTMLElement("tfoot")}} elements) and between column groups (defined by the {{HTMLElement("col")}} and {{HTMLElement("colgroup")}} elements) only;</li> + <li><span>rows</span>, which will make the rules to be displayed between rows;</li> + <li><span>columns</span>, which will make the rules to be displayed between columns;</li> + <li><span>all</span>, which wil make the rules to be displayed between rows and columns.</li> + </ul> + + <div class="note"><strong>Note</strong>: + + <ul> + <li>The styling of the rules is browser-dependant and cannot be modified.</li> + <li>Do not use this attribute, as it has been deprecated: the rules should be defined and styled using <a href="/en-US/docs/CSS" title="CSS">CSS</a>. use the <a href="/en-US/docs/CSS" title="CSS">CSS</a> property {{cssxref("border")}} on the adequate {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("col")}} or {{HTMLElement("colgroup")}} elements.</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("summary")}} {{Deprecated_inline}}</dt> + <dd>This attribute defines an alternative text use to describe the table in user-agent unable to display it. Typically, it contents a description of it to allow visually impaired people, like blind people browsing the web using Braille screen, to get the information in it. If the information added in this attribute may also be useful for non-visually impaired people, consider using the {{HTMLElement("caption")}} instead. The summary attribute is not mandatory and may be omitted when a {{HTMLElement("caption")}} element fulfills its role. + <div class="note"><strong>Usage Note: </strong>Do not use this attribute, as it has been deprecated. Instead, use one of these way of describing a table: + <ul> + <li>In prose, surrounding the table (this is the less semantic-conveying way of doing it).</li> + <li>In the table's {{HTMLElement("caption")}} element.</li> + <li>In a {{HTMLElement("details")}} element, inside the table's {{HTMLElement("caption")}} element.</li> + <li>Include the {{HTMLElement("table")}} element in a {{HTMLElement("figure")}} element and add the description in prose next to it.</li> + <li>Include the {{HTMLElement("table")}} element in a {{HTMLElement("figure")}} element and add the description in prose inside a {{HTMLElement("figcaption")}} element.</li> + <li>Adjust the table so that such description is no more needed, by using {{HTMLElement("th")}} and {{HTMLElement("thead")}} elements for example.</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("width")}} {{Deprecated_inline}}</dt> + <dd>This attribute defines the width of the table. It may either be a pixel length or a percentage value, representing the percentage of the width of its container that the table should use. + <div class="note"><strong>Usage Note: </strong>Do not use this attribute, as it has been deprecated: the rules should be defined and styled using <a href="/en-US/docs/CSS" title="CSS">CSS</a>. use the <a href="/en-US/docs/CSS" title="CSS">CSS</a> property {{cssxref("width")}} instead.</div> + </dd> +</dl> + +<h2 id="DOM_interface">DOM interface</h2> + +<p>This element implements the <code><a href="/en-US/docs/DOM/HTMLTableElement" title="DOM/HTMLTableElement">HTMLTableElement</a></code> interface.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Einfache_Tabelle">Einfache Tabelle</h3> + +<pre class="brush: html" style="font-size: 12px;"><table> + <tr> + <td>Max</td> + <td>Mustermann</td> + </tr> + <tr> + <td>Maxine</td> + <td>Mustermann</td> + </tr> +</table></pre> + +<p><span style="line-height: 1.5;">{{ EmbedLiveSample('Einfache_Tabelle', '100%', '100') }}</span></p> + +<h3 id="Weitere_Beispiele">Weitere Beispiele</h3> + +<pre class="brush: html"><p>Einfache Tabelle mit Überschrift</p> +<table> + <tr> + <th>Vorname</th> + <th>Nachname</th> + </tr> + <tr> + <td>Max</td> + <td>Mustermann</td> + </tr> + <tr> + <td>Maxine</td> + <td>Mustermann</td> + </tr> +</table> + +<p>Tabelle mit thead, tfoot, and tbody</p> +<table> + <thead> + <tr> + <th>Header content 1</th> + <th>Header content 2</th> + </tr> + </thead> + <tfoot> + <tr> + <td>Footer content 1</td> + <td>Footer content 2</td> + </tr> + </tfoot> + <tbody> + <tr> + <td>Body content 1</td> + <td>Body content 2</td> + </tr> + </tbody> +</table> + +<p>Tabelle mit colgroup</p> +<table> + <colgroup span="4" class="columns"></colgroup> + <tr> + <th>Länder</th> + <th>Hauptstädte</th> + <th>Bevölkerung</th> + <th>Sprache</th> + </tr> + <tr> + <td>USA</td> + <td>Washington D.C.</td> + <td>309 Millionen</td> + <td>Englisch</td> + </tr> + <tr> + <td>Schweden</td> + <td>Stockholm</td> + <td>9 Millionen</td> + <td>Schwedisch</td> + </tr> +</table> + +<p>Tabelle mit colgroup und col</p> +<table> + <colgroup> + <col class="column1"> + <col class="columns2plus3" span="2"> + </colgroup> + <tr> + <th>Limone</th> + <th>Zitrone</th> + <th>Orange</th> + </tr> + <tr> + <td>Grün</td> + <td>Gelb</td> + <td>Orange</td> + </tr> +</table> + +<p>Einfache Tabelle mit Beschreibung</p> +<table> + <caption>Unglaublich tolle Beschreibung</caption> + <tr> + <td>Unglaublich tolle Daten</td> + </tr> +</table> +</pre> + +<div class="hidden"> +<pre class="brush: css">table +{ +border-collapse: collapse; +border-spacing: 0px; +} +table, th, td +{ +padding: 5px; +border: 1px solid black; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Weitere_Beispiele', '100%', '800') }}</p> + +<h2 id="Browser_Kompabilität">Browser Kompabilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>4.0</td> + <td>7.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Other table-related HTML Elements: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};</li> + <li>CSS properties that may be specially useful to style the <span style="font-family: courier new;"><table></span> element: + <ul> + <li>{{cssxref("width")}} to control the width of the table;</li> + <li>{{cssxref("border")}}, {{cssxref("border-style")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}}, {{cssxref("border-collapse")}}, {{cssxref("border-spacing")}} to control the aspect of cell borders, rules and frame;</li> + <li>{{cssxref("margin")}} and {{cssxref("padding")}} to style the individual cell content;</li> + <li>{{cssxref("text-align")}} and {{cssxref("vertical-align")}} to define alignment of text and cell content.</li> + </ul> + </li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/de/web/html/element/td/index.html b/files/de/web/html/element/td/index.html new file mode 100644 index 0000000000..762d531a13 --- /dev/null +++ b/files/de/web/html/element/td/index.html @@ -0,0 +1,218 @@ +--- +title: '<td>: The Table Data Cell element' +slug: Web/HTML/Element/td +translation_of: Web/HTML/Element/td +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">The <strong>HTML <code><td></code> Element</strong> definiert eine Zelle in einer Datentabelle. Es ist Teil des <em>table model</em>.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/td.html","tabbed-taller")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td>Sectioning root.</td> + </tr> + <tr> + <th scope="row">Erlaubter Inhalt</th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>.</td> + </tr> + <tr> + <th scope="row">Tag Wegfall</th> + <td>Der Start-Tag ist erforderlich.<br> + Der Ende Tag kann weggelassen werden, wenn direkt ein {{HTMLElement("th")}} oder ein {{HTMLElement("td")}} folgt oder wenn in seinem 'parent element' keine weiteren Daten enthalten sind.</td> + </tr> + <tr> + <th scope="row">Erlaubte parents</th> + <td>Ein {{HTMLElement("tr")}} Element.</td> + </tr> + <tr> + <th scope="row">Erlaubte ARIA Funktionen</th> + <td>Alle</td> + </tr> + <tr> + <th scope="row">DOM Interface</th> + <td>{{domxref("HTMLTableDataCellElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Eigenschaften">Eigenschaften</h2> + +<p>Dieses Element enthält die <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> + +<dl> + <dt>{{htmlattrdef("abbr")}} {{obsolete_inline("html5")}}</dt> + <dd>Dieses Attribut enthält eine Kurzbeschreibung des Inhalts der Zelle. Einige user-agents, wie z.B Sparchausgabe Apps, können diese Beschreibung vor dem Inhalt selbst anzeigen. + <div class="note"><strong>Hinweis:</strong> Verwenden Sie diese Eigenschaft nicht mehr, da sie von dem neuesten Standard nicht mehr unterstützt wird. Alternativ können Sie die Kurzbeschreibung in die Zelle selbst stellen und den vollständigen Inhalt in die <strong>title</strong>-Eigenschaft schreiben.</div> + </dd> + <dt>{{htmlattrdef("align")}} {{obsolete_inline("html5")}}</dt> + <dd>Diese Listen Attribute legen fest, we der Zellinhalt waagerecht ausgerichtet wird. Mögliche Werte sind: + <ul> + <li><code>left</code>: Der Inhalt wird links in der Zelle ausgerichtet.</li> + <li><code>center</code>: Der inhalt wird innerhalb der Zelle zentriert.</li> + <li><code>right</code>: Der Inhalt wird innerhalb der Zelle rechts ausgerichtet.</li> + <li><code>justify</code> (nur bei Text): Der Inhalt wird über die gesamte Breite der Zelle gedehnt.</li> + <li><code>char</code> (nur bei Text): Der Inhalt wird mit minimalem Offset an einem Zeichen innerhalb der des <code><th></code> Elementes ausgerichtet. Das Zeichen wird durch die {{htmlattrxref("char", "td")}} und {{htmlattrxref("charoff", "td")}} definiert. {{unimplemented_inline(2212)}}.</li> + </ul> + + <p>Der Default Wert, wenn das Attribut nicht spezifiziert wird ist <code>left</code>.</p> + + <div class="note"><strong>Hinweis: </strong>Verwenden Sie diese Eigenschaft nicht mehr, da sie von dem neuesten Standard nicht mehr unterstützt wird. + + <ul> + <li>Um den gleichen Effekt wie mit den <code>left</code>, <code>center</code>, <code>right</code> oder <code>justify</code> Werten zu erhalten, verwenden Sie die CSS {{cssxref("text-align")}} Eigenschaft für dieses Element.</li> + <li>Um den gleichen Effekt wie bei dem <code>char</code> Wert zu erzielen, geben Sie der {{cssxref("text-align")}} Eigenschaft die gleichen Werte, die Sie auch für das {{htmlattrxref("char", "td")}} Attribut verwendet hätten.<br> + {{unimplemented_inline}} in CSS3.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("axis")}} {{obsolete_inline("html5")}}</dt> + <dd> Dieses Attribute enthält eine Liste von strings, durch Leerzeichen getrennt. Jeder String ist die <code>id</code> einer Gruppe von Zellen, die diesen Text als Header enthalten. + <div class="note"><strong>Hinweis:</strong> Verwenden Sie diese Eigenschaft nicht mehr, da sie von dem neuesten Standard nicht mehr unterstützt wird.</div> + </dd> + <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt> + <dd>Dieses Attribut definiert die Hintergrundfarbe jeder Zelle in einer Spalte. Es enthält einen 6-stelligen Hexadezimal-Code in <a href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a> definiert mit einem vorangestellten '#'. Für dieses Attribut sind die folgenden 16 Werte mit string-Werten vordefiniert: + <table> + <tbody> + <tr> + <td style="background-color: black; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>black</code> = "#000000"</td> + <td style="background-color: green; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>green</code> = "#008000"</td> + </tr> + <tr> + <td style="background-color: silver; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>silver</code> = "#C0C0C0"</td> + <td style="background-color: lime; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>lime</code> = "#00FF00"</td> + </tr> + <tr> + <td style="background-color: gray; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>gray</code> = "#808080"</td> + <td style="background-color: olive; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>olive</code> = "#808000"</td> + </tr> + <tr> + <td style="background-color: white; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>white</code> = "#FFFFFF"</td> + <td style="background-color: yellow; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>yellow</code> = "#FFFF00"</td> + </tr> + <tr> + <td style="background-color: maroon; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>maroon</code> = "#800000"</td> + <td style="background-color: navy; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>navy</code> = "#000080"</td> + </tr> + <tr> + <td style="background-color: red; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>red</code> = "#FF0000"</td> + <td style="background-color: blue; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>blue</code> = "#0000FF"</td> + </tr> + <tr> + <td style="background-color: purple; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>purple</code> = "#800080"</td> + <td style="background-color: teal; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>teal</code> = "#008080"</td> + </tr> + <tr> + <td style="background-color: fuchsia; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>fuchsia</code> = "#FF00FF"</td> + <td style="background-color: aqua; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>aqua</code> = "#00FFFF"</td> + </tr> + </tbody> + </table> + + <div class="note"><strong>Hinweis:</strong> Verwnden Sie dieses Attribut nicht, da es kein Standard ist und nur in einigen Versionen des Microsoft Internet Explorers implementiert ist: Das {{HTMLElement("td")}} Element sollte mittels <a href="/en-US/docs/CSS">CSS</a> formatiert werden Um den gleichen Effekt zu erhalten verwenden Sie stattdessen die {{cssxref("background-color")}} Eigenschaft in <a href="/en-US/docs/CSS">CSS</a>.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("char")}} {{obsolete_inline("html5")}}</dt> + <dd> Der Inhalt der Zelle wird an einem Zeichen ausgerichtet. Typische Zeichen sind ein (.) oder (,) um Währungswerte auszurichten. Wenn {{htmlattrxref("align", "td")}} nicht als <code>char</code>, gesetzt ist, wird dieses Attribute ignoriert + <div class="note"><strong>Hinweis: </strong> Verwenden Sie diese Eigenschaft nicht mehr, da sie von dem neuesten Standard nicht mehr unterstützt wird. Um den gleichen Effekt zu erzielen können Sie das Zeichen auch als ersten Wert der {{cssxref("text-align")}} Eigenschaft definieren. <br> + {{unimplemented_inline}} in CSS3.</div> + </dd> + <dt>{{htmlattrdef("charoff")}} {{obsolete_inline("html5")}}</dt> + <dd>Dieses Attribut wird verwendet um die Daten einer Spalte rechts von dem Zeichen auszurichten, das durch das <strong>char</strong> Attribut spezifiziert wurde. Sein Wert spezifiziert die Anzahl der Zeichen um die die Daten nach rechts verschoben werden. + <div class="note"><strong>Hinweis: </strong>Verwenden Sie diese Eigenschaft nicht mehr, da sie von dem neuesten Standard nicht mehr unterstützt wird.</div> + </dd> + <dt>{{htmlattrdef("colspan")}}</dt> + <dd>Dieses Attribut enhält eine nicht negative ganze Zahl, die festlegt über wieviele Spalten einer Tabelle sich diese Zelle erstreckt. Der Default-Wert ist <code>1</code>. Größere Werte als 1000 werden nicht akzeptiert und auf den Default-Wert zurückgesetzt (1).</dd> + <dt>{{htmlattrdef("headers")}}</dt> + <dd>Diese Attribut enthält eine durch Leerzeichen getrennte Liste von Strings, von denen jeder mit dem <strong>id</strong> Attribut des {{HTMLElement("th")}} Elementes korrespondiert.</dd> + <dt>{{htmlattrdef("height")}} {{Deprecated_inline("html 4")}}, {{obsolete_inline("html5")}}</dt> + <dd>Dieses Attribut wird verwendet um die Höhe einer Zelle festzulegen. + <div class="note"><strong>Hinweis:</strong> DVerwenden Sie diese Eigenschaft nicht mehr, da sie von dem neuesten Standard nicht mehr unterstützt wird. Verwenden Sie stattdessen die {{cssxref("height")}} Eigenschaft.</div> + </dd> + <dt>{{htmlattrdef("rowspan")}}</dt> + <dd>Dieses Attribut enthält einen nicht negativen ganzahligen Integer Wert, der festlegt, über wieviele Reihen sich eine Zelle erstreckt. Der Default-Wert ist <code>1</code>; wenn der Wert auf <code>0</code> gesetzt wird, erstreckt sich die Größe der Zelle über den Rest der Tabelle zu der die Zelle gehört auch wenn die Attribute ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}), implizit definiert sind. Werte über 65534 werden auf 65534 gesetzt.</dd> + <dt>{{htmlattrdef("scope")}} {{obsolete_inline("html5")}}</dt> + <dd>Dieses Listen Attribut definiert die Zellen, auf die sich das Header-Element bezieht, dass in dem {{HTMLElement("th")}} Element, definiert wurde. + <div class="note"><strong>Hinweis:</strong> Verwenden Sie diese Eigenschaft nicht mehr, da sie von dem neuesten Standard nicht mehr unterstützt wird. Verwenden Sie diesesAttributenur mit dem {{HTMLElement("th")}} Element um eine Reihe oder eine Spalte für die dieses der Header ist zu definieren.</div> + </dd> + <dt>{{htmlattrdef("valign")}} {{obsolete_inline("html5")}}</dt> + <dd>Dieses Attribut legt fest, wie ein Text vertikal innerhalb einer Zelle ausgerichtet ist. Mögliche Werte für dieses Attribut sind: + <ul> + <li><code>baseline</code>: Positioniert den Text mit der <a href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">baseline</a> der Zeichen am unteren Rand der aus und nicht mit dem unteren Ende der Zeichen. Gibt es keine Zeichen mit Anhängen unterhalb der Zeichengrundlinie, so hat dieser Wert den gleichen Effekt wie <code>bottom</code>.</li> + <li><code>bottom</code>: Positioniert den Text am unteren Rand in der Zelle</li> + <li><code>middle</code>: Zentriert den Text vertikal in der Zelle.</li> + <li>and <code>top</code>: Positioniert den Text am oberen Rand der Zelle.</li> + </ul> + + <div class="note"><strong>Hinweis:</strong> Verwenden Sie diese Eigenschaft nicht mehr, da sie von dem neuesten Standard nicht mehr unterstützt wird. <br> + Verwenden Sie stattdessen die CSS {{cssxref("vertical-align")}} Eigenschaft.</div> + </dd> + <dt>{{htmlattrdef("width")}} {{Deprecated_inline("html 4")}}, {{obsolete_inline("html5")}}</dt> + <dd>Dieses Attribut defieniert die benötigte Breite der Zelle. Zusätzlicher Platz kann mit Hilfe der <a href="/en-US/docs/Web/API/HTMLTableElement/cellSpacing">cellspacing</a> and <a href="/en-US/docs/Web/API/HTMLTableElement/cellPadding">cellpadding</a> Eigenschaftenerreicht werden. Mit Hilfe des {{HTMLElement("col")}} Elementes kann ebenfalls zusätzliche Breite erzeugt werden. Allerdings wird eine Zelle, die zu schmal für die passende Darstellung ihres Inhaltes, bei der Darstellung automatisch auf die richtige Breite erweitert. + <div class="note"><strong>Note:</strong> Verwenden Sie diese Eigenschaft nicht mehr, da sie von dem neuesten Standard nicht mehr unterstützt wird. <br> + Verwenden Sie stattdessen die CSS {{cssxref("width")}} Eigenschaft.</div> + </dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Siehe {{HTMLElement("table")}} für Beispiele für <code><td></code>.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG','tables.html#the-td-element','td element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','tabular-data.html#the-td-element','td element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("html.elements.td")}}</p> + +<h2 id="Sieh_auch">Sieh auch</h2> + +<ul> + <li>Other table-related HTML Elements: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}.</li> +</ul> diff --git a/files/de/web/html/element/template/index.html b/files/de/web/html/element/template/index.html new file mode 100644 index 0000000000..8a6a29e26e --- /dev/null +++ b/files/de/web/html/element/template/index.html @@ -0,0 +1,186 @@ +--- +title: <template> +slug: Web/HTML/Element/template +tags: + - Element + - HTML + - Referenz + - Web + - Web Components +translation_of: Web/HTML/Element/template +--- +<h2 id="Summary" name="Summary">Zusammenfassung</h2> + +<p><span class="seoSummary">Das <strong><a href="/en-US/docs/Web/HTML">HTML</a> template-Element <code><template></code></strong> dient dazu, Client-seitige Inhalte zu gruppieren, die nicht gerendert werden, wenn die Seite geladen wird, sondern anschließend zur Laufzeit mittels JavaScript gerendert werden können.</span></p> + +<p>Template kann als Inhaltsfragment aufgefasst werden, das für eine spätere Verwendung im Dokument gespeichert wird. Die Inhalte von <strong><code><template></code></strong> werden allerdings beim Laden der Seite geparst, um Ihre Validität sicher zu stellen.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorien</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Metadata_content">Metadata content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">phrasing content</a>, script-supporting element</td> + </tr> + <tr> + <th scope="row">Erlaubte Inhalte</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Metadata_content">Metadata content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content, </a>jeder gültige HTML Inhalt, der innerhalb der folgenden Elemente {{HTMLElement("ol")}}, {{HTMLElement("dl")}}, {{HTMLElement("figure")}}, {{HTMLElement("ruby")}}, {{HTMLElement("object")}}, {{HTMLElement("video")}}, {{HTMLElement("audio")}}, {{HTMLElement("table")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("tr")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("select")}}, {{HTMLElement("details")}} erlaubt ist und {{HTMLElement("menu")}}, dessen type-Attribut sich im Zustand popup menu befindet.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parent elements</th> + <td>{{HTMLElement("body")}}, {{HTMLElement("frameset")}}, {{HTMLElement("head")}} und {{HTMLElement("colgroup")}} ohne <code>span</code> Attribut</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLTemplateElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">Attribute</h2> + +<p>Das Element beinhaltet die <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> + +<p>Es gibt auch ein <code>content</code> Attribut, das nur read-only, also nur leseberechtigt ist. Dieses Attribut gewährt Zugriff auf die Inhalte von template. Das <code>content</code> Attribut wird oftmals genutzt, um den Browser-Support eines bestimmten Browsers für das <strong><code><template></code> </strong>Element festzustellen.</p> + +<h2 id="Examples" name="Examples">Beispiele</h2> + +<p>Im Folgenden zuerst der HTML Code des Beispiels:</p> + +<pre class="brush: html"><table id="producttable"> + <thead> + <tr> + <td>UPC_Code</td> + <td>Product_Name</td> + </tr> + </thead> + <tbody> + <!-- existierende Daten könnten optional hier eingefügt werden --> + </tbody> +</table> + +<template id="productrow"> + <tr> + <td class="record"></td> + <td></td> + </tr> +</template> +</pre> + +<p>Im Weiteren der JavaScript Code, mit dem der HTML Code instantiiert werden könnte:</p> + +<pre class="brush:js;">// Browsersupport-Check, indem die Existenz des content Attributs +// des template Elements geprüft wird. +if ('content' in document.createElement('template')) { + + // Tabelle mit dem existierenden HTML tbody und der Zeile (row) aus dem template Element instantiieren + var t = document.querySelector('#productrow'), + td = t.content.querySelectorAll("td"); + td[0].textContent = "1235646565"; + td[1].textContent = "Stuff"; + + // Neue Zeile (row) klonen und in die Tabelle einfügen + var tb = document.getElementsByTagName("tbody"); + var clone = document.importNode(t.content, true); + tb[0].appendChild(clone); + + // Neue Zeile erstellen + td[0].textContent = "0384928528"; + td[1].textContent = "Acme Kidney Beans"; + + // Neue Zeile klonen und in die Tabelle einfügen + var clone2 = document.importNode(t.content, true); + tb[0].appendChild(clone2); + +} else { + // Wenn das HTML template element nicht unterstützt wird + // muss die Tabelle auf anderem Weg erzeugt werden +} +</pre> + +<p>Das Ergebnis ist die ursprüngliche HTML Tabelle, an die zwei neue Zeilen mittels JavaScript angehängt wurde.</p> + +<p><a href="http://jsbin.com/qimaw/1/">Hier</a> kann das live-Beispiel aufgerufen werden (Code kann <a href="http://jsbin.com/qimaw/1/edit">hier</a> eingesehen werden).</p> + +<h2 id="Specifications" name="Specifications">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikationen</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','/scripting-1.html#the-template-element','template element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','/scripting-1.html#the-template-element','template element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Kompabilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>26</td> + <td>{{CompatGeckoDesktop("22")}}</td> + <td>{{CompatNo}}</td> + <td>15</td> + <td>7.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>iOS 8</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>Web components: {{HTMLElement("content")}}, {{HTMLElement("shadow")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/de/web/html/element/th/index.html b/files/de/web/html/element/th/index.html new file mode 100644 index 0000000000..fce82bc5ca --- /dev/null +++ b/files/de/web/html/element/th/index.html @@ -0,0 +1,297 @@ +--- +title: <th> +slug: Web/HTML/Element/th +translation_of: Web/HTML/Element/th +--- +<h2 id="Übersicht">Übersicht</h2> + +<p>Das HTML Element<em> table header cell </em><code><th></code> defines a cell that is a header for a group of cells of a table. The group of cells that the header refers to is defined by the {{htmlattrxref("scope", "th")}} and {{htmlattrxref("headers", "th")}} attribute.</p> + +<h2 id="Gebrauchsübersicht">Gebrauchsübersicht</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content categories">Content categories</a></td> + <td>None.</td> + </tr> + <tr> + <td>Permitted content</td> + <td> + <div class="content-models"> + <div id="table-mdls">Phrasing content.</div> + </div> + </td> + </tr> + <tr> + <td>Tag omission</td> + <td>The <span title="syntax-start-tag">start tag</span> is mandatory.<br> + The end tag may be omitted, if it is immediately followed by a {{HTMLElement("th")}} or {{HTMLElement("td")}} element or if there are no more data in its parent element.</td> + </tr> + <tr> + <td>Permitted parent elements</td> + <td>A {{HTMLElement("tr")}} element.</td> + </tr> + <tr> + <td>Normative document</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-th-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-th-element">HTML5, section 4.9.10</a> (<a href="http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.2.6" title="http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.2.6">HTML4.01, section 11.2.6</a>)</td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p>This element includes the <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">global attributes</a>.</p> + +<dl> + <dt>{{htmlattrdef("abbr")}} {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt> + <dd>This attribute contains a short abbreviated description of the content of the cell. Some user-agent, like speech reader, may present it before the content itself. + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete in the latest standard: instead either consider starting the cell content by an independent abbreviated content itself or use the abbreviated content as the cell content and use the long content as the description of the cell by putting it in the <strong>title</strong> attribute.</div> + </dd> + <dt>{{htmlattrdef("align")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt> + <dd>This enumerated attribute specifies how horizontal alignment of each cell content will be handled. Possible values are: + <ul> + <li><code>left</code>, aligning the content to the left of the cell</li> + <li><code>center</code>, centering the content in the cell</li> + <li><code>right</code>, aligning the content to the right of the cell</li> + <li><code>justify</code>, inserting spaces into the textual content so that the content is justified in the cell</li> + <li><code>char</code>, aligning the textual content on a special character with a minimal offset, defined by the {{htmlattrxref("char", "th")}} and {{htmlattrxref("charoff", "th")}} attributes {{unimplemented_inline("2212")}}.</li> + </ul> + + <p>If this attribute is not set, the <code>left</code> value is assumed.</p> + + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (not supported) in the latest standard. + + <ul> + <li>To achieve the same effect as the <code>left</code>, <code>center</code>, <code>right</code> or <code>justify</code> values, use the CSS {{cssxref("text-align")}} property on it.</li> + <li>To achieve the same effect as the <code>char</code> value, in CSS3, you can use the value of the {{htmlattrxref("char", "th")}} as the value of the {{cssxref("text-align")}} property {{unimplemented_inline}}.</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("axis")}} {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt> + <dd>This attribute contains a list of space-separated strings. Each string is the id of a group of cells that this header apply to. + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete in the latest standard: instead use the {{htmlattrxref("scope", "th")}} attribute.</div> + </dd> + <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt> + <dd>This attribute defines the background color of each cell of the column. It is one of the 6-digit hexadecimal code as defined in <a href="http://www.w3.org/Graphics/Color/sRGB" title="http://www.w3.org/Graphics/Color/sRGB">sRGB</a>, prefixed by a '#'. One of the sixteen predefined color strings may be used: + <table> + <tbody> + <tr> + <td style="background-color: black; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>black</code> = "#000000"</td> + <td style="background-color: green; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>green</code> = "#008000"</td> + </tr> + <tr> + <td style="background-color: silver; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>silver</code> = "#C0C0C0"</td> + <td style="background-color: lime; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>lime</code> = "#00FF00"</td> + </tr> + <tr> + <td style="background-color: gray; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>gray</code> = "#808080"</td> + <td style="background-color: olive; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>olive</code> = "#808000"</td> + </tr> + <tr> + <td style="background-color: white; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>white</code> = "#FFFFFF"</td> + <td style="background-color: yellow; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>yellow</code> = "#FFFF00"</td> + </tr> + <tr> + <td style="background-color: maroon; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>maroon</code> = "#800000"</td> + <td style="background-color: navy; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>navy</code> = "#000080"</td> + </tr> + <tr> + <td style="background-color: red; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>red</code> = "#FF0000"</td> + <td style="background-color: blue; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>blue</code> = "#0000FF"</td> + </tr> + <tr> + <td style="background-color: purple; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>purple</code> = "#800080"</td> + <td style="background-color: teal; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>teal</code> = "#008080"</td> + </tr> + <tr> + <td style="background-color: fuchsia; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>fuchsia</code> = "#FF00FF"</td> + <td style="background-color: aqua; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>aqua</code> = "#00FFFF"</td> + </tr> + </tbody> + </table> + + <div class="note"><strong>Usage note:</strong> Do not use this attribute, as it is non-standard and only implemented some versions of Microsoft Internet Explorer: the {{HTMLElement("th")}} element should be styled using <a href="/en-US/docs/CSS" title="CSS">CSS</a>. To give a similar effect to the <strong>bgcolor</strong> attribute, use the <a href="/en-US/docs/CSS" title="CSS">CSS</a> property {{cssxref("background-color")}} instead.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("char")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt> + <dd>This attribute is used to set the character to align the cells in a column on. Typical values for this include a period (.) when attempting to align numbers or monetary values. If {{htmlattrxref("align", "th")}} is not set to <code>char</code>, this attribute is ignored. + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard. To achieve the same effect as the {{htmlattrxref("char", "thead")}}, in CSS3, you can use the character set using the {{htmlattrxref("char", "th")}} attribute as the value of the {{cssxref("text-align")}} property {{unimplemented_inline}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt> + <dd>This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the <strong>char</strong> attribute. + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("colspan")}}</dt> + <dd>This attribute contains a non-negative integer value that indicates on how many columns does the cell extend. Its default value is <code>1</code>; if its value is set to <code>0</code>, it does extend until the end of the {{HTMLElement("colgroup")}}, eventually implicitly defined, the cell belongs to. Values higher than 1000 are clipped down to 1000.</dd> + <dt>{{htmlattrdef("headers")}}</dt> + <dd>This attributes a list of space-separated strings, each corresponding to the <strong>id</strong> attribute of the {{HTMLElement("th")}} elements that applies to this element.</dd> + <dt>{{htmlattrdef("rowspan")}}</dt> + <dd>This attribute contains a non-negative integer value that indicates on how many rows does the cell extend. Its default value is <code>1</code>; if its value is set to <code>0</code>, it does extend until the end of the table section ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, eventually implicitly defined) the cell belongs to. Values higher than 65534 are clipped down to 65534.</dd> + <dt>{{htmlattrdef("scope")}}</dt> + <dd>This enumerated attribute defines the cells that the header defined in this {{HTMLElement("th")}} element relates to. It may have the following values: + <ul> + <li><code>row</code>, which means that the header relates to all cells in the row that this element belongs to;</li> + <li><code>col</code>, which means that the header relates to all cells in the column that this element belongs to;</li> + <li><code>rowgroup</code>, which means that the header relates to all remaining cells in the row group that this element belongs to. The remaining cells are either those to the right of this element, or to his left depending of the value of{{htmlattrxref("dir", "table")}} attribute defined on the {{HTMLElement("table")}} element;</li> + <li><code>colgroup</code>, which means that the header relates to all remaining cells in the column group that this element belongs to;</li> + <li><em>auto</em></li> + </ul> + </dd> + <dt>{{htmlattrdef("valign")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt> + <dd>This attribute specifies the vertical alignment of the text within each row of cells of the table header. Possible values for this attribute are: + <ul> + <li><code>baseline</code>, which will put the text as close to the bottom of the cell as it is possible, but align it on the <a href="http://en.wikipedia.org/wiki/Baseline_%28typography%29" title="http://en.wikipedia.org/wiki/Baseline_(typography)">baseline</a> of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as <code>bottom</code>.</li> + <li><code>bottom</code>, which will put the text as close to the bottom of the cell as it is possible;</li> + <li><code>middle</code>, which will center the text in the cell;</li> + <li>and <code>top</code>, which will put the text as close to the top of the cell as it is possible.</li> + </ul> + + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard: instead set the CSS {{cssxref("vertical-align")}} property on it.</div> + </dd> + <dt>{{htmlattrdef("width")}} {{Deprecated_inline}} in {{HTMLVersionInline(4.01)}}</dt> + <dd>This attribute is used to define a recommended cell width. Properties <a href="/en-US/docs/Web/API/HTMLTableElement/cellSpacing">cellspacing</a> and <a href="/en-US/docs/Web/API/HTMLTableElement/cellPadding">cellpadding</a> may add additional space, and element {{HTMLElement("col")}} width may also have some effect. In general, if a column's width is too narrow to show a particular cell properly, it, and thus the cells in it, may be widened when displayed. + <div class="note"><strong>Note: </strong>Do not use this attribute in the latest standard: instead set the CSS {{cssxref("width")}} property.</div> + </dd> +</dl> + +<h2 id="DOM_interface">DOM interface</h2> + +<p>This element implements the <code><a href="en-US/docs/Web/API/HTMLTableHeaderCellElement" title="DOM/HTMLTableHeaderCellElement">HTMLTableHeaderCellElement</a></code> interface.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<p>See {{HTMLElement("table")}} for examples on <code><th></code>.</p> + +<h2 id="Kompatibilät">Kompatibilät</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>align/valign</code> attribute</td> + <td>1.0</td> + <td>{{CompatNo}} {{bug("915")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>char/charoff</code> attribute</td> + <td>1.0</td> + <td>{{CompatNo}} {{bug("2212")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>bgcolor</code> attribute {{Non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>align/valign</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}} {{bug("915")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>char/charoff</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}} {{bug("2212")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>bgcolor</code> attribute {{Non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Other table-related HTML Elements: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}.</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/de/web/html/element/time/index.html b/files/de/web/html/element/time/index.html new file mode 100644 index 0000000000..510f8c5ff2 --- /dev/null +++ b/files/de/web/html/element/time/index.html @@ -0,0 +1,162 @@ +--- +title: <time> +slug: Web/HTML/Element/time +tags: + - Element + - HTML + - HTML Textlevel Semantiken + - HTML5 + - Referenz + - Web +translation_of: Web/HTML/Element/time +--- +<p>Das <strong>HTML <code><time></code>-Element</strong> repräsentiert entweder Zeitangaben im 24-Stunden-Format oder ein präzises Datum im <a href="http://de.wikipedia.org/wiki/Gregorianischer_Kalender">gregorianischen Kalender</a> (mit optionalen Zeit- und Zeitzonen-Informationen).</p> + +<p>Dieses Element erlaubt es, Daten und Zeiten in einem maschinell lesbaren Format darzustellen. Dies kann hilfreich für User Agents sein, die eine beliebige Art der Terminplanung für den Kalender des Benutzers anbieten.</p> + +<div class="note"><strong>Hinweis zur Verwendung: </strong>Dieses Element ist nicht geeignet, wenn ein genaues Datum nicht berechnet werden kann oder das Datum vor der Einführung des gregorianischen Kalenders liegt (aufgrund von Schwierigkeiten, diese Daten zu berechnen).</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">Phrasing content</a>, aber keine verschachtelten <code>time</code>-Elemente.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>Keine; sowohl End- als auch Starttag sind Pflicht.</td> + </tr> + <tr> + <th scope="row">Permitted parent elements</th> + <td>Jedes Element, das <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a> akzeptiert.</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLTimeElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p>Wie alle anderen HTML-Elemente, unterstützt dieses Element <a href="/en-US/docs/HTML/Global_attributes">globale Attribute</a>.</p> + +<dl> + <dt>{{htmlattrdef("datetime")}}</dt> + <dd>Dieses Attribut gibt Zeit und Datum des Elements an und muss ein <a href="http://www.w3.org/TR/html-markup/datatypes.html#common.data.datetime">gültiges Datum mit optionalem Zeit-String</a> sein. Wenn der Wert nicht als Datum mit optionalem Zeit-String geparst werden kann, wird diesem Element kein gültiger Zeitstempel zugeordnet.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Simple_example" name="Simple_example">Einfaches Beispiel</h3> + +<pre class="brush: html"><p>Das Konzert startet um <time>20:00</time> Uhr.</p> +</pre> + +<p>Die Ausgabe des obigen HTML ist:</p> + +<p>Das Konzert startet um 20:00 Uhr.</p> + +<h3 id="Datetime_example" name="Datetime_example"><code>datetime</code>-Beispiel</h3> + +<pre class="brush: html"><p>Das Konzert findet am <time datetime="2001-05-15 19:00">15. Mai</time> statt.</p> +</pre> + +<p>Die Ausgabe des obigen HTML ist:</p> + +<p>Das Konzert findet am 15. Mai statt.</p> + +<h2 id="Specifications" name="Specifications">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#the-time-element', '<time>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Keine Änderung zu {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'grouping-content.html#the-time-element', '<main>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Keine Änderung zu {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-time-element', '<main>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("22.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>11.50<br> + Removed in 15.0</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("22.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>11.50<br> + Entfernt in 15.0</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>Das{{HTMLElement("data")}}-Element erlaubt die Auszeichnung anderer Werte.</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/de/web/html/element/title/index.html b/files/de/web/html/element/title/index.html new file mode 100644 index 0000000000..d3cb8fb32d --- /dev/null +++ b/files/de/web/html/element/title/index.html @@ -0,0 +1,81 @@ +--- +title: <title> +slug: Web/HTML/Element/title +tags: + - Element + - HTML + - HTML Dokumentmetadaten + - Referenz + - Web +translation_of: Web/HTML/Element/title +--- +<h2 id="Übersicht">Übersicht</h2> + +<p>Das <strong>HTML <title> Element</strong> (<em>HTML Titel Element</em>) definiert den Titel eines Dokumentes und wird in der Titelleiste des Browsers oder in der Seiten-Registerkarte angezeigt. Der Titel kann nur Text enthalten - enthaltene Tags werden nicht interpretiert.</p> + +<h2 id="Gebrauch">Gebrauch</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorien</a></th> + <td>Metadata Inhalt.</td> + </tr> + <tr> + <th scope="row">Erlaubter Inhalt</th> + <td>Text</td> + </tr> + <tr> + <th scope="row">Tag Auslassung</th> + <td>Wird zwingend benötigt. Achtung: Wird das <code></title></code> Tag weggelassen, kann es dazu kommen, dass der Rest der Seite vom Browser ignoriert wird.</td> + </tr> + <tr> + <th scope="row">Erlaubte Elternelemente</th> + <td>Ein {{ HTMLElement("head") }} Element, das kein anderes {{ HTMLElement("title") }} Element beinhaltet.</td> + </tr> + <tr> + <th scope="row">DOM Schnittstelle</th> + <td>{{domxref("HTMLTitleElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p><span style="line-height: 21px;">Dieses Element schließt nur </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globale Attribute</a><span style="line-height: 21px;"> ein.</span></p> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: html"><title>Das ist der Seiten-Titel</title> +</pre> + +<h2 id="Specifications" name="Specifications">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-title-element', '<title>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-title-element', '<title>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.2', '<title>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<p>{{HTMLRef}}</p> diff --git a/files/de/web/html/element/tr/index.html b/files/de/web/html/element/tr/index.html new file mode 100644 index 0000000000..f3a177cb40 --- /dev/null +++ b/files/de/web/html/element/tr/index.html @@ -0,0 +1,230 @@ +--- +title: <tr> +slug: Web/HTML/Element/tr +tags: + - Element + - HTML + - HTML tabular data + - Reference + - Tables + - Web +translation_of: Web/HTML/Element/tr +--- +<h2 id="Übersicht">Übersicht</h2> + +<p>Das HTML<em> </em>Element<em> table row </em><code><tr></code> definiert eine Reihe, bestehend aus einzelnen Zellen, in einer Tabelle. Diese können aus {{HTMLElement("td")}} und {{HTMLElement("th")}} Elementen bestehen.</p> + +<table class="standard-table"> + <tbody> + <tr> + <td><a href="/de/docs/HTML/Content_categories" title="HTML/Content categories">Inhaltskategorien</a></td> + <td>Keine</td> + </tr> + <tr> + <td>Erlaubter Inhalt</td> + <td>0 oder mehrere {{HTMLElement("td")}} oder {{HTMLElement("th")}} Elemente, oder eine Mischung aus diesen</td> + </tr> + <tr> + <td>Tag Wegfall</td> + <td>Start-Tag ist ein Muss. Ende-Tag kann weggelassen werden, wenn das {{HTMLElement("tr")}} Element direkt gefolgt wird von einem {{HTMLElement("tr")}} Element, oder wenn die Haupttabellengruppen ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}} oder {{HTMLElement("tfoot")}}) keinen Inhalt haben</td> + </tr> + <tr> + <td>Erlaubte Elternelemente</td> + <td>{{HTMLElement("table")}}, {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} oder {{HTMLElement("tfoot")}} Element</td> + </tr> + <tr> + <td>Erlaubte ARIA-Rollen</td> + <td>alle</td> + </tr> + <tr> + <td>DOM interface</td> + <td>{{domxref("HTMLTableRowElement")}}</td> + </tr> + <tr> + <td>Verweis-Dokument</td> + <td><a class="external" href="http://www.whatwg.org/html/#the-tr-element">HTML, "The <code>tr</code> element"</a></td> + </tr> + </tbody> +</table> + +<h2 id="Attribute">Attribute</h2> + +<p><span style="line-height: 21px;">Dieses Element beinhaltet </span><a href="/de/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globale Attribute</a><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{htmlattrdef("align")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt> + <dd>Dieses aufgezählte Attribut spezifiziert wie die horizontale Ausrichtung jeden Zelleninhalts behandelt wird. Mögliche Werte sind: + <ul> + <li><code>left</code>, Ausrichtung des Inhalts am linken Rand der Zelle</li> + <li><code>center</code>, Zentrierung des Inhalts innerhalb der Zelle</li> + <li><code>right</code>, Ausrichtung des Inhalts am rechten Rand der Zelle</li> + <li><code>justify</code>, Erweiterung der Leerstellen im textuellen Inhalt so dass der Inhalt die gesamte Breite der Zelle besetzt (Blocksatz)</li> + <li><code>char</code>, Ausrichtung des textuellen Inhalts an einem speziellen Charakter mit einem minimalen Abstand, definiert durch {{htmlattrxref("char", "tr")}} und {{htmlattrxref("charoff", "tr")}} Attribute {{unimplemented_inline("2212")}}</li> + </ul> + + <p>Wenn dieses Attribut nicht gesetzt wird, dann wird der Wert des Elternknotens geerbt.</p> + + <div class="note"><strong>Bemerkung: </strong>Benutzen Sie dieses Attribut nicht, da es nicht mehr im aktuellen Standard unterstützt wird. + + <ul> + <li>Um denselben Effekt zu erhalten wie <code>left</code>, <code>center</code>, <code>right</code> oder <code>justify</code>, benutzen Sie die CSS {{cssxref("text-align")}} Eigenschaft.</li> + <li>Um denselben Effekt zu erhalten wie <code>char</code>, in CSS3, können Sie den Wert der Eigenschaft {{htmlattrxref("char", "tr")}} als Wert der {{cssxref("text-align")}} Eigenschaft benutzen {{unimplemented_inline}}.</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("bgcolor")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt> + <dd>Dieses Attribut definiert die Hintergrundfarbe jeder Zelle in einer Zeile. Es kann entweder ein <a href="/de/docs/CSS/color_value#HTML.2fSVG.2fX11.c2.a0_Color_Keywords" title="CSS/color value#HTML.2fSVG.2fX11.c2.a0 Color Keywords">#RRGGBB Code</a> oder ein <a href="/#HTML.2fSVG.2fX11.c2.a0_Color_Keywords" title="#HTML.2fSVG.2fX11.c2.a0 Color Keywords">SVG Farbschlüssel</a> sein. + <div class="note"><strong>Gebrauchsanweisung: </strong>Das {{HTMLElement("tr")}} Element sollte mit <a href="/de/docs/CSS" title="CSS">CSS</a> formatiert werden. Um denselben Effekt wie das <strong>bgcolor</strong> Attribut zu erreichen, benutzen Sie die <a href="/de/docs/CSS" title="CSS">CSS</a> Eigenschaft {{cssxref("background-color")}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("char")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt> + <dd>Dieses Attribut wird benutzt um die Charaktere einer Zelle zu einer Kolonne auszurichten. Typische Werte beinhalten einen Punkt (.) wenn Zahlen oder Währungswerte ausgerichtet werden sollen. Wenn {{htmlattrxref("align", "tr")}} nicht mit <code>char</code> gesetzt ist, so wird dieses Attribut ignoriert. + <div class="note"><strong>Bemerkung: </strong>Benutzen Sie dieses Attribut nicht, da es nicht mehr im aktuellen Standard unterstützt wird. Um denselben Effekt wie {{htmlattrxref("char", "tr")}}, in CSS3 zu erreichen, können Sie den Zeichensatz benutzen, welcher das {{htmlattrxref("char", "tr")}} Attribut als Wert der {{cssxref("text-align")}} Eigenschaft enthält {{unimplemented_inline}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("charoff")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt> + <dd>Dieses Attribut wird benutzt um die Anzahl der Charaktere zu bestimmen, welche als Abstand für den Kolonneninhalt genommen und durch das <strong>char</strong> Attribut definiert wird. + <div class="note"><strong>Bemerkung: </strong>Benutzen Sie dieses Attribut nicht, da es nicht mehr im aktuellen Standard unterstützt wird.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("valign")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt> + <dd>Dieses Attribut definiert die vertikale Ausrichtung des Textes in jeder Zeile. Mögliche Werte für dieses Attribut sind: + <ul> + <li><code>baseline</code>, platziert den Text so nah wie möglich an den unteren Rand der Zelle, aber richtet sie an der <a class="external" href="http://en.wikipedia.org/wiki/Baseline_%28typography%29" title="http://en.wikipedia.org/wiki/Baseline_(typography)">Basislinie</a> der Charaktere aus anstatt am unteren Rand derselben. Sind alle Charaktere von derselben Grösse, so hat es denselben Effekt wie <code>bottom</code>.</li> + <li><code>bottom</code>, platziert den Text so nah wie möglich an den unteren Rand der Zelle;</li> + <li><code>middle</code>, zentriert den Text innerhalb der Zelle;</li> + <li>und <code>top</code>, platziert den Text so nah wie möglich an den oberen Rand der Zelle.</li> + </ul> + + <div class="note"><strong>Note: </strong>Benutzen Sie dieses Attribut nicht, da es nicht mehr im aktuellen Standard unterstützt wird; benutzen Sie die CSS {{cssxref("vertical-align")}} Eigenschaft.</div> + </dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Siehe {{HTMLElement("table")}} für Beispiele von <code><tr></code>.</p> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basis Unterstützung</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>align/valign</code> Attribut</td> + <td>1.0</td> + <td>{{CompatNo}} [1]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>char/charoff</code> Attribut</td> + <td>1.0</td> + <td>{{CompatNo}} [2]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>bgcolor</code> Attribute {{Non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basis Unterstützung</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>align/valign</code> Attribut</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>char/charoff</code> Attribut</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}} [2]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>bgcolor</code> Attribut {{Non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Siehe {{bug(915)}}.</p> + +<p>[2] Siehe {{bug(2212)}}.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Andere Tabellen-bezogene HTML Elemente: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}};</li> + <li>CSS Eigenschaften und Pseudo-Klassen die eventuel wichtig sind für die Formatierung des <code><tr></code> Elementes: + <ul> + <li>Die {{cssxref(":nth-child")}} Pseudo-Klasse für die Ausrichtung der Zellen ganzer Zeilen und Spalten;</li> + <li>Die {{cssxref("text-align")}} Eigenschaft um alle Zelleninhalte auf demselben Charakter auszurichten, wie '.'.<</li> + </ul> + </li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/de/web/html/element/tt/index.html b/files/de/web/html/element/tt/index.html new file mode 100644 index 0000000000..08abd9019b --- /dev/null +++ b/files/de/web/html/element/tt/index.html @@ -0,0 +1,52 @@ +--- +title: <tt> +slug: Web/HTML/Element/tt +translation_of: Web/HTML/Element/tt +--- +<div>{{ obsolete_header() }}</div> + +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>Das HTML Teletype (Fernschreiber) Text Element (<code><tt></code>) erzeugt ein inline Element das in der standardmässigen Nichtproportionalschrift des Browsers angezeigt wird. Die Absicht hinter diesem Element war, Text so zu präsentieren, als würde er auf einem Bildschirm mit fester Breite angezeigt, wie bei einem Fernschreiber. Es ist vermutlich verbreiteter, Text mit fester Breite mit dem Element {{ HTMLElement("code") }} anzuzeigen.</p> + +<div class="note">Dieses Element ist überholt. An seiner Stelle sollte ein angepasstes Element wie Beispielsweise {{ HTMLElement("code") }} oder {{ HTMLElement("span") }} mit <a href="/fr/docs/CSS" title="/fr/docs/CSS">CSS</a> benutzt werden.</div> + +<h2 id="Attribute">Attribute</h2> + +<p>Dieses Element hat keine anderen Attribute als die <a href="/en-US/docs/Web/HTML/global_attributes" title="HTML/global attributes">globalen Attribute</a>, die alle Elemente verwenden.</p> + +<h2 id="DOM_Interface">DOM Interface</h2> + +<p>Dieses Element implementiert das {{domxref('HTMLElement')}} Interface.</p> + +<div class="note"> +<p><strong>Anmerkung zur Implementation: </strong>Bis und mit Gecko 1.9.2, Firefox implementiert das {{domxref('HTMLSpanElement')}} Interface für dieses Element.</p> +</div> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush:html"><p>Geben Sie bei der Eingabeaufforderung des Fernschreibers folgendes Kommando ein: <code>set localecho</code><br /> + +Der Fernschreiber Client sollte <tt>Local Echo is on</tt> anzeigen</p> +</pre> + +<h3 id="Resultat">Resultat</h3> + +<p>Geben Sie bei der Eingabeaufforderung des Fernschreibers folgendes Kommando ein: <code>set localecho</code><br> + Der Fernschreiber Client sollte: <code>Local Echo is on</code> anzeigen</p> + +<h2 id="Notes" name="Notes">Anmerkungen</h2> + +<ul> + <li>Eine CSS-Regel kann für den <code>tt</code> Selektor definiert werden, um die Standardschriftart des Browsers anzupassen. Benutzereinstellungen können Vorrang vor dem spezifizierten CSS haben.</li> + <li>Obwohl dieses Element nicht für deprecated erklärt wurde, wird mit der HTML 4.01 Spezification davon abgeraten es zu benutzen, stattdessen sollten Style Sheets (CSS) verwendet werden.</li> +</ul> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>{{ HTMLElement("code") }}</li> + <li>HTML 4.01 Spezifikation: <a class="external" href="http://www.w3.org/TR/html4/present/graphics.html#h-15.2">Schriftstile</a></li> +</ul> + +<div>{{ HTMLRef }}</div> diff --git a/files/de/web/html/element/u/index.html b/files/de/web/html/element/u/index.html new file mode 100644 index 0000000000..6110097354 --- /dev/null +++ b/files/de/web/html/element/u/index.html @@ -0,0 +1,68 @@ +--- +title: <u> +slug: Web/HTML/Element/u +tags: + - Element + - Unterstrich +translation_of: Web/HTML/Element/u +--- +<h2 id="Übersicht">Übersicht</h2> + +<p>Das <em>HTML Underline Element</em> (<code><u></code>) versieht Text mit einem Unterstrich, also einer Linie unter der Basislinie des Textinhalts.</p> + +<p>In HTML5, repräsentiert dieses Element ein Textfeld mit einem unausgesprochenen, also nur gerenderten, nicht-textuellen Vermerk, so wie die Beschreibung eines Textes, als sei es eine Eigenschaft eines chinesisches Textes (eine chinesische Textmarkierung), oder als ob der Text falsch buchstabiert sei.</p> + +<div class="note"><strong>Gebrauchsnotiz: </strong>So wie alle stylisierenden Elemente, wird {{ HTMLElement("u") }} in HTML 4 und XHTML 1 nicht mehr unterstützt. Das Attribut wurde aber wieder in HTML5 zusammen mit anderen Wortbedeutungen aufgenommen. Wenn ein Text unterstrichen werden soll in einer nicht-begriffsbestimmenden Art und Weise, sollte ein {{ HTMLElement("span") }} Element eingesetzt werden, oder andere angepasste Elemente, und es mit <a href="/en/CSS" title="en/CSS">CSS</a> formatieren {{ cssxref("text-decoration") }}, also mit der <span style="font-family: Courier New;">underline</span> Eigenschaft.</div> + +<h2 id="Attribute">Attribute</h2> + +<p><span style="line-height: 21px;">Dieses Element enthält nur das </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globale Attribut</a><span style="line-height: 21px;">.</span></p> + +<h2 id="Tips_und_Bemerkungen">Tips und Bemerkungen</h2> + +<p style="line-height: 21px;"><b>Tip:</b> Das {{ HTMLElement("u") }} Element nicht benutzen wo es mit einem Hyperlink verwechselt werden kann.</p> + +<div class="note"> +<p><span style="line-height: 21px;"><strong>Notiz:</strong> Die HTML 5 Spezifikation errinnert Entwickler dass andere Elemente passender sind als {{ HTMLElement("u") }}.</span></p> +</div> + +<h2 id="DOM_Interface">DOM Interface</h2> + +<p>Dieses Element implementiert das <code><a href="/en/DOM/element" title="en/DOM/element">HTMLElement</a></code> Interface.</p> + +<div class="note"><strong>Implementation-Notiz: </strong>bis zur Version Gecko 1.9.2 inklusive, implementiert Firefox das {{ domxref("HTMLSpanElement") }} Interface für dieses Element.</div> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: html"><u>Today's Special</u>: Salmon<br /> +<span style="text-decoration:underline;">Today's Special</span>: Salmon +</pre> + +<p><u>Today's Special</u>: Salmon</p> + +<p><span style="text-decoration: underline;">Today's Special</span>: Salmon</p> + +<pre class="brush: html"><p><u>All</u> of that is explained in <u>Dive into Python</u>. +</pre> + +<p><u>All</u> of that is explained in <u>Dive into Python</u>.</p> + +<p>Sollte ersetzt werden durch</p> + +<pre class="brush: html"><p><em>All</em> of that is explained in <cite>Dive into Python</cite>. +</pre> + +<p><em>All</em> of that is explained in <cite>Dive into Python</cite>.</p> + +<p>CSS sollte benutzt werden um diese Elemente zu formatieren.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Die {{ HTMLElement("span") }}, {{ HTMLElement("i") }}, {{ HTMLElement("em") }}, and {{ HTMLElement("cite") }} Elemente sollten, vom Fall abhängend, anstatt benutzt werden.</li> + <li>Die CSS {{ cssxref("text-decoration") }} Eigenschaft sollte benutzt werden für dasselbe Aussehen als das {{ HTMLElement("u") }} Element.</li> +</ul> + +<p>{{ languages({"ja":"ja/HTML/Element/u","en":"en/HTML/Element/u"}) }}</p> + +<div>{{ HTMLRef }}</div> diff --git a/files/de/web/html/element/ul/index.html b/files/de/web/html/element/ul/index.html new file mode 100644 index 0000000000..e3299cef19 --- /dev/null +++ b/files/de/web/html/element/ul/index.html @@ -0,0 +1,123 @@ +--- +title: ul +slug: Web/HTML/Element/ul +tags: + - HTML + - HTML Elemente + - HTML Referenz +translation_of: Web/HTML/Element/ul +--- +<h2 id="Übersicht">Übersicht</h2> + +<p>Das HTML Element <em>unordered list</em> <ul> wird verwendet um eine ungeordnete Liste darzustellen. Eine Sammlung von Einträgen, die keine nummerische Ordung aufweisen bzw. deren Aufzählung bedeutungslos ist. Die einzelnen Einträge der Liste werden durch das <a href="/de/HTML/Element/li" title="de/HTML/Element/li">list item</a> (<a href="/de/HTML/Element/li" title="de/HTML/Element/li"><li></a>) Element definiert, welches das einzige Element ist, was innerhalb eines <code><ul></code> Tag stehen darf.</p> + +<ul> + <li>Element Typ: <a href="/de/HTML/Block-level_Elemente" title="de/HTML/Block-level_Elemente">block-level</a></li> + <li>Erlaubter Inhalt: <a href="/de/HTML/Element/li" title="de/HTML/Element/li">li</a></li> +</ul> + +<h2 id="Attribute">Attribute</h2> + +<dl> + <dt>type {{ Deprecated_inline() }}</dt> + <dd>Wird verwendet, um das Aufzählungszeichen der Liste festzulegen. Die Werte sind in der <a href="/de/HTML3.2" title="de/HTML3.2">HTML3.2</a> Spezifikation festgelegt und in der „transitional“ Version von <a href="/de/HTML4.01" title="de/HTML4.01">HTML 4.0/4.01</a> sind <code>circle</code>, <code>disc</code>, und <code>square</code> aufgeführt. Der Browser kann über unterschiedliche Zeichen entscheiden, abhängig vom Grad der Verschachtelung, wenn das type Attribut nicht verwendet wird. Das WebTV Interface unterstützt auch ein <code>triangle</code> Zeichen. Dieses Attribut ist veraltet, es sollte die <a href="/de/CSS" title="de/CSS">CSS</a> <a href="/de/CSS/list-style-type" title="de/CSS/list-style-type">list-style-type</a> Eigenschaft stattdessen verwendet werden.</dd> +</dl> + +<dl> + <dt>compact {{ Deprecated_inline() }}</dt> + <dd>Gibt an, dass die Liste in einer kompakten Form gerendert werden soll. Die Interpretation dieses Attributs hängt vom Browser ab.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Einfaches_Beispiel">Einfaches Beispiel</h3> + +<pre> <ul> + <li>Erster Eintrag</li> + <li>Zweiter Eintrag</li> + <li>Dritter Eintrag</li> + </ul> +</pre> + +<p>Dieses HTML gibt das Folgende aus:</p> + +<ul> + <li>Erster Eintrag</li> + <li>Zweiter Eintrag</li> + <li>Dritter Eintrag</li> +</ul> + +<h3 id="Verschachtelte_Listen">Verschachtelte Listen</h3> + +<pre> <ul> + <li>Erster Eintraf</li> + <li>Zweiter Eintrag <!-- Achtung, das schließende </li> Tag wird hier nicht notiert! --> + <ul> + <li>Zweiter Eintrag erster Untereintrag</li> + <li>Zweiter Eintrag zweiter Untereintrag</li> + <li>Zweiter Eintrag dritter Untereintrag</li> + </ul> + </li> <!-- Hier ist das schließende </li> Tag angegeben! --> + <li>Dritter Eintrag</li> + </ul> +</pre> + +<p>Dieses HTML gibt das Folgende aus:</p> + +<ul> + <li>Erster Eintrag</li> + <li>Zweiter Eintrag + <ul> + <li>Zweiter Eintrag erster Untereintrag</li> + <li>Zweiter Eintrag zweiter Untereintrag</li> + <li>Zweiter Eintrag dritter Untereintrag</li> + </ul> + </li> + <li>Dritter Eintrag</li> +</ul> + +<h3 id="Verschachtelte_<ul>_und_<ol>">Verschachtelte <ul> und <ol></h3> + +<pre> <ul> + <li>Erster Eintrag</li> + <li>Zweiter Eintrag <!-- Achtung, das schließende </li> Tag wird hier nicht notiert! --> + <ol> + <li>Zweiter Eintrag erster Untereintrag</li> + <li>Zweiter Eintrag zweiter Untereintrag</li> + <li>Zweiter Eintrag dritter Untereintrag</li> + </ol> + </li> <!-- Hier ist das schließende </li> Tag angegeben! --> + <li>Dritter Eintrag</li> + </ul> +</pre> + +<p>Dieses HTML gibt das Folgende aus:</p> + +<ul> + <li>Erster Eintrag</li> + <li>Zweiter Eintrag + <ol> + <li>Zweiter Eintrag erster Untereintrag</li> + <li>Zweiter Eintrag zweiter Untereintrag</li> + <li>Zweiter Eintrag dritter Untereintrag</li> + </ol> + </li> + <li>Dritter Eintrag</li> +</ul> + +<h2 id="Hinweise">Hinweise</h2> + +<p>Es können so viele Listen, wie man möchte verschachtelt werden, <code><ul></code> und <code><ol></code> in jeder Reihenfolge.</p> + +<p>Um die Einrückung von Listen zu verändern sollte die <a href="/de/CSS" title="de/CSS">CSS</a> <a href="/de/CSS/margin" title="de/CSS/margin">margin</a> Eigenschaft verwendet werden.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/HTML/Element/li" title="de/HTML/Element/li">HTML List item Element</a></li> + <li><a href="/de/HTML/Element/ol" title="de/HTML/Element/ol">HTML geordnete Liste</a></li> + <li><a href="/de/CSS/list-style" title="de/CSS/list-style">CSS list-style Eigenschaft</a></li> + <li><a href="/de/CSS_Counters" title="de/CSS_Counters">CSS Counters</a></li> +</ul> + +<div class="noinclude">{{ languages({ "en":"en/HTML/Element/ul", "ja":"de/HTML/Element/ul", "pl":"pl/HTML/Element/ul"}) }}</div> diff --git a/files/de/web/html/element/var/index.html b/files/de/web/html/element/var/index.html new file mode 100644 index 0000000000..109ea376a2 --- /dev/null +++ b/files/de/web/html/element/var/index.html @@ -0,0 +1,46 @@ +--- +title: var +slug: Web/HTML/Element/var +tags: + - HTML + - HTML Elemente + - HTML Referenz +translation_of: Web/HTML/Element/var +--- +<h2 id="Summary" name="Summary">Übersicht</h2> + +<p>Das HTML <code><var></code> Element repräsentiert eine Variable. Es kann sich dabei um eine mathematischen Ausdruck handeln oder um eine Variable in einem Quellcode.</p> + +<h2 id="DOM_Interface">DOM Interface</h2> + +<p>Dieses Element implementiert das <code><a href="/de/DOM/element" title="de/DOM/element">HTMLElement</a></code> Interface.</p> + +<div class="note"> +<p><strong>Implementationshinweis:</strong> Bis einschließlich Gecko 1.9.2 implementiert Firefox das <a href="/de/DOM/span" title="de/DOM/span"><span style="font-family: Courier New;">HTMLSpanElement</span></a> Interface für dieses Element.</p> +</div> + +<h2 id="Attribute">Attribute</h2> + +<p>Keine speziellen vorhanden, nur Universalattribute.</p> + +<h3 id="Standardmäßige_Style-Eigenschaften">Standardmäßige Style-Eigenschaften</h3> + +<pre class="brush:css">var { + font-style: italic; +}</pre> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush:xml"><p> Eine einfache Gleichung: <var>x</var> = <var>y</var> + 2 </p> +</pre> + +<p>Eine einfache Gleichung: <var>x</var> = <var>y</var> + 2</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/html401/struct/text.html#edef-VAR">HTML 4.01 var</a></li> + <li><a class="external" href="http://dev.w3.org/html5/markup/var.html">HTML5 var</a></li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/de/web/html/element/video/index.html b/files/de/web/html/element/video/index.html new file mode 100644 index 0000000000..f30eb2e9f0 --- /dev/null +++ b/files/de/web/html/element/video/index.html @@ -0,0 +1,379 @@ +--- +title: <video> +slug: Web/HTML/Element/video +tags: + - Element + - HTML + - HTML eingebetteter Inhalt + - HTML5 + - Medien + - Multimedia + - NeedsMobileBrowserCompatibility + - Referenz + - Web +translation_of: Web/HTML/Element/video +--- +<div>{{HTMLRef}}</div> + +<h2 id="Summary" name="Summary">Übersicht</h2> + +<p>Das <strong>HTML <code><video></code> Element</strong> wird verwendet, um Videos einzubetten. Es kann verschiedene Quellen für Videos enthalten, die im <code>src</code> Attribut oder im {{HTMLElement("source")}} Element repräsentiert werden. Der Webbrowser wählt dann die für ihn passende Quelle aus.</p> + +<p>Eine Liste der unterstützten Formate ist unter <a href="/de/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">Unterstützte Formate der <code><audio></code> und <code><video></code> Elemente</a> zu finden.</p> + +<h2 id="Usage_context" name="Usage_context">Anwendungscontext</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/de/docs/Web/HTML/Content_categories">Inhaltskategorien</a></th> + <td><a href="/de/docs/Web/HTML/Content_categories#Flow_content">Fließender Inhalt</a>, Formulierung, eingebetteter Inhalt. Wenn es ein {{htmlattrxref("controls", "video")}} Attribut hat: interaktiver Inhalt und konkreter Inhalt.</td> + </tr> + <tr> + <th scope="row">Erlaubter Inhalt</th> + <td>Wenn das Element ein {{htmlattrxref("src", "video")}} Attribut hat: kein oder mehrere {{HTMLElement("track")}} Elemente, gefolgt von transparentem Inhalt, der keine Medienelemente des Typs {{HTMLElement("audio")}} oder {{HTMLElement("video")}} enthält.<br> + Sonst: kein oder mehrere {{HTMLElement("source")}} Elemente, gefolgt von keinem oder mehreren {{HTMLElement("track")}} Elementen, gefolgt von transparentem Inhalt, der keine Medienelemente des Typs {{HTMLElement("audio")}} oder {{HTMLElement("video")}} enthält.</td> + </tr> + <tr> + <th scope="row">Tag Wegfall</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Erlaubte Elternelemente</th> + <td>Jedes Element, das eingebetteten Inhalt akzeptiert.</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLVideoElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">Attribute</h2> + +<p>Wie jedes andere HTML Element unterstützt diese Element die <a href="/de/docs/HTML/Global_attributes" title="HTML/Global attributes">globalen Attribute</a>.</p> + +<dl> + <dt>{{htmlattrdef("autoplay")}}</dt> + <dd>Ein Boolean Attribut; wenn es gesetzt ist, beginnt das Video automatisch abzuspielen sobald es nicht mehr stoppen muss um weitere Daten zu laden.</dd> + <dt>{{htmlattrdef("autobuffer")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Ein Boolean Attribut; wenn es gesetzt ist, beginnt das Video automatisch mit dem Buffering, sogar wenn die automatische Wiedergabe nicht aktiv ist. Diese Attribut sollte verwendet werden, wenn angenommen werden kann, dass der Benutzer das Video abspielen wird (zum Beispiel wenn der Benutzer die Seite aufruft, um das Video abzuspielen und nicht weil es auf der Seite anderen Inhalt gibt und auch ein eingebettetes Video). Das Video wird solange gepuffert, bis der Mediencache voll ist. + <div class="note"><strong>Implementierungshinweis:</strong> obwohl es ein Teil der frühen Entwürfe der HTML5 Spezifikation ist, wurde das <code>autobuffer</code> Attribut aus späteren Veröffentlichungen entfernt. Es wurde aus Gecko 2.0 und anderen Webbrowsern entfernt, wobei es von manchen gar nicht erst implementiert wurde. Die Spezifikation definiert ein neues Attribut <code>preload</code> mit einer anderen Syntax, um das <code>autobuffer</code> Attribut zu ersetzen. {{bug(548523)}}</div> + </dd> + <dt>{{htmlattrdef("buffered")}}</dt> + <dd>Ein Attribut, das aus dem die bereits gepufferten Zeitspannen des Mediums gelesen werden können. Dieses Attribut enthält ein {{domxref("TimeRanges")}} Objekt.</dd> + <dt>{{htmlattrdef("controls")}}</dt> + <dd>Wenn dieses Attribut gesetzt ist, blendet Gecko Steuerelemente für die Wiedergabe ein. Darunter befinden sich Lautstärke, Spulen und pausieren/fortsetzen der Wiedergabe.</dd> + <dt>{{htmlattrdef("crossorigin")}}</dt> + <dd>Dieses aufgezählte Attribut gibt an, ob das Laden des dazugehörigen Bildes mit CORS erfolgen muss. <a href="/de/docs/CORS_Enabled_Image" title="CORS_Enabled_Image">CORS-enabled Ressourcen</a> können im {{HTMLElement("canvas")}} Element <em>ohne Qualitätsabfall</em> verwendet werden. Die erlaubten Werte sind: + <dl> + <dt>anonymous</dt> + <dd>Ein cross-origin Request (z. B. mit <code>Origin:</code> HTTP Header) wird ausgeführt aber es werden keine Credentials gesendet (z. B. kein Cookie, kein X.509 Zertifikat und keine HTTP Basic authentication werden gesendet). Wenn der Server keine Credentials an die origin site gibt (wenn der <code>Access-Control-Allow-Origin:</code> HTTP Header nicht gesetzt ist), wird das Bild <em>schlecht</em> und die Verwendung ist eingeschränkt.</dd> + <dt>use-credentials</dt> + <dd>Ein cross-origin Request (i.e. with <code>Origin:</code> HTTP header) wird ausgeführt und Credentials werden gesendet (z.B. ein Cookie, ein Zertifikat und eine HTTP Basic authentication wird ausgeführt). Wenn der Server keine Credentials an die origin site gibt (über den <code>Access-Control-Allow-Credentials:</code> HTTP Header), wird das Bild <em>schlecht</em> sein und die Verwendung eingeschränkt.</dd> + </dl> + Wenn dieses Attribute nicht verwendet wir, wird die Ressource ohne einen CORS Request geladen (z. B. ohne den <code>Origin:</code> HTTP Header zu senden), preventing its non-tainted used in {{HTMLElement('canvas')}} elements. Bei einem ungültigen Wert wird das Verhalten von <strong>anonymous</strong> übernommen. Weitere Informationen sind unter <a href="/de/docs/HTML/CORS_settings_attributes" title="CORS settings attributes">CORS settings attributes</a> zu finden.</dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>Die Höhe des Wiedergabebereichs in CSS Pixel.</dd> + <dt>{{htmlattrdef("loop")}}</dt> + <dd>Ein Boolean-Attribut; wenn es gesetzt ist, wird das Video nach dem Ende zurück an den Anfang gespult</dd> + <dt>{{htmlattrdef("muted")}}</dt> + <dd>Ein Boolean-Attribut das eine Standardeinstellung für den Ton im Video angibt. Wenn es gesetzt ist, ist der Ton initial auf stumm geschaltet. Der Standardwert ist false. Das bedeutet, dass der Ton mit dem Video abgespielt wird</dd> + <dt>{{htmlattrdef("played")}}</dt> + <dd>Ein {{domxref("TimeRanges")}} Objekt das die abgespielten Abschnitte des Videos angibt.</dd> + <dt>{{htmlattrdef("preload")}}</dt> + <dd>Dieses aufgezählte Attribute ist ein Hinweis vom Autor darüber, wie laut ihm die möglichst beste User Experience erreicht werden kann. Es kann einen der folgenden Werte enthalten: + <ul> + <li><span style="font-family: courier new;">none: </span>der Autor meint, dass der Benutzer das Video nicht anfragen wird, oder dass der Server seinen Datenverkehr minimieren will; das Video sollte nicht gecached werden</li> + <li><span style="font-family: courier new;">metadata</span>: der Autor meint, dass das Laden der Metadaten (z.B. Länge) vertretbar ist, auch wenn der Benutzer das Video nicht anfragen wird</li> + <li><span style="font-family: courier new;">auto</span>: die Bedürfnisse des Benutzers haben Priorität; bei Bedarf kann das gesamte Video heruntergeladen werden, auch wenn es der Benutzer womöglich nicht vollständig ansieht</li> + <li>ein <em>leerer String</em>: ein Synonym für den Wert <span style="font-family: courier new;">auto</span></li> + </ul> + + <p>Wenn diese Attribut nicht gesetzt ist, wird der Standardwert vom Webbrowser verwendet. Jeder Webbrowser kann seinen eigenen Standardwert auswählen, obwohl die Spezifikation den Wert <span style="font-family: courier new;">metadata</span> empfiehlt.</p> + + <div class="note"><strong>Verwendungshinweise:</strong> + + <ul> + <li>Das <code>autoplay</code>-Attribut hat Vorrang gegenüber diesem Attribute, denn wenn das Video automatisch abgespielt werden soll, muss der Webbrowser es laden. Das Setzen der Attribute <code>autoplay</code> und <code>preload</code> wird von der Spezifikation erlaubt.</li> + <li>Der Webbrowser wird von der Spezifikation nicht gezwungen den Wert zu befolgen. Es ist ein reiner Hinweis.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("poster")}}</dt> + <dd>Die URL eines Vorschaubildes, das dargestellt wird bis der Benutzer das Video abspielt oder spult. Wenn diese Attribut nicht angegeben wird, wird nichts dargestellt bis der erste Frame des Videos verfügbar ist. Der erste Frame wird dann als Vorschaubild dargestellt.</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>Die URL des Videos, das eingebettet werden soll. Diese Attribut ist optional. Stattdessen kann das {{HTMLElement("source")}}-Element innerhalb des video-Blocks für die Angabe des einzubettenden Videos verwendet werden.</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>Die Breite des Wiedergabebereichs in CSS Pixel.</dd> +</dl> + +<h2 id="Examples" name="Examples">Events</h2> + +<p>Das <code><video></code>-Element kann verschiedene <a href="/de/docs/Web/Guide/Events/Media_events">Events</a> auslösen.</p> + +<h2 id="Examples" name="Examples">Beispiele</h2> + +<pre class="brush: html"><!-- Simple video example --> +<video src="videofile.ogg" autoplay poster="posterimage.jpg"> + Sorry, your browser doesn't support embedded videos, + but don't worry, you can <a href="videofile.ogg">download it</a> + and watch it with your favorite video player! +</video> + +<!-- Video with subtitles --> +<video src="foo.ogg"> + <track kind="subtitles" src="foo.en.vtt" srclang="en" label="English"> + <track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska"> +</video> +</pre> + +<p>Das erste Beispiel spielt ein Video ab, sobald genügend Frames geladen worden sind, damit es keine Unterbrechungen beim Abspielen gibt. Das Bild "posterimage.jpg" wird dargestellt, bis das Video abgespielt wird.</p> + +<p>Das zweite Beispiel erlaubt dem Benutzer die Auswahl eines Untertitels.</p> + +<h2 id="Server_support" name="Server_support">Serverunterstützung</h2> + +<p>Wenn der MIME Type für das Video auf dem Server nicht korrekt konfiguriert ist, wird das Video nicht angezeigt oder eine graue Box mit einem X, falls JavaScript aktiviert ist.</p> + +<p>Wenn die Videos als Ogg Theora bereitgestellt werden sollen, kann beim Apache Web Server die Dateiendung der Videos (".ogm", ".ogv", oder ".ogg" sind die gängigsten) zum MIME Type "video/ogg" über die "mime.types" Datei in "/etc/apache" oder über die "AddType" Konfigurationsdirektive in httpd.conf abgegeben werden.</p> + +<pre>AddType video/ogg .ogm +AddType video/ogg .ogv +AddType video/ogg .ogg +</pre> + +<p>Wenn die Videos als WebM bereitgestellt werden sollen, kann beim Apache Web Server die Dateiendung der Videos (".webm" ist die gängigste) zum MIME Type "video/webm" über die "mime.types" Datei in "/etc/apache" oder über die "AddType" Konfigurationsdirektive in httpd.conf abgegeben werden.</p> + +<pre>AddType video/webm .webm +</pre> + +<p>Ihr Web Host bietet möglicherweise eine einfache Schnittstellun zur Konfiguration der MIME Typen, bis es ein globales Update gibt.</p> + +<h2 id="DOM_interface" name="DOM_interface">DOM Interface</h2> + +<p>Dieses Element implementiert das <code><a href="/en-US/docs/Web/API/HTMLVideoElement" title="DOM/HTMLVideoElementInterface">HTMLVideoElement</a></code> Interface.</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Webbrowserkompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>3.0</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9.0</td> + <td>10.5</td> + <td>3.1</td> + </tr> + <tr> + <td><code>autoplay</code> attribute</td> + <td>3.0</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9.0</td> + <td>10.5</td> + <td>3.1</td> + </tr> + <tr> + <td><code>buffered</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>Yes</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>controls</code> attribute</td> + <td>3.0</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9.0</td> + <td>10.5</td> + <td>3.1</td> + </tr> + <tr> + <td><code>crossorigin</code> attribue</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("12.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>loop</code> attribute</td> + <td>3.0</td> + <td>{{CompatGeckoDesktop("11.0")}}</td> + <td>9.0</td> + <td>10.5</td> + <td>3.1</td> + </tr> + <tr> + <td><code>muted</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("11.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>Yes</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>played</code> property</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("15.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>Yes</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>poster</code> attribute</td> + <td>3.0</td> + <td>{{CompatGeckoDesktop("1.9.2")}}</td> + <td>9.0</td> + <td>10.5</td> + <td>3.1</td> + </tr> + <tr> + <td><code>preload</code> attribute</td> + <td>3.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>9.0</td> + <td>Yes</td> + <td>3.1</td> + </tr> + <tr> + <td><code>src</code> attribute</td> + <td>3.0</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9.0</td> + <td>10.5</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>autoplay</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>iOS 6.0 only</td> + </tr> + <tr> + <td><code>buffered</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>controls</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>loop</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("11.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>muted</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("11.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>played</code> property</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("15.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>poster</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>preload</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>src</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>crossorigin</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("12.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">Media formats supported by the audio and video elements</a></li> + <li>{{htmlelement("audio")}}</li> + <li><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using audio and video in Firefox">Using HTML5 audio and video</a></li> + <li><a href="/en-US/docs/Manipulating_video_using_canvas" title="Manipulating video using canvas">Manipulating video using canvas</a></li> + <li><a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" title="NsIDOMHTMLMediaElement"><code>nsIDOMHTMLMediaElement</code></a></li> + <li><a class="external" href="http://tinyvid.tv/" title="http://tinyvid.tv/">TinyVid</a> - Beispiele zur Verwendung von ogg Dateien in HTML5.</li> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#video" title="http://www.whatwg.org/specs/web-apps/current-work/#video">The <code>video</code> element</a> (HTML5 Spezifikation)</li> + <li><a href="/en-US/docs/Configuring_servers_for_Ogg_media" title="Configuring servers for Ogg media">Configuring servers for Ogg media</a></li> + <li><a href="http://www.jwplayer.com/html5/">The state of HTML5 video</a></li> +</ul> diff --git a/files/de/web/html/globale_attribute/accesskey/index.html b/files/de/web/html/globale_attribute/accesskey/index.html new file mode 100644 index 0000000000..2fff85d11a --- /dev/null +++ b/files/de/web/html/globale_attribute/accesskey/index.html @@ -0,0 +1,116 @@ +--- +title: accesskey +slug: Web/HTML/Globale_Attribute/accesskey +tags: + - Globale Attribute + - HTML + - Referenz +translation_of: Web/HTML/Global_attributes/accesskey +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>Das <a href="/de/docs/Web/HTML/Globale_Attribute">globale Attribut</a> <strong>accesskey</strong> definiert ein Tastaturkürzel für das aktuelle Element. Der Attributwert muss aus einem einzelnen, druckbarem Zeichen bestehen (dies beinhaltet Zeichen mit Umlauten und andere Zeichen, die über die Tastatur eingegeben werden können).</p> + +<div class="note"> +<p><strong>Hinweis</strong>: Die WHATWG-Spezifikation besagt, dass mehrere mit Leerzeichen voneinander getrennte Zeichen angegeben werden können und der Browser davon das erste unterstützte verwenden wird. Das funktioniert jedoch in den meisten Browsern nicht. In Internet Explorer und Edge wird das erste unterstützte Zeichen jedoch ohne Probleme verwendet, sofern es keine Konflikte mit anderen Befehlen gibt.</p> +</div> + +<p>Je nach Browser und Betriebssystem unterscheidet sich die Tastaturkombination zur Ansteuerung des <strong>accesskey</strong>.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th> </th> + <th>Windows</th> + <th>Linux</th> + <th>Mac</th> + </tr> + <tr> + <th>Firefox</th> + <td colspan="2" rowspan="1" style="text-align: center;"><kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd><em>key</em></kbd></td> + <td>Firefox 57+: <kbd>Control</kbd> + <kbd>Option</kbd> + <kbd><em>key</em></kbd> -ODER- <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd><br> + Firefox 14–56: <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd><br> + Firefox < 14, <kbd>Control</kbd> + <kbd><em>key</em></kbd></td> + </tr> + <tr> + <th>Internet Explorer</th> + <td><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + <td colspan="2">N/V</td> + </tr> + <tr> + <th>Google Chrome</th> + <td colspan="2" rowspan="1" style="text-align: center;"><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + <td><kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + </tr> + <tr> + <th>Safari</th> + <td><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + <td>N/V</td> + <td><kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + </tr> + <tr> + <th>Opera 15+</th> + <td colspan="2" rowspan="1" style="text-align: center;"><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + <td><kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + </tr> + <tr> + <th>Opera 12</th> + <td colspan="3" rowspan="1"> + <p><kbd>Shift</kbd> + <kbd>Esc</kbd> öffnet zunächst eine Liste der Inhalte, die über <strong>accesskey</strong> erreichbar sind und erlaubt eine Ansteuerung über <kbd><em>key</em></kbd></p> + </td> + </tr> + </tbody> +</table> + +<p>Beachte, dass die Tastaturkombination in Firefox über die Einstellungen angepasst werden kann.</p> + +<h2 id="Spezifikation">Spezifikation</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('HTML5.2', "editing.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML5.2')}}</td> + <td>Beschreibt ein realistischeres Verhalten der tatsächlichen Implementierungen.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Keine Änderung gegenüber {{SpecName('HTML5.1')}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Keine Änderung gegenüber {{SpecName('HTML5 W3C')}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "editing.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Ab {{SpecName('HTML4.01')}} können mehrere Zeichen als <code>accesskey</code> gesetzt werden. Zudem kann ein <code>accesskey</code> an jedem Element gesetzt werden.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', "interact/forms.html#h-17.11.2", "accesskey")}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Nur unterstützt an {{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }} und {{ HTMLElement("textarea") }}</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("html.global_attributes.accesskey")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{domxref("Element.accessKey")}}</li> + <li>{{domxref("HTMLElement.accessKeyLabel")}}</li> + <li><a href="/de/docs/Web/HTML/Globale_Attribute">Globale Attribute</a>.</li> +</ul> diff --git a/files/de/web/html/globale_attribute/autocapitalize/index.html b/files/de/web/html/globale_attribute/autocapitalize/index.html new file mode 100644 index 0000000000..33eb99d131 --- /dev/null +++ b/files/de/web/html/globale_attribute/autocapitalize/index.html @@ -0,0 +1,46 @@ +--- +title: autocapitalize +slug: Web/HTML/Globale_Attribute/autocapitalize +tags: + - Automatische Großschreibung + - Globales Attribut + - HTML +translation_of: Web/HTML/Global_attributes/autocapitalize +--- +<p>{{HTMLSidebar("Global_attributes")}}</p> + +<p>Das <a href="/en-US/docs/Web/HTML/Global_attributes">Globale Attribut</a> <code><strong>autocapitalize</strong></code> ist ein Aufzählungsattribut, welches kontrolliert ob und wie Text-Input automatisch großgeschrieben wird, während der Nutzer etwas einfügt oder editiert. Das Attribut muss einen der folgenden Werte annehmen:</p> + +<ul> + <li><code>off</code> oder <code>none</code>: Es wird keine automatische Großschreibung benutzt (alle Buchstaben sind automatisch kleingeschrieben) </li> + <li><code>on</code> oder <code>sentences</code>: Der erste Buchstabe jedes Satzes wird zu einem großgeschriebenen Buchstaben transformiert. Die restlichen Buchstaben werden kleingeschrieben.</li> + <li><code>words</code>: Der erste Buchstabe jedes Wortes wird zu einem großgeschriebenen Buchstaben transformiert. Die restlichen Buchstaben werden kleingeschrieben.</li> + <li><code>characters</code>: Alle Buchstaben sind automatisch großgeschrieben. </li> +</ul> + +<p>Das <code>autocapitalize</code> Attribut hat keine Auswirkungen auf das Verhalten eines physikalischen Keyboards beim Tippen. Aber es hat Auswirkungen auf das Verhalten von anderen Input Mechanismen, wie virtuellen Keyboards auf Mobilfunkgeräten oder Sprachinput. Diese Mechanismen helfen Nutzern oft dabei, den ersten Buchstaben eines Satzes automatisch großzuschreiben. Das <code>autocapitalize</code> Attribut ermöglicht es Autoren dieses Verhalten auf einer per-Element Basis nicht zu berücksichtigen.</p> + +<p>Das <code>autocapitalize</code> Attribut führt nie zu automatischer Großschreibung bei einem {{HTMLElement("input")}} Element mit einem {{htmlattrxref("type", "input")}} Attribut, dessen Wert <code>url</code>, <code>email</code>, oder <code>password</code> ist.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#autocapitalization", "autocapitalize")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + + + +<p>{{Compat("html.global_attributes.autocapitalize")}}</p> diff --git a/files/de/web/html/globale_attribute/class/index.html b/files/de/web/html/globale_attribute/class/index.html new file mode 100644 index 0000000000..cf2366a55f --- /dev/null +++ b/files/de/web/html/globale_attribute/class/index.html @@ -0,0 +1,109 @@ +--- +title: class +slug: Web/HTML/Globale_Attribute/class +tags: + - Klassen Globale Attribute +translation_of: Web/HTML/Global_attributes/class +--- +<p class="note">{{HTMLSidebar("Global_attributes")}}</p> + +<p>Das <a href="/en-US/docs/Web/HTML/Global_attributes">Globale Attribut</a> <strong>class</strong> ist eine durch Leerzeichen separierte Liste von Klassen dieses Elements. Klassen erlauben es CSS und Javascript auf spezifische Elemente über <a href="/En/CSS/Class_selectors">Klassenselektoren</a> oder DOM-Methoden {{domxref("document.getElementsByClassName")}} zuzugreifen.</p> + +<p>Obwohl die Spezifikation keine Anforderung an die Benennung von Klassen stellt, sollten Webentwickler darauf achten, dass der semantische Zweck des Elements beschrieben wird, und gerade nicht die Darstellungseigenschaften.</p> + +<p>Beispiel:<br> + Attribut <em>hervorgehoben</em> , um einen hervorgehobenen Textteil zu beschreiben aber nicht als <em>italics</em>.</p> + +<p>"Semantische" Namen bleiben logisch (zutreffend), auch wenn sich die Darstellung der Webseite ändert (wenn also z.B. Hervorhebungen anstatt <em>kursiv</em> nun farbig in braun dargestellt werden).</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Bemerkung</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "elements.html#classes", "class")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Keine Änderungen zum letzten Snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "elements.html#classes", "class")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot von {{SpecName('HTML WHATWG')}}, keine Änderung zu {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "elements.html#classes", "class")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot von {{SpecName('HTML WHATWG')}}. Von {{SpecName('HTML4.01')}}, <strong>class</strong> ist jetzt ein echtes Globales Attribut.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', "struct/global.html#h-7.5.2", "class")}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Unterstützt alle Elemente außer {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }} [1]</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }} [1]</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <strong>class</strong> ist ein echtes Globales Attribut erst seit Firefox 32.</p> + +<h2 id="Weiterführende_Links">Weiterführende Links</h2> + +<ul> + <li>All <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</li> +</ul> diff --git a/files/de/web/html/globale_attribute/contenteditable/index.html b/files/de/web/html/globale_attribute/contenteditable/index.html new file mode 100644 index 0000000000..916eaf2073 --- /dev/null +++ b/files/de/web/html/globale_attribute/contenteditable/index.html @@ -0,0 +1,114 @@ +--- +title: contenteditable +slug: Web/HTML/Globale_Attribute/contenteditable +tags: + - Globale Attribute + - HTML + - Referenz + - Textbearbeitung + - Texteingabe + - contenteditable +translation_of: Web/HTML/Global_attributes/contenteditable +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>Das <a href="/de/docs/Web/HTML/Globale_Attribute">globale Attribut</a> <code><strong>contenteditable</strong></code> ist ein Aufzählungsattribut, das angibt, ob das Element für den Benutzer bearbeitbar sein soll. Das Attribut muss eines der folgenden Werte annehmen:</p> + +<ul> + <li><code>true</code> oder eine <em>leere Zeichenkette</em> geben an, dass das Element editierbar sein soll;</li> + <li><code>false</code> gibt an, dass das Element nicht editierbar sein darf..</li> +</ul> + +<p>Wenn das Attribut nicht gesetzt ist, wird der Standardwert vom Elternelement <em>geerbt</em>.</p> + +<p>Das Attribut ist ein <em>Aufzählungs-</em> und kein <em>Boolean</em>-Attribut. Das bedeutet, dass eines der Werte <code>true</code>, <code>false</code> oder die leere Zeichenkette erforderlich sind und eine abgekürzte Schreibweise wie <code><label contenteditable>Example Label</label></code> nicht erlaubt ist. Die richtige Verwendung ist <code><label contenteditable="true">Example Label</label></code>.</p> + +<p>Die Farbe der {{Glossary("caret", "Texteinfügemarke")}} kann mit der CSS-Eigenschaft {{cssxref("caret-color")}} gesetzt werden.</p> + +<h2 id="Spezifikation">Spezifikation</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "editing.html#attr-contenteditable", "contenteditable")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Keine Änderung seit letztem Snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#attr-contenteditable", "contenteditable")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot von {{SpecName('HTML WHATWG')}}, keine Änderung seit {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "editing.html#attr-contenteditable", "contenteditable")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot von {{SpecName('HTML WHATWG')}}, ursprüngliche Definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{ CompatibilityTable }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatGeckoDesktop("1.9") }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatGeckoMobile("1.9") }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/Guide/HTML/Content_Editable">Inhalt bearbeitbar machen</a></li> + <li><a href="/de/docs/Web/HTML/Globale_Attribute">Globale Attribute</a></li> + <li>{{domxref("HTMLElement.contentEditable")}} and {{domxref("HTMLElement.isContentEditable")}}</li> + <li>The CSS {{cssxref("caret-color")}} property</li> +</ul> diff --git a/files/de/web/html/globale_attribute/dir/index.html b/files/de/web/html/globale_attribute/dir/index.html new file mode 100644 index 0000000000..28ed6389ac --- /dev/null +++ b/files/de/web/html/globale_attribute/dir/index.html @@ -0,0 +1,85 @@ +--- +title: dir +slug: Web/HTML/Globale_Attribute/dir +tags: + - Globales Attribut + - HTML + - Referenz + - Textrichtung +translation_of: Web/HTML/Global_attributes/dir +--- +<p>{{HTMLSidebar("Global_attributes")}}</p> + +<p>Das globale Attribut <strong>dir</strong> ist ein Attribut, das die Richtung des Elementtextes angibt. Es kann folgende Werte haben:</p> + +<ul> + <li><code>ltr</code>, von <strong>links nach rechts</strong> (englisch: <em>left to right</em>). Wird für Sprachen, die von links nach rechts geschrieben werden (z.B. deutsch) verwendet;</li> + <li><code>rtl</code>, von <strong>rechts nach links</strong> (englisch: <em>right to left</em>). Wird für Sprachen, die von rechts nach links geschrieben werden (z.B. arabisch) verwendet;</li> + <li><code>auto</code>, lässt den Browser des Nutzers entscheiden. Es benutzt einen simplen Algorithmus, indem es die Zeichen im Element einliest, bis es ein Zeichen mit einer bekannten Richtung findet und dann diese Richtung auf das gesamte Element anwendet.</li> +</ul> + +<div class="note"> +<p><strong>Nutzungsinformationen</strong></p> + +<p>Dieses Attribut ist verpflichtend für das {{ HTMLElement("bdo") }}-Element, bei dem es eine andere Bedeutung hat.</p> + +<ul> + <li> + <p>Dieses Attribut wird nicht vom {{ HTMLElement("bdi") }}-Element geerbt. Sein Standardwert ist <code>auto</code>.</p> + </li> + <li> + <p>Dieses Attribut kann von den CSS-Eigenschaften {{ cssxref("direction") }} and {{ cssxref("unicode-bidi") }} überschrieben werden, sofern eine CSS-Seite eingebunden ist und das Element diese Eigenschaften unterstützt.</p> + </li> + <li> + <p>Da die Richtung eines Textes sprachlich zu seinem Inhalt und nicht zu seiner Darstellung gehört, ist es zu empfehlen, dass Web-Entwickler - sofern möglich - dieses Attribut anstatt der zugehörigen CSS-Eigenschaft zu verwenden. So kann der Text auch in einem Browser, der die CSS-Eigenschaften nicht unterstützt oder in dem CSS deaktiviert ist, korrekt dargestellt werden.</p> + </li> + <li> + <p>Der <code>auto</code> Wert sollte für Daten mit einer unbekannten Richtung verwendet werden, wie zum Beispiel Daten aus Benutzereingaben, möglicherweise in einer Datenbank gespeichert.</p> + </li> +</ul> +</div> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#the-dir-attribute", "dir")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-dir-attribute", "dir")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-dir-attribute", "dir")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', "dirlang.html#h-8.2", "dir")}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + + + +<p>{{Compat("html.global_attributes.dir")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Alle <a href="/de-DE/docs/Web/HTML/Global_attributes">globalen Attribute</a>.</li> + <li>{{domxref("HTMLElement.dir")}}, das auf dieses Attribut zurückgreift</li> +</ul> diff --git a/files/de/web/html/globale_attribute/draggable/index.html b/files/de/web/html/globale_attribute/draggable/index.html new file mode 100644 index 0000000000..3a0dfd105e --- /dev/null +++ b/files/de/web/html/globale_attribute/draggable/index.html @@ -0,0 +1,104 @@ +--- +title: draggable +slug: Web/HTML/Globale_Attribute/draggable +tags: + - Experimental + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/draggable +--- +<p>{{HTMLSidebar("Global_attributes")}} {{SeeCompatTable}}</p> + +<p>Das globale Attribut <strong>draggable</strong> ist ein Attribut, dass zeigt, ob das entsprechende Element auf einen anderen Ort gezogen werden kann. Es unterstützt die {{domxref("HTML_Drag_and_Drop_API","HTML Drag and Drop API")}}. Folgende Werte sind erlaubt:</p> + +<ul> + <li><span style="font-family: courier new;">true</span>, das Element kann <em>gedraggt</em> werden</li> + <li><span style="font-family: courier new;">false</span>, das Element kann nicht <em>gedraggt </em>werden</li> +</ul> + +<p>Wurde das Attribut nicht gesetzt, wird als Wert <code>auto</code> angenommen. Das Drag-Verhalten des Elements wird dann durch den Browser bestimmt. </p> + +<p>Bei diesem Attribut handelt es sich nicht um einen <em>booleschen </em>Wert, <code>true</code> oder <code>false</code> muss explizit angegeben werden. Eine Kurzform wie beispielsweise <code><label draggable>Beispiel Label</label></code> ist nicht zulässig. Die korrekte Verwendung ist <code><label draggable="true">Beispiel Label</label></code>.</p> + +<p>Nativ kann das Attribut <strong>draggable </strong>nur für Textauswahl, Bilder und Links verwendet werden. Bei allen anderen Elementen muss das<strong> {{domxref('GlobalEventHandlers.ondragstart','ondragstart')}}</strong><code><strong>-</strong></code>Event gesetzt werden, um Drag & Drop Mechanismen verwendet zu können. <a href="/en-US/docs/DragDrop/Drag_Operations">Dieses Beispiel</a> (englisch) enthält eine ausführlichere Beschreibung der Drag & Drop API und deren Verwendung. </p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#the-draggable-attribute", "draggable")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Keine Änderung seit dem letztem Snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#the-draggable-attribute", "draggable")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot von {{SpecName('HTML WHATWG')}}, initiale Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Eigenschaft</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundlegende Funktionalität</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("1.8.1") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Eigenschaft</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Funktionalität</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoMobile("1.8.1") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Alle <a href="de/docs/Web/HTML/Globale_Attribute">globalen Attribute</a>.</li> +</ul> diff --git a/files/de/web/html/globale_attribute/dropzone/index.html b/files/de/web/html/globale_attribute/dropzone/index.html new file mode 100644 index 0000000000..4d0667217f --- /dev/null +++ b/files/de/web/html/globale_attribute/dropzone/index.html @@ -0,0 +1,45 @@ +--- +title: dropzone +slug: Web/HTML/Globale_Attribute/dropzone +tags: + - Experimentell +translation_of: Web/HTML/Global_attributes/dropzone +--- +<p class="note">{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}</p> + +<p>Das <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">globale Attribut</a> <strong>dropzone</strong> ist ein Attribut, das anzeigt, welche Arten von Inhalt auf dem Element abgelegt werden können. Es wird die <a href="/En/DragDrop/Drag_and_Drop" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;" title="https://developer.mozilla.org/En/DragDrop/Drag_and_Drop">Drag and Drop API</a> verwendet. Es kann folgende Werte enthalten:</p> + +<ul> + <li><code><span style="font-family: courier new;">copy</span></code>, was anzeigt, dass eine Kopie vom abgelegten Element erstellt wird.</li> + <li><code><span style="font-family: courier new;">move</span></code>, was anzeigt, dass das abgelegte Element an diese neue Stelle verschoben wird.</li> + <li><code><span style="font-family: courier new;">link</span></code>, was einen Link auf das abgelegte Element erzeugt.</li> +</ul> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Auszug von {{SpecName('HTML WHATWG')}}, der ursprünglichen Definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{Compat("html.global_attributes.dropzone")}}</p> + +<div id="compat-mobile"> </div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Alle <a href="/en-US/docs/Web/HTML/Global_attributes">globalen Attribute</a>.</li> +</ul> diff --git a/files/de/web/html/globale_attribute/hidden/index.html b/files/de/web/html/globale_attribute/hidden/index.html new file mode 100644 index 0000000000..f78b025ca1 --- /dev/null +++ b/files/de/web/html/globale_attribute/hidden/index.html @@ -0,0 +1,56 @@ +--- +title: hidden +slug: Web/HTML/Globale_Attribute/hidden +tags: + - Attribut + - Globales Attribut + - HTML + - Reference + - Referenz +translation_of: Web/HTML/Global_attributes/hidden +--- +<p class="note">{{HTMLSidebar("Global_attributes")}}</p> + +<p>Das <a href="/en-US/docs/Web/HTML/Global_attributes">globale Attribut</a> <strong>hidden </strong>ist ein boolesches Attribut welches angibt, dass das Element nicht oder nicht länger <em>relevant</em> ist. Zum Beispiel, kann es benutzt werden, um Elemente einer Seite zu verstecken, die nicht benötigt werden, wenn ein Anmeldeprozess erfolgreich durchgeführt wurde. Der Browser wird solche Elemente nicht anzeigen.</p> + +<p>Dieses Attribut soll nicht benutzt werden, um Inhalt zu verstecken, der rechtmäßig angzeigt werden könnte. Zum Beispiel sollte es nicht benutzt werden, um Seiten eines Tabelleninterface zu verstecken. Dies ist eine Gestaltungsfrage.</p> + +<p>Versteckte Elemente sollten nicht mit sichtbaren Elementen verlinkt sein. Elemente, die von versteckten Elementen abstammen, sind trotzdem aktiv, was bedeutet, dass Skript-Elemente immer noch ausgeführt und Form-Elemente gesendet werden können.</p> + +<div class="note"> +<p><strong>Bemerkung:</strong> Das Abändern des Wertes der CSS {{cssxref("display")}} Eigenschaft eines Elementes mit dem <code>hidden</code> Attribut überschreibt das Verhalten. Also wird ein Element mit Style <code>display: flex</code> angezeigt, egal ob das <code>hidden</code> Attribut gesetzt ist oder nicht.</p> +</div> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Bemerkung</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#the-hidden-attribute", "hidden")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Keine Änderung seit letztem Snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "hidden")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot von {{SpecName('HTML WHATWG')}}, initiale Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("html.global_attributes.hidden")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Alle <a href="/en-US/docs/Web/HTML/Global_attributes">globalen Attribute</a>.</li> +</ul> diff --git a/files/de/web/html/globale_attribute/id/index.html b/files/de/web/html/globale_attribute/id/index.html new file mode 100644 index 0000000000..6e1ef85aad --- /dev/null +++ b/files/de/web/html/globale_attribute/id/index.html @@ -0,0 +1,109 @@ +--- +title: id +slug: Web/HTML/Globale_Attribute/id +translation_of: Web/HTML/Global_attributes/id +--- +<p class="note">{{HTMLSidebar("Global_attributes")}}</p> + +<p>Das <strong>id</strong> <a href="/en-US/docs/Web/HTML/Global_attributes">globale Attribut</a> definiert einen eindeutigen Bezeichner (ID) welcher eindeutig im gesamten Dokument sein muss. Das Ziel ist die Identifizierung eines Elementes in Verknüpfungen (durch einen Fragmentbezeichner), Skripting, oder Stylisierung (mit CSS).</p> + +<p>Der Wert des Attributes ist eine undurchsichtige Zeichenkette: dies bedeutet, dass der Webautor es nicht benutzen darf um Informationen abzuleiten. Bestimmte Bedeutung, zum Beispiel bedeutungsspezifische Eigenschaften, dürfen nicht von der Zeichenkette abgeleitet sein.</p> + +<p>Der Attributwert darf keine Leerzeichen enthalten. Browsers treat non-conforming IDs that contains white spaces as if the white space is part of the ID. In contrast to the <strong>class</strong> attribute, which allows space-separated values, elements can only have one single ID defined through the <strong>id</strong> attribute. Note that an element may have several IDs, but the others should be set by another means, such as via a script interfacing with the DOM interface of the element.</p> + +<div class="note"> +<p><strong>Note:</strong> Using characters except ASCII letters and digits, <code>'_'</code>, <code>'-'</code> and <code>'.'</code> may cause compatibility problems, as they weren't allowed in HTML 4. Though this restriction has been lifted in HTML 5, an ID should start with a letter for compatibility.</p> +</div> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#the-id-attribute", "id")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-id-attribute", "id")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-id-attribute", "id")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, now accept <code>'_'</code>, <code>'-'</code> and <code>'.'</code> if not at the beginning fo the id. It is also a true global attribute.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#adef-id', 'id')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown }}[1]</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown }}[1]</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <strong>class</strong> is a true global attribute only since Firefox 32.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>All <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</li> + <li>{{domxref("Element.id")}} that reflects this attribute.</li> +</ul> diff --git a/files/de/web/html/globale_attribute/index.html b/files/de/web/html/globale_attribute/index.html new file mode 100644 index 0000000000..59b8f1d2aa --- /dev/null +++ b/files/de/web/html/globale_attribute/index.html @@ -0,0 +1,205 @@ +--- +title: Globale Attribute +slug: Web/HTML/Globale_Attribute +tags: + - Attribute + - HTML + - Reference + - Web +translation_of: Web/HTML/Global_attributes +--- +<h3 id="HTMLSidebarGlobal_attributes">{{HTMLSidebar("Global_attributes")}}</h3> + +<p><strong>Globale Attribute</strong> sind Attribute die alle HTML Elemente gemeinsam haben; Sie können auf alle Elemente angewendet werden, auch wenn Sie auf einige Elemente keinen Effekt haben.</p> + +<p>Globale Attribute können für alle <a href="https://developer.mozilla.org/de/docs/Web/HTML/Element">HTML Elemente</a> festgelegt werden, <em>auch für jene die nicht im Standard verankert sind</em>. Das bedeutet, dass auch nicht standardgemäße Elemente diese Attribute erlauben müssen, auch wenn dadurch das Dokument nicht mehr HTML5-konform ist. Zum Beispiel verstecken HTML5-konforme Browser Inhalte wie <code><foo hidden>...</foo></code>, obwohl <code><foo></code> kein gültiges HTML Element ist.</p> + +<p>Zusätzlich zu den grundlegenden globalen HTML Attributen, gibt es noch die folgenden globalen Attribute:</p> + +<ul> + <li>{{HTMLAttrDef("xml:lang")}} und {{HTMLAttrDef("xml:base")}} — Diese sind von der XHTML-Spezifikation abgeleitet und veraltet und gibt es nur noch aus Kompatibilitätsgründen.</li> + <li>Mehrere <code><strong><a href="/de/docs/Web/Barrierefreiheit/ARIA">aria-*</a></strong></code> Attribute, benutzt für bessere Barrierefreiheit.</li> + <li>Die <a href="/de/docs/Web/Guide/Events/Event_handlers">Event Handler</a> Attribute: <code><strong>onabort</strong></code>, <code><strong>onautocomplete</strong></code>, <code><strong>onautocompleteerror</strong></code>, <code><strong>onblur</strong></code>, <code><strong>oncancel</strong></code>, <code><strong>oncanplay</strong></code>, <code><strong>oncanplaythrough</strong></code>, <code><strong>onchange</strong></code>, <code><strong>onclick</strong></code>, <code><strong>onclose</strong></code>, <code><strong>oncontextmenu</strong></code>, <code><strong>oncuechange</strong></code>, <code><strong>ondblclick</strong></code>, <code><strong>ondrag</strong></code>, <code><strong>ondragend</strong></code>, <code><strong>ondragenter</strong></code>, <code><strong>ondragexit</strong></code>, <code><strong>ondragleave</strong></code>, <code><strong>ondragover</strong></code>, <code><strong>ondragstart</strong></code>, <code><strong>ondrop</strong></code>, <code><strong>ondurationchange</strong></code>, <code><strong>onemptied</strong></code>, <code><strong>onended</strong></code>, <code><strong>onerror</strong></code>, <code><strong>onfocus</strong></code>, <code><strong>oninput</strong></code>, <code><strong>oninvalid</strong></code>, <code><strong>onkeydown</strong></code>, <code><strong>onkeypress</strong></code>, <code><strong>onkeyup</strong></code>, <code><strong>onload</strong></code>, <code><strong>onloadeddata</strong></code>, <code><strong>onloadedmetadata</strong></code>, <code><strong>onloadstart</strong></code>, <code><strong>onmousedown</strong></code>, <code><strong>onmouseenter</strong></code>, <code><strong>onmouseleave</strong></code>, <code><strong>onmousemove</strong></code>, <code><strong>onmouseout</strong></code>, <code><strong>onmouseover</strong></code>, <code><strong>onmouseup</strong></code>, <code><strong>onmousewheel</strong></code>, <code><strong>onpause</strong></code>, <code><strong>onplay</strong></code>, <code><strong>onplaying</strong></code>, <code><strong>onprogress</strong></code>, <code><strong>onratechange</strong></code>, <code><strong>onreset</strong></code>, <code><strong>onresize</strong></code>, <code><strong>onscroll</strong></code>, <code><strong>onseeked</strong></code>, <code><strong>onseeking</strong></code>, <code><strong>onselect</strong></code>, <code><strong>onshow</strong></code>, <code><strong>onsort</strong></code>, <code><strong>onstalled</strong></code>, <code><strong>onsubmit</strong></code>, <code><strong>onsuspend</strong></code>, <code><strong>ontimeupdate</strong></code>, <code><strong>ontoggle</strong></code>, <code><strong>onvolumechange</strong></code>, <code><strong>onwaiting</strong></code>.</li> +</ul> + +<h2 id="Liste_globaler_Attribute">Liste globaler Attribute</h2> + +<dl> + <dt><a href="/de/docs/Web/HTML/Globale_Attribute/accesskey">{{HTMLAttrDef("accesskey")}}</a></dt> + <dd>Bietet einen Hinweis zum Generieren eines Tastenkürzels für das aktuelle Element. Dieses Attribut besteht aus einer durch Leerzeichen getrennten Liste von Zeichen. Der Browser sollte das Erste verwenden, welches auf der Computertastatur vorhanden ist.</dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/autocapitalize">{{HTMLAttrDef("autocapitalize")}}</a></dt> + <dd>Steuert, ob und wie Texteingaben automatisch großgeschrieben werden, wenn sie vom Benutzer eingegeben / bearbeitet werden. Es kann folgende Werte annehmen: + <ul> + <li><code>off</code> oder <code>none</code>, keine automatische Großschreibung wird angewendet (alle Buchstaben sind kleingeschrieben)</li> + <li><code>on</code> oder <code>sentences</code>, der erste Buchstabe jedes Satzes ist standardmäßig ein Großbuchstabe; alle weiteren Buchstaben sind standardmäßig kleingeschrieben</li> + <li><code>words</code>, der erste Buchstabe jedes Wortes ist standardmäßig ein Großbuchstabe; alle weiteren Buchstaben sind standardmäßig kleingeschrieben</li> + <li><code>characters</code>, alle Buchstaben werden standardmäßig großgeschrieben.</li> + </ul> + </dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/class">{{HTMLAttrDef("class")}}</a></dt> + <dd>Eine durch Leerzeichen getrennte Liste der Klassen des Elements. Mit Klassen können CSS und JavaScript über die <a href="/de/docs/Web/CSS/Klassenselektoren">Klassenselektoren</a> bestimmte Elemente, oder Funktionen wie die Methode {{DOMxRef("Document.getElementsByClassName()")}} auswählen und darauf zugreifen.</dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/contenteditable">{{HTMLAttrDef("contenteditable")}}</a></dt> +</dl> + +<p>Ein Aufzählungsattribut das angibt, ob das Element für den Benutzer bearbeitbar sein soll. Das Attribut muss einen der folgenden Werte annehmen:</p> + +<ul> + <li><code>true</code> oder eine <em>leere Zeichenkette</em> geben an, das Element editierbar sein soll;</li> + <li><code>false</code> gibt an, dass das Element nicht editierbar sein darf.</li> +</ul> + +<dl> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/contextmenu">{{HTMLAttrDef("contextmenu")}}</a></dt> + <dd>Die <code><a href="#attr-id"><strong>id</strong></a></code> von einem {{HTMLElement("menu")}} welches als Kontextmenu für das Element benutzt werden soll.</dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/data-*">{{HTMLAttrDef("data-*")}}</a></dt> + <dd>Diese Attributklasse erlaubt es Daten zwischen <a href="/en-US/docs/Web/HTML" title="en/HTML">HTML</a> und <a href="/en-US/docs/DOM" title="en/DOM">DOM</a> auszutauschen und auch mit Skripten darauf zuzugreifen. Diese Daten sind in dem jeweiligen {{DOMxRef("HTMLElement")}} gespeichert und können über {{DOMxRef("HTMLElement.dataset")}} ausgelesen oder geändert werden.</dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/dir">{{HTMLAttrDef("dir")}}</a></dt> + <dd>Ein Aufzählungsattribut das die Richtung des Elementtextes angibt. Es kann folgende Werte haben: + <ul> + <li><code>ltr</code>, von <strong>links nach rechts</strong> (englisch: <em>left to right</em>). Wird für Sprachen, die von links nach rechts geschrieben werden (z.B. deutsch) verwendet;</li> + <li><code>rtl</code>, von <strong>rechts nach links</strong> (englisch: <em>right to left</em>). Wird für Sprachen, die von rechts nach links geschrieben werden (z.B. arabisch) verwendet;</li> + <li><code>auto</code>, lässt den Browser des Nutzers entscheiden. Es benutzt einen simplen Algorithmus, indem es die Zeichen im Element einliest, bis es ein Zeichen mit einer bekannten Richtung findet und dann diese Richtung auf das gesamte Element anwendet.</li> + </ul> + </dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/draggable">{{HTMLAttrDef("draggable")}}</a></dt> + <dd>Ein Aufzählungsattribut das zeigt, ob das entsprechende Element auf einen anderen Ort gezogen werden kann. Es unterstützt die <a href="https://developer.mozilla.org/de/docs/Web/API/HTML_Drag_and_Drop_API" rel="nofollow" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben. Bitte überlege, mitzuwirken!"><code>HTML Drag and Drop API</code></a>. Folgende Werte sind erlaubt: + <ul> + <li><code>true</code>, das Element kann <em>gedraggt</em> werden.</li> + <li><code>false</code>, das Element kann nicht <em>gedraggt </em>werden.</li> + </ul> + </dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/dropzone">{{HTMLAttrDef("dropzone")}}</a> {{Experimental_Inline}}</dt> + <dd>Ein Aufzählungsattribut das anzeigt, welche Arten von Inhalt auf dem Element abgelegt werden können. Es wird die <a href="https://developer.mozilla.org/En/DragDrop/Drag_and_Drop" title="https://developer.mozilla.org/En/DragDrop/Drag_and_Drop">Drag and Drop API</a> verwendet. Es kann folgende Werte annehmen: + <ul> + <li><code>copy</code>, was anzeigt, dass eine Kopie vom abgelegten Element erstellt wird.</li> + <li><code>move</code>, was anzeigt, dass das abgelegte Element an diese neue Stelle verschoben wird.</li> + <li><code>link</code>, was einen Link auf das abgelegte Element erzeugt.</li> + </ul> + </dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/exportparts">{{HTMLAttrDef("exportparts")}}</a> {{Experimental_Inline}}</dt> + <dd>Used to transitively export shadow parts from a nested shadow tree into a containing light tree.</dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/hidden">{{HTMLAttrDef("hidden")}}</a></dt> + <dd>A Boolean attribute indicates that the element is not yet, or is no longer, <em>relevant</em>. For example, it can be used to hide elements of the page that can't be used until the login process has been completed. The browser won't render such elements. This attribute must not be used to hide content that could legitimately be shown.</dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/id">{{HTMLAttrDef("id")}}</a></dt> + <dd>Defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).</dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/inputmode">{{HTMLAttrDef("inputmode")}}</a></dt> + <dd>Provides a hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents. Used primarily on {{HTMLElement("input")}} elements, but is usable on any element while in {{HTMLAttrxRef("contenteditable")}} mode.</dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/is">{{HTMLAttrDef("is")}}</a></dt> + <dd>Allows you to specify that a standard HTML element should behave like a registered custom built-in element (see <a href="/en-US/docs/Web/Web_Components/Using_custom_elements">Using custom elements</a> for more details).</dd> +</dl> + +<div class="note"> +<p><strong>Note: </strong>The <code>item*</code> attributes are part of the <a class="external" href="https://html.spec.whatwg.org/multipage/microdata.html#microdata">WHATWG HTML Microdata feature</a>.</p> +</div> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemid">{{HTMLAttrDef("itemid")}}</a></dt> + <dd>The unique, global identifier of an item.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemprop">{{HTMLAttrDef("itemprop")}}</a></dt> + <dd>Used to add properties to an item. Every HTML element may have an <code>itemprop</code> attribute specified, where an <code>itemprop</code> consists of a name and value pair.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemref">{{HTMLAttrDef("itemref")}}</a></dt> + <dd>Properties that are not descendants of an element with the <code>itemscope</code> attribute can be associated with the item using an <code>itemref</code>. It provides a list of element ids (not <code>itemid</code>s) with additional properties elsewhere in the document.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemscope">{{HTMLAttrDef("itemscope")}}</a></dt> + <dd><code>itemscope</code> (usually) works along with {{HTMLAttrxRef("itemtype")}} to specify that the HTML contained in a block is about a particular item. <code>itemscope</code> creates the Item and defines the scope of the <code>itemtype</code> associated with it. <code>itemtype</code> is a valid URL of a vocabulary (such as <a href="https://schema.org/">schema.org</a>) that describes the item and its properties context.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemtype">{{HTMLAttrDef("itemtype")}}</a></dt> + <dd>Specifies the URL of the vocabulary that will be used to define <code>itemprop</code>s (item properties) in the data structure. {{HTMLAttrxRef("itemscope")}} is used to set the scope of where in the data structure the vocabulary set by <code>itemtype</code> will be active.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang">{{HTMLAttrDef("lang")}}</a></dt> + <dd>Helps define the language of an element: the language that non-editable elements are in, or the language that editable elements should be written in by the user. The attribute contains one “language tag” (made of hyphen-separated “language subtags”) in the format defined in <a href="https://www.ietf.org/rfc/bcp/bcp47.txt"><em>Tags for Identifying Languages (BCP47)</em></a>. <a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute$edit#attr-xml:lang"><strong>xml:lang</strong></a> has priority over it.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part">{{HTMLAttrDef("part")}}</a> {{Experimental_Inline}}</dt> + <dd>A space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the {{CSSxRef("::part()")}} pseudo-element.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot">{{HTMLAttrDef("slot")}}</a></dt> + <dd>Assigns a slot in a <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a> shadow tree to an element: An element with a <code>slot</code>attribute is assigned to the slot created by the {{HTMLElement("slot")}} element whose {{HTMLAttrxRef("name", "slot")}} attribute's value matches that <code>slot</code> attribute's value.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck">{{HTMLAttrDef("spellcheck")}}</a> {{Experimental_Inline}}</dt> + <dd>An enumerated attribute defines whether the element may be checked for spelling errors. It may have the following values: + <ul> + <li><code>true</code>, which indicates that the element should be, if possible, checked for spelling errors;</li> + <li><code>false</code>, which indicates that the element should not be checked for spelling errors.</li> + </ul> + </dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/style">{{HTMLAttrDef("style")}}</a></dt> + <dd>Contains <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> styling declarations to be applied to the element. Note that it is recommended for styles to be defined in a separate file or files. This attribute and the {{HTMLElement("style")}} element have mainly the purpose of allowing for quick styling, for example for testing purposes.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex">{{HTMLAttrDef("tabindex")}}</a></dt> + <dd>An integer attribute indicating if the element can take input focus (is <em>focusable</em>), if it should participate to sequential keyboard navigation, and if so, at what position. It can take several values: + <ul> + <li>a <em>negative value</em> means that the element should be focusable, but should not be reachable via sequential keyboard navigation;</li> + <li><code>0</code> means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the platform convention;</li> + <li>a <em>positive value</em> means that the element should be focusable and reachable via sequential keyboard navigation; the order in which the elements are focused is the increasing value of the <a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute$edit#attr-tabindex"><strong>tabindex</strong></a>. If several elements share the same tabindex, their relative order follows their relative positions in the document.</li> + </ul> + </dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title">{{HTMLAttrDef("title")}}</a></dt> + <dd>Contains a text representing advisory information related to the element it belongs to. Such information can typically, but not necessarily, be presented to the user as a tooltip.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/translate">{{HTMLAttrDef("translate")}}</a> {{Experimental_Inline}}</dt> + <dd>An enumerated attribute that is used to specify whether an element's attribute values and the values of its {{DOMxRef("Text")}} node children are to be translated when the page is localized, or whether to leave them unchanged. It can have the following values: + <ul> + <li>empty string and <code>"yes"</code>, which indicates that the element will be translated.</li> + <li><code>"no"</code>, which indicates that the element will not be translated.</li> + </ul> + </dd> + <dd> + <h2 id="Specifications">Specifications</h2> + + <table> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("CSS Shadow Parts", "#exposing")}}</td> + <td>{{Spec2("CSS Shadow parts")}}</td> + <td>Added the <code>part</code> and <code>exportparts</code> global attributes.</td> + </tr> + <tr> + <td>{{SpecName("HTML5.3", "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2("HTML5.3")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5.2", "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2("HTML5.2")}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. From {{SpecName("HTML5.1")}}, <code>itemid</code>, <code>itemprop</code>, <code>itemref</code>, <code>itemscope</code>, and <code>itemtype</code> have been added.</td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. From {{SpecName("HTML5 W3C")}}, <code>contextmenu</code>, <code>draggable</code>, <code>dropzone</code>, and <code>spellcheck</code> have been added.</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. From {{SpecName("HTML4.01")}}, the concept of global attributes is introduced and the <code>dir</code>, <code>lang</code>, <code>style</code>, <code>id</code>, <code>class</code>, <code>tabindex</code>, <code>accesskey</code>, and <code>title</code> are now true global attributes.<br> + <code>xml:lang</code> which was initially part of XHTML, is now also part of HTML.<br> + <code>hidden</code>, <code>data-*</code>, <code>contenteditable</code>, and <code>translate</code> have been added.</td> + </tr> + <tr> + <td>{{SpecName("HTML4.01")}}</td> + <td>{{Spec2("HTML4.01")}}</td> + <td>There are no global attributes defined. Several attributes that will become global attributes in subsequent specifications are defined on a subset of elements.<br> + <code>class</code> and <code>style</code> are supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.<br> + <code>dir</code> is supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.<br> + <code>id</code> is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.<br> + <code>lang</code> is supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.<br> + <code>tabindex</code> is only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.<br> + <code>accesskey</code> is only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} and {{HTMLElement("textarea")}}.<br> + <code>title</code> is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, and {{HTMLElement("title")}}.</td> + </tr> + </tbody> + </table> + + <h2 id="Browser_compatibility">Browser compatibility</h2> + + <p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + + <p>{{Compat("html.global_attributes")}}</p> + + <h2 id="See_also">See also</h2> + {{DOMxRef("Element")}} and {{DOMxRef("GlobalEventHandlers")}} interfaces that allow to query most global attributes.</dd> +</dl> diff --git a/files/de/web/html/globale_attribute/inputmode/index.html b/files/de/web/html/globale_attribute/inputmode/index.html new file mode 100644 index 0000000000..d5dd048922 --- /dev/null +++ b/files/de/web/html/globale_attribute/inputmode/index.html @@ -0,0 +1,76 @@ +--- +title: inputmode +slug: Web/HTML/Globale_Attribute/inputmode +tags: + - Attribute + - Bearbeiten + - Eingabemodus + - Formulare + - Globale Attribute + - HTML + - Referenz + - Text + - Texteingabe + - Web + - global +translation_of: Web/HTML/Global_attributes/inputmode +--- +<p><span class="seoSummary">Das <strong><code>inputmode</code></strong> <a href="/en-US/docs/Web/HTML/Global_attributes">globale Attribut</a> </span>ist ein aufgezähltes Attribut, das einen Hinweis auf die Art der Daten liefert, die der Benutzer während der Bearbeitung des Elements oder seines Inhalts eingeben kann. Es kann die folgenden Werte haben:</p> + +<dl> + <dt><code>"none"</code></dt> + <dd>Keine virtuelle Tastatur; dies ist nützlich, wenn die Anwendung oder die Website ihre eigene Tastatureingabesteuerung implementiert.</dd> + <dt><code>"text"</code></dt> + <dd>Standard-Text-Eingabetastatur für das aktuelle Gebietsschema des Benutzers.</dd> + <dt><code>"decimal"</code></dt> + <dd>Fraktionierte numerische Eingabetastatur, die die Ziffern und das entsprechende Trennzeichen für das Gebietsschema des Benutzers enthält (typischerweise entweder "." oder ",").</dd> + <dt><code>"numeric"</code></dt> + <dd>Numerische Eingabetastatur; alles, was benötigt wird, sind die Ziffern 0 bis 9.</dd> + <dt><code>"tel"</code></dt> + <dd>Eine Telefontastatur-Eingabe, die die Ziffern 0 bis 9, das Sternchen ("*") und die Pfund-Taste ("#") enthält. Für Formulareingaben, die eine Telefontastatur erfordern, sollte stattdessen <code><a href="/en-US/docs/Web/HTML/Element/input/tel"><input type="tel"></a></code> verwendet werden.</dd> + <dt><code>"search"</code></dt> + <dd>Eine virtuelle Tastatur, die für die Sucheingabe optimiert ist. So kann beispielsweise die Eingabetaste in "Suchen" umbenannt werden, und es kann weitere Optimierungen geben.</dd> + <dt><code>"email"</code></dt> + <dd>Eine virtuelle Tastatur, die für die Eingabe von E-Mail-Adressen optimiert ist; typischerweise beinhaltet dies das Zeichen "@" sowie andere Optimierungen. Für Formulareingaben, die eine Eingabe der E-Mail-Adresse erfordern, sollte stattdessen <code><a href="/en-US/docs/Web/HTML/Element/input/email"><input type="email"></a></code> verwendet werden.</dd> + <dt><code>"url"</code></dt> + <dd>Eine Tastatur, die für die Eingabe von URLs optimiert ist. Dies kann z.B. dazu führen, dass die Taste "/" prominenter verfügbar ist. Erweiterte Funktionen können auch den Zugriff auf die Historie und dergleichen beinhalten. Für Formulareingaben, die eine URL anfordern, sollte stattdessen <code><a href="/en-US/docs/Web/HTML/Element/input/url"><input type="url"></a></code> verwendet werden.</dd> +</dl> + +<p>Wenn dieses Attribut nicht gesetzt ist, lautet sein Standardwert <code>"text"</code>, was darauf hinweist, dass die Standard-Text-Eingabetastatur des Gebietsschemas verwendet werden sollte.</p> + +<div class="warning"> +<p><strong>Spezifischer Konflikt:</strong> Das <a href="https://html.spec.whatwg.org/multipage/interaction.html#attr-inputmode">WHATWG spec lists <code>inputmode</code></a>, und moderne Browser arbeiten daran, sie zu unterstützen. Das <a href="https://www.w3.org/TR/html52/index.html#contents">W3C HTML 5.2 spec</a> listet es nicht mehr (markiert es als veraltet). Sie sollten die WHATWG-Definition als richtig betrachten, bis ein Konsens erreicht ist.</p> +</div> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Bemerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "interaction.html#input-modalities:-the-inputmode-attribute", "inputmode")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + + + +<p>{{Compat("html.global_attributes.inputmode")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Alle <a href="/en-US/docs/Web/HTML/Global_attributes">globalen Attribute</a>.</li> +</ul> + +<div>{{HTMLSidebar("Global_attributes")}}</div> diff --git a/files/de/web/html/globale_attribute/is/index.html b/files/de/web/html/globale_attribute/is/index.html new file mode 100644 index 0000000000..ff888d1002 --- /dev/null +++ b/files/de/web/html/globale_attribute/is/index.html @@ -0,0 +1,62 @@ +--- +title: is +slug: Web/HTML/Globale_Attribute/is +translation_of: Web/HTML/Global_attributes/is +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary">The <strong><code>is</code></strong> <a href="/en-US/docs/Web/HTML/Global_attributes">global attribute</a> allows you to specify that a standard HTML element should behave like a defined custom built-in element (see <a href="/en-US/docs/Web/Web_Components/Using_custom_elements">Using custom elements</a> for more details).</span></p> + +<p>This attribute can only be used if the specified custom element name has been successfully <a href="/en-US/docs/Web/API/CustomElementRegistry/define">defined</a> in the current document, and extends the element type it is being applied to.</p> + +<h2 id="Examples">Examples</h2> + +<p>The following code is taken from our <a href="https://github.com/mdn/web-components-examples/tree/master/word-count-web-component">word-count-web-component</a> example (<a href="https://mdn.github.io/web-components-examples/word-count-web-component/">see it live also</a>).</p> + +<pre class="brush: js">// Create a class for the element +class WordCount extends HTMLParagraphElement { + constructor() { + // Always call super first in constructor + super(); + + // Constructor contents ommitted for brevity + ... + + } +} + +// Define the new element +customElements.define('word-count', WordCount, { extends: 'p' });</pre> + +<pre class="brush: html"><p is="word-count"></p></pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "custom-elements.html#attr-is", "is")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.global_attributes.is")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>All <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</li> +</ul> diff --git a/files/de/web/html/globale_attribute/kontextmenu/index.html b/files/de/web/html/globale_attribute/kontextmenu/index.html new file mode 100644 index 0000000000..33c1cc2e99 --- /dev/null +++ b/files/de/web/html/globale_attribute/kontextmenu/index.html @@ -0,0 +1,169 @@ +--- +title: Kontextmenü +slug: Web/HTML/Globale_Attribute/kontextmenu +tags: + - Globale Attribute + - HTML + - Kontextmenü + - Referenz +translation_of: Web/HTML/Global_attributes/contextmenu +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<div class="warning"> +<p>Das <a href="https://html.spec.whatwg.org/multipage/obsolete.html#attr-contextmenu">contextmenu Attrbut ist obsolet</a> und die Unterstützung wird aus allen Browsern entfernt werden.</p> +</div> + +<p>Das <a href="/en-US/docs/Web/HTML/Global_attributes">globale Attribut </a><code><strong>contextmenu</strong></code> ist die <a href="/en-US/docs/Web/HTML/Global_attributes/id"><strong>id</strong></a> von einem {{HTMLElement("menu")}}, welches als Kontextmenü benutzt werden soll.</p> + +<p>Ein <em>Kontextmenü</em> ist ein Menü, dass nach einer Interaktion des Benutzers erscheint. HTML5 erlaubt nun, dieses Menü anzupassen. Hier sind ein paar Beispiele, inklusive verschachtelter Menüs.</p> + +<h2 id="Beispiel">Beispiel</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush:html; highlight:[1,10,15]"><body contextmenu="share"> + <menu type="context" id="share"> + <menu label="share"> + <menuitem label="Twitter" onclick="shareViaTwitter()"></menuitem> + <menuitem label="Facebook" onclick="shareViaFacebook()"></menuitem> + </menu> + </menu> + <ol> + <li> + Überall in diesem Beispiel kannst du die Seite über das Kontextmenü auf Twitter und Facebook teilen. + </li> + <li contextmenu="changeFont" id="fontSizing"> + In diesem besonderen Listen-Element kannst du die Schriftgröße eines + Textes über das Kontextmenü vergrößern und verkleinern. + </li> + <menu type="context" id="changeFont"> + <menuitem label="Schrift vergrößern" onclick="incFont()"></menuitem> + <menuitem label="Schrift verkleinern" onclick="decFont()"></menuitem> + </menu> + <li contextmenu="ChangeImage" id="changeImage"> + Auf dem unteren Bild kannst du die Option + "Wechsele Bild" im Kontextmenü auswählen.<br /> + <img src="https://developer.mozilla.org/media/img/promote/promobutton_mdn5.png" + contextmenu="ChangeImage" id="promoButton" /> + <menu type="context" id="ChangeImage"> + <menuitem label="Wechsele Bild" onclick="changeImage()"></menuitem> + </menu> + </li> + </ol> +</body> +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush:js">function shareViaTwitter() { + window.open("https://twitter.com/intent/tweet?text=" + + "Hurray! I am learning ContextMenu from MDN via Mozilla"); +} + +function shareViaFacebook() { + window.open("https://facebook.com/sharer/sharer.php?u=" + + "https://developer.mozilla.org/en/HTML/Element/Using_HTML_context_menus"); +} + +function incFont() { + document.getElementById("fontSizing").style.fontSize = "larger"; +} + +function decFont() { + document.getElementById("fontSizing").style.fontSize = "smaller"; +} + +function changeImage() { + var index = Math.ceil(Math.random() * 39 + 1); + document.images[0].src = + "https://developer.mozilla.org/media/img/promote/promobutton_mdn" + + index + ".png"; +}</pre> + +<h3 id="Ergebnis">Ergebnis</h3> + +<p>{{EmbedLiveSample("Beispiel", "100%", 400)}}</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "forms.html#attr-contextmenu", "contextmenu")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Keine Änderungen seit dem letzten Snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "interactive-elements.html#context-menus", "contextmenu")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot von {{SpecName('HTML WHATWG')}}, initiale Definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatGeckoDesktop(9)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(20)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Eine experimentelle Implementation war zwischenzeitlich mit der Kommandozeilen-Option <code>--enable-blink-features=ContextMenu</code> verfügbar. Bis Chrome 52 und Opera 39 war diese außerdem durch Aktivieren der Option <em>Experimental Web Platform</em> verfügbar, welche aber aufgrund eines Kompatibilitätsproblems entfernt wurde. Dies ist dokumentiert in <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=87553">Chromium bug 87553</a>.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Alle <a href="/en-US/docs/Web/HTML/Global_attributes">globalen Attribute</a></li> + <li>{{domxref("HTMLElement.contextMenu")}}</li> +</ul> diff --git a/files/de/web/html/globale_attribute/lang/index.html b/files/de/web/html/globale_attribute/lang/index.html new file mode 100644 index 0000000000..705dfa4396 --- /dev/null +++ b/files/de/web/html/globale_attribute/lang/index.html @@ -0,0 +1,60 @@ +--- +title: lang +slug: Web/HTML/Globale_Attribute/lang +tags: + - Attribute + - HTML + - Referenz + - Sprachen + - global +translation_of: Web/HTML/Global_attributes/lang +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>Das globale Attribut <strong>lang</strong> <a href="/en-US/docs/Web/HTML/Global_attributes">global attribute</a> wird verwendet, um die Sprache eines Elementes oder die zu verwendene Sprache für zu bearbeitende Elemente festzulegen. Dieses Attribut enthält nur einen Wert, der der Richtlinie "<a class="external" href="http://www.ietf.org/rfc/bcp/bcp47.txt"><em>Tags for Identifying Languages (BCP47)</em></a>" entspricht. Wenn kein Wert festgelegt wurde, wird automatisch <em>unkn</em><em>own</em> als Sprache festgelegt; Nach BCP47 ungültige Werte werden als <em>invalid</em> behandelt.</p> + +<p>Auch wenn ein Wert für das <strong>lang</strong>-Attribut vergeben wurde, kann es vorkommen, dass es nicht beachtet wird, weil ein <a href="/en-US/docs/Web/HTML/Global_attributes/xml:lang"><strong>xml:lang</strong></a>-Attribut immer priorisiert wird.</p> + +<p>Für die CSS-Klasse {{cssxref(":lang")}} gilt, dass zwei ungültige Werte getrennt von einander behandelt werden, wenn sich ihr Name unterscheidet. (Wenn Sie dies nicht verstehen, lesen Sie bitte den englischen Originalartikel.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikiation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Keine Veränderungen zur letzten Version, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Version von {{SpecName('HTML WHATWG')}}, Keine Veränderungen zu {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Version von {{SpecName('HTML WHATWG')}}, Verhalten bei <code>xml:lang</code> und vorbestimmten Sprachgen durch einen Algorithmus festgelegt. Ebenfalls ein echtes globales Attribut.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/dirlang.html#h-8.1', 'lang')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Unterstützt alle Elemente außer diesen: {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{Compat("html.global_attributes.lang")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Alle <a href="/en-US/docs/Web/HTML/Global_attributes">globalen Attribute</a>.</li> +</ul> diff --git a/files/de/web/html/globale_attribute/style/index.html b/files/de/web/html/globale_attribute/style/index.html new file mode 100644 index 0000000000..7c3c2b5c77 --- /dev/null +++ b/files/de/web/html/globale_attribute/style/index.html @@ -0,0 +1,107 @@ +--- +title: style +slug: Web/HTML/Globale_Attribute/style +translation_of: Web/HTML/Global_attributes/style +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>Das <a href="/en-US/docs/Web/HTML/Global_attributes">globale Attribut</a> <strong>style</strong> kann <a href="/en-US/docs/Web/CSS">CSS</a>-Stilvorschriften für das entsprechende Element enthalten. Bitte beachten Sie, dass eine Auslagerung der Stilvorschriften in eine externe CSS-Datei vorzuziehen sind! Dieses Attribut und das {{HTMLElement("style")}}-Element haben den großen Vorteil, schnell ein paar Stilvorschriften festzulegen, zum Beispiel um etwas nur kurz zu testen.</p> + +<div class="note"> +<p><strong>Verwendung: </strong>Dieses Attribut sollte nicht für inhaltliche Informationen genutzt werden. Wenn alle Stilvorschriften entfernt wurden, soll die Seite dennoch inhaltlich korrekt bleiben. Deshalb sollte es auch nicht zum Verstecken von irrelevanten Informationen genutzt werden, dieses Ziel verfolgt man am besten mit dem <strong><a href="#attr-hidden">hidden</a>-</strong>Attribut.</p> +</div> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#the-style-attribute", "style")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Keine Änderungen seit der letzten Version {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-style-attribute", "style")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Version {{SpecName('HTML WHATWG')}}, keine Ändeurngen zur Version {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-style-attribute", "style")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Version {{SpecName('HTML WHATWG')}}. Seit {{SpecName("HTML4.01")}} ist es nun ein globales Attribut</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/styles.html#h-14.2.2', 'style')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Unterstützt alle Elemente außer {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, und {{HTMLElement("title")}}.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Style", "", "")}}</td> + <td>{{Spec2("CSS3 Style")}}</td> + <td>Definiert den Inhalt des <code>style</code>-Attributes.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funktion</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>grundlegende Unterstützung</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funktion</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>grundlegende Unterstützung</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Weitere_Informationen">Weitere Informationen</h2> + +<ul> + <li>Alle <a href="/en-US/docs/Web/HTML/Global_attributes">globalen Attribute</a>.</li> +</ul> diff --git a/files/de/web/html/globale_attribute/tabindex/index.html b/files/de/web/html/globale_attribute/tabindex/index.html new file mode 100644 index 0000000000..e097cc7985 --- /dev/null +++ b/files/de/web/html/globale_attribute/tabindex/index.html @@ -0,0 +1,130 @@ +--- +title: tabindex +slug: Web/HTML/Globale_Attribute/tabindex +tags: + - Accessibility + - Global attributes + - HTML + - Reference + - a11y +translation_of: Web/HTML/Global_attributes/tabindex +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary">Das <a href="/en-US/docs/Web/HTML/Global_attributes">Globale Attribut</a> <strong><code>tabindex</code></strong> gibt an, ob sein Element fokussiert werden kann, ob und an welcher Stelle es an der sequentiellen Tastaturnavigation beteiligt ist (normalerweise mit der Tabulatortaste, daher der Name).</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-tabindex.html","tabbed-standard")}}</div> + +<p class="hidden">Die Quelle für dieses interaktive Beispiel wird in einem GitHub-Repository gespeichert. Wenn du am interaktiven Beispielprojekt mitarbeiten möchtest, klone bitte <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a>und sende uns eine Pull-Anfrage.</p> + +<p>Es akzeptiert einen Integer als Wert der zu unterschiedlichen Ergebnissen führt, abhängig von diesen Werten:</p> + +<ul> + <li> + <p>Ein<em> negativer Wert </em>(normalerweise <code>tabindex="-1"</code>) bedeutet, dass das Element fokussierbar, jedoch nicht durch die sequenzielle Tastaturnavigation erreichbar sein sollte. Er ist meistens hilfreich um barrierefreie Widgets mit JavaScript zu erstellen.</p> + </li> + <li> + <div class="note"> + <p>Dies ist hilfreich, wenn Inhalte außerhalb des Bildschirms vorhanden sind, welche zu einem bestimmten Ereignis in Erscheinung treten. Es ist nicht möglich ein Element mit der Tastatur zu fokussieren, das einen negativen <code>tabindex</code> hat. Jedoch ist es möglich, es mittels der <code>focus()</code> <a href="/en-US/docs/Web/API/HTMLElement/focus">Methode</a> aufzurufen.</p> + </div> + + + </li> +</ul> + +<div class="note"></div> + +<ul> + <li> + <p><code>tabindex="0"</code> bedeutet, dass das Element mittels der sequenziellen Tastaturnavigation fokussierbar ist, wobei die Aufrufreihenfolge von der Quellreihenfolge des Dokuments definiert ist</p> + </li> + <li> + <div class="warning"> + <p>Die CSS-Positionierung <strong>wirkt sich nicht</strong> auf die Tab-Reihenfolge aus. Es wird sich nur die visuelle Reihenfolge der Elemente ändern. Tab-Reihenfolge entspricht der Quellreihenfolge!<em> </em></p> + </div> + + + </li> +</ul> + +<div class="warning"></div> + +<ul> + <li> + <p>Ein <em>positiver Wert</em> bedeutet, dass das Element in der sequenziellen Tastaturnavigation fokussierbar sein kann, wobei seine Reihenfolge durch den Wert der Zahl definiert wird. <code>tabindex="4"</code> würde also vor <code>tabindex="5"</code>, aber nach <code>tabindex="3"</code> fokussiert werden. Wenn mehrere Elemente den gleichen positiven <code>tabindex</code>-Wert haben, folgt ihre Reihenfolge relativ zu ihrer Position in der Dokumentquelle.</p> + + <div class="warning"> + <p>Vermeiden Sie die Verwendung von <code>tabindex</code>-Werten größer als 0. Dies erschwert es Benutzern, die auf assistive Technologie angewiesen sind, durch Seiteninhalte zu Navigieren und sie zu Bedienen.</p> + </div> + </li> +</ul> + +<div class="note"> +<p>Es wird nicht empfohlen, den Elementen positive Werte zu geben. Am Ende springt der Fokus zwischen den Elementen und es wird verwirrend, die <code>tabindex</code>-Attributwerte einzelner Elemente zu manipulieren. Empfehlenswert ist, sie in einer geeigneten DOM-Sequenz zu schreiben.</p> +</div> + +<p>Wenn das <code>tabindex</code>-Attribut für ein {{htmlelement ("div")}} festgelegt wird, kann der untergeordnete Inhalt nicht mit den Pfeiltasten gescrollt werden. Außer, der <code>tabindex</code> wurde für den Inhalt festgelegt. <a href="https://jsfiddle.net/jainakshay/0b2q4Lgv/">Folgendes fiddle hilft beim Verstehen der Scrolleffekte des <code>tabindex</code></a>.</p> + +<div class="note"> +<p><strong>Hinweis:</strong> Der maximale Wert für <code>tabindex</code> ist 32767. Wenn er nicht spezifiziert ist, wird der Standardwert von 0 angenommen.</p> +</div> + +<h2 id="Bedenken_zur_Barrierefreiheit">Bedenken zur Barrierefreiheit</h2> + + + +<p>Vermeiden Sie die Verwendung des <code>tabindex</code>-Attributs in Verbindung mit <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Interactive_content">nichtinteraktiven Inhalten</a>, um Elemente durch die Tastatureingabe interaktiv fokussierbar zu machen, wie etwa zum Beispiel die Verwendung eines {{HTMLElement ("div")}} Elements, um eine Schaltfläche zu erzeugen, anstelle des {{HTMLElement ("button")}} Elements.</p> + +<p>Interaktive Komponenten, die mit nichtinteraktiven Elementen erstellt wurden, gelangen nicht in der <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">accessibility tree</a> für Eingabehilfen aufgeführt. Dadurch wird verhindert, dass assistive Technologien zu ihnen navigieren und sie manipulieren können. Der Inhalt sollte semantisch mit interaktiven Elementen ({{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}, etc.) beschrieben werden. Diese Elemente verfügen über integrierte Rollen und Zustände, die den Status der Zugänglichkeit mitteilen, die andernfalls durch <a href="/en-US/docs/Web/Accessibility/ARIA">ARIA</a> verwaltet werden müsste.</p> + +<ul> + <li><a href="https://developer.paciellogroup.com/blog/2014/08/using-the-tabindex-attribute/">Verwenden des tabindex Attributs | The Paciello Group</a></li> +</ul> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#attr-tabindex", "tabindex")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#the-tabindex-attribute", "tabindex")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "editing.html#attr-tabindex", "tabindex")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, the attribute is now supported on all elements (global attributes).</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#adef-tabindex', 'tabindex')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("html.global_attributes.tabindex")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Alle <a href="/en-US/docs/Web/HTML/Global_attributes">globalen Attribute</a></li> + <li>{{domxref("HTMLElement.tabIndex")}} das dieses Attribut widerspiegelt</li> + <li>Accessibility-Probleme mit tabindex: siehe <a href="http://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html">Don’t Use Tabindex Greater than 0</a> von Adrian Roselli</li> +</ul> diff --git a/files/de/web/html/globale_attribute/title/index.html b/files/de/web/html/globale_attribute/title/index.html new file mode 100644 index 0000000000..2d94d0202c --- /dev/null +++ b/files/de/web/html/globale_attribute/title/index.html @@ -0,0 +1,164 @@ +--- +title: title +slug: Web/HTML/Globale_Attribute/title +tags: + - Globales Attribut + - HTML + - Referenz + - Referenzen +translation_of: Web/HTML/Global_attributes/title +--- +<p>{{HTMLSidebar("Global_attributes")}}</p> + +<p>Der <strong>title</strong> <a href="/en-US/docs/Web/HTML/Global_attributes">globales Attribut</a> beinhaltet einen Text mit Informationen über das Element zu welchem es gehört. Diese Informationen werden dem Benutzer üblicherweise (aber nicht nur) als Tooltip angezeigt. Hier sind einige typische Beispiele für dieses Attribut:</p> + +<ul> + <li>Link: Der Titel oder die Beschreibung des verlinkten Dokuments</li> + <li>Media Elemente, (z.B.: ein Bild): eine Beschreibung oder Quellenangabe</li> + <li>Paragraph: eine Fusszeile oder ein Kommentar über den Paragraphen</li> + <li>Zitate: Informationen über den Autor, usw.</li> +</ul> + +<p>Wenn dieses Attribut weggelassen wird, ist das <code>title</code> Attribut des nächsten Vorgängers des Elements gültig (und kann somit als Tooltip für das Element verwendet werden). Wenn das Attribut als leerer String gesetzt wird, wird das <code>title</code> Attribut des Vorgängers explizit außer Kraft gesetzt (und sollte nicht als Tooltip für das Element verwendet werden).</p> + +<p>Zusätzliche Semantics sind für die <code>title</code> Attribute der {{ HTMLElement("link") }}, {{ HTMLElement("abbr") }}, {{ HTMLElement("input") }} und {{ HTMLElement("menuitem") }} Elemente definiert.</p> + +<p>Das <code>title</code> Attribut darf Mehrzeilig sein. Jede eingefügte <code>U+000A LINE FEED</code> (<code>LF</code>) repräsentiert eine solche newline. Aber Achtung! Dies bedeutet, dass:</p> + +<pre class="brush: html"><p>Newlines in title should be taken into account,like this <abbr title="This is a +multiline title">example</abbr>.</p> +</pre> + +<p>einen zweizeiligen Titel definiert.</p> + +<h2 id="Bedenken_bezüglich_des_barrierefreien_Internet">Bedenken bezüglich des barrierefreien Internet</h2> + +<p>Die Nutzung des <code>title</code> Attributs ist sehr problematisch für:</p> + +<ul> + <li>Menschen, die nur Berührungsgeräte benutzen</li> + <li>Menschen, die das Internet nur mit dem Keyboard navigieren</li> + <li>Menschen, die mit unterstützenden Technologien wie einem Bildschirmleser auf das Internet zugreifen</li> + <li>Menschen mit Beeinträchtigungen in der Feinmotorik</li> + <li>Menschen mit kognitiven Bedenken</li> +</ul> + +<p>Dies kann besonders auf inkonsistenten Browser Support zurückgeführt werden. Dies ist des Weiteren ein Problem, da unterstützende Technologien zu mehr Komplexität beim Browser-Rendering der Seite führen. Falls ein Tooltip Effekt gewollt sein sollte, ist es besser eine der folgenden Browsermethoden zu benutzen.</p> + +<p> </p> + +<ul> + <li><a href="https://www.w3.org/TR/html/dom.html#the-title-attribute">3.2.5.1. The title attribute | W3C HTML 5.2: 3. Semantics, structure, and APIs of HTML documents</a></li> + <li><a href="https://developer.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/">Using the HTML title attribute – updated | The Paciello Group</a></li> + <li><a href="https://inclusive-components.design/tooltips-toggletips/">Tooltips & Toggletips - Inclusive Components</a></li> +</ul> + +<p> </p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "elements.html#the-title-attribute", "title")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-title-attribute", "title")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-title-attribute", "title")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, it is now a true global attribute.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#adef-title', 'title')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, and {{HTMLElement("title")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>Multi-line support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{CompatGeckoDesktop(12)}}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>Multi-line support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(12)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Alle <a href="/en-US/docs/Web/HTML/Global_attributes">globalen Attribute</a>.</li> + <li>{{domxref("HTMLElement.title")}} welches dieses Attribut reflektiert</li> +</ul> diff --git a/files/de/web/html/globale_attribute/translate/index.html b/files/de/web/html/globale_attribute/translate/index.html new file mode 100644 index 0000000000..5cf914afb3 --- /dev/null +++ b/files/de/web/html/globale_attribute/translate/index.html @@ -0,0 +1,30 @@ +--- +title: Übersetztung in Deutsch +slug: Web/HTML/Globale_Attribute/translate +tags: + - DE von LV + - Editor's. + - Everyone + - Experimental-De + - HTML-DE + - german +translation_of: Web/HTML/Global_attributes/translate +--- +<p>Anerkannte englische (US) Version:</p> + +<p> {{HTMLSidebar ("Global_attributes")}}</p> + +<p> Das Attribut translate global ist ein Aufzählungsattribut, mit dem angegeben wird, ob die übersetzbaren Attributwerte eines Elements und die untergeordneten Knoten {{domxref ("Text")}} beim Lokalisieren der Seite übersetzt werden sollen oder ob sie unverändert bleiben sollen. Es kann folgende Werte annehmen:</p> + +<ul> + <li> leere Zeichenfolge oder "Ja", die angibt, dass das Element übersetzt werden soll, wenn die Seite lokalisiert wird.</li> + <li> "no" gibt an, dass das Element nicht übersetzt werden darf.</li> +</ul> + +<p> Obwohl nicht alle Browser dieses Attribut erkennen, wird es von automatischen Übersetzungssystemen wie Google Translate und möglicherweise auch von Tools, die von menschlichen Übersetzern verwendet werden, respektiert. Aus diesem Grund ist es wichtig, dass Webautoren dieses Attribut verwenden, um Inhalte zu markieren, die nicht übersetzt werden</p> + +<p>Verwenden des Übersetzungsattributs von HTML.</p> + +<p>Tags übersetzen Kategorisieren Sie den Artikel. Dadurch wird der Artikel unter den richtigen Filtern in der Suchmaschine auffindbar.</p> + +<p>DE German, HTML-DE, Experimental-De, Everyone, Editor's..Github. L. v</p> diff --git a/files/de/web/html/html5/html5_element_list/index.html b/files/de/web/html/html5/html5_element_list/index.html new file mode 100644 index 0000000000..44cfd7a6ac --- /dev/null +++ b/files/de/web/html/html5/html5_element_list/index.html @@ -0,0 +1,586 @@ +--- +title: Liste der HTML5-Elemente +slug: Web/HTML/HTML5/HTML5_element_list +translation_of: Web/HTML/Element +--- +<p>Auf dieser Seite finden Sie eine Liste aller <strong>Standard HTML5-Elemente</strong>, beschrieben durch ihr öffnendes Tag, nach Funktion gruppiert. Diese Liste enthält ausschließlich die gültigen HTML5-Elemente. In neuen Websites sollten nur die hier aufgezählten Tags verwendet werden. Eine komplette Liste aller HTML-Elemente finden Sie im <a href="/en-US/docs/HTML/Element" title="/en-US/docs/HTML/Element">Index aller HTML-Elemente</a>. Dieser enthält sämtliche möglichen Tags: standardisierte, nicht-standardkonforme, gültige, obsolete und als veraltet ("deprecated") betrachtete.</p> + +<p>Das Symbol <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a> steht für ein in HTML5 neu hinzugekommenes Element. Beachten Sie, dass andere hier aufgeführte Elemente in der HTML5-Spezifikation möglicherweise verändert oder erweitert wurden.</p> + +<h2 id="Das_Wurzelelement" style="">Das Wurzelelement</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Tag</th> + <th scope="col">Beschreibung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ HTMLElement("html") }}</td> + <td><span style="line-height: 21px;">Steht für den Wurzelknoten eines HTML- oder XHTML-Dokuments. Alle weiteren Elemente müssen Nachkommen dieses Elements sein.</span></td> + </tr> + </tbody> +</table> + +<h2 id="Metadaten_des_Dokuments">Metadaten des Dokuments</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Tag</th> + <th scope="col">Beschreibung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ HTMLElement("head") }}</td> + <td><span style="line-height: 21px;">Bezeichnet eine Sammlung von Metadaten des Dokuments. Hierzu gehören auch Links zu oder Definitionen von Skripts und Stylesheets.</span></td> + </tr> + <tr> + <td>{{ HTMLElement("title") }}</td> + <td><span style="line-height: 21px;">Definiert den Titel eines Dokuments, der in der Titelzeile des Browsers im Tab der betreffenden Seite angezeigt wird. Darf ausschließlich Text enthalten. Eventuell enthaltene Tags werden nicht interpretiert.</span></td> + </tr> + <tr> + <td>{{ HTMLElement("base") }}</td> + <td>Definiert den Basis-URL für in der Seite verwendete relative URLs.</td> + </tr> + <tr> + <td>{{ HTMLElement("link") }}</td> + <td>Wird verwendet, um externe JavaScript- und CSS-Dateien in das aktuelle HTML-Dokument einzubinden.</td> + </tr> + <tr> + <td>{{ HTMLElement("meta") }}</td> + <td>Wird für die Definition von Metadaten verwenden, die mit keinem anderen HTML-Element definiert werden können.</td> + </tr> + <tr> + <td>{{ HTMLElement("style") }}</td> + <td>Tag für die Definition eines internen CSS-Stylesheets.</td> + </tr> + </tbody> +</table> + +<h2 id="Skripting">Skripting</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Tag</th> + <th scope="col">Beschreibung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ HTMLElement("script") }}</td> + <td>Definiert entweder ein internes Skript oder einen Link auf ein externes Skript. Als Programmiersprache wird JavaScript verwendet.</td> + </tr> + <tr> + <td>{{ HTMLElement("noscript") }}</td> + <td>Definiert alternative Inhalte, die angezeigt werden sollen, wenn der Browser kein Skripting unterstützt.</td> + </tr> + </tbody> +</table> + +<h2 id="Abschnitte_(Sections)">Abschnitte (Sections)</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Tag</th> + <th scope="col">Beschreibung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ HTMLElement("body") }}</td> + <td> + <div>Steht für den Hauptinhalt eines HTML-Dokuments. Jedes Dokument kann nur ein <code><body></code>-Element enthalten.</div> + </td> + </tr> + <tr> + <td>{{ HTMLElement("section") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td> + <td>Beschreibt einen Abschnitt eines Dokuments.</td> + </tr> + <tr> + <td>{{ HTMLElement("nav") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td> + <td>Beschreibt einen Abschnitt der ausschließlich Navigationslinks enthält.</td> + </tr> + <tr> + <td>{{ HTMLElement("article") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td> + <td>Beschreibt eigenständigen Inhalt, der unabhängig von den übrigen Inhalten sein kann.</td> + </tr> + <tr> + <td>{{ HTMLElement("aside") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td> + <td>Steht für eine Randbemerkung. Der übrige Inhalt sollte auch verständlich sein, wenn dieses Element entfernt wird.</td> + </tr> + <tr> + <td><a href="/en/HTML/Element/Heading_Elements" title="Elementy blokowe"><code><h1>,<h2>,<h3>,<h4>,<h5>,<h6></code></a></td> + <td>Hiermit werden Überschriften definiert. Es gibt sechs verschiedene Hierarchieebenen, wobei <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;"><h1></span><br> + für die Hauptüberschrift steht und <code style="font-size: 14px; color: rgb(51, 51, 51);"><h6></code> für eine Überschrift der untersten Ebene. Eine Überschrift beschreibt knapp das Thema des Abschnitts, dem sie voransteht.</td> + </tr> + <tr> + <td>{{ HTMLElement("header") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td> + <td>Definiert den Kopfteil ("header") einer Seite oder eines Abschnitts. Er enthält oft ein Logo, den Titel der Website und die Seitennavigation.</td> + </tr> + <tr> + <td>{{ HTMLElement("footer") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td> + <td>Definiert den Fußteil ("footer") einer Seite oder eines Abschnitts. Er enthält oft Copyright-Hinweise, einen Link auf das Impressum oder Kontaktadressen.</td> + </tr> + <tr> + <td>{{ HTMLElement("address") }}</td> + <td> + <p>Definiert einen Abschnitt mit Kontaktinformationen.</p> + </td> + </tr> + <tr> + <td>{{ HTMLElement("main") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td> + <td>Definiert den Hauptinhalt der Seite. Es ist nur ein <main> Element pro Seite zulässig.</td> + </tr> + </tbody> +</table> + +<h2 id="Inhalte_gruppieren">Inhalte gruppieren</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Tag</th> + <th scope="col">Beschreibung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ HTMLElement("p") }}</td> + <td>Der Inhalt dieses Elements soll als Absatz dargestellt werden.</td> + </tr> + <tr> + <td>{{ HTMLElement("hr") }}</td> + <td>Bezeichnet einen thematischen Bruch zwischen Absätzen eines Abschnitts, Artikels oder anderem längeren Inhalt.</td> + </tr> + <tr> + <td>{{ HTMLElement("pre") }}</td> + <td>Zeigt an, das der Inhalt dieses Elements vorformatiert ist und das dieses Format erhalten bleiben soll.</td> + </tr> + <tr> + <td>{{ HTMLElement("blockquote") }}</td> + <td>Kennzeichnet ein Zitat.</td> + </tr> + <tr> + <td>{{ HTMLElement("ol") }}</td> + <td>Definiert eine geordnete Liste, bei der die Einträge eine bestimmte Reihenfolge haben müssen.</td> + </tr> + <tr> + <td>{{ HTMLElement("ul") }}</td> + <td>Definiert eine Liste ungeordneter Einträge.</td> + </tr> + <tr> + <td>{{ HTMLElement("li") }}</td> + <td>Kennzeichnet einen Listeneintrag. Diesem wird oftmals ein Aufzählungszeichen ("bullet") vorangestellt.</td> + </tr> + <tr> + <td>{{ HTMLElement("dl") }}</td> + <td>Kennzeichnet eine Definitionsliste aus Begriffen und den dazugehörigen Definitionen.</td> + </tr> + <tr> + <td>{{ HTMLElement("dt") }}</td> + <td>Kennzeichnet einen Begriff der im folgenden <code><dd></code>-Element beschrieben wird.</td> + </tr> + <tr> + <td>{{ HTMLElement("dd") }}</td> + <td>Markiert die Definition des oder der Begriffe, die in den direkt vorangehenden <code style="font-size: 14px; color: rgb(51, 51, 51);"><dt></code>-Element angegeben wurden.</td> + </tr> + <tr> + <td>{{ HTMLElement("figure") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td> + <td>Kennzeichnet eine Abbildung, die einen Teil des Dokuments illustriert.</td> + </tr> + <tr> + <td>{{ HTMLElement("figcaption") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td> + <td>Bezeichnet die Beschriftung einer Abbildung.</td> + </tr> + <tr> + <td>{{ HTMLElement("div") }}</td> + <td>Bezeichnet ein allgemeines Container-Element ohne spezielle semantische Bedeutung. Wird oft zusammen mit <code>class</code>- oder <code>id</code>-Attributen verwendet, um es in Skripts oder Stylesheets auswählen zu können.</td> + </tr> + </tbody> +</table> + +<h2 id="Semantische_Text-Elemente">Semantische Text-Elemente</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Tag</th> + <th scope="col">Beschreibung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ HTMLElement("a") }}</td> + <td>Bezeichnet einen<em>Hyperlink</em> , der auf eine andere Ressource verweist (angegeben durch das <code>href</code>-Attribut).</td> + </tr> + <tr> + <td>{{ HTMLElement("em") }}</td> + <td>Steht für<em>hervorgehobenen</em> Text. </td> + </tr> + <tr> + <td>{{ HTMLElement("strong") }}</td> + <td>Markiert besonders<em>wichtigen</em> (stark hervorgehobenen) Text.</td> + </tr> + <tr> + <td>{{ HTMLElement("small") }}</td> + <td>Steht für das "Kleingedruckte" eines Dokuments, wie Ausschlussklauseln, Copyright-Hinweise oder andere Dinge, die für das Verständnis des Dokuments nicht unbedingt nötig sind.</td> + </tr> + <tr> + <td>{{ HTMLElement("s") }}</td> + <td>Wird für Inhalte verwendet, die<em>nicht länger relevant oder akkurat</em> sind. Wird meist durchgestrichen dargestellt.</td> + </tr> + <tr> + <td>{{ HTMLElement("cite") }}</td> + <td>Steht für den<em>Titel eines Werks.</em></td> + </tr> + <tr> + <td>{{ HTMLElement("q") }}</td> + <td>Bezeichnet ein<em>Kurzzitat</em> . Für längere Zitate sollte <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;"><blockquote></span> verwendet werden.</td> + </tr> + <tr> + <td>{{ HTMLElement("dfn") }}</td> + <td>Steht für einen Begriff, dessen<em>Definition</em> im nächstgelegenen Nachkommen-Element enthalten ist.</td> + </tr> + <tr> + <td>{{ HTMLElement("abbr") }}</td> + <td>Bezeichnet eine<em>Abkürzung</em> oder ein<em>Akronym</em> .</td> + </tr> + <tr> + <td>{{ HTMLElement("data") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td> + <td>Verbindet seinen Inhalt mit einem<em>maschinenlesbaren Equivalent,</em> angegeben im <code>value</code>-Attribut. (Dieses Element wird nur in der WHATWG-Version des HTML-Standards definiert, nicht aber in der W3C-Version von HTML5).</td> + </tr> + <tr> + <td>{{ HTMLElement("time") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td> + <td>Steht für einen Wert, der<em>Datum</em> und<em>Uhrzeit angibt</em> .</td> + </tr> + <tr> + <td>{{ HTMLElement("code") }}</td> + <td>Wird verwendet, um<em>Programmiercode</em> zu markieren.</td> + </tr> + <tr> + <td>{{ HTMLElement("var") }}</td> + <td>Steht für eine<em>Variable.</em> Dies kann ein tatsächlicher mathematischer Ausdruck oder Programmierungskontext sein, ein Identifier für eine Konstante, ein Symbol für eine physikalische Größe, ein Funktionsparameter oder einfach ein Platzhalter.</td> + </tr> + <tr> + <td>{{ HTMLElement("samp") }}</td> + <td>Markiert die<em>Ausgabe</em> eines Programms oder eines Computers.</td> + </tr> + <tr> + <td>{{ HTMLElement("kbd") }}</td> + <td>Steht für eine <em>Benutzereingabe</em>, oftmals, aber nicht unbedingt, auf der Tastatur. Kann auch für andere Eingaben, beispielsweise transkribierte Sprachbefehle stehen.</td> + </tr> + <tr> + <td>{{ HTMLElement("sub") }},{{ HTMLElement("sup") }}</td> + <td>Markiert<em>tiefgestellten</em> , bzw. <em>hochgestellten</em> Text<em>.</em></td> + </tr> + <tr> + <td>{{ HTMLElement("i") }}</td> + <td>Steht für einen Textabschnitt, der <em>vom übrigen Inhalt abgesetzt</em> und <em>üblicherweise kursiv</em> dargestellt wird, ohne für eine spezielle Betonung oder Wichtigkeit zu stehen. Dies kann beispielsweise eine taxonomische Bezeichnung, ein technischer Begriff, ein idiomatischer Ausdruck, ein Gedanke oder der Name eines Schiffes sein.</td> + </tr> + <tr> + <td>{{ HTMLElement("b") }}</td> + <td>Steht für einen Textabschnitt, der <em>vom übrigen Inhalt abgesetzt</em> und <em>üblicherweise fettgedruckt</em> dargestellt wird, ohne für eine spezielle Betonung oder Wichtigkeit zu stehen. Dies kann beispielsweise ein Schlüsselwort oder ein Produktname in einer Produktbewertung sein.</td> + </tr> + <tr> + <td>{{ HTMLElement("u") }}</td> + <td>Steht für einen Textabschnitt, der <em>vom übrigen Inhalt abgesetzt</em> und <em>üblicherweise unterstrichen</em> dargestellt wird, ohne für eine spezielle Betonung oder Wichtigkeit zu stehen. Dies könnte beispielsweise ein Eigenname auf in chinesischer Sprache sein oder ein Textabschnitt, der häufig falsch buchstabiert wird.</td> + </tr> + <tr> + <td>{{ HTMLElement("mark") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td> + <td>Steht für Text, der aus <em>Referenzgründen</em> hervorgehoben wird, d.h. der in anderem Kontext von Bedeutung ist.</td> + </tr> + <tr> + <td>{{ HTMLElement("ruby") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td> + <td> + <p>Bezeichnet einen Textteil mit <em>Ruby-Annotationen</em>. Dies sind kurze Aussprachetipps und andere Hinweise, die hauptsächlich für ostasiatische Typografie verwendet werden.</p> + </td> + </tr> + <tr> + <td>{{ HTMLElement("rt") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td> + <td>Bezeichnet den Text einer <em>Ruby-Annotation</em>.</td> + </tr> + <tr> + <td>{{ HTMLElement("rp") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td> + <td>Wird zusammen mit dem Element <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;"><ruby> </span>verwendet, um Ruby-Text mit Klammern zu umgeben, die angezeigt werden, wenn das Benutzerprogramm (Browser) keine Ruby-Annotationen unterstützt.</td> + </tr> + <tr> + <td>{{ HTMLElement("bdi") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td> + <td>Markiert Text, der vom umgebenden Inhalt zum Zweck der bidirektionalen Formatierung (z.B. arabischer Text innerhalb von deutschsprachigen Inhalten) <em>isoliert</em> werden soll. Hiermit kann ein Textabschnitt mit einer unterschiedlichen oder unbekannten Textrichtung gekennzeichnet werden.</td> + </tr> + <tr> + <td>{{ HTMLElement("bdo") }}</td> + <td>Kann verwendet werden, um die <em>Textrichtung der enthaltenen Kindelemente</em> zu steuern. Hiermit kann der Unicode BiDi-Algorithmus explizit überschrieben werden.</td> + </tr> + <tr> + <td>{{ HTMLElement("span") }}</td> + <td>Markiert einen allgemeinen Textabschnitt. Das <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;"><span>-</span>Element erhält seine Bedeutung meistens durch ein <code>class</code>- oder ein <code>id</code>-Attribut, wodurch es außerdem für Skripte zugänglich ist und von Stylesheets ausgewählt werden kann.</td> + </tr> + <tr> + <td>{{ HTMLElement("br") }}</td> + <td>Bezeichnet einen<em>Zeilenumbruch</em> .</td> + </tr> + <tr> + <td>{{ HTMLElement("wbr") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td> + <td>Hiermit kann die <em>Gelegenheit für einen Zeilenumbruch</em> gekennzeichnet werden, mit dem die Lesbarkeit verbessert werden kann, wenn der Text auf mehrere Zeilen verteilt wird.</td> + </tr> + </tbody> +</table> + +<h2 id="Änderungen_am_Dokument">Änderungen am Dokument</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Tag</th> + <th scope="col">Beschreibung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ HTMLElement("ins") }}</td> + <td>Markiert einen zum Dokument <em>hinzugefügten</em> Teil.</td> + </tr> + <tr> + <td>{{ HTMLElement("del") }}</td> + <td>Markiert einen aus dem Dokument <em>entfernten</em> Teil.</td> + </tr> + </tbody> +</table> + +<h2 id="Eingebettete_Inhalte_(Ersetzte_Elemente)">Eingebettete Inhalte (Ersetzte Elemente)</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Tag</th> + <th scope="col">Beschreibung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ HTMLElement("img") }}</td> + <td>Steht für ein<em>Bild</em> .</td> + </tr> + <tr> + <td>{{ HTMLElement("iframe") }}</td> + <td>Definiert einen so genannten <em>Iframe</em>, mit dem ein HTML-Dokument in seinem eigenen Kontext in das aktuelle Dokument eingebettet werden kann.</td> + </tr> + <tr> + <td>{{ HTMLElement("embed") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td> + <td>Steht für einen <em>Einbindungspunkt</em> für externe Ressourcen. Dies sind typischerweise keine HTML-Inhalte, sondern beispielsweise eine Applikation oder interaktiver Inhalt, der mit Hilfe eines Plugins (anstatt nativ durch das Benutzerprogramms) dargestellt wird.</td> + </tr> + <tr> + <td>{{ HTMLElement("object") }}</td> + <td>Steht für <em>allgemeinen externen Inhalt</em>, der je nach Kontext als Bild, "verschachtelter Browsing-Kontext" (s. <code>iframe</code>), oder externer Inhalt (der mit Hilfe eines Plugins darsgestellt wird) betrachtet wird.</td> + </tr> + <tr> + <td>{{ HTMLElement("param") }}</td> + <td>Definiert <em>Parameter</em> für ein Plugin, das für die Darstellung eines mit <code><object></code> eingebundenen Elements verwendet werden.</td> + </tr> + <tr> + <td>{{ HTMLElement("video") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td> + <td>Steht für eine <em>Videodatei</em> und die dazugehörigen Audiodateien, sowie die für das Abspielen nötigen Kontrollelemente.</td> + </tr> + <tr> + <td>{{ HTMLElement("audio") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td> + <td>Markiert eine <em>Tondatei</em> oder einen <em>Audiostream</em>.</td> + </tr> + <tr> + <td>{{ HTMLElement("source") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td> + <td>Ermöglicht es Autoren, alternative Medienressourcen (z.B. verschiedene Audio- oder Videoformate) für Medienelemente wie <code><video></code> oder <code><audio></code> anzugeben.</td> + </tr> + <tr> + <td>{{ HTMLElement("track") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td> + <td>Hiermit können zusätzliche Medienspuren (z.B. Untertitel) für Elemente wie <code><video></code> oder<em><code><audio></code></em> angegeben werden. </td> + </tr> + <tr> + <td>{{ HTMLElement("canvas") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td> + <td>Steht für einen <em>Bitmap-Bereich</em>, der von Skripts verwendet werden kann, um beispielsweise Diagramme, Spielegraphiken oder andere visuellen Effekte dynamisch darzustellen.</td> + </tr> + <tr> + <td>{{ HTMLElement("map") }}</td> + <td>Definiert in Verbindung mit dem <code><area></code>-Element eine <em>Image Map</em>.</td> + </tr> + <tr> + <td>{{ HTMLElement("area") }}</td> + <td>Definiert in Verbindung mit dem <code><map></code>-Element eine <em>Image Map</em>.</td> + </tr> + <tr> + <td>{{ SVGElement("svg") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td> + <td>Definiert eine eingebettete <em>Vektorgrafik</em>.</td> + </tr> + <tr> + <td>{{ MathMLElement("math") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td> + <td>Markiert eine <em>mathematische Formel</em>.</td> + </tr> + </tbody> +</table> + +<h2 id="Tabellarische_Daten">Tabellarische Daten</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Tag</th> + <th scope="col">Beschreibung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ HTMLElement("table") }}</td> + <td>Markiert eine <em>Tabelle</em>, d.h. Daten mit mehr als einer Dimension.</td> + </tr> + <tr> + <td>{{ HTMLElement("caption") }}</td> + <td>Kennzeichnet die <em>Beschriftung (Titel)</em> einer Tabelle.</td> + </tr> + <tr> + <td>{{ HTMLElement("colgroup") }}</td> + <td>Steht für eine <em>Gruppe</em> aus einer oder mehreren <em>Tabellenspalten</em>.</td> + </tr> + <tr> + <td>{{ HTMLElement("col") }}</td> + <td>Steht für eine <em>Tabellenspalte</em>.</td> + </tr> + <tr> + <td>{{ HTMLElement("tbody") }}</td> + <td>Steht für die Spalten, die die <em>eigentlichen Daten</em> einer Tabelle enthalten.</td> + </tr> + <tr> + <td>{{ HTMLElement("thead") }}</td> + <td>Markiert die Gruppe der Tabellenzeilen, die die <em>Beschriftungen</em> der Tabellenspalten enthalten.</td> + </tr> + <tr> + <td>{{ HTMLElement("tfoot") }}</td> + <td>Markiert die Gruppe der Tabellenzeilen, die die <em>Zusammenfassungen</em> der Tabellenspalten enthalten.</td> + </tr> + <tr> + <td>{{ HTMLElement("tr") }}</td> + <td>Steht für eine <em>Zeile mit Tabellenzellen</em>.</td> + </tr> + <tr> + <td>{{ HTMLElement("td") }}</td> + <td>Kennzeichnet eine einzelne <em>Tabellenzelle</em>.</td> + </tr> + <tr> + <td>{{ HTMLElement("th") }}</td> + <td>Kennzeichnet eine <em>Tabellenzelle mit einer Beschriftung</em>.</td> + </tr> + </tbody> +</table> + +<h2 id="Formulare">Formulare</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Tag</th> + <th scope="col">Beschreibung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ HTMLElement("form") }}</td> + <td>Markiert ein<em>Formular.</em> Formulare bestehen typischerweise aus einer Reihe von Kontrollelementen, deren Werte zur weiteren Verarbeitung an einen Server übertragen werden.</td> + </tr> + <tr> + <td>{{ HTMLElement("fieldset") }}</td> + <td>Steht für eine<em>Gruppe von Kontrollelementen.</em></td> + </tr> + <tr> + <td>{{ HTMLElement("legend") }}</td> + <td>Kennzeichnet eine Beschriftung für ein <code><fieldset></code>-Element.</td> + </tr> + <tr> + <td>{{ HTMLElement("label") }}</td> + <td>Kennzeichnet die <em>Beschriftung</em> für ein Formular-Kontrollelement (z.B. Texteingabefelder).</td> + </tr> + <tr> + <td>{{ HTMLElement("input") }}</td> + <td>Steht für ein <em>Feld für Benutzereingaben</em> eines bestimmten Typs. Der Typ (Radiobutton, Ankreuzfeld, Texteingabe, etc.) wird anhand des <code>type</code>-Attributs angegeben.</td> + </tr> + <tr> + <td>{{ HTMLElement("button") }}</td> + <td>Markiert einen<em>Button</em> .</td> + </tr> + <tr> + <td>{{ HTMLElement("select") }}</td> + <td>Kennzeichnet ein Kontrollelement, mit dem aus einer Reihe von <em>Optionen</em> ausgewählt werden kann.</td> + </tr> + <tr> + <td>{{ HTMLElement("datalist") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td> + <td>Steht für eine Sammlung <em>vordefinierter Optionen für andere Kontrollelemente</em>.</td> + </tr> + <tr> + <td>{{ HTMLElement("optgroup") }}</td> + <td>Steht für eine Reihe logisch gruppierter <em>Auswahloptionen</em>.</td> + </tr> + <tr> + <td>{{ HTMLElement("option") }}</td> + <td>Steht für eine <em>Auswahloption</em> innerhalb eines <code><select></code>-Elements, oder einen Vorschlag innerhalb eines <code><datalist>-</code>Elements.</td> + </tr> + <tr> + <td>{{ HTMLElement("textarea") }}</td> + <td>Markiert ein Element für<em>mehrzeilige Texteingaben</em> .</td> + </tr> + <tr> + <td>{{ HTMLElement("keygen") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td> + <td>Steht für ein Kontrollelement zur Erzeugung eines<em>Paares aus öffentlichem und privaten Schlüssel</em> und zum Versenden des öffentlichen Schlüssels.</td> + </tr> + <tr> + <td>{{ HTMLElement("output") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td> + <td>Markiert das<em>Ergebnis einer Berechnung</em> .</td> + </tr> + <tr> + <td>{{ HTMLElement("progress") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td> + <td>Ein Element zur<em>Fortschrittsanzeige</em> einer bestimmten Aufgabe.</td> + </tr> + <tr> + <td>{{ HTMLElement("meter") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td> + <td>Steht für eine<em>Messskala</em> (oder deren Teilwerte) innerhalb eines bekannten Bereichs.</td> + </tr> + </tbody> +</table> + +<h2 id="Interaktive_Elemente">Interaktive Elemente</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Tag</th> + <th scope="col">Beschreibung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ HTMLElement("details") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td> + <td>Markiert ein Kontrollelement, mit dem der Benutzer<em>zusätzliche Informationen</em> oder Kontrolle erhalten kann.</td> + </tr> + <tr> + <td>{{ HTMLElement("summary") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td> + <td>Kennzeichnet eine<em>Zusammenfassung</em> oder eine<em>Legende</em> für ein bestimmte <code><details></code>-Element.</td> + </tr> + <tr> + <td>{{ HTMLElement("command") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td> + <td>Kennzeichnet einen<em>Befehl</em> , der vom Benutzer aufgerufen werden kann.</td> + </tr> + <tr> + <td>{{ HTMLElement("menu") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td> + <td>Markiert eine<em>Liste mit Befehlen</em> .</td> + </tr> + </tbody> +</table> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/HTML/HTML5" title="/en-US/docs/HTML/HTML5">Eine Reihe von Dokumenten zu HTML5</a>.</li> + <li>Die <a href="/en-US/docs/HTML/Element" title="/en-US/docs/HTML/Element">Referenz aller HTML-Tags</a>, auch Elemente, die in HTML5 nicht mehr gültig sind.</li> + <li>Eine weitere Form, die HTML-Tags darzustellen: Der<a href="http://joshduck.com/periodic-table.html" title="http://joshduck.com/periodic-table.html">"Periodic table of HTML5 elements"</a> von Josh Duck.</li> +</ul> diff --git a/files/de/web/html/html5/index.html b/files/de/web/html/html5/index.html new file mode 100644 index 0000000000..a6f25869e9 --- /dev/null +++ b/files/de/web/html/html5/index.html @@ -0,0 +1,174 @@ +--- +title: HTML5 +slug: Web/HTML/HTML5 +tags: + - HTML + - HTML5 + - References + - Web Development +translation_of: Web/Guide/HTML/HTML5 +--- +<p><span class="seoSummary"><strong>HTML5</strong> ist die aktuellste Entwicklung des Web Standards, der <a href="/en-US/docs/HTML" title="HTML">HTML</a> definiert.</span> Der Begriff repräsentiert zwei verschiedene Konzepte:</p> + +<ul> + <li><span class="seoSummary">Es ist eine neue Version der <em>Sprache</em> HTML, mit neuen Elementen, Attributen und Verhaltensweisen,</span></li> + <li><span class="seoSummary">und eine größere Sammlung von Technologien, die vielfältigere und leistungsstärkere Webseiten und Anwendungen ermöglichen.</span> Diese Kombination wird manchmal <em>HTML5 & Freunde</em> genannt und oft zu <em>HTML5</em> abgekürzt.</li> +</ul> + +<p>Diese Referenzseite wurde entworfen, um für alle offenen Web-Entwickler nutzbar zu sein und verknüpft zahlreiche Ressourcen über HTML5 Technologien, gruppiert in mehreren Kategorien, basierend auf ihrer Funktion.</p> + +<ul> + <li><em>Semantik</em>: Erlaubt präziser zu beschreiben, was der Inhalt ist.</li> + <li><em>Konnektivität</em>: Ermöglicht neue und innovative Wege, mit dem Server zu kommunizieren.</li> + <li><em>Offline & Speicherung</em>: Erlaubt Webseiten, Daten lokal auf der Client-Seite zu speichern und effizienter offline zu arbeiten.</li> + <li><em>Multimedia</em>: Macht Video und Audio zu Erste-Klasse-Bürgern des offenen Webs.</li> + <li><em>2D/3D Graphiken & Effekte</em>: Erlaubt eine deutlich vielschichtigere Menge an Präsentationsmöglichkeiten.</li> + <li><em>Leistung & Integration</em>: Bietet größere Geschwindigkeitsoptimierungen und besserer Zugriff auf Computer-Hardware.</li> + <li><em>Gerätezugriff</em>: Erlaubt die Benutzung verschiedenster Eingabe- und Ausgabegeräte.</li> + <li><em>Styling</em>: Lässt Autoren anspruchsvollere Designs schreiben.</li> +</ul> + +<div class="cleared row topicpage-table"> +<div class="section"> +<h2 id="SemantiK" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">SemantiK</h2> + +<dl> + <dt><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Gliederungen und Abschnitte in HTML5</a></dt> + <dd>Ein Blick auf die neuen Gliederungs- und Abschnitts-Elemente in HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}} und {{HTMLElement("hgroup")}}.</dd> + <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">HTML5 Audio und Video benutzen</a></dt> + <dd>Das {{HTMLElement("audio")}} und das {{HTMLElement("video")}} Element binden neue Multimedia-Inhalte ein und erlauben, sie zu manipulieren.</dd> + <dt><a href="/en-US/docs/HTML/Forms_in_HTML" title="Forms in HTML5">Formulare in HTML5</a></dt> + <dd>Ein Blick auf Verbesserungen bei Formularen in HTML5: die constraint validation API (<em>Überprüfung von Wertbeschränkungen</em>), mehrere neue Attribute, neue Werte für das {{HTMLElement("input")}} Attribut {{htmlattrxref("type", "input")}} und das neue {{HTMLElement("output")}} Element.</dd> + <dt>Neue semantische Elemente</dt> + <dd>Außer Sektions-, Medien- und Formular-Elementen erhöhen eine Vielzahl neuer Elemente, wie {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} oder {{HTMLElement("meter")}}, die Menge <a href="/en-US/docs/HTML/HTML5/HTML5_element_list" title="HTML/HTML5/HTML5_element_list">gültiger HTML5 Elemente</a>.</dd> + <dt>Verbesserung bei {{HTMLElement("iframe")}}</dt> + <dd>Mithilfe der {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}} und {{htmlattrxref("srcdoc", "iframe")}} Attribute können Autoren jetzt das Sicherheitslevel und das gewünschte Rendering von {{HTMLElement("iframe")}} Elementen angeben.</dd> + <dt><a href="/en-US/docs/MathML" title="MathML">MathML</a></dt> + <dd>Erlaubt das direkte Einbinden mathematischer Formeln.</dd> + <dt><a href="/en-US/docs/HTML/HTML5/Introduction_to_HTML5" title="HTML/HTML5/Introduction_to_HTML5">Einführung in HTML5</a></dt> + <dd>Dieser Artikel führt in die Benutzung von HTML5 für Ihr Web-Design oder Ihre Web-Anwendung ein.</dd> + <dt><a href="/en-US/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">HTML5-konformer Parser</a></dt> + <dd>Der Parser, der aus den Bytes eines HTML-Dokumentes ein DOM erzeugt, wurde erweitert und definiert jetzt präzise das Verhalten in allen Fällen, selbst für ungültiges HTML. Das führt zu viel größerer Vorhersehbarkeit und Zusammenarbeit zwischen HTML5-konformen Browsern.</dd> +</dl> + +<h2 id="Konnektivität" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Konnektivität</h2> + +<dl> + <dt><a href="/en-US/docs/WebSockets" title="WebSockets">Web Sockets</a></dt> + <dd>Erlaubt eine permanente Verbindung zwischen der Seite und dem Server zu erzeugen und nicht-HTML-Daten hierüber auszutauschen.</dd> + <dt><a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="Server-sent_events/Using_server-sent_events">Server-gesendete Ereignisse</a></dt> + <dd>Erlaubt dem Server, Ereignisse direkt an den Client zu senden, anstatt wie beim klassischen Modell Daten nur als Antwort auf eine Anfrage des Clients senden zu können.</dd> + <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt> + <dd>Diese Technologie, wobei RTC für Real-Time Communication (<em>Echtzeit-Kommunikation</em>) steht, erlaubt sich mit anderen zu verbinden und Videokonferenzen direkt aus dem Browser zu steuern, ohne dafür ein Plugin oder externes Programm zu brauchen.</dd> +</dl> + +<h2 id="Offline_Speicherung" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Offline & Speicherung</h2> + +<div class="note"> +<dl> + <dt><a href="/en-US/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">Offline-Ressourcen: der Anwendungs-Cache</a></dt> + <dd>Firefox unterstützt vollständig die HTML5 <em>offline resource</em> Spezifikation. Die meisten anderen bieten variierende Unterstützung für Offline-Ressourcen.</dd> + <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Online- und Offline-Ereignisse</a></dt> + <dd>Firefox 3 unterstützt die WHATWG Online- und Offline-Ereignisse, die Anwendungen und Erweiterungen erkennen lassen, ob oder ob es keine aktive Internetverbindung gibt, sowie ob eine Verbindung auf- oder abgebaut wird.</dd> + <dt><a href="/en-US/docs/DOM/Storage" title="DOM/Storage">WHATWG Client-seitiger Sitzungs- und persistenter Speicher (auch bekannt als DOM Storage)</a></dt> + <dd>Client-seitiger Sitzungs- und persistenter Speicher erlaubt Webanwendungen, strukturierte Daten auf der Anwenderseite zu speichern.</dd> + <dt><a href="/en-US/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt> + <dd>Ist ein Web-Standard zum Speichern von großen Mengen strukturierter Daten im Browser und für das hochperformante Suchen dieser Daten mittels Indizes.</dd> + <dt><a href="/en-US/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">Dateien aus Webanwendungen benutzen</a></dt> + <dd>Unterstützung für die neue HTML5 Datei-API wurde zu Gecko hinzugefügt, wodurch Web-Anwendungen der Zugriff auf vom Benutzer gewählte lokale Dateien ermöglicht wird. Das schließt die Unterstützung für das Auswählen mehrerer Dateien über das neue <a href="/en-US/docs/HTML/Element/Input#attr-multiple" title="HTML/Element/input#attr-multiple"><strong>multiple</strong></a> Attribut von <span style="font-family: monospace;">{{HTMLElement("input")}} </span>Elementen des <a href="/en-US/docs/HTML/Element/Input#attr-type" title="HTML/Element/input#attr-type"><strong>Typs</strong></a><span style="font-family: monospace;"> </span><span style="font-family: courier new;">file</span> ein. Außerdem gibt es <a href="/en-US/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a>.</dd> +</dl> +</div> + +<h2 id="Multimedia" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Multimedia</h2> + +<dl> + <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">HTML5 Audio und Video benutzen</a></dt> + <dd>Das {{HTMLElement("audio")}} und das {{HTMLElement("video")}} Element binden neue Multimedia-Inhalte ein und erlauben, sie zu manipulieren.</dd> + <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt> + <dd>Diese Technologie, wobei RTC für Real-Time Communication (<em>Echtzeit-Kommunikation</em>) steht, erlaubt sich mit anderen zu verbinden und Videokonferenzen direkt aus dem Browser zu steuern, ohne dafür ein Plugin oder externes Programm zu brauchen.</dd> + <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Die Camera API benutzen</a></dt> + <dd>Erlaubt das Benutzen, Manipulieren und Speichern von Bildern der Computer-Kamera.</dd> + <dt>Untertitel und WebVTT</dt> + <dd>Das {{HTMLElement("track")}} Element erlaubt Untertitel und Kapitel. <a href="/en-US/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> ist ein Texttitel-Format.</dd> +</dl> + +<h2 id="3D_graphiKEN_effeKtE" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">3D, graphiKEN & effeKtE</h2> + +<dl> + <dt><a href="/en-US/docs/Canvas_tutorial" title="Canvas tutorial">Canvas-Tutorial</a></dt> + <dd>Lerne mehr über das neue <code>{{HTMLElement("canvas")}}</code> Element und wie darauf Diagramme und andere Objekte in Firefox gezeichnet werden können.</dd> + <dt><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">HTML5 Text-API für <code><canvas></code> Elemente</a></dt> + <dd>Die HTML5 Text-API wird jetzt von {{HTMLElement("canvas")}} Elementen unterstützt.</dd> + <dt><a href="/en-US/docs/WebGL" title="WebGL">WebGL</a></dt> + <dd>WebGL bringt 3D-Graphiken durch die Einführung einer auf OpenGL ES 2.0 basierten API in's Web, die in HTML5 {{HTMLElement("canvas")}} Elementen genutzt werden kann.</dd> + <dt><a href="/en-US/docs/SVG" title="SVG">SVG</a></dt> + <dd>Ein XML-basiertes Format von Vektor-Bildern, die direkt in HTML eingebettet werden können.</dd> + <dt> </dt> +</dl> +</div> + +<div class="section"> +<h2 id="Leistung_integration" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Leistung & integration</h2> + +<dl> + <dt><a href="/en-US/docs/DOM/Using_web_workers" title="Using web workers">Web Worker</a></dt> + <dd>Erlaubt die Ausführung von JavaScript an Hintergrund-Threads zu delegieren, so dass diese Aktivitäten interaktive Ereignisse nicht verlangsamen.</dd> + <dt><code><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> Level 2</dt> + <dd>Erlaubt einige Teile der Seite asynchron zu laden, so dass dynamische Inhalte je nach Zeit und Verhalten des Benutzers gezeigt werden können. Das ist die Technologie hinter <a href="/en-US/docs/AJAX" title="AJAX">Ajax</a>.</dd> + <dt>JIT-kompilierende JavaScript-Engines</dt> + <dd>Die neue Generation der JavaScript-Engines sind wesentlich performanter, was zu deutlich höherer Leistung führt.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating_the_browser_history">History API</a></dt> + <dd>Erlaubt die Manipulation der Browser-Historie. Das ist besonders hilfreich für Seiten, die interaktiv neue Informationen laden.</dd> + <dt><a href="/en-US/docs/HTML/Content_Editable" title="HTML/Content Editable">Das contentEditable Attribut: verwandeln Sie Ihre Webseite in ein Wiki!</a></dt> + <dd>In HTML5 wurde das contentEditable Attribut standardiziert. Lernen Sie mehr über dieses Feature.</dd> + <dt><a href="/en-US/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">Drag und Drop</a></dt> + <dd>Die HTML5 Drag und Drop API erlaubt Unterstützung für das Ziehen und Fallenlassen von Objekte innerhalb und zwischen Webseiten. Außerdem gibt es eine einfachere API für die Benutzung in Erweiterungen und Mozilla-basierten Anwendungen.</dd> + <dt><a href="/en-US/docs/Focus_management_in_HTML" title="Focus_management_in_HTML">Fokus-Kontrolle in HTML</a></dt> + <dd>Die neuen HTML5 <code>activeElement</code> und <code>hasFocus</code> Attribute werden unterstützt.</dd> + <dt><a href="/en-US/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">Web-basierte Protokoll-Handler</a></dt> + <dd>Sie können jetzt Webanwendungen als Protokoll-Handler mit der <code>navigator.registerProtocolHandler()</code> Methode registrieren.</dd> + <dt><a href="/en-US/docs/DOM/window.requestAnimationFrame" title="DOM/window.requestAnimationFrame"><code>requestAnimationFrame</code></a></dt> + <dd>Erlaubt das Rendern von Animationen für optimale Leistung zu kontrollieren.</dd> + <dt><a href="/en-US/docs/DOM/Using_full-screen_mode" title="DOM/Using_full-screen_mode">Vollbild-API</a></dt> + <dd>Kontrolliert die Benutzung des ganzen Bildschirms für eine Webseite oder -anwendung, ohne die Browserelemente anzuzeigen.</dd> + <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt> + <dd>Erlaubt, den Zeiger auf den Bereich des Inhalts zu begrenzen, so dass Spiele und ähnliche Anwendungen nicht den Fokus verlieren, wenn der Zeiger die Fenstergrenzen erreicht.</dd> + <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Online- und Offline-Ereignisse</a></dt> + <dd>Um eine gute offline-fähige Webanwendung zu entwickeln, müssen Sie wissen, wann Ihre Anwendung tatsächlich offline ist. Nebenbei sollten Sie auch wissen, wann Ihre Anwendung wieder online ist.</dd> +</dl> + +<h2 id="Gerätezugriff" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Gerätezugriff</h2> + +<dl> + <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Die Kamera-API benutzen</a></dt> + <dd>Erlaubt das Benutzen, Manipulieren und Speichern von Bildern der Computer-Kamera.</dd> + <dt><a href="/en-US/docs/DOM/Touch_events" title="DOM/Touch_events">Touch-Ereignisse</a></dt> + <dd>Verarbeitung von Ereignissen, die durch Tippen auf Touchscreens ausgelöst werden.</dd> + <dt><a href="/en-US/docs/Using_geolocation" title="Using geolocation">Geolocation benutzen</a></dt> + <dd>Lässt Browser die Position des Benutzers mittels geolocation herausfinden.</dd> + <dt><a href="/en-US/docs/Detecting_device_orientation" title="Detecting_device_orientation">Geräte-Orientierung ermitteln</a></dt> + <dd>Ermöglicht herauszufinden, wenn das Gerät des Browsers die Orientierung wechselt. Das kann als Eingabegerät genutzt werden (z.B. um Spiele zu entwickeln, die auf die Orientierung des Gerätes reagieren) oder um das Layout einer Seite der Orientierung des Bildschirms anzupassen (hochkant oder Querformat).</dd> + <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt> + <dd>Erlaubt, den Zeiger auf den Bereich des Inhalts zu begrenzen, so dass Spiele und ähnliche Anwendungen nicht den Fokus verlieren, wenn der Zeiger die Fenstergrenzen erreicht.</dd> +</dl> + +<h2 id="Styling" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Styling</h2> + +<p><a href="/en-US/docs/CSS" title="CSS">CSS</a> wurde erweitert, um das Dekorieren von Elementen auf viel komplexere Weisen zu ermöglichen. Das wird oft als <a href="/en-US/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a> bezeichnet, obwohl CSS keine monolithische Spezifikation mehr ist und die unterschiedlichen Module nicht alle auf Level 3 sind: einige sind auf Level 1 und andere auf Level 4, und alle dazwischen liegenden Level sind vertreten.</p> + +<dl> + <dt>Neue Funktionen für Hintergründe</dt> + <dd>Es ist jetzt möglich, Boxen über {{cssxref("box-shadow")}} einen Schatten zu geben und <a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple_backgrounds">mehrere Hintergründe</a> zu setzen.</dd> + <dt>Ausgefallenere Ränder</dt> + <dd>Jetzt ist es nicht nur möglich, Ränder mit Bildern über {{cssxref("border-image")}} und zugehörige ausgeschriebene Eigenschaften zu dekorieren, sondern auch runde Ränder werden über die {{cssxref("border-radius")}} Eigenschaft unterstützt.</dd> + <dt>Stile animierbar machen</dt> + <dd>Mit <a href="/en-US/docs/CSS/Using_CSS_transitions" title="CSS/Using_CSS_transitions">CSS Übergängen</a>, um zwischen unterschiedlichen Zuständen zu animieren, oder <a href="/en-US/docs/CSS/Using_CSS_animations" title="CSS/Using_CSS_animations">CSS Animationen</a>, um Teile der Seite ohne auslösendes Ereignis zu animieren, können Sie jetzt mobile Elemente Ihrer Seite kontrollieren.</dd> + <dt>Typographie-Verbesserungen</dt> + <dd>Autoren haben mehr Kontrolle, um eine bessere Typographie zu erreichen. Sie können Textüberlauf mit {{cssxref("text-overflow")}} und <a href="/en-US/docs/CSS/hyphens" title="CSS/hyphens">Silbentrennung</a> kontrollieren, aber sie können auch <a href="/en-US/docs/CSS/text-shadow" title="CSS/text-shadow">Schatten</a> zuweisen und noch präziser seine <a href="/en-US/docs/CSS/text-decoration" title="SVG/Attribute/text-decoration">Dekorationen</a> kontrollieren. Benutzerdefinierte Schriftarten können durch die neue {{cssxref("@font-face")}} at-Regel heruntergeladen und angewendet werden.</dd> + <dt>Neue Präsentations-Layouts</dt> + <dd>Um die Flexibilität von Designs zu verbessern, wurden zwei neue Layouts hinzugefügt: das <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="CSS/Using_CSS_multi-column_layouts">CSS Mehr-Spalten-Layout</a> und das <a href="/en-US/docs/CSS/Flexbox" title="CSS/Flexbox">CSS Flexible-Box-Layout</a>.</dd> +</dl> +</div> +</div> + +<p> </p> diff --git a/files/de/web/html/index.html b/files/de/web/html/index.html new file mode 100644 index 0000000000..299321dbaa --- /dev/null +++ b/files/de/web/html/index.html @@ -0,0 +1,100 @@ +--- +title: 'HTML: HyperText Markup Language' +slug: Web/HTML +tags: + - Einführung + - Web Programmierung +translation_of: Web/HTML +--- +<div>{{HTMLSidebar}}</div><p class="summary"><span class="seoSummary"><strong>HTML</strong> (HyperText Markup Language) ist der grundlegendste Baustein des Webs. Es beschreibt und definiert den <em>Inhalt</em> einer Webseite zusammen mit dem grundlegenden Layout der Webseite. Neben HTML werden im Allgemeinen andere Technologien verwendet, um das Erscheinungsbild (<a href="/de/docs/Web/CSS">CSS</a>) oder die Funktionalität/Verhalten (<a href="/de/docs/Web/JavaScript">JavaScript</a>) einer Webseite zu beschreiben.</span></p> + +<p>"HyperText" bezieht sich auf Links, die Webseiten miteinander verbinden, entweder innerhalb einer einzelnen Webseite oder zwischen mehreren Webseiten. Links sind ein grundlegender Bestandteil des Webs. Indem Sie Inhalte in das Internet hochladen und mit Seiten verlinken, die von anderen Personen erstellt wurden, werden Sie ein aktiver Teilnehmer im World Wide Web.</p> + +<p>HTML verwendet "Markup", um Texte, Bilder und andere Inhalte für die Anzeige in einem Webbrowser zu kommentieren. HTML-Markup beinhaltet spezielle "Elemente" wie {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("datalist")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("nav")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("video")}} und viele andere.</p> + +<p>Die Tags in HTML sind case-insensitive. Das heißt, sie können in Groß- und Kleinbuchstaben oder in einer Mischung geschrieben werden. Beispiel <strong><title> </strong>tag kann als <strong><Title></strong>,<strong><TITLE></strong> oder auf andere Weise geschrieben werden.</p> + +<p>Die folgenden Artikel helfen Ihnen, mehr über HTML zu erfahren.</p> + +<section class="cleared" id="sect1"> +<ul class="card-grid"> + <li><span>HTML Einführung</span> + + <p>Wenn Sie neu in der Webentwicklung sind, lesen Sie unbedingt unseren <a href="/de/docs/Learn/Getting_started_with_the_web">HTML Grundlagen</a> Artikel, um zu erfahren, was HTML ist und wie man es verwendet.</p> + </li> + <li><span>HTML Tutorials</span> + <p>Artikel über die Verwendung von HTML sowie Tutorials und vollständige Beispiele finden Sie in unserem <a href="/de/docs/Learn/HTML">HTML Lernbereich</a>.</p> + </li> + <li><span>HTML Referenz </span> + <p>In unserem umfangreichen Abschnitt <a href="/de/docs/Web/HTML/Reference">HTML Referenz</a> finden Sie die Details zu jedem Element und Attribut in HTML.</p> + </li> +</ul> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Tools" id="Tutorials_für_Anfänger">Tutorials für Anfänger</h2> + +<p>Unser <a href="/de/docs/Learn/HTML">HTML Lernbereich</a> verfügt über mehrere Module, die HTML von Grund auf vermitteln - es sind keine Vorkenntnisse erforderlich.</p> + +<dl> + <dt><a href="/de/docs/Learn/HTML/Introduction_to_HTML">Einführung in HTML</a></dt> + <dd>Dieses Modul schafft die Voraussetzungen, um Sie an wichtige Konzepte und Syntaxen zu gewöhnen, wie z.B. die Anwendung von HTML auf Text, die Erstellung von Hyperlinks und die Verwendung von HTML zur Strukturierung einer Webseite.</dd> + <dt><a href="/de/docs/Learn/HTML/Multimedia_and_embedding">Einbettung von Multimedia Inhalten</a></dt> + <dd>Dieses Modul erklärt, wie Sie HTML verwenden können, um Multimedia Inhalte in Ihre Webseite aufnehmen können, einschließlich der verschiedenen Möglichkeiten, wie Bilder eingebunden werden können, und wie Sie Video, Audio oder sogar ganze andere Webseiten einbetten können.</dd> + <dt><a href="/de/docs/Learn/HTML/Tables">HTML Tabellen</a></dt> + <dd>Die verständliche und einfache Darstellung von Tabellendaten auf einer Webseite kann eine Herausforderung sein. Dieses Modul behandelt grundlegende Tabellen sowie komplexere Funktionen wie die Implementierung von Beschriftungen und Zusammenfassungen.</dd> + <dt><a href="/de/docs/Learn/HTML/Forms">HTML Formulare</a></dt> + <dd>Formulare sind ein sehr wichtiger Teil des Webs - sie bieten viele Funktionen, die Sie für die Interaktion mit Websites benötigen, z.B. Registrierung und Anmeldung, Feedback, Kauf von Produkten und mehr. Dieses Modul ermöglicht Ihnen den Einstieg in die Erstellung der Client-seitigen/Frontend-Teile von Formularen.</dd> + <dt><a href="/de/docs/Learn/HTML/Howto">Verwenden Sie HTML, um häufige Probleme zu lösen</a></dt> + <dd>Enthält Links zu Inhaltsabschnitten, die erklären, wie man HTML verwendet, um sehr häufige Probleme beim Erstellen einer Webseite zu lösen: Umgang mit Titeln, Hinzufügen von Bildern oder Videos, Hervorheben von Inhalten, Erstellen einer Grundform usw.</dd> +</dl> + +<h2 id="Fortgeschrittene_Themen">Fortgeschrittene Themen</h2> + +<dl> + <dt class="landingPageList"><a href="/de/docs/Web/HTML/CORS_enabled_image">CORS fähiges Bild</a></dt> + <dd class="landingPageList">Das Attribut <code><a href="/de/docs/Web/HTML/Element/img#attr-crossorigin">crossorigin</a></code>, in Kombination mit einem entsprechenden <a class="glossaryLink" href="/de/docs/Glossar/CORS">CORS</a> header, ermöglicht es, Bilder, die durch das Element {{HTMLElement("img")}} definiert sind, aus fremden Quellen zu laden und in einem {{HTMLElement("canvas")}} Element zu verwenden, als würden sie aus dem aktuellen Ursprung geladen.</dd> + <dt class="landingPageList"><a href="/de/docs/Web/HTML/CORS_settings_attributes">Attribute der CORS Einstellungen</a></dt> + <dd class="landingPageList">Einige HTML-Elemente, die Unterstützung für <a href="/de/docs/HTTP/Access_control_CORS">CORS</a> bieten, wie {{HTMLElement("img")}} oder {{HTMLElement("video")}}, haben ein <code>crossorigin</code> Attribut (<code>crossOrigin</code> Eigenschaft), mit dem Sie die CORS-Anfragen für die abgerufenen Daten des Elements konfigurieren können.</dd> + <dt class="landingPageList"><a href="/de/docs/Web/HTML/Focus_management_in_HTML">Fokusverwaltung in HTML</a></dt> + <dd class="landingPageList">Die <code><a href="/de/docs/Web/API/Document/activeElement">activeElement</a></code> DOM-Attribut und das <code><a href="/de/docs/Web/API/Document/hasFocus">hasFocus()</a></code> DOM-Methode helfen Ihnen, die Interaktionen eines Benutzers mit Elementen auf einer Webseite zu verfolgen und zu steuern.</dd> + <dt class="landingPageList"><a href="/de/docs/Web/HTML/Using_the_application_cache">Verwendung des Anwendungs Cache</a></dt> + <dd class="landingPageList">Durch den Anwendungs Cache können webbasierte Anwendungen offline ausgeführt werden. Sie können die Schnittstelle <strong>Application Cache</strong> (<em>AppCache</em>) verwenden, um Ressourcen anzugeben, die der Browser zwischenspeichern und für Offline-Benutzer verfügbar machen soll. Anwendungen, die im Cache gespeichert sind, laden und funktionieren korrekt, auch wenn Benutzer auf die Schaltfläche Aktualisieren klicken, wenn sie offline sind.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/de/docs/Web/HTML/Preloading_content">Vorladen von Inhalten mit rel="preload".</a></dt> + <dd class="landingPageList">Das Attribut {{htmlattrxref("rel", "link")}} des {{htmlelement("link")}} Elements ermöglicht es Ihnen, deklarative Fetch-Anfragen in Ihr HTML {{htmlelement("head")}} zu schreiben, wobei Sie Ressourcen angeben, die Ihre Seiten sehr bald nach dem Laden benötigen, die Sie daher früh im Lebenszyklus einer Seitenladung vorab laden möchten, bevor die Haupt-Rendering-Maschine des Browsers einsetzt. Dadurch wird sichergestellt, dass sie früher verfügbar sind und weniger wahrscheinlich das erste Rendering der Seite blockieren, was zu Leistungssteigerungen führt. Dieser Artikel bietet eine grundlegende Anleitung, wie <code>preload</code> funktioniert.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Documentation" id="Referenzen">Referenzen</h2> + +<dl> + <dt class="landingPageList"><a href="/de/docs/Web/HTML/Reference">HTML Referenz</a></dt> + <dd class="landingPageList">HTML besteht aus <strong>Elementen</strong>, von denen jedes durch eine Anzahl von <strong>Attributen</strong> modifiziert werden kann. HTML Dokumente werden über <a href="/de/docs/Web/HTML/Link_types">links</a> miteinander verbunden.</dd> + <dt class="landingPageList"><a href="/de/docs/Web/HTML/Element">HTML Element Referenz</a></dt> + <dd class="landingPageList">Durchsuchen Sie eine Liste aller <a class="glossaryLink" href="/de/docs/Glossar/HTML">HTML</a> <a class="glossaryLink" href="/de/docs/Glossar/Element">Elemente</a>.</dd> + <dt class="landingPageList"><a href="/de/docs/Web/HTML/Attributes">HTML Attribut Referenz</a></dt> + <dd class="landingPageList">Elemente in HTML haben <strong>Attribute</strong>. Dies sind zusätzliche Werte, die die Elemente konfigurieren oder ihr Verhalten auf verschiedene Weise anpassen.</dd> + <dt class="landingPageList"><a href="/de/docs/Web/HTML/Global_attributes">Globale Attribute</a></dt> + <dd class="landingPageList">Globale Attribute können für alle <a href="/de/docs/Web/HTML/Element">HTML-Elemente</a>, <em>auch für diejenigen, die nicht im Standard</em> angegeben sind, angegeben werden. Das bedeutet, dass alle nicht standardmäßigen Elemente diese Attribute weiterhin zulassen müssen, auch wenn diese Elemente das Dokument nicht HTML5 kompatibel machen.</dd> + <dt class="landingPageList"><a href="/de/docs/Web/HTML/Inline_elements">Inline Elemente</a> und <a href="/de/docs/Web/HTML/Block-level_elements">Block Level Elemente</a></dt> + <dd class="landingPageList">HTML Elemente sind in der Regel "inline" oder "block-level" Elemente. Ein Inline-Element belegt nur den Raum, der durch die Tags begrenzt ist, die es definieren. Ein Element auf Blockebene nimmt den gesamten Platz seines übergeordneten Elements (Containers) ein und erzeugt so einen "Block".</dd> + <dt class="landingPageList"><a href="/de/docs/Web/HTML/Link_types">Link Typen</a></dt> + <dd class="landingPageList">In HTML können verschiedene Link-Typen verwendet werden, um die Verknüpfung zwischen zwei Dokumenten herzustellen und zu definieren. Zu den Link Elementen die verwendet werden können gehören <a href="/de/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/de/docs/Web/HTML/Element/area"><code><area></code></a> und <a href="/de/docs/Web/HTML/Element/link"><code><link></code></a>.</dd> + <dt class="landingPageList"><a href="/de/docs/Web/HTML/Supported_media_formats">Medienformate die von HTML unterstützt werden sind Audio und Video Elemnte</a></dt> + <dd class="landingPageList">The <a href="/de/docs/Web/HTML/Element/audio"><code><audio></code></a> und <a href="/de/docs/Web/HTML/Element/video"><code><video></code></a> Elemente ermöglichen die Wiedergabe von Audio- und Videomedien. Diese Elemente bieten eine Browser-native Alternative zu Adobe Flash und anderen Plug-Ins.</dd> + <dt class="landingPageList"><a href="/de/docs/Web/HTML/Kinds_of_HTML_content">Arten von HTML Inhalten</a></dt> + <dd class="landingPageList">HTML umfasst verschiedene Arten von Elementen, von denen jeder in bestimmten Kontexten verwendet werden darf und in anderen nicht zulässig ist. Ebenso hat jede eine Reihe von Inhalten, die sie enthalten kann und Elemente die darin nicht verwendet werden können. Dies ist ein Leitfaden für diese Kategorien.</dd> + <dt class="landingPageList"><a href="/de/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">Eigenarten und Normen</a></dt> + <dd class="landingPageList">Historische Informationen über Eigenarten und Normen.</dd> +</dl> + +<h2 class="landingPageList" id="Verwandte_Themen">Verwandte Themen</h2> + +<dl> + <dt><a href="/de/docs/Web/HTML/Applying_color">Hinzufügen von Farben mit CSS auf HTML Elemente</a></dt> + <dd>Dieser Artikel beschreibt die meisten der Möglichkeiten, wie Sie CSS verwenden, um HTML Elementen Farben hinzuzufügen, und listet auf, welche Teile von HTML-Dokumenten farbig dargestellt werden können und welche CSS-Eigenschaften dabei zu verwenden sind. Enthält Beispiele, Links zu Tools zur Farb Palettenerstellung und vieles mehr.</dd> +</dl> +</div> +</div> +<span class="alllinks"><a href="/de/docs/tag/HTML">Alles anzeigen...</a></span></section> diff --git a/files/de/web/html/inline_elemente/index.html b/files/de/web/html/inline_elemente/index.html new file mode 100644 index 0000000000..29f7e242cd --- /dev/null +++ b/files/de/web/html/inline_elemente/index.html @@ -0,0 +1,32 @@ +--- +title: Inline-Elemente +slug: Web/HTML/Inline_elemente +translation_of: Web/HTML/Inline_elements +--- +<h3 id="Summary" name="Summary">Zusammenfassung</h3> + +<p>"Inline" ist eine Kategorisierung von HTML-Elementen, und stellt das Gegenteil von <a href="/en-US/docs/HTML/Block-level_elements">"Block-Level" Elementen</a> dar. Inline-Elemente können sich innerhalb von Block-Level Elementen oder anderen Inline-Elementen befinden. Die Breite eines Inline-Elementes richtet sich nach dem Inhalt. Die Unterschiede zwischen Block-Elementen und Inline-Elementen beinhalten:</p> + +<dl> + <dt>Inhaltsmodell</dt> + <dd>Generell beinhalten Inline-Elemente nur Daten und andere Inline-Elemente.</dd> + <dt>Formatierung</dt> + <dd>Standardmäßig beginnen Inline-Elemente nicht in einer neuen Zeile.</dd> +</dl> + +<h3 id="Elements" name="Elements">Elemente</h3> + +<p>Die folgenden Elemente sind "inline":</p> + +<ul> + <li><a href="/en/HTML/Element/b" title="en/HTML/Element/b">b</a>, <a href="/en/HTML/Element/big" title="en/HTML/Element/big">big</a>, <a href="/en/HTML/Element/i" title="en/HTML/Element/i">i</a>, <a href="/en/HTML/Element/small" title="en/HTML/Element/small">small</a>, <a href="/en/HTML/Element/tt" title="en/HTML/Element/tt">tt</a></li> + <li><a href="/en/HTML/Element/abbr" title="en/HTML/Element/abbr">abbr</a>, <a href="/en/HTML/Element/acronym" title="en/HTML/Element/acronym">acronym</a>, <a href="/en/HTML/Element/cite" title="en/HTML/Element/cite">cite</a>, <a href="/en/HTML/Element/code" title="en/HTML/Element/code">code</a>, <a href="/en/HTML/Element/dfn" title="en/HTML/Element/dfn">dfn</a>, <a href="/en/HTML/Element/em" title="en/HTML/Element/em">em</a>, <a href="/en/HTML/Element/kbd" title="en/HTML/Element/kbd">kbd</a>, <a href="/en/HTML/Element/strong" title="en/HTML/Element/strong">strong</a>, <a href="/en/HTML/Element/samp" title="en/HTML/Element/samp">samp</a>, <a href="/en/HTML/Element/var" title="en/HTML/Element/var">var</a></li> + <li><a href="/en/HTML/Element/a" title="en/HTML/Element/a">a</a>, <a href="/en/HTML/Element/bdo" title="en/HTML/Element/bdo">bdo</a>, <a href="/en/HTML/Element/br" title="en/HTML/Element/br">br</a>, <a href="/En/HTML/Element/Img" title="En/HTML/Element/Img">img</a>, <a href="/en/HTML/Element/map" title="en/HTML/Element/map">map</a>, <a href="/en/HTML/Element/object" title="en/HTML/Element/object">object</a>, <a href="/en/HTML/Element/q" title="en/HTML/Element/q">q</a>, <a href="/En/HTML/Element/Script" title="En/HTML/Element/Script">script</a>, <a href="/en/HTML/Element/span" title="en/HTML/Element/span">span</a>, <a href="/en/HTML/Element/sub" title="en/HTML/Element/sub">sub</a>, <a href="/en/HTML/Element/sup" title="en/HTML/Element/sup">sup</a></li> + <li><a href="/en/HTML/Element/button" title="en/HTML/Element/button">button</a>, <a href="/en/HTML/Element/Input" title="en/HTML/Element/Input">input</a>, <a href="/en/HTML/Element/label" title="en/HTML/Element/label">label</a>, <a href="/en/HTML/Element/select" title="en/HTML/Element/select">select</a>, <a href="/en/HTML/Element/textarea" title="en/HTML/Element/textarea">textarea</a></li> +</ul> + +<h3 id="See_also" name="See_also">Siehe auch</h3> + +<ul> + <li><a href="/en/HTML/Block-level_elements" title="en/HTML/Block-level_elements">Block-level elements</a></li> +</ul> diff --git a/files/de/web/html/referenz/index.html b/files/de/web/html/referenz/index.html new file mode 100644 index 0000000000..b9ad6c3301 --- /dev/null +++ b/files/de/web/html/referenz/index.html @@ -0,0 +1,29 @@ +--- +title: HTML-Referenz +slug: Web/HTML/Referenz +tags: + - Einstieg + - HTML + - Refernz + - Web +translation_of: Web/HTML/Reference +--- +<div>{{HTMLSidebar}}</div> + +<p class="summary">Diese <a href="/en-US/docs/Web/HTML">HTML</a>-Referenz beschreibt alle Elemente und Attribute von HTML, einschließlich globaler Attribute, die für alle Elemente gelten.</p> + +<dl> + <dd></dd> + <dt><a class="new" href="/de-DE/docs/Web/HTML/Element" rel="nofollow">HTML-Element-Referenz</a></dt> + <dd>Diese Seite listet alle Standard-HTML-Tags auf, die aktuell sind, aber auch welche die obsolet sind. Elemente die erst in HTML5 eingeführt wurden, werden referenziert, wobei die anderen Elemente in HTML5 auch valide sind.</dd> + <dt><a class="new" href="/de-DE/docs/Web/HTML/Attributes" rel="nofollow">HTML-Attribut-Referenz</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes">Globale Attribute</a></dt> + <dd>Globale Attribute dürfen allen HTML Elementen zugewiesen werden, auch wenn diese Elemente nicht dem Standard entsprechen. Es müssen also alle Attribute vom Browser ausgewertet werden, auch wenn die Verwendung eines Elements bewirkt, dass das Dokument nicht HTML5-konform ist. Zum Beispiel verstecken HTML5-konforme Browser ein Element <foo hidden>...<foo>, obwohl <foo> kein valides HTML Element ist.</dd> + <dt><a href="/en-US/docs/Web/HTML/Link_types">Link-Typen</a></dt> + <dd>In HTML, the following link types indicate the relationship between two documents, in which one links to the other using an <a>, <area>, or <link> element.</dd> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/HTML" title="Article tagged: HTML">Alle Seiten mit dem Tag "HTML" ansehen...</a></span></p> + +<div class="section"></div> diff --git a/files/de/web/html/using_the_application_cache/index.html b/files/de/web/html/using_the_application_cache/index.html new file mode 100644 index 0000000000..1afea42d7d --- /dev/null +++ b/files/de/web/html/using_the_application_cache/index.html @@ -0,0 +1,375 @@ +--- +title: Benutzung des Application Cache +slug: Web/HTML/Using_the_application_cache +translation_of: Web/HTML/Using_the_application_cache +--- +<h2 id="Einführung">Einführung</h2> + +<p><a href="/de/docs/Web/HTML/HTML5" title="HTML/HTML5">HTML5</a> bietet einen <em>Anwendungscaching</em>-Mechanismus, welcher webbasierte Anwendungen offline nutzbar macht. Entwickler können das <strong>Application Cache</strong> (AppCache) - Interface nutzen, um Ressourcen, die der Browser cachen soll für die Offline-Nutzung verfügbar zu machen. Gecachte Anwendungen laden und arbeiten korrekt, auch wenn der User den "Neu laden" - Button des Browsers klickt.</p> + +<p>Die Nutzung des Application Cache ermöglicht einer Anwendung folgende Vorteile: </p> + +<ul> + <li>Offline surfen: Nutzer können durch eine Seite navigieren wenn sie offline sind.</li> + <li>Geschwindigkeit: Gecachte Ressourcen sind lokal und laden daher schneller.</li> + <li>Verminderte Serverlast: Der Browser lädt nur die Ressourcen vom Server, die sich geändert haben.</li> +</ul> + +<h2 id="Wie_der_AppCache_funktioniert">Wie der AppCache funktioniert</h2> + +<h3 id="Aktivieren_des_AppCaches">Aktivieren des AppCaches</h3> + +<p>Zum Aktivieren des ApplicationCaches für eine App muss das {{htmlattrxref("manifest", "html")}}-Attribute in das {{HTMLElement("html")}}-Element auf allen Seiten der App eingebunden werden, wie folgendes Beispiel zeigt:</p> + +<div style="overflow: hidden;"> +<pre class="brush: html"><html manifest="example.appcache"> + ... +</html> +</pre> +</div> + +<p>Das Manifest-Attribut verweist auf eine <strong>cache manifest</strong>-Datei, die als Textdatei alle Ressourcen (Dateien) auflistet, die der Browser innerhalb der App cachen soll.</p> + +<p>Sie sollten das <code>manifest</code>-Attribute auf jeder Seite Ihrer App einbinden, die zwischengespeichert werden soll. Der Browser speichert keine Seiten die nicht das <code>manifest</code>-Attribute besitzen, außer manche Seiten sind explizit in der manifest-Datei beschrieben. Sie müssen nicht alle Dateien einzeln in die manifest-Datei schreiben die gespeichert werden sollen, der Browser fügt jede Seite indirekt hinzu die der Benutzer besucht und die, die das <code>manifest</code>-Attribute enthalten.</p> + +<p>Manche Browser (z.B. Firefox) zeigen eine Benachrichtigung an, dass ein entsprechender App-Cache verwendet wird, wenn ein Benutzer die App das erste Mal besucht. Die Benachrichtigungsleiste zeigt dann in etwa folgendes an:</p> + +<p style="margin-left: 40px;">Die Webseite (<code>www.example.com</code>) möchte gerne Daten zur Offline-Benutzung abspeichern. [Erlauben] [Nie für diese Seite] [Nicht jetzt]</p> + +<p>The term "offline(-enabled) applications" sometimes refers specifically to applications that the user has allowed to use offline capabilities.</p> + +<h3 id="Loading_documents">Loading documents</h3> + +<p>The use of an application cache modifies the normal process of loading a document:</p> + +<ul> + <li>If an application cache exists, the browser loads the document and its associated resources directly from the cache, without accessing the network. This speeds up the document load time.</li> + <li>The browser then checks to see if the cache manifest has been updated on the server.</li> + <li>If the cache manifest has been updated, the browser downloads a new version of the manifest and the resources listed in the manifest. This is done in the background and does not affect performance significantly.</li> +</ul> + +<p>The process for loading documents and updating the application cache is specified in greater detail below:</p> + +<ol> + <li>When the browser visits a document that includes the <code>manifest</code> attribute, if no application cache exists, the browser loads the document and then fetches all the entries listed in the manifest file, creating the first version of the application cache.</li> + <li>Subsequent visits to that document cause the browser to load the document and other assets specified in the manifest file from the application cache (not from the server). In addition, the browser also sends a <code>checking</code> event to the <code><a href="/en-US/docs/DOM/window.applicationCache" title="DOM/window.applicationCache">window.applicationCache</a></code> object, and fetches the manifest file, following the appropriate HTTP caching rules.</li> + <li>If the currently-cached copy of the manifest is up-to-date, the browser sends a <code>noupdate</code> event to the <code>applicationCache</code> object, and the update process is complete. Note that if you change any cached resources on the server, you must also change the manifest file itself, so that the browser knows it needs to fetch all the resources again.</li> + <li>If the manifest file <em>has</em> changed, all the files listed in the manifest—as well as those added to the cache by calling <code><a href="/en-US/docs/nsIDOMOfflineResourceList#add.28.29" title="nsIDOMOfflineResourceList#add.28.29">applicationCache.add()</a></code>—are fetched into a temporary cache, following the appropriate HTTP caching rules. For each file fetched into this temporary cache, the browser sends a <code>progress</code> event to the <code>applicationCache</code> object. If any errors occur, the browser sends an <code>error</code> event, and the update halts.</li> + <li>Once all the files have been successfully retrieved, they are moved into the real offline cache automatically, and a <code>cached</code> event is sent to the <code>applicationCache</code> object. Since the document has already been loaded into the browser from the cache, the updated document will not be rendered until the document is reloaded (either manually or programatically).</li> +</ol> + +<h2 id="Storage_location_and_clearing_the_offline_cache">Storage location and clearing the offline cache</h2> + +<p>In Chrome you can clear the offline cache by selecting "Clear browsing data..." in the preferences or by visiting <a title="chrome://appcache-internals/">chrome://appcache-internals/</a>. Safari has a similar "Empty cache" setting in its preferences but a browser restart may also be required.</p> + +<p>In Firefox, the offline cache data is stored separately from the Firefox profile—next to the regular disk cache:</p> + +<ul> + <li>Windows Vista/7: <code>C:\Users\<username>\AppData\<strong>Local</strong>\Mozilla\Firefox\Profiles\<salt>.<profile name>\OfflineCache</code></li> + <li>Mac/Linux: <code>/Users/<username>/Library/Caches/Firefox/Profiles/<salt>.<profile name>/OfflineCache</code></li> +</ul> + +<p>In Firefox the current status of the offline cache can be inspected on the <code>about:cache</code> page (under the "Offline cache device" heading). The offline cache can be cleared for each site separately using the "Remove..." button in Tools -> Options -> Advanced -> Network -> Offline data.</p> + +<p>Prior to Firefox 11, neither Tools -> Clear Recent History nor Tools -> Options -> Advanced -> Network -> Offline data -> Clear Now cleared the offline cache. This has been fixed.</p> + +<p>See also <a href="/en-US/docs/DOM/Storage#Storage_location_and_clearing_the_data" title="DOM/Storage#Storage location and clearing the data">clearing the DOM Storage data</a>.</p> + +<p>Application caches can also become obsolete. If an application's manifest file is removed from the server, the browser removes all application caches that use that manifest, and sends an "obsolete" event to the <code>applicationCache</code> object. This sets the application cache's state to <code>OBSOLETE</code>.</p> + +<h2 id="The_cache_manifest_file">The cache manifest file</h2> + +<h3 id="Referencing_a_cache_manifest_file">Referencing a cache manifest file</h3> + +<p>The <code>manifest</code> attribute in a web application can specify either the relative path of a cache manifest file or an absolute URL. (Absolute URLs must be from the same origin as the application). A cache manifest file can have any file extension, but it must be served with the MIME type <code>text/cache-manifest</code>.</p> + +<div class="note"><strong>Note: </strong>On Apache servers, the MIME type for manifest (.appcache) files can be set by adding <code>AddType text/cache-manifest .appcache</code> to a .htaccess file within either the root directory, or the same directory as the application.</div> + +<h3 id="Entries_in_a_cache_manifest_file">Entries in a cache manifest file</h3> + +<p>The cache manifest file is a simple text file that lists the resources the browser should cache for offline access. Resources are identified by URI. Entries listed in the cache manifest must have the same scheme, host, and port as the manifest.</p> + +<h3 id="Example_1_a_simple_cache_manifest_file">Example 1: a simple cache manifest file</h3> + +<p>The following is a simple cache manifest file, <code>example.appcache</code>, for an imaginary web site at <span class="nowiki">www.example.com</span>.</p> + +<pre>CACHE MANIFEST +# v1 - 2011-08-13 +# This is a comment. +<span class="nowiki">http://www.example.com/index.html</span> +<span class="nowiki">http://www.example.com/header.png</span> +<span class="nowiki">http://www.example.com/blah/blah</span> +</pre> + +<p>A cache manifest file can include three sections (<code>CACHE</code>, <code>NETWORK</code>, and <code>FALLBACK</code>, discussed below). In the example above, there is no section header, so all data lines are assumed to be in the explicit (<code>CACHE</code>) section, meaning that the browser should cache all the listed resources in the application cache. Resources can be specified using either absolute or relative URLs (e.g., <code>index.html</code>).</p> + +<p>The "v1" comment in the example above is there for a good reason. Browsers only update an application cache when the manifest file changes, byte for byte. If you change a cached resource (for example, you update the <code>header.png</code> image with new content), you must also change the content of the manifest file in order to let browsers know that they need to refresh the cache. You can make any change you want to the manifest file, but revising a version number is the recommended best practice.</p> + +<div class="warning"><strong>Important:</strong> Do not specify the manifest itself in the cache manifest file, otherwise it will be nearly impossible to inform the browser a new manifest is available.</div> + +<h3 id="Sections_in_a_cache_manifest_file_CACHE_NETWORK_and_FALLBACK">Sections in a cache manifest file: <code>CACHE</code>, <code>NETWORK</code>, and <code>FALLBACK</code></h3> + +<p>A manifest can have three distinct sections: <code>CACHE</code>, <code>NETWORK</code>, and <code>FALLBACK</code>.</p> + +<dl> + <dt><code>CACHE:</code></dt> + <dd>This is the default section for entries in a cache manifest file. Files listed under the <code>CACHE:</code> section header (or immediately after the <code>CACHE MANIFEST</code> line) are explicitly cached after they're downloaded for the first time.</dd> + <dt><code>NETWORK:</code></dt> + <dd>Files listed under the <code>NETWORK:</code> section header in the cache manifest file are white-listed resources that require a connection to the server. All requests to such resources bypass the cache, even if the user is offline. Wildcards may be used.</dd> + <dt><code>FALLBACK:</code></dt> + <dd>The <code>FALLBACK:</code> section specifies fallback pages the browser should use if a resource is inaccessible. Each entry in this section lists two URIs—the first is the resource, the second is the fallback. Both URIs must be relative and from the same origin as the manifest file. Wildcards may be used.</dd> +</dl> + +<p>The <code>CACHE</code>, <code>NETWORK</code>, and <code>FALLBACK </code>sections can be listed in any order in a cache manifest file, and each section can appear more than once in a single manifest.</p> + +<h3 id="Example_2_a_more_complete_cache_manifest_file">Example 2: a more complete cache manifest file</h3> + +<p>The following is a more complete cache manifest file for the imaginary web site at <span class="nowiki">www.example.com</span>:</p> + +<pre>CACHE MANIFEST +# v1 2011-08-14 +# This is another comment +index.html +cache.html +style.css +image1.png + +# Use from network if available +NETWORK: +network.html + +# Fallback content +FALLBACK: +/ fallback.html +</pre> + +<p>This example uses <code>NETWORK</code> and <code>FALLBACK</code> sections to specify that the <code>network.html</code> page must always be retrieved from the network, and that the <code>fallback.html</code> page should be served as a fallback resource (e.g., in case a connection to the server cannot be established).</p> + +<h3 id="Structure_of_a_cache_manifest_file">Structure of a cache manifest file</h3> + +<p>Cache manifest files must be served with the <code>text/cache-manifest</code> MIME type. All resources served using this MIME type must follow the syntax for an application cache manifest, as defined in this section.</p> + +<p>Cache manifests are UTF-8 format text files, and may optionally include a BOM character. Newlines may be represented by line feed (<code>U+000A</code>), carriage return (<code>U+000D</code>), or carriage return and line feed both.</p> + +<p>The first line of the cache manifest must consist of the string <code>CACHE MANIFEST</code> (with a single <code>U+0020</code> space between the two words), followed by zero or more space or tab characters. Any other text on the line is ignored.</p> + +<p>The remainder of the cache manifest must be comprised of zero or more of the following lines:</p> + +<dl> + <dt>Blank line</dt> + <dd>You may use blank lines comprised of zero or more space and tab characters.</dd> + <dt>Comment</dt> + <dd>Comments consist of zero or more tabs or spaces followed by a single <code>#</code> character, followed by zero or more characters of comment text. Comments may only be used on their own lines, and cannot be appended to other lines. This means that you cannot specify fragment identifiers.</dd> + <dt>Section header</dt> + <dd>Section headers specify which section of the cache manifest is being manipulated. There are three possible section headers:</dd> +</dl> + +<blockquote> +<table class="standard-table"> + <tbody> + <tr> + <th>Section header</th> + <th>Description</th> + </tr> + <tr> + <td><code>CACHE:</code></td> + <td>Switches to the explicit section of the cache manifest (this is the default section).</td> + </tr> + <tr> + <td><code>NETWORK:</code></td> + <td>Switches to the online whitelist section of the cache manifest.</td> + </tr> + <tr> + <td><code>FALLBACK:</code></td> + <td>Switches to the fallback section of the cache manifest.</td> + </tr> + </tbody> +</table> +</blockquote> + +<dl> + <dd>The section header line may include whitespaces, but must include the colon (<code>:</code>) in the section name.</dd> + <dt>Section data</dt> + <dd>The format for lines of data varies from section to section. In the explicit (<code>CACHE:</code>) section, each line is a valid URI or IRI reference to a resource to cache (no wildcard characters are allowed in this sections). Whitespace is allowed before and after the URI or IRI on each line. In the Fallback section each line is a valid URI or IRI reference to a resource, followed by a fallback resource that is to be served up when a connection with the server cannot be made. In the network section, each line is a valid URI or IRI reference to a resource to fetch from the network (the wildcard character * is allowed in this section). + <div class="note"><strong>Note: </strong>Relative URIs are relative to the cache manifest's URI, not to the URI of the document referencing the manifest.</div> + </dd> +</dl> + +<p>Cache manifest files can switch from section to section at will (each section header can be used more than once), and sections are allowed to be empty.</p> + +<h2 id="Resources_in_an_application_cache">Resources in an application cache</h2> + +<p>An application cache always includes at least one resource, identified by URI. All resources fit into one of the following categories:</p> + +<dl> + <dt>Master entries</dt> + <dd>These are resources added to the cache because a browsing context visited by the user included a document that indicated that it was in this cache using its <code>manifest</code> attribute.</dd> + <dt>Explicit entries</dt> + <dd>These are resources explicitly listed in the application's cache manifest file.</dd> + <dt>Network entries</dt> + <dd>These are resources listed in the application's cache manifest files as network entries.</dd> + <dt>Fallback entries</dt> + <dd>These are resources listed in the application's cache manifest files as fallback entries.</dd> +</dl> + +<div class="note"><strong>Note:</strong> Resources can be tagged with multiple categories, and can therefore be categorized as multiple entries. For example, an entry can be both an explicit entry and a fallback entry.</div> + +<p>Resource categories are described in greater detail below.</p> + +<h3 id="Master_entries">Master entries</h3> + +<p>Master entries are any HTML files that include a {{htmlattrxref("manifest","html")}} attribute in their {{HTMLElement("html")}} element. For example, let's say we have the HTML file <code><a class="linkification-ext external" href="http://www.foo.bar/entry.html" title="Linkification: http://www.foo.bar/entry.html">http://www.example.com/entry.html</a></code>, which looks like this:</p> + +<pre class="brush: html"><html manifest="example.appcache"> + <h1>Application Cache Example</h1> +</html> +</pre> + +<p>If <code>entry.html</code> is not listed in the <code>example.appcache</code> cache manifest file, visiting the <code>entry.html</code> page causes <code>entry.html</code> to be added to the application cache as a master entry.</p> + +<h3 id="Explicit_entries">Explicit entries</h3> + +<p>Explicit entries are resources that are explicitly listed in the <code>CACHE </code>section of a cache manifest file.</p> + +<h3 id="Network_entries">Network entries</h3> + +<p>The <code>NETWORK</code> section of a cache manifest file specifies resources for which a web application requires online access. Network entries in an application cache are essentially an "online whitelist"—URIs specified in the <code>NETWORK</code> section are loaded from the server instead of the cache. This lets the browser's security model protect the user from potential security breaches by limiting access to approved resources.</p> + +<p>As an example, you can use network entries to load and execute scripts and other code from the server instead of the cache:</p> + +<pre>CACHE MANIFEST +NETWORK: +/api +</pre> + +<p>The cache manifest section listed above ensures that requests to load resources contained in the <code><a href="http://www.example.com/api/" rel="freelink">http://www.example.com/api/</a></code> subtree always go to the network without attempting to access the cache.</p> + +<div class="note"><strong>Note</strong>: Simply omitting master entries (files that have the <code>manifest</code> attribute set in the <code>html</code> element) from the manifest file would not have the same result, because master entries will be added—and subsequently served from—the application cache.</div> + +<h3 id="Fallback_entries">Fallback entries</h3> + +<p>Fallback entries are used when an attempt to load a resource fails. For example, let's say the cache manifest file <code><a href="http://www.example.com/example.appcache" rel="freelink">http://www.example.com/example.appcache</a></code> includes the following content:</p> + +<pre>CACHE MANIFEST +FALLBACK: +example/bar/ example.html +</pre> + +<p>Any request to <code><a href="http://www.example.com/example/bar/" rel="freelink">http://www.example.com/example/bar/</a></code> or any of its subdirectories and their content cause the browser to issue a network request to attempt to load the requested resource. If the attempt fails, due to either a network failure or a server error of some kind, the browser loads the file <code>example.html</code> instead.</p> + +<h2 id="Cache_states">Cache states</h2> + +<p>Each application cache has a <strong>state</strong>, which indicates the current condition of the cache. Caches that share the same manifest URI share the same cache state, which can be one of the following:</p> + +<dl> + <dt><code>UNCACHED</code></dt> + <dd>A special value that indicates that an application cache object is not fully initialized.</dd> + <dt><code>IDLE</code></dt> + <dd>The application cache is not currently in the process of being updated.</dd> + <dt><code>CHECKING</code></dt> + <dd>The manifest is being fetched and checked for updates.</dd> + <dt><code>DOWNLOADING</code></dt> + <dd>Resources are being downloaded to be added to the cache, due to a changed resource manifest.</dd> + <dt><code>UPDATEREADY</code></dt> + <dd>There is a new version of the application cache available. There is a corresponding <code>updateready</code> event, which is fired instead of the <code>cached</code> event when a new update has been downloaded but not yet activated using the <code>swapCache()</code> method.</dd> + <dt><code>OBSOLETE</code></dt> + <dd>The application cache group is now obsolete.</dd> +</dl> + +<h2 id="Testing_for_updates_to_the_cache_manifest">Testing for updates to the cache manifest</h2> + +<p>You can programmatically test to see if an application has an updated cache manifest file, using JavaScript. Since a cache manifest file may have been updated before a script attaches event listeners to test for updates, scripts should always test <code>window.applicationCache.status</code>.</p> + +<pre class="brush: js">function onUpdateReady() { + alert('found new version!'); +} +window.applicationCache.addEventListener('updateready', onUpdateReady); +if(window.applicationCache.status === window.applicationCache.UPDATEREADY) { + onUpdateReady(); +}</pre> + +<p>To manually start testing for a new manifest file, you can use <code>window.applicationCache.update()</code>.</p> + +<h2 id="Gotchas">Gotchas</h2> + +<ul> + <li>Never access cached files by using traditional GET parameters (like <code>other-cached-page.html?parameterName=value</code>). This will make the browser bypass the cache and attempt to get it from network. To link to cached resources that have parameters parsed in JavaScript use parameters in the hash part of the link, such as <code>other-cached-page.html#whatever?parameterName=value</code>.</li> + <li>When applications are cached, simply updating the resources (files) that are used in a web page is not enough to update the files that have been cached. You must update the cache manifest file itself before the browser retrieves and uses the updated files. You can do this programmatically using <code>window.applicationCache.swapCache()</code>, though resources that have already been loaded will not be affected. To make sure that resources are loaded from a new version of the application cache, refreshing the page is ideal.</li> + <li>It's a good idea to set expires headers on your web server for <code>*.appcache</code> files to expire immediately. This avoids the risk of caching manifest files. For example, in Apache you can specify such a configuration as follows:<br> + <code>ExpiresByType text/cache-manifest "access plus 0 seconds"</code></li> +</ul> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.0</td> + <td>3.5</td> + <td>10.0</td> + <td>10.6</td> + <td>4.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.1</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>11.0</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<p>Note: Versions of Firefox prior to 3.5 ignore the <code>NETWORK </code>and <code>FALLBACK </code>sections of the cache manifest file.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="http://www.html5rocks.com/en/tutorials/appcache/beginner/" title="http://www.html5rocks.com/en/tutorials/appcache/beginner/">HTML5Rocks - A Beginner's Guide to Using the Application Cache</a></li> + <li><a href="http://appcachefacts.info/" title="http://appcachefacts.info/">appcachefacts.info</a> - detailed information on AppCache idiosyncrasies</li> + <li><a href="http://alistapart.com/article/application-cache-is-a-douchebag" title="http://alistapart.com/article/application-cache-is-a-douchebag">A List Apart: Application Cache is a Douchebag</a></li> + <li><a href="http://hacks.mozilla.org/2010/01/offline-web-applications/" title="http://hacks.mozilla.org/2010/01/offline-web-applications/">offline web applications</a> at hacks.mozilla.org - showcases an offline app demo and explains how it works.</li> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#offline" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#offline">HTML 5 working draft: Offline web applications</a></li> + <li><a href="http://www.w3.org/TR/offline-webapps/" title="http://www.w3.org/TR/offline-webapps/">W3C Working Group Note: Offline Web Applications</a></li> + <li><a href="http://developer.teradata.com/blog/js186040/2011/11/html5-cache-manifest-an-off-label-usage" title="http://developer.teradata.com/blog/js186040/2011/11/html5-cache-manifest-an-off-label-usage">HTML5 Cache Manifest: An Off-label Usage</a></li> + <li><a href="http://manifest-validator.com" title="http://manifest-validator.com">Cache Manifest Validator</a></li> + <li>{{interface("nsIApplicationCache")}}</li> + <li>{{interface("nsIApplicationCacheNamespace")}}</li> + <li>{{interface("nsIApplicationCacheContainer")}}</li> + <li>{{interface("nsIApplicationCacheChannel")}}</li> + <li>{{interface("nsIApplicationCacheService")}}</li> + <li>{{interface("nsIDOMOfflineResourceList")}}</li> + <li><a href="http://www.ibm.com/developerworks/web/library/wa-ffox3/">Get ready for Firefox 3.0 - A Web developer's guide to the many new features in this popular browser, especially the offline application features</a> (IBM developerWorks)</li> + <li><a href="/en-US/docs/Application_cache_implementation_overview" title="/en-US/docs/Application_cache_implementation_overview">Application cache implementation overview</a></li> +</ul> + +<div>{{HTML5ArticleTOC}}</div> |