diff options
author | Peter Bengtsson <mail@peterbe.com> | 2021-07-15 12:58:54 -0400 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-07-15 12:58:54 -0400 |
commit | 9ace67d06f2369e3c770e3a11e06e1c8cc9f66fd (patch) | |
tree | 6fd33b1d14bd8f53a73291e4afa6f9d6400f1964 /files/de/web/html | |
parent | fe0831846de29cce74db723e625c90b1ef966d9d (diff) | |
download | translated-content-9ace67d06f2369e3c770e3a11e06e1c8cc9f66fd.tar.gz translated-content-9ace67d06f2369e3c770e3a11e06e1c8cc9f66fd.tar.bz2 translated-content-9ace67d06f2369e3c770e3a11e06e1c8cc9f66fd.zip |
delete pages that were never translated from en-US (de, part 1) (#1548)
Diffstat (limited to 'files/de/web/html')
-rw-r--r-- | files/de/web/html/applying_color/index.html | 498 | ||||
-rw-r--r-- | files/de/web/html/element/input/button/index.html | 246 | ||||
-rw-r--r-- | files/de/web/html/element/th/index.html | 297 | ||||
-rw-r--r-- | files/de/web/html/global_attributes/is/index.html | 63 |
4 files changed, 0 insertions, 1104 deletions
diff --git a/files/de/web/html/applying_color/index.html b/files/de/web/html/applying_color/index.html deleted file mode 100644 index 3e39d7bbcf..0000000000 --- a/files/de/web/html/applying_color/index.html +++ /dev/null @@ -1,498 +0,0 @@ ---- -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/element/input/button/index.html b/files/de/web/html/element/input/button/index.html deleted file mode 100644 index d36dc8944b..0000000000 --- a/files/de/web/html/element/input/button/index.html +++ /dev/null @@ -1,246 +0,0 @@ ---- -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/th/index.html b/files/de/web/html/element/th/index.html deleted file mode 100644 index fce82bc5ca..0000000000 --- a/files/de/web/html/element/th/index.html +++ /dev/null @@ -1,297 +0,0 @@ ---- -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/global_attributes/is/index.html b/files/de/web/html/global_attributes/is/index.html deleted file mode 100644 index 224c20c184..0000000000 --- a/files/de/web/html/global_attributes/is/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: is -slug: Web/HTML/Global_attributes/is -translation_of: Web/HTML/Global_attributes/is -original_slug: Web/HTML/Globale_Attribute/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> |