diff options
| author | Ryan Johnson <rjohnson@mozilla.com> | 2021-04-29 16:16:42 -0700 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-04-29 16:16:42 -0700 |
| commit | 95aca4b4d8fa62815d4bd412fff1a364f842814a (patch) | |
| tree | 5e57661720fe9058d5c7db637e764800b50f9060 /files/pt-pt/web/html | |
| parent | ee3b1c87e3c8e72ca130943eed260ad642246581 (diff) | |
| download | translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.gz translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.bz2 translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.zip | |
remove retired locales (#699)
Diffstat (limited to 'files/pt-pt/web/html')
| -rw-r--r-- | files/pt-pt/web/html/applying_color/index.html | 582 | ||||
| -rw-r--r-- | files/pt-pt/web/html/attributes/crossorigin/index.html | 88 | ||||
| -rw-r--r-- | files/pt-pt/web/html/attributes/index.html | 660 | ||||
| -rw-r--r-- | files/pt-pt/web/html/attributes/rel/index.html | 419 | ||||
| -rw-r--r-- | files/pt-pt/web/html/element/audio/index.html | 48 | ||||
| -rw-r--r-- | files/pt-pt/web/html/element/fieldset/index.html | 178 | ||||
| -rw-r--r-- | files/pt-pt/web/html/element/figcaption/index.html | 102 | ||||
| -rw-r--r-- | files/pt-pt/web/html/element/figure/index.html | 57 | ||||
| -rw-r--r-- | files/pt-pt/web/html/element/head/index.html | 109 | ||||
| -rw-r--r-- | files/pt-pt/web/html/element/index.html | 108 | ||||
| -rw-r--r-- | files/pt-pt/web/html/element/nav/index.html | 100 | ||||
| -rw-r--r-- | files/pt-pt/web/html/element/progress/index.html | 129 | ||||
| -rw-r--r-- | files/pt-pt/web/html/element/video/index.html | 70 | ||||
| -rw-r--r-- | files/pt-pt/web/html/global_attributes/index.html | 481 | ||||
| -rw-r--r-- | files/pt-pt/web/html/index.html | 105 | ||||
| -rw-r--r-- | files/pt-pt/web/html/link_types/index.html | 609 | ||||
| -rw-r--r-- | files/pt-pt/web/html/reference/index.html | 28 |
17 files changed, 0 insertions, 3873 deletions
diff --git a/files/pt-pt/web/html/applying_color/index.html b/files/pt-pt/web/html/applying_color/index.html deleted file mode 100644 index 75c0e0f32b..0000000000 --- a/files/pt-pt/web/html/applying_color/index.html +++ /dev/null @@ -1,582 +0,0 @@ ---- -title: Aplicar cor aos elementos de HTML utilizando CSS -slug: Web/HTML/Applying_color -tags: - - CSS - - Cores de CSS - - Cores de HTML - - Estilo de HTML - - Estilos de HTML - - Guía - - HTML - - Principiante - - cor -translation_of: Web/HTML/Applying_color -original_slug: Web/HTML/Aplicar_cor_elementos_HTML_utilizando_CSS ---- -<div>{{HTMLRef}}</div> - -<p>A utilização de cor é uma forma fundamental da expressão humana. Children experiment with color before they even have the manual dexterity to draw. Maybe that's why color is one of the first things people often want to experiment with when learning to develop web sites. <span class="seoSummary">With <a href="/en-US/docs/Web/CSS">CSS</a>, there lots of ways to add color to your <a href="/en-US/docs/Web/HTML">HTML</a> <a href="/en-US/docs/Web/HTML/Element">elements</a> to create just the look you want. This article is a primer introducing each of the ways CSS color can be used in HTML.</span></p> - -<p>Fortunately, adding color to your HTML is actually really easy to do, and you can add color to nearly anything.</p> - -<p>We're going to touch on most of what you'll need to know when using color, including a {{anch("Things that can have color", "list of what you can color and what CSS properties are involved")}}, {{anch("How to describe a color", "how you describe colors")}}, and how to actually {{anch("Using color", "use colors both in stylesheets and in scripts")}}. We'll also take a look at how to {{anch("Letting the user picka color", "let the user pick a color")}}.</p> - -<p>Then we'll wrap things up with a brief discussion of how to {{anch("Using color wisely", "use color wisely")}}: how to select appropriate colors, keeping in mind the needs of people with differing visual capabilities.</p> - -<h2 id="Coisas_que_podem_ter_cor">Coisas que podem ter cor</h2> - -<p>At the element level, everything in HTML can have color applied to it. Instead, let's look at things in terms of the kinds of things that are drawn in the elements, such as text and borders and so forth. For each, we'll see a list of the CSS properties that apply color to them.</p> - -<p>At a fundamental level, the {{cssxref("color")}} property defines the foreground color of an HTML element's content and the {{cssxref("background-color")}} property defines the element's background color. These can be used on just about any element.</p> - -<h3 id="Texto">Texto</h3> - -<p>Whenever an element is rendered, these properties are used to determine the color of the text, its background, and any decorations on the text.</p> - -<dl> - <dt>{{cssxref("color")}}</dt> - <dd>The color to use when drawing the text and any <a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals#Font_style_font_weight_text_transform_and_text_decoration">text decorations</a> (such as the addition of under- or overlines, strike-through lines, and so forth.</dd> - <dt>{{cssxref("background-color")}}</dt> - <dd>The text's background color.</dd> - <dt>{{cssxref("text-shadow")}}</dt> - <dd>Configures a shadow effect to apply to text. Among the options for the shadow is the shadow's base color (which is then blurred and blended with the background based on the other parameters). See {{SectionOnPage("/en-US/docs/Learn/CSS/Styling_text/Fundamentals", "Text drop shadows")}} to learn more.</dd> - <dt>{{cssxref("text-decoration-color")}}</dt> - <dd>By default, text decorations (such as underlines, strikethroughs, etc) use the <code>color</code> property as their colors. However, you can override that behavior and use a different color for them with the <code>text-decoration-color</code> property.</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="Caixas">Caixas</h3> - -<p>Every element is a box with some sort of content, and has a background and a border in addition to whatever contents the box may have.</p> - -<dl> - <dt>{{anch("Borders")}}</dt> - <dd>See the section {{anch("Borders")}} for a list of the CSS properties you can use to set the colors of a box's borders.</dd> - <dt>{{cssxref("background-color")}}</dt> - <dd>The background color to use in areas of the element that have no foreground content.</dd> - <dt>{{cssxref("column-rule-color")}}</dt> - <dd>The color to use when drawing the line separating columns of text.</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="Contornos">Contornos</h3> - -<p>Any element can have a <a href="/en-US/docs/Learn/CSS/Styling_boxes/Borders">border</a> drawn around it. 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="Outros_modos_para_utilizar_a_cor">Outros modos para utilizar a cor</h3> - -<p>CSS isn't the only web technology that supports color. There are graphics technologies that are available on the web which also support color.</p> - -<dl> - <dt>The 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="Como_descrever_uma_cor">Como descrever uma cor</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="Palavras-chave">Palavras-chave</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="Valores_RGB">Valores RGB</h3> - -<p>There are three ways to represent an RGB color in CSS.</p> - -<h4 id="Hexadecimal_string_notation">Hexadecimal string notation</h4> - -<p>Hexadecimal string notation represents a color using hexadecimal digits to represent each of the color components (red, green, and blue). 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="Notação_funcional_de_HSL">Notação funcional de HSL</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="Utilizar_a_cor">Utilizar a cor</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="Especificar_cores_nas_folhas_de_estilo">Especificar cores nas folhas de estilo</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="Deixar_que_o_utilizador_escolha_uma_cor">Deixar que o utilizador escolha uma cor</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="Exemplo_Escolher_uma_cor">Exemplo: Escolher uma cor</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="Utilizar_a_cor_com_sabedoria">Utilizar a cor com sabedoria</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="Encontrar_as_cores_corretas">Encontrar as cores corretas</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="Cor_base">Cor base</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="Color_theory_resources">Color theory resources</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="Cor_e_acessibilidade">Cor e acessibilidade</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="Exemplo_da_paleta_de_desenho">Exemplo da paleta de desenho</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="Consulte_também">Consulte também</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> - -<div id="SL_balloon_obj" style="display: block;"> -<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%; display: block; opacity: 0; left: -8px; top: -25px; transition: visibility 2s ease 0s, opacity 2s linear 0s;"> </div> - -<div id="SL_shadow_translation_result2" style="display: none; margin-top: 30px; margin-left: 1px; direction: ltr; text-align: left;"> </div> - -<div id="SL_shadow_translator" class="hidden"> -<div id="SL_planshet"> -<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_Bproviders"> -<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div> - -<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div> - -<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div> -</div> - -<div id="SL_alert_bbl" class="hidden"> -<div id="SLHKclose" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_alert_cont"> </div> -</div> - -<div id="SL_TB"> -<table id="SL_tables"> - <tbody> - <tr> - <td class="SL_td"><input></td> - <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> - <td class="SL_td"> - <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Alternar Idiomas"> </div> - </td> - <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> - <td class="SL_td"> - <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ouça"> </div> - </td> - <td class="SL_td"> - <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Copiar"> </div> - </td> - <td class="SL_td"> - <div id="SL_bbl_font_patch"> </div> - - <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Tamanho da fonte"> </div> - </td> - <td class="SL_td"> - <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ajuda"> </div> - </td> - <td class="SL_td"> - <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Fixar a janela de pop-up"> </div> - </td> - </tr> - </tbody> -</table> -</div> -</div> - -<div id="SL_shadow_translation_result" style=""> </div> - -<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_player2"> </div> - -<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div> - -<div id="SL_Balloon_options" style="background: rgb(255, 255, 255) repeat scroll 0% 0%;"> -<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<table id="SL_tbl_opt" style="width: 100%;"> - <tbody> - <tr> - <td><input></td> - <td> - <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"> </div> - </td> - <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td> - <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td> - </tr> - </tbody> -</table> -</div> -</div> -</div> diff --git a/files/pt-pt/web/html/attributes/crossorigin/index.html b/files/pt-pt/web/html/attributes/crossorigin/index.html deleted file mode 100644 index 6fb3125b7d..0000000000 --- a/files/pt-pt/web/html/attributes/crossorigin/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: 'Atributo CORS: Solicitar acesso CORS para o conteúdo' -slug: Web/HTML/Attributes/crossorigin -tags: - - Avançado - - CORS - - HTML - - Precisa de Exemplo - - Referencia - - Segurança -translation_of: Web/HTML/Attributes/crossorigin -original_slug: Web/HTML/CORS_settings_attributes ---- -<p><span class="seoSummary">In HTML5, some HTML elements which provide support for <a href="/en-US/docs/Web/HTTP/CORS">CORS</a>, such as {{ HTMLElement("img") }}, {{ HTMLElement("video") }} or {{ HTMLElement("script") }}, have a <code>crossorigin</code> attribute (<code>crossOrigin</code> property), which lets you configure the CORS requests for the element's fetched data.</span> These attributes are enumerated, and have the following possible values:</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">Keyword</td> - <td class="header">Description</td> - </tr> - <tr> - <td><code>anonymous</code></td> - <td>CORS requests for this element will have the credentials flag set to 'same-origin'.</td> - </tr> - <tr> - <td><code>use-credentials</code></td> - <td>CORS requests for this element will have the credentials flag set to 'include'.</td> - </tr> - </tbody> -</table> - -<p>By default (that is, when the attribute is not specified), CORS is not used at all. The "anonymous" keyword means that there will be no exchange of <strong>user credentials</strong> via cookies, client-side SSL certificates or HTTP authentication as described in the <a class="external" href="http://www.w3.org/TR/cors/#user-credentials">Terminology section of the CORS specification</a>, unless it is in the same origin.</p> - -<p>An invalid keyword and an empty string will be handled as the <code>anonymous</code> keyword.</p> - -<h3 id="Exemplo_crossorigin_with_the_script_element">Exemplo: crossorigin with the script element</h3> - -<p>You can use the following {{HTMLElement("script")}} element to tell a browser to execute the <code>https://example.com/example-framework.js</code> script without sending user-credentials.</p> - -<pre class="brush: html"><script src="https://example.com/example-framework.js" - crossorigin="anonymous"></script></pre> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'infrastructure.html#cors-settings-attributes', 'CORS settings attributes')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'embedded-content.html#attr-img-crossorigin', 'crossorigin')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> - -<h3 id="<script_crossorigin>"><script crossorigin></h3> - -<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.script.crossorigin")}}</p> - -<h3 id="<video_crossorigin>"><video crossorigin></h3> - -<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.video.crossorigin")}}</p> - -<h2 id="Consulte_também">Consulte também</h2> - -<ul> - <li><a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing (CORS)</a></li> -</ul> - -<div>{{QuickLinksWithSubpages("/en-US/docs/Web/HTML/")}}</div> diff --git a/files/pt-pt/web/html/attributes/index.html b/files/pt-pt/web/html/attributes/index.html deleted file mode 100644 index 064acf59e9..0000000000 --- a/files/pt-pt/web/html/attributes/index.html +++ /dev/null @@ -1,660 +0,0 @@ ---- -title: Lista de atributos HTML -slug: Web/HTML/Attributes -tags: - - HTML - - Referencia - - Web - - atributo -translation_of: Web/HTML/Attributes -original_slug: Web/HTML/Atributos ---- -<p>Elementos em HTML têm <strong>atributos</strong>; estes são valores adicionais que configuram os elementos ou ajustam o seu comportamento em vários modos para corresponderem aos critérios que os utilizadores pretendem.</p> - -<h2 id="Lista_de_Atributos">Lista de Atributos</h2> - -<table class="standard-table"> - <thead> - <tr> - <th>Nome do Atributo</th> - <th>Elementos</th> - <th>Descrição</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>accept</code></td> - <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> - <td>Lista de tipos que o servidor aceita, é usualmente um tipo de ficheiro.</td> - </tr> - <tr> - <td><code>accept-charset</code></td> - <td>{{ HTMLElement("form") }}</td> - <td>Lista de codificações de caracteres (charsets) que são suportadas.</td> - </tr> - <tr> - <td><code>accesskey</code></td> - <td><a href="/en-US/docs/HTML/Global_attributes">Atributo global</a></td> - <td>Define um atalho do teclado para activar ou adicionar foco ao elemento.</td> - </tr> - <tr> - <td><code>action</code></td> - <td>{{ HTMLElement("form") }}</td> - <td>O URI dum programa que processa a informação submetida através deste formulário.</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>Especifica o alinhamento horizontal do elemento.</td> - </tr> - <tr> - <td><code>alt</code></td> - <td>{{ HTMLElement("applet") }}, {{ HTMLElement("area") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}</td> - <td>Texto alternativo no caso de uma imagem não poder ser mostrada.</td> - </tr> - <tr> - <td><code>async</code></td> - <td>{{ HTMLElement("script") }}</td> - <td>Indicates that the script should be executed asynchronously.</td> - </tr> - <tr> - <td><code>autocomplete</code></td> - <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> - <td>Indicates whether controls in this form can by default have their values automatically completed by the browser.</td> - </tr> - <tr> - <td><code>autofocus</code></td> - <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> - <td>The element should be automatically focused after the page loaded.</td> - </tr> - <tr> - <td><code>autoplay</code></td> - <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> - <td>The audio or video should play as soon as possible.</td> - </tr> - <tr> - <td><code>autosave</code></td> - <td>{{ HTMLElement("input") }}</td> - <td>Previous values should persist dropdowns of selectable values across page loads.</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>Background color of the element.</p> - - <div class="note"> - <p><strong>Nota:</strong> This is a legacy attribute. Please use the CSS {{ Cssxref("background-color") }} property instead.</p> - </div> - </td> - </tr> - <tr> - <td><code>border</code></td> - <td>{{ HTMLElement("img") }}, {{ HTMLElement("object") }}, {{ HTMLElement("table") }}</td> - <td> - <p>The border width.</p> - - <div class="note"> - <p><strong>Nota:</strong> This is a legacy attribute. Please use the CSS {{ Cssxref("border") }} property instead.</p> - </div> - </td> - </tr> - <tr> - <td><code>buffered</code></td> - <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> - <td>Contains the time range of already buffered media.</td> - </tr> - <tr> - <td><code>challenge</code></td> - <td>{{ HTMLElement("keygen") }}</td> - <td>A challenge string that is submitted along with the public key.</td> - </tr> - <tr> - <td><code>charset</code></td> - <td>{{ HTMLElement("meta") }}, {{ HTMLElement("script") }}</td> - <td>Declares the character encoding of the page or script.</td> - </tr> - <tr> - <td><code>checked</code></td> - <td>{{ HTMLElement("command") }}, {{ HTMLElement("input") }}</td> - <td>Indicates whether the element should be checked on page load.</td> - </tr> - <tr> - <td><code>cite</code></td> - <td>{{ HTMLElement("blockquote") }}, {{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("q") }}</td> - <td>Contains a URI which points to the source of the quote or change.</td> - </tr> - <tr> - <td><code>class</code></td> - <td><a href="/en-US/docs/HTML/Global_attributes">Global attribute</a></td> - <td>Often used with CSS to style elements with common properties.</td> - </tr> - <tr> - <td><code>code</code></td> - <td>{{ HTMLElement("applet") }}</td> - <td>Specifies the URL of the applet's class file to be loaded and executed.</td> - </tr> - <tr> - <td><code>codebase</code></td> - <td>{{ HTMLElement("applet") }}</td> - <td>This attribute gives the absolute or relative URL of the directory where applets' .class files referenced by the code attribute are stored.</td> - </tr> - <tr> - <td><code>color</code></td> - <td>{{ HTMLElement("basefont") }}, {{ HTMLElement("font") }}, {{ HTMLElement("hr") }}</td> - <td> - <p>This attribute sets the text color using either a named color or a color specified in the hexadecimal #RRGGBB format.</p> - - <div class="note"> - <p><strong>Nota:</strong> This is a legacy attribute. Please use the CSS {{ Cssxref("color") }} property instead.</p> - </div> - </td> - </tr> - <tr> - <td><code>cols</code></td> - <td>{{ HTMLElement("textarea") }}</td> - <td>Defines the number of columns in a textarea.</td> - </tr> - <tr> - <td><code>colspan</code></td> - <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td> - <td>The colspan attribute defines the number of columns a cell should span.</td> - </tr> - <tr> - <td><code>content</code></td> - <td>{{ HTMLElement("meta") }}</td> - <td>A value associated with <code>http-equiv</code> or <code>name</code> depending on the context.</td> - </tr> - <tr> - <td><code>contenteditable</code></td> - <td><a href="/en-US/docs/HTML/Global_attributes">Global attribute</a></td> - <td>Indicates whether the element's content is editable.</td> - </tr> - <tr> - <td><code>contextmenu</code></td> - <td><a href="/en-US/docs/HTML/Global_attributes">Global attribute</a></td> - <td>Defines the ID of a {{ HTMLElement("menu") }} element which will serve as the element's context menu.</td> - </tr> - <tr> - <td><code>controls</code></td> - <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> - <td>Indicates whether the browser should show playback controls to the user.</td> - </tr> - <tr> - <td><code>coords</code></td> - <td>{{ HTMLElement("area") }}</td> - <td>A set of values specifying the coordinates of the hot-spot region.</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>How the element handles cross-origin requests</td> - </tr> - <tr> - <td><code>data</code></td> - <td>{{ HTMLElement("object") }}</td> - <td>Specifies the URL of the resource.</td> - </tr> - <tr> - <td><code>data-*</code></td> - <td><a href="/en-US/docs/HTML/Global_attributes">Global attribute</a></td> - <td>Lets you attach custom attributes to an HTML element.</td> - </tr> - <tr> - <td><code>datetime</code></td> - <td>{{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("time") }}</td> - <td>Indicates the date and time associated with the element.</td> - </tr> - <tr> - <td><code>default</code></td> - <td>{{ HTMLElement("track") }}</td> - <td>Indicates that the track should be enabled unless the user's preferences indicate something different.</td> - </tr> - <tr> - <td><code>defer</code></td> - <td>{{ HTMLElement("script") }}</td> - <td>Indicates that the script should be executed after the page has been parsed.</td> - </tr> - <tr> - <td><code>dir</code></td> - <td><a href="/en-US/docs/HTML/Global_attributes">Global attribute</a></td> - <td>Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)</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>Indicates whether the user can interact with the element.</td> - </tr> - <tr> - <td><code>download</code></td> - <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td> - <td>Indicates that the hyperlink is to be used for downloading a resource.</td> - </tr> - <tr> - <td><code>draggable</code></td> - <td><a href="/en-US/docs/HTML/Global_attributes">Global attribute</a></td> - <td>Defines whether the element can be dragged.</td> - </tr> - <tr> - <td><code>dropzone</code></td> - <td><a href="/en-US/docs/HTML/Global_attributes">Global attribute</a></td> - <td>Indicates that the element accept the dropping of content on it.</td> - </tr> - <tr> - <td><code>enctype</code></td> - <td>{{ HTMLElement("form") }}</td> - <td>Defines the content type of the form date when the <code>method</code> is POST.</td> - </tr> - <tr> - <td><code>for</code></td> - <td>{{ HTMLElement("label") }}, {{ HTMLElement("output") }}</td> - <td>Describes elements which belongs to this one.</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>Indicates the form that is the owner of the element.</td> - </tr> - <tr> - <td><code>formaction</code></td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("button") }}</td> - <td>Indicates the action of the element, overriding the action defined in the {{ HTMLElement("form") }}.</td> - </tr> - <tr> - <td><code>headers</code></td> - <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td> - <td>IDs of the <code><th></code> elements which applies to this element.</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>Specifies the height of elements listed here. For all other elements, use the CSS {{cssxref("height")}} property.</p> - - <div class="note"> - <p><strong>Nota:</strong> In some instances, such as {{ HTMLElement("div") }}, this is a legacy attribute, in which case the CSS {{ Cssxref("height") }} property should be used instead.</p> - </div> - </td> - </tr> - <tr> - <td><code>hidden</code></td> - <td><a href="/en-US/docs/HTML/Global_attributes">Global attribute</a></td> - <td>Prevents rendering of given element, while keeping child elements, e.g. script elements, active.</td> - </tr> - <tr> - <td><code>high</code></td> - <td>{{ HTMLElement("meter") }}</td> - <td>Indicates the lower bound of the upper range.</td> - </tr> - <tr> - <td><code>href</code></td> - <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("link") }}</td> - <td> The URL of a linked resource.</td> - </tr> - <tr> - <td><code>hreflang</code></td> - <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td> - <td>Specifies the language of the linked resource.</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>Specifies a picture which represents the command.</td> - </tr> - <tr> - <td><code>id</code></td> - <td><a href="/en-US/docs/HTML/Global_attributes">Global attribute</a></td> - <td>Often used with CSS to style a specific element. The value of this attribute must be unique.</td> - </tr> - <tr> - <td><code>integrity</code></td> - <td>{{ HTMLElement("link") }}, {{ HTMLElement("script") }} </td> - <td> - <p>Security Feature that allows browsers to verify what they fetch. </p> - - <p><a href="/en-US/docs/">MDN Link</a></p> - </td> - </tr> - <tr> - <td><code>ismap</code></td> - <td>{{ HTMLElement("img") }}</td> - <td>Indicates that the image is part of a server-side image map.</td> - </tr> - <tr> - <td><code>itemprop</code></td> - <td><a href="/en-US/docs/HTML/Global_attributes">Global attribute</a></td> - <td> </td> - </tr> - <tr> - <td><code>keytype</code></td> - <td>{{ HTMLElement("keygen") }}</td> - <td>Specifies the type of key generated.</td> - </tr> - <tr> - <td><code>kind</code></td> - <td>{{ HTMLElement("track") }}</td> - <td>Specifies the kind of text track.</td> - </tr> - <tr> - <td><code>label</code></td> - <td>{{ HTMLElement("track") }}</td> - <td>Specifies a user-readable title of the text track.</td> - </tr> - <tr> - <td><code>lang</code></td> - <td><a href="/en-US/docs/HTML/Global_attributes">Global attribute</a></td> - <td>Defines the language used in the element.</td> - </tr> - <tr> - <td><code>language</code></td> - <td>{{ HTMLElement("script") }}</td> - <td>Defines the script language used in the element.</td> - </tr> - <tr> - <td><code>list</code></td> - <td>{{ HTMLElement("input") }}</td> - <td>Identifies a list of pre-defined options to suggest to the user.</td> - </tr> - <tr> - <td><code>loop</code></td> - <td>{{ HTMLElement("audio") }}, {{ HTMLElement("bgsound") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("video") }}</td> - <td>Indicates whether the media should start playing from the start when it's finished.</td> - </tr> - <tr> - <td><code>low</code></td> - <td>{{ HTMLElement("meter") }}</td> - <td>Indicates the upper bound of the lower range.</td> - </tr> - <tr> - <td><code>manifest</code></td> - <td>{{ HTMLElement("html") }}</td> - <td>Specifies the URL of the document's cache manifest.</td> - </tr> - <tr> - <td><code>max</code></td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td> - <td>Indicates the maximum value allowed.</td> - </tr> - <tr> - <td><code>maxlength</code></td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> - <td>Defines the maximum number of characters allowed in the element.</td> - </tr> - <tr> - <td><code>media</code></td> - <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}</td> - <td>Specifies a hint of the media for which the linked resource was designed.</td> - </tr> - <tr> - <td><code>method</code></td> - <td>{{ HTMLElement("form") }}</td> - <td>Defines which <a href="/en-US/docs/Web/HTTP">HTTP</a> method to use when submitting the form. Can be <code>GET</code> (default) or <code>POST</code>.</td> - </tr> - <tr> - <td><code>min</code></td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}</td> - <td>Indicates the minimum value allowed.</td> - </tr> - <tr> - <td><code>multiple</code></td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> - <td>Indicates whether multiple values can be entered in an input of the type <code>email</code> or <code>file</code>.</td> - </tr> - <tr> - <td><code>muted</code></td> - <td>{{ HTMLElement("video") }}</td> - <td>Indicates whether the audio will be initially silenced on page load.</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 of the element. For example used by the server to identify the fields in form submits.</td> - </tr> - <tr> - <td><code>novalidate</code></td> - <td>{{ HTMLElement("form") }}</td> - <td>This attribute indicates that the form shouldn't be validated when submitted.</td> - </tr> - <tr> - <td><code>open</code></td> - <td>{{ HTMLElement("details") }}</td> - <td>Indicates whether the details will be shown on page load.</td> - </tr> - <tr> - <td><code>optimum</code></td> - <td>{{ HTMLElement("meter") }}</td> - <td>Indicates the optimal numeric value.</td> - </tr> - <tr> - <td><code>pattern</code></td> - <td>{{ HTMLElement("input") }}</td> - <td>Defines a regular expression which the element's value will be validated against.</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>Provides a hint to the user of what can be entered in the field.</td> - </tr> - <tr> - <td><code>poster</code></td> - <td>{{ HTMLElement("video") }}</td> - <td>A URL indicating a poster frame to show until the user plays or seeks.</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="/en-US/docs/HTML/Global_attributes">Global attribute</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="/en-US/docs/HTML/Global_attributes">Global attribute</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>The URL of the embeddable content.</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>Defines the first number if other than 1.</td> - </tr> - <tr> - <td><code>step</code></td> - <td>{{ HTMLElement("input") }}</td> - <td> </td> - </tr> - <tr> - <td><code>style</code></td> - <td><a href="/en-US/docs/HTML/Global_attributes">Global attribute</a></td> - <td>Defines CSS styles which will override styles previously set.</td> - </tr> - <tr> - <td><code>summary</code></td> - <td>{{ HTMLElement("table") }}</td> - <td> </td> - </tr> - <tr> - <td><code>tabindex</code></td> - <td><a href="/en-US/docs/HTML/Global_attributes">Global attribute</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="/en-US/docs/HTML/Global_attributes">Global attribute</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>Defines the type of the element.</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>Nota:</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="Conteúdo_versus_atributos_IDL">Conteúdo versus atributos IDL</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="Consulte_também">Consulte também</h2> - -<ul> - <li><a href="/pt-PT/docs/Web/HTML/Elemento">Elementos de HTML</a></li> -</ul> diff --git a/files/pt-pt/web/html/attributes/rel/index.html b/files/pt-pt/web/html/attributes/rel/index.html deleted file mode 100644 index e6ba17138c..0000000000 --- a/files/pt-pt/web/html/attributes/rel/index.html +++ /dev/null @@ -1,419 +0,0 @@ ---- -title: 'HTML attribute: rel' -slug: Web/HTML/Attributes/rel -translation_of: Web/HTML/Attributes/rel -original_slug: Web/HTML/Atributos/rel ---- -<p>{{draft}}</p> - -<p class="summary">O atributo <strong><code>rel</code></strong> define a relação entre um recurso ligado e o documento atual. É válido em {{htmlelement('link')}}, {{htmlelement('a')}}, {{htmlelement('area')}}, e {{htmlelement('form')}}. Os valores suportados dependem do elemento em que o atributo é usado.</p> - -<p>O tipo de relação (da ligação) é definido pelo atributo <strong><em><code>rel</code></em></strong> que, se existir, tem de ter um valor que é um conjunto de palavras-chave (<em>keywords</em>) únicas, desordenadas, e separadas por espaços. As palavras-chave possíveis estão na tabela em baixo.</p> - -<table class="standard-table"> - <caption>Valores possíves para o atributo <code>rel</code>, e os elementos em que são relevantes</caption> - <thead> - <tr> - <th><code>rel</code> (valor)</th> - <th>Descrição</th> - <th><code>{{htmlelement('link')}}</code></th> - <th><code>{{htmlelement('a')}}</code> e <code>{{htmlelement('area')}}</code></th> - <th><code>{{htmlelement('form')}}</code></th> - </tr> - </thead> - <tbody> - <tr> - <td><code>{{anch("attr-alternate", "alternate")}}</code></td> - <td>Representações alternativas do documento atual.</td> - <td><em>Link</em></td> - <td><em>Link</em></td> - <td class="not-allowed">Não permitido</td> - </tr> - <tr> - <td><code>{{anch("attr-author", "author")}}</code></td> - <td>Autor do documento ou artigo atual.</td> - <td><em>Link</em></td> - <td><em>Link</em></td> - <td class="not-allowed">Não permitido</td> - </tr> - <tr> - <td><code>{{anch("attr-bookmark", "bookmark")}}</code></td> - <td><em>Permalink</em> para a secção antecessora mais próxima.</td> - <td class="not-allowed">Não permitido</td> - <td><em>Link</em></td> - <td class="not-allowed">Não permitido</td> - </tr> - <tr> - <td><code>{{anch("attr-canonical", "canonical")}}</code></td> - <td>URL ideal para o documento atual.</td> - <td><em>Link</em></td> - <td class="not-allowed">Não permitido</td> - <td class="not-allowed">Não permitido</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/Web/HTML/Link_types/dns-prefetch">dns-prefetch</a></code></td> - <td>Pede ao <em>browser</em> para antecipadamente efetuar a resolução de DNS para o <em>link</em> em questão.</td> - <td>Recurso externo</td> - <td class="not-allowed">Não permitido</td> - <td class="not-allowed">Não permitido</td> - </tr> - <tr> - <td><code>{{anch("attr-external", "external")}}</code></td> - <td>O documento referenciado não pertence ao <em>site</em> do documento atual.</td> - <td class="not-allowed">Não permitido</td> - <td>Anotação</td> - <td>Anotação</td> - </tr> - <tr> - <td><code>{{anch("attr-help", "help")}}</code></td> - <td><em>Link</em> para material de apoio sobre o contexto atual.</td> - <td><em>Link</em></td> - <td><em>Link</em></td> - <td><em>Link</em></td> - </tr> - <tr> - <td><code>{{anch("attr-icon", "icon")}}</code></td> - <td>Um ícone representativo do documento atual.</td> - <td>Recurso externo</td> - <td class="not-allowed">Não permitido</td> - <td class="not-allowed">Não permitido</td> - </tr> - <tr> - <td><code>{{anch("attr-license", "license")}}</code></td> - <td>O conteúdo principal do documento atual está protegido pela licença de direitos de autor<em> </em>referida no <em>link</em>.</td> - <td><em>Link</em></td> - <td><em>Link</em></td> - <td><em>Link</em></td> - </tr> - <tr> - <td><code><a href="/en-US/docs/Web/HTML/Link_types/manifest">manifest</a></code></td> - <td><em>Web</em> <em>app</em> <em>manifest</em></td> - <td class="not-allowed"><em>Link</em></td> - <td>Não permitido</td> - <td class="not-allowed">Não permitido</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/Web/HTML/Link_types/modulepreload">modulepreload</a></code></td> - <td>Pede ao <em>browser</em> para antecipadamente descarregar o <em>script </em>e guardá-lo no mapa de módulos do documento, para avaliar depois. As dependências do módulo também podem ser descarregadas, opcionalmente.</td> - <td>Recurso externo</td> - <td class="not-allowed">Não permitido</td> - <td class="not-allowed">Não permitido</td> - </tr> - <tr> - <td><code>{{anch("attr-next", "next")}}</code></td> - <td>Indica que o documento atual pertence a uma série de documentos, e que o documento referenciado por este <em>link </em>é o seguinte.</td> - <td><em>Link</em></td> - <td><em>Link</em></td> - <td><em>Link</em></td> - </tr> - <tr> - <td><code>{{anch("attr-nofollow", "nofollow")}}</code></td> - <td>Indica que o autor ou editor do documento atual não aprova o documento referenciado.</td> - <td class="not-allowed">Não permitido</td> - <td>Anotação</td> - <td>Anotação</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/Web/HTML/Link_types/noopener">noopener</a></code></td> - <td>Cria um contexto de navegação de nível superior e não é "auxiliar" (não está relacionado com outro contexto de navegação), mesmo que a hiperligação estivesse configurada para criar outro tipo de contexto (atribuindo um certo valor ao atributo<code> target</code>, por exemplo).</td> - <td class="not-allowed">Não permitido</td> - <td>Anotação</td> - <td>Anotação</td> - </tr> - <tr> - <td><code>{{anch("attr-noreferrer", "noreferrer")}}</code></td> - <td>Comporta-se do mesmo modo que <code>noopener</code>, mas exclui o <em>header</em> <code>Referer</code> do pedido.</td> - <td class="not-allowed">Não permitido</td> - <td>Anotação</td> - <td>Anotação</td> - </tr> - <tr> - <td><code>{{anch("attr-opener", "opener")}}</code></td> - <td>Cria um contexto de navegação auxiliar, mesmo que a hiperligação fosse criar um contexto de navegação de nível superior que não fosse auxiliar (por exemplo, no caso de um link com "<code>_blank</code>" como valor do atributo <code>target</code>).</td> - <td class="not-allowed">Não permitido</td> - <td>Anotação</td> - <td>Anotação</td> - </tr> - <tr> - <td><code>{{anch("attr-pingback", "pingback")}}</code></td> - <td>Indica o endereço do servidor <em>pingback</em> que controla <em>pingbacks</em> para o document atual.</td> - <td>Recurso externo</td> - <td class="not-allowed">Não permitido</td> - <td class="not-allowed">Não permitido</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/Web/HTML/Link_types/preconnect">preconnect</a></code></td> - <td>Informa o <em>user agent</em> de que este deve ligar-se antecipadamente à origem do recurso apontado pelo <em>link</em>.</td> - <td>Recurso externo</td> - <td class="not-allowed">Não permitido</td> - <td class="not-allowed">Não permitido</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/Web/HTML/Link_types/prefetch">prefetch</a></code></td> - <td>Informa o <em>user agent</em> de que este deve antecipadamente descarregar o recurso apontado e guardá-lo em <em>cache</em>, porque é provável que este seja necessário numa futura navegação.</td> - <td>Recurso externo</td> - <td class="not-allowed">Não permitido</td> - <td class="not-allowed">Não permitido</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/Web/HTML/Link_types/preload">preload</a></code></td> - <td> - <p>Informa o <em>user agent</em> de que este deve antecipadamente descarregar o recurso apontado e guardá-lo em <em>cache. </em>Tal deverá ocorrer para para que o recurso seja usado na navegação atual, com base no atributo <code><a href="as">as</a></code> (e na prioridade associada ao recurso apontado).</p> - </td> - <td>Recurso externo</td> - <td class="not-allowed">Não permitido</td> - <td class="not-allowed">Não permitido</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/Web/HTML/Link_types/prerender">prerender</a></code></td> - <td>Informa o <em>user agent</em> de que este deve antecipadamente descarregar o recurso apontado e futuramente responder mais rapidamente ao mesmo pedido.</td> - <td>Recurso externo</td> - <td class="not-allowed">Não permitido</td> - <td class="not-allowed">Não permitido</td> - </tr> - <tr> - <td><code>{{anch("attr-prev", "prev")}}</code></td> - <td>Indica que o documento atual pertence a uma série de documentos, e que o documento referenciado por este <em>link </em>é o anterior.</td> - <td><em>Link</em></td> - <td><em>Link</em></td> - <td><em>Link</em></td> - </tr> - <tr> - <td><code>{{anch("attr-search", "search")}}</code></td> - <td>Aponta para um recurso onde se pode pesquisar por conteúdo do documento atual e de páginas relacionadas.</td> - <td><em>Link</em></td> - <td><em>Link</em></td> - <td><em>Link</em></td> - </tr> - <tr> - <td><code>{{anch("attr-stylesheet", "stylesheet")}}</code></td> - <td>Importa uma <em>style sheet</em>.</td> - <td>Recurso externo</td> - <td class="not-allowed">Não permitido</td> - <td class="not-allowed">Não permitido</td> - </tr> - <tr> - <td><code>{{anch("attr-tag", "tag")}}</code></td> - <td>Fornece uma <em>tag</em> (identificada pelo endereço referido) a ser usada no documento atual.</td> - <td class="not-allowed">Não permitido</td> - <td><em>Link</em></td> - <td class="not-allowed">Não aplicado</td> - </tr> - </tbody> -</table> - -<p>O atributo <code>rel</code> é relevate para os elementos {{htmlelement('link')}}, {{htmlelement('a')}}, {{htmlelement('area')}}, e {{htmlelement('form')}}. No entanto, alguns dos valores só são relevantes para casos específicos deste grupo de elementos. Para o valor de <code>rel</code>, não há diferenciação entre maiúsculas e minúsculas, tal como em nos atributos HTML em geral.</p> - -<p><code>rel</code> não tem um valor por defeito. Se o atributo for omitido ou se os seus valores forem inválidos, então não existe qualquer relação entre o documento atual e o recurso apontado, fora a existência de uma hiperligação. Por exemplo, para {{htmlelement('link')}} e {{htmlelement('form')}}, se <code>rel</code> for omitido, ou se não tiver pelo menos uma das <em>keywords</em> em cima (separadas por espaços), então não são criadas hiperligações. Mas se o mesmo acontecer com os elementos {{htmlelement('a')}} ou {{htmlelement('area')}}, então os elementos criam hiperligações sem uma relação específica.</p> - -<h2 id="Valores">Valores</h2> - -<p>Se houverem vários elementos <code><link rel="icon"></code>, o <em>browser</em> verifica os atributos <a href="media"><code>media</code></a>, <a href="type"><code>type</code></a> e <a href="sizes"><code>sizes</code></a> destes para selecionar o ícone mais adequado. Se mais do que um elemento for adequado, é o último que é usado. Se o ícone selecionado acabar por não ser apropriado (porque usa um formato não suportado, por exemplo), o <em>browser </em>seleciona o próximo elemento mais adequado.</p> - -<p><strong>Nota:</strong> Sistemas Apple iOS não usam este tipo de <em>link</em>, nem o atributo <a href="sizes"><code>sizes</code></a> (usado por outros <em>browsers </em>para dispositivos móveis), para escolher um ícone para um Web Clip ou para um <em>placeholder</em> visível no arranque. Sistemas iOS usam <a class="external external-icon" href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4"><code>apple-touch-icon</code></a> e <a class="external external-icon" href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW6"><code>apple-touch-startup-image</code></a> respetivamente, atributos que não são padrão.</p> - -<p class="note">O tipo de <em>link</em> <code>shortcut</code> é frequentemente encontrado antes de <code>icon</code>, mas não é padrão, é ignorado, e <strong>já não deve ser usado por autores para a<em> web</em></strong>.</p> - -<dl> - <dt>{{htmlattrdef("alternate")}}</dt> - <dd>Aponta para uma versão alternativa do documento atual. É compatível com elementos <code>link</code>, <code>a</code>, e <code>area</code>. O efeito de <code>alternate</code> depende do valor de outros atributos: - <ul> - <li>Em conjunto com <code>{{anch('stylesheet')}} num </code><code>link</code>, <code>alternate</code> cria uma folha de estilo (<em>style sheet)</em> alternativa. - <pre class="brush:html notranslate"><!-- uma folha de estilo persistente --> -<link rel="stylesheet" href="default.css"> -<!-- folhas de estilo alternativas --> -<link rel="alternate stylesheet" href="highcontrast.css" title="High contrast"></pre> - </li> - <li>Com um atributo <code><a href="hreflang">hreflang</a></code> que tenha um valor diferente da língua do documento, <code>alternate</code> aponta para uma versão traduzida do documento.</li> - <li>Com um atributo <code><a href="type">type</a></code>, aponta para um documento com o mesmo contexto mas formato diferente. Por exemplo, com <code>type="application/rss+xml"</code> cria uma hiperligação para um <em>feed RSS</em>. - <pre class="brush:html notranslate"><link rel="alternate" type="application/atom+xml" href="posts.xml" title="Blog"></pre> - </li> - <li>Os atributos <a href="hreflang">hreflang</a> e <a href="type">type</a> apontam para versões do documento atua com formatos ou línguas diferentes, que podem ser dedicados a outros <em>media</em> - <pre class="brush:html notranslate"><link rel=alternate href="/fr/html/print" hreflang=fr type=text/html media=print title="French HTML (for printing)"> -<link rel=alternate href="/fr/pdf" hreflang=fr type=application/pdf title="French PDF"></pre> - </li> - </ul> - </dd> - <dt>{{htmlattrdef("author")}}</dt> - <dd>Cria uma hiperligação que indica o autor do documento ou artigo atual. Compatível com elementos {{htmlelement('link')}}, {{htmlelement('a')}}, e {{htmlelement('area')}}. Quando usado com {{htmlelement('a')}} ou {{htmlelement('area')}}, aponta para um documento (ou <code>mailto:</code>) com informação sobre o autor ou do {{htmlelement('article')}} pai mais próximo (se existir), ou do documento em si. No caso de um elemento {{htmlelement('link')}}, aponta para informação sobre o autor do documento atual. - <p class="note">Nota: O atributo obsoleto <code>rev="made"</code> é tratado como <code>rel="alternate"</code></p> - </dd> - <dt>{{htmlattrdef("bookmark")}}</dt> - <dd>Compatível com elementos {{htmlelement('a')}} e {{htmlelement('area')}}, <code>bookmark</code> informa que o <em>link é</em> um <em>permalink</em> para uma secção pai, que pode ser o {{htmlelement('article')}} ou {{htmlelement('section')}} mais próximo. Se tal secção não existir, o <em>link</em> refere-se ou ao <em>heading</em> mais próximo (que pode ser irmão do link, ou descender de um pai comum).</dd> - <dt>{{htmlattrdef("canonical")}}</dt> - <dd>Compatível com {{htmlelement('link')}}. Define o URL ideal para o documento atual, que é útil para motores de busca.</dd> - <dt>{{htmlattrdef("dns-prefetch")}}</dt> - <dd>Compatível com {{htmlelement('link')}}, seja dentro do {{htmlelement('body')}} ou do {{htmlelement('head')}}. Alerta o <em>browser</em> para antecipadamente efetuar resolução de DNS para a origem do recurso apontado. É útil para recursos que provavelmente serão úteis para o utilizador, porque este será capaz de aceder aos recursos mais rapidamente. Consulte a página sobre <a href="/pt-PT/docs/">como utilizar o DNS <em>prefetch</em></a> para mais informações.</dd> - <dt>{{htmlattrdef("external")}}</dt> - <dd>Compatível com {{htmlelement('form')}}, {{htmlelement('a')}}, e {{htmlelement('area')}}. Indica que o documento referenciado não pertence ao <em>site </em>atual. Este valor é útil para estilizar links externos, e assim informar os utilizadores de que, se ativarem o elemento, vão abandonar o site atual.</dd> - <dt>{{htmlattrdef("help")}}</dt> - <dd>Compatível com {{htmlelement('form')}}, {{htmlelement('link')}}, {{htmlelement('a')}}, e {{htmlelement('area')}}. Usado para representar uma ligação para conteúdo informativo sobre o pai do elemento com a hiperligação (e descendentes desse mesmo pai). Se um <code><link></code> contiver este valor, então o documento referenciado serve de apoio para o documento atual (em geral). Quando o valor está presente num elemento {{htmlelement('a')}} ou {{htmlelement('area')}}, o cursor {{cssxref('cursor')}} passará a <code>help</code> em vez de <code>pointer</code> (se possível).</dd> - <dt>{{htmlattrdef("icon")}}</dt> - <dd> - <p>Compatível com {{htmlelement('link')}}. Indica que o recurso referenciado é um ícone representativo do documento atual.</p> - - <p>Este valor é principalmente utilizado para definir um <em>favicon</em>:</p> - - <pre class="brush: html notranslate"><link rel="icon" href="favicon.ico"></pre> - - <p>Se houverem vários elementos <code><link rel="icon"></code>, então o <em>browser</em> deduz que <em>favicon</em> utilizar com base nos atributos <a href="media"><code>media</code></a>, <a href="type"><code>type</code></a>, e <a href="sizes"><code>sizes</code></a>. Caso mais que um destes elementos sejam os mais adequados (com base nestes critérios), então o <em>browser</em> seleciona o último destes. Se, posteriormente, o ícone mais adequado deixar de o ser, então o <em>browser </em>passa a usar o próximo ícone mais adequado.</p> - - <p><strong>Nota:</strong> para selecionar um ícone para um Web Clip ou para <em>placeholder</em> de arranque, o sistema iOS da Apple não usa nem este tipo de <em>link</em> nem o atributo <a href="sizes"><code>sizes</code></a>. Ao contrário de outros <em>browsers mobile</em>, este sistema usa os valores <a class="external external-icon" href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4"><code>apple-touch-icon</code></a> e <a class="external external-icon" href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW6"><code>apple-touch-startup-image</code></a> respetivamente. Estes valores não são considerados <em>standard</em>.</p> - - <p class="note">O valor <code>shortcut</code> é frequentemente encontrado antes de <code>icon</code>, mas <strong>já não deve ser utilizado por autores na <em>web</em></strong>. <em>shortcut</em> não pertence a uma especificação, e é ignorado por diversos <em>browsers.</em> </p> - </dd> - <dt>{{htmlattrdef("license")}}</dt> - <dd> - <p>Compatível com elementos {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}, {{HTMLElement("link")}}. O valor indica que a hiperligação aponta para informação de licenciamento relativa ao documento atual. Deste modo, sabe-se que o conteúdo principal do documento atual está protegido pela licença de <em>copyright </em>descrita no documento referenciado. Mesmo quando utilizado num descendente que não pertence ao elemento {{HTMLElement("head")}}, não há distinção entre uma hiperligação para uma licença associada ou a parte do documento ou ao documento em geral. Esta distinção só é possível através da informação na página.</p> - - <pre class="brush: html notranslate"><link rel="license" href="#license"></pre> - - <p><strong>Nota:</strong> Apesar de reconhecido, o valor "equivalente" <code>copyright</code> não é correto, pelo que deve ser evitado.</p> - </dd> - <dt>{{htmlattrdef("manifest")}}</dt> - <dd><a href="/en-US/docs/Web/Manifest">Manifesto <em>web app</em></a>. Requer o protocolo CORS para adquirir dados de origens diferentes (<em>cross-origin</em>).</dd> - <dt>{{htmlattrdef("modulepreload")}}</dt> - <dd>Útil para questões de <em>performance</em>, compatível com elementos {{htmlelement('link')}} em todo o documento. Informa o <em>browser </em>de que este deve antecipadamente descarregar o <em>script </em>referenciado (com as dependências respetivas), e armazená-lo no módulo de mapa de módulos para futura avaliação. Hiperligações com <code>modulepreload</code> podem ser usados para garantir que o recurso é descarregado com o módulo pronto (mas não avaliado) no mapa de módulo ainda antes de ser necessário. Veja também a página sobre <a href="/en-US/docs/Web/HTML/Link_types/modulepreload">tipos de <em>link</em>: <code>modulepreload</code></a>.</dd> - <dt>{{htmlattrdef("next")}}</dt> - <dd>Compatível com {{htmlelement('form')}}, {{htmlelement('link')}}, {{htmlelement('a')}}, e {{htmlelement('area')}}. Indica que o documento atual pertence a uma série de documentos, e que o documento na série que se segue é referenciado pelo elemento em questão. Quando o valor está presente num elemento <code><link></code>, os <em>browsers</em> podem assumir que este recurso vai ser necessário posteriormente, e considerar esta informação uma "resource hint" (dica de recurso que podem descarregar antecipadamente).</dd> - <dt>{{htmlattrdef("nofollow")}}</dt> - <dd>Compatível com {{htmlelement('form')}}, {{htmlelement('a')}}, e {{htmlelement('area')}}. <code>nofollow</code> informa <em>spiders </em>(de motores de busca) de que devem ignorar a relação definida pelo <em>link</em>. Este valor pode indicar que o dono do documento atual não confia ou aprova o documento referenciado. <code>nofollow</code> é frequentemente incluído por <em>Search Engine Optimizers</em> (otimizadores de motores de busca) para dar a impressão de que os seus <em>link farms</em> não são páginas de <em>spam</em>.</dd> - <dt>{{htmlattrdef("noopener")}}</dt> - <dd>Compatível com {{htmlelement('form')}}, {{htmlelement('a')}}, e {{htmlelement('area')}}. Quando selecionado, o <em>link</em> cria um contexto de navegação de topo (<em>top-level browsing context</em>) que não é auxiliar (<em>auxiliary</em>), mesmo que tenha condições para criar um contexto auxiliar (ex.: por ter um valor para<code> target </code>adequado). Por outras palavras, o <em>link</em> comporta-se como se <code><a href="/en-US/docs/Web/API/Window/opener">window.opener</a></code> fosse nulo e <code><a href="target">target</a>="_parent"</code> estivesse definido.<br> - <br> - <code>noopener</code> faz o contrário de {{anch("opener")}}.</dd> - <dt>{{htmlattrdef("noreferrer")}}</dt> - <dd>Compatível com {{htmlelement('form')}}, {{htmlelement('a')}}, e {{htmlelement('area')}}. Quando incluído, o <em>referrer </em>(página com referência para o recurso) desconhecido. Deste modo, o pedido não inclui <code>Referer</code> no <em>header, </em>e cria um contexto de navegação de topo (<em>top-level browsing context</em>), como se <code>noopener</code> também estivesse definido.</dd> - <dt>{{htmlattrdef("opener")}}</dt> - <dd>Cria um contexto de navegação auxiliar (<em>auxiliary browsing context</em>), mesmo que o <em>link</em> tenha características para criar um contexto de navegação que não fosse auxiliar (via <code>target="_blank"</code>).</dd> - <dd><code>opener</code> faz o contrário de {{anch("noopener")}}.</dd> - <dt>{{htmlattrdef("pingback")}}</dt> - <dd>Define o endereço do servidor de <em>pingback</em> que controla <em>pingbacks</em> para o documento atual.</dd> - <dt>{{htmlattrdef("preconnect")}}</dt> - <dd>Define que o <em>user agent </em>deve antecipadamente conectar-se à origem do recurso apontado.</dd> - <dt>{{htmlattrdef("prefetch")}}</dt> - <dd>Define que o <em>user agent</em> deve antecipadamente descarregar e guardar em <em>cache</em> o recurso apontado. Deste modo, o recurso fica pronto se requisitado posteriormente.</dd> - <dt>{{htmlattrdef("preload")}}</dt> - <dd>Define que o <em>user agent</em> deve antecipadamente descarregar e guardar em <em>cache</em> o recurso apontado para a navegação atual. Deste modo, o recurso está preparado para ser usado num potencial destino da navegação, definido pelo atributo <code><a href="as">as</a></code> (a prioridade associada a este destino também é considerada).</dd> - <dt>{{htmlattrdef("prerender")}}</dt> - <dd>Define que o <em>user agent </em>deve antecipadamente descarregar e renderizar o recurso apontado, acelerando respostas a pedidos equivalentes.</dd> - <dt>{{htmlattrdef("prev")}}</dt> - <dd> - <p>Equivalente à palavra-chave {{anch("next")}}, compatível com os elementos {{htmlelement('form')}}, {{htmlelement('link')}}, {{htmlelement('a')}}, e {{htmlelement('area')}}. O valor <code>prev</code> indica que o documento atual pertence a uma série de documentos, sendo o link referenciado para o documento que se segue ao atual.</p> - - <p>Nota: O valor sinónimo <code>previous</code> não deve ser usado incorrect and should not be used, porque é incorreto.</p> - </dd> - <dt>{{htmlattrdef("search")}}</dt> - <dd> - <p>Compatível com elementos {{htmlelement('form')}}, {{htmlelement('link')}}, {{htmlelement('a')}}, e {{htmlelement('area')}}. <code>search</code> indica que o <em>link</em> referencia um documento com uma <em>interface</em> para pesquisar por conteúdo do documento atual, seja no <em>site </em>ou em recursos relacionados.</p> - - <p>Se o atributo <code><a href="type">type</a></code> do elemento for <code>application/opensearchdescription+xml,</code> então o recurso apontado é um <em>plugin</em> <a href="/en-US/docs/Creating_OpenSearch_plugins_for_Firefox">OpenSearch</a> que pode ser facilmente adicionado a alguns <em>browsers,</em> como o Firefox ou o Internet Explorer.</p> - </dd> - <dt>{{htmlattrdef("stylesheet")}}</dt> - <dd> - <p>Compatível com elementos {{htmlelement('link')}}. Importa um recurso externo que é uma <em>stylesheet</em> (folha de estilos). Caso o <em>link</em> aponte para uma <em>stylesheet</em> do tipo <code>text/css</code>, então pode-se omitir o atributo <code><a href="type">type</a></code>.</p> - - <p>Apesar do valor identificar o <em>link </em>como uma <em>stylesheet</em>, outros atributos ou valores poderão determinar se esta é descarregada ou usada.</p> - - <p>Quando o valor <code>stylesheet</code> é usado em conjunto com {{anch('alternate')}}, passa a definir uma <em>stylesheet</em> alternativa. Neste caso, deve ter o atributo <code><a href="type">title</a></code> com um valor não-vazio.</p> - - <p>O recurso <em>stylesheet</em> externo não será usado nem descarregado em contextos multimédia que não correspondam ao definido pelo atributo <code><a href="media">media</a></code> (ex.: se o <em>link</em> para a <em>stylesheet </em>tiver um atributo <code>media </code>com valor "print", então a <em>stylesheet</em> não será descarregada quando a página é renderizada numa tela).</p> - - <p>Requer o uso do protocolo CORS para pedidos com origens diferentes.</p> - </dd> - <dt>{{htmlattrdef("tag")}}</dt> - <dd>Compatível com elementos {{htmlelement('a')}} e {{htmlelement('area')}}. Define que o <em>link </em>referenciado identifica uma palavra-chave<em> </em>que se aplica ao documento atual. Este tipo de <em>link</em> não deve identificar palavras-chave numa <em>tag cloud</em>, porque estas aplicam-se apenas a um grupo de páginas, e não a uma página só (que é o objetivo do valor <code>tag</code>).</dd> -</dl> - -<h3 id="Valores_que_não_são_standard">Valores que não são <em>standard</em></h3> - -<dl> - <dt>apple-touch-icon-precomposed</dt> - <dd> - <pre class="brush: html notranslate"> <!-- iPad de terceira geração com tela Retina de alta resolução: --> - <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/static/img/favicon144.e7e21ca263ca.png"> - <!-- iPhone com tela Retina de alta resolução: --> - <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/static/img/favicon114.d526f38b09c5.png"> - <!-- iPad de primeira e segunda gerações: --> - <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/static/img/favicon72.cc65d1d762a0.png"> - <!-- iPhone e iPod Touch sem telas Retina, e dispositivos Android 2.1 ou superior: --> - <link rel="apple-touch-icon-precomposed" href="/static/img/favicon57.de33179910ae.png"> - <!-- favicon básico --> - <link rel="shortcut icon" href="/static/img/favicon32.7f3da72dcea1.png"></pre> - </dd> -</dl> - -<h2 id="Compatibilidade_de_Browsers_do_atributo_rel_em_geral">Compatibilidade de Browsers do atributo <em>rel </em>em geral</h2> - -<div class="hidden">Esta tabela de compatibilidade de <em>browsers</em> é gerada automaticamente a partir de dados organizados. Se quiser contribuir ao atualizar os dados, veja <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos um <em>pull request</em>.</div> - -<p>{{Compat("html.elements.attributes.rel")}}</p> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentários</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'links.html#linkTypes', 'rel attribute')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Adicionado <code>opener</code>. <code>noopener</code> passou a ser definido por omissão com <code>target="_blank"</code>.</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'links.html#linkTypes', 'rel attribute')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Adicionados <code>tag</code>, <code>search</code>, <code>prefetch</code>, <code>noreferrer</code>, <code>nofollow</code>, <code>icon</code>, e <code>author</code>.<br> - <code>copyright</code> passou a ser <code>license</code>.<br> - Removidos <code>start</code>, <code>chapter</code>, <code>section</code>, <code>subsection</code>, e <code>appendix</code></td> - </tr> - <tr> - <td>{{SpecName("Preload", "#x2.link-type-preload", "preload")}}</td> - <td>{{Spec2("Preload")}}</td> - <td>Adicionado <code>preload</code>.</td> - </tr> - <tr> - <td>{{SpecName("Resource Hints", "#dfn-preconnect", "preconnect")}}</td> - <td>{{Spec2("Resource Hints")}}</td> - <td>Adicionados <code>dns-prefetch</code>, <code>preconnect</code>, e <code>prerender</code>.</td> - </tr> - <tr> - <td>{{SpecName("HTML4.01", "types.html#type-links", "link types")}}</td> - <td>{{Spec2("HTML4.01")}}</td> - <td>Adicionados <code>alternate</code>, <code>stylesheet</code>, <code>start</code>, <code>chapter</code>, <code>section</code>, <code>subsection</code>, <code>appendix</code>, e <code>bookmark</code>.<br> - <code>previous</code> passou a ser <code>prev</code>.<br> - Removidos <code>top</code>, e <code>search</code>.</td> - </tr> - <tr> - <td>{{SpecName("HTML3.2", "#link", "<link>")}}</td> - <td> - <p>{{Spec2("HTML3.2")}}<span class="spec-Obsolete"> (Obsoleto)</span></p> - </td> - <td>Adicionados <code>top</code>, <code>contents</code>, <code>index</code>, <code>glossary</code>, <code>copyright</code>, <code>next</code>, <code>previous</code>, <code>help</code>, e <code>search</code>.</td> - </tr> - <tr> - <td>{{RFC(1866, "HTML 2.0")}}</td> - <td>{{Spec2("HTML2.0")}}<span class="spec-Obsolete">(Obsolete)</span></td> - <td>Definição inicial.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_de_Browsers_de_valores_rel_para_elementos_link">Compatibilidade de <em>Browsers </em>de valores <em>rel </em>para elementos <em>link</em></h2> - -<p class="hidden">Esta tabela de compatibilidade de <em>browsers</em> é gerada automaticamente a partir de dados organizados. Se quiser contribuir ao atualizar os dados, veja <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos um <em>pull request</em>.</p> - -<p>{{Compat("html.elements.link.rel")}}</p> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li>{{domxref("HTMLLinkElement.relList")}}</li> - <li>{{domxref("HTMLAnchorElement.relList")}}</li> - <li>{{domxref("HTMLAreaElement.relList")}}</li> -</ul> diff --git a/files/pt-pt/web/html/element/audio/index.html b/files/pt-pt/web/html/element/audio/index.html deleted file mode 100644 index 6c9a45428a..0000000000 --- a/files/pt-pt/web/html/element/audio/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Audio -slug: Web/HTML/Element/audio -translation_of: Web/HTML/Element/audio -original_slug: Web/HTML/Elemento/Audio ---- -<p>{{ gecko_minversion_header("1.9.1") }}</p> -<p>O elemento <code>audio</code> é usado para embutir conteúdo de som em um documento HTML or XHTML. O elemento <code>audio</code> foi adicionado como parte do HTML 5.</p> -<ul> - <li>Tipo do Elemento: <a class="internal" href="/en/HTML/Block-level_elements" title="en/HTML/Block-level elements">block-level</a> (en)</li> - <li>Conteúdo Permitido: texto alternativo</li> -</ul> -<div class="note"> - <strong>Nota:</strong> Atualmente, o Firefox suporta apenas Vorbis, em recipientes Ogg, assim como o formato WAV. O servidor também deve servir o arquivo usando o MIME type correto para que o Firefox o reproduza corretamente.</div> -<h2 id="Atributos">Atributos</h2> -<dl> - <dt> - autoplay</dt> - <dd> - Um atributo boleano; se especificado (mesmo se o valor for "false"!), o áudio começará a tocar automaticamente assim que ele conseguir, portanto, sem parar para finalizar o carregamento dos dados.</dd> - <dt> - controls {{ unimplemented_inline() }} {{ bug(449149) }}</dt> - <dd> - Se este atributo estiver presente, o navegador oferecerá controles para permitir que o usuário controle a reprodução do áudio, incluindo volume, procura, e pausa/continuar.</dd> - <dt> - loop {{ unimplemented_inline() }} {{ bug(449157) }}</dt> - <dd> - Um atributo boleano; se especificado, quando alcançar o fim do áudio, voltará ao início automaticamente.</dd> - <dt> - src</dt> - <dd> - A URL do áudio a embutir. Este é assunto para <a class="internal" href="/En/HTTP_access_control" title="En/HTTP access control">protocolos de acesso HTTP</a> (en).</dd> -</dl> -<p>O deslocamento de tempo é especificado como um valor de ponto flutuante indicando o número de segundos do deslocamento.</p> -<div class="note"> - <strong>Nota:</strong> A definição do valor de deslocamento de tempo ainda não está completa na especificação do HTML 5 e está sujeita a mudanças.</div> -<h2 id="Exemplos">Exemplos</h2> -<pre class="brush: html"><audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay> - Seu navegador não suporta o elemento <code>audio</code>. -</audio> -</pre> -<p>Reproduz o arquivo de áudio anexado à versão em inglês deste artigo.</p> -<h2 id="Veja_Também">Veja Também</h2> -<ul> - <li><a class="internal" href="/Pt/HTML/Elemento/Video" title="pt/HTML/Elemento/Video"><code>video</code></a></li> - <li><code>{{ interface("nsIDOMHTMLMediaElement") }}</code></li> - <li><a class="internal" href="/Pt/Usando_%C3%A1udio_e_v%C3%ADdeo_no_Firefox" title="pt/Usando áudio e vídeo no Firefox">Usando áudio e vídeo no Firefox</a></li> -</ul> diff --git a/files/pt-pt/web/html/element/fieldset/index.html b/files/pt-pt/web/html/element/fieldset/index.html deleted file mode 100644 index 1b90d328b2..0000000000 --- a/files/pt-pt/web/html/element/fieldset/index.html +++ /dev/null @@ -1,178 +0,0 @@ ---- -title: '<fieldset>: O elemento "Field Set"' -slug: Web/HTML/Element/fieldset -tags: - - Elemento - - Formulários HTML - - HTML - - Referencia - - Web - - formulários -translation_of: Web/HTML/Element/fieldset -original_slug: Web/HTML/Elemento/fieldset ---- -<p>O <strong>elemento HTML <code><fieldset></code> </strong>é utilizado para agrupar vários controlos, bem como as etiquetas ({{HTMLElement("label")}}) dentro de um formulário da Web.</p> - -<div>{{EmbedInteractiveExample("pages/tabbed/fieldset.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>As the example above shows, the <code><fieldset></code> element provides a grouping for a part of an HTML form, with a nested {{htmlelement("legend")}} element providing a caption for the <code><fieldset></code>. It takes few attributes, the most notable of which are <code>form</code>, which can contain the <code>id</code> of a {{htmlelement("form")}} on the same page, allowing you to make the <code><fieldset></code> part of that <code><form></code> even if it is not nested inside it, and <code>disabled</code>, which allows you to disable the <code><fieldset></code> and all its contents in one go.</p> - -<h2 id="Atributos">Atributos</h2> - -<p>This element includes the <a href="/en-US/docs/HTML/Global_attributes">global attributes</a>.</p> - -<dl> - <dt>{{htmlattrdef("disabled")}} {{HTMLVersionInline(5)}}</dt> - <dd>If this Boolean attribute is set, all form controls that are descendants of the <code><fieldset></code>, are disabled, meaning they are not editable but will be submitted along with <code><form></code> in comparison with {{htmlattrdef("disabled")}} attribute on form controls. They won't receive any browsing events, like mouse clicks or focus-related events. By default browsers display such controls grayed out. Note that form elements inside the {{HTMLElement("legend")}} element won't be disabled.</dd> - <dt>{{htmlattrdef("form")}} {{HTMLVersionInline(5)}}</dt> - <dd>This attribute takes the value of the <code>id</code> attribute of a {{HTMLElement("form")}} element you want the <code><fieldset></code> to be part of, even if it is not inside the form.</dd> - <dt>{{htmlattrdef("name")}} {{HTMLVersionInline(5)}}</dt> - <dd>The name associated with the group. - <div class="note"><strong>Note</strong>: The caption for the fieldset is given by the first {{HTMLElement("legend")}} element nested inside it.</div> - </dd> -</dl> - -<h2 id="Estilizar_com_CSS">Estilizar com CSS</h2> - -<p>There are several special styling considerations for <code><fieldset></code>.</p> - -<p>Its {{cssxref("display")}} value is <code>block</code> by default, and it establishes a block formatting context. If the <code><fieldset></code> is styled with an inline-level <code>display</code> value, it will behave as <code>inline-block</code>, otherwise it will behave as <code>block</code>. By default there is a 2px groove border surrounding the contents, and a small amount of default padding. The element has <code>min-inline-size: min-content</code> by default.</p> - -<p>If a <code><legend></code> is present, it is placed over the block-start border. The <code><legend></code> shrink-wraps, and also establishes a formatting context. The <code>display</code> value is blockified (for example, <code>display: inline</code> behaves as <code>block</code>).</p> - -<p>There will be an anonymous box holding the contents of the <code><fieldset></code>, which inherits certain properties from the <code><fieldset></code>. If the <code><fieldset></code> is styled with <code>display: grid</code> or <code>display: inline-grid</code>, then the anonymous box will be a grid formatting context. If the <code><fieldset></code> is styled with <code>display: flex</code> or <code>display: inline-flex</code>, then the anonymous box will be a flex formatting context. Otherwise it establishes a block formatting context.</p> - -<p>You can feel free to style the <code><fieldset></code> and <code><legend></code> in any way you want to suit your page design.</p> - -<div class="note"> -<p><strong>Nota: </strong>as of this writing, there are bugs in Microsoft Edge and Google Chrome which prevent <a href="/en-US/docs/Glossary/Flexbox">flexbox</a> and <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">grid </a>layouts from being used inside a {{HTMLElement("fieldset")}}. <a href="https://github.com/w3c/csswg-drafts/issues/321">This GitHub issue</a> provides bug tracking links.</p> -</div> - -<h2 id="Exemplo">Exemplo</h2> - -<h3 id="Simple_fieldset">Simple fieldset</h3> - -<p>This example shows a really simple <code><fieldset></code> example, with a <code><legend></code>, and a single control inside it.</p> - -<pre class="brush: html"><form action="#"> - <fieldset> - <legend>Simple fieldset</legend> - <input type="radio" id="radio"> - <label for="radio">Spirit of radio</label> - </fieldset> -</form></pre> - -<p>{{ EmbedLiveSample('Simple_fieldset', '100%', '80') }}</p> - -<h3 id="fieldset_desativado">"fieldset" desativado</h3> - -<p>This example shows a disabled <code><fieldset></code> with two controls inside it. Note how both the controls are disabled due to being inside a disabled <code><fieldset></code>.</p> - -<pre class="brush: html"><form action="#"> - <fieldset disabled> - <legend>Disabled fieldset</legend> - <div> - <label for="name">Name: </label> - <input type="text" id="name" value="Chris"> - </div> - <div> - <label for="pwd">Archetype: </label> - <input type="password" id="pwd" value="Wookie"> - </div> - </fieldset> -</form></pre> - -<p>{{ EmbedLiveSample('Disabled_fieldset', '100%', '110') }}</p> - -<h2 id="Resumo_técnico">Resumo técnico</h2> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Categorias de conteúdo</a></th> - <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document#sectioning_root">sectioning root</a>, <a href="/en-US/docs/HTML/Content_categories#form_listed">listed</a>, <a href="/en-US/docs/HTML/Content_categories#form-associated_content">form-associated</a> element, palpable content.</td> - </tr> - <tr> - <th scope="row">Conteúdo permitido</th> - <td>An optional {{HTMLElement("legend")}} element, followed by flow content.</td> - </tr> - <tr> - <th scope="row">Omissão de etiqueta</th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row">Permitted parents</th> - <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Flow_content">flow content</a>.</td> - </tr> - <tr> - <th scope="row">Permitted ARIA roles</th> - <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLFieldSetElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</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('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="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> - - - -<p>{{Compat("html.elements.fieldset")}}</p> - -<h2 id="Consulte_também">Consulte também:</h2> - -<ul> - <li>Other form-related elements: - <ul> - <li>{{HTMLElement("form")}}</li> - <li>{{HTMLElement("legend")}}</li> - <li>{{HTMLElement("label")}}</li> - <li>{{HTMLElement("button")}}</li> - <li>{{HTMLElement("select")}}</li> - <li>{{HTMLElement("datalist")}}</li> - <li>{{HTMLElement("optgroup")}}</li> - <li>{{HTMLElement("option")}}</li> - <li>{{HTMLElement("textarea")}}</li> - <li>{{HTMLElement("keygen")}}</li> - <li>{{HTMLElement("input")}}</li> - <li>{{HTMLElement("output")}}</li> - <li>{{HTMLElement("progress")}}</li> - <li>{{HTMLElement("meter")}}</li> - </ul> - </li> -</ul> - -<div>{{HTMLRef}}</div> diff --git a/files/pt-pt/web/html/element/figcaption/index.html b/files/pt-pt/web/html/element/figcaption/index.html deleted file mode 100644 index 1a0cf18319..0000000000 --- a/files/pt-pt/web/html/element/figcaption/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: figcaption -slug: Web/HTML/Element/figcaption -translation_of: Web/HTML/Element/figcaption -original_slug: Web/HTML/Elemento/figcaption ---- -<h2 id="Introdução">Introdução</h2> - -<p>O <em>Elemento HTML Figcaption</em>(<code><figcaption></code>) representa uma legenda ou uma legenda associada com uma figura ou ilustração descrita pelo resto dos dados do elemento {{ HTMLElement("figure") }} que seu elemento pai.</p> - -<h3 id="Contexto_de_Uso">Contexto de Uso</h3> - -<table class="standard-table"> - <tbody> - <tr> - <td>Conteúdo permitido</td> - <td><a href="/en/HTML/Content_categories#flow_content" title="en/HTML/Content categories#flow content">Flow content</a></td> - </tr> - <tr> - <td>Omissão de Tag</td> - <td> - <p>Nenhum, tanto a tag de início e fim são obrigatórias</p> - </td> - </tr> - <tr> - <td>Elemento Pai Permitido</td> - <td>Um Elemento {{ HTMLElement("figure") }}</td> - </tr> - <tr> - <td>Documento Normativo</td> - <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-figcaption-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-figcaption-element">HTML5, section 4.5.12</a></td> - </tr> - </tbody> -</table> - -<h3 id="Atributos">Atributos</h3> - -<p>Esse elemento não tem nenhum outro atributo além dos <a href="/en/HTML/Global_attributes" rel="internal">atributos globais</a>, comum a todos os elementos.</p> - -<h3 class="editable" id="Interface_DOM">Interface DOM</h3> - -<p>Esse elemento implementa a interface <code><a href="/en/DOM/element" title="en/DOM/element">HTMLElement</a></code>.</p> - -<h3 id="Examples">Examples</h3> - -<p>Favor consulte o página {{ HTMLElement("figure") }} para exemplos de <figcaption>.</p> - -<h3 id="Compatibilidade">Compatibilidade</h3> - -<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>8</td> - <td>{{ CompatGeckoDesktop("2.0") }}</td> - <td>9.0</td> - <td>11.10</td> - <td>5.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>3.0</td> - <td>{{ CompatGeckoMobile("2.0") }}</td> - <td>9.0</td> - <td>11.0</td> - <td>5.1 (iOS 5.0)</td> - </tr> - </tbody> -</table> -</div> - -<h3 id="Ver_Também">Ver Também</h3> - -<ul> - <li>O elemento {{ HTMLElement("figure") }}.</li> -</ul> diff --git a/files/pt-pt/web/html/element/figure/index.html b/files/pt-pt/web/html/element/figure/index.html deleted file mode 100644 index 263f403afb..0000000000 --- a/files/pt-pt/web/html/element/figure/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: figure -slug: Web/HTML/Element/figure -translation_of: Web/HTML/Element/figure -original_slug: HTMLToDelete/Element/figure ---- -<p>O elemento de figura HTML (<span style="font-family: Courier New;"><figure></span>) representa uma tag de conteúdo próprio, frequentemente com legenda. Geralmente referenciada idendependente do fluxo principal do documento, podendo assim ser movido atravéz do fluxo principal sem afeta-lo.</p> - -<div class="note"> -<p><em>Notas de Uso: </em></p> - -<ul> - <li>Iniciando uma seção raiz o escopo do conteúdo do elemento <span style="font-family: Courier New;"><figure></span> é excluído do escopo principal do documento.</li> - <li>Uma legenda pode ser associada com o elemento <figure> inserindo um elemento {{ HTMLElement("figcaption") }} dentro dele (podendo ser primeiro ou ultimo nó filho).</li> -</ul> -</div> - -<h3 id="Contexto_de_Uso">Contexto de Uso</h3> - -<table class="standard-table" style="height: 117px; width: 1125px;"> - <tbody> - <tr> - <th>Tipo</th> - <th><a href="/en/Sections_and_Outlines_of_an_HTML5_document#sectioning_root" title="en/Sections and Outlines of an HTML5 document#sectioning root">Seccionando orig</a></th> - </tr> - <tr> - <td>Contexto Permitido</td> - <td>Um elemento {{ HTMLElement("figcaption") }}, seguido pelo fluxo do conteúdo; ou o fluxo do conteúdo seguido pelo elemento {{ HTMLElement("figcaption") }}</td> - </tr> - <tr> - <td>Omissão de Tag</td> - <td><span id="result_box" lang="pt"><span class="hps" title="Clique para mostrar traduções alternativas">Nenhum</span><span title="Clique para mostrar traduções alternativas">,</span> <span class="hps" title="Clique para mostrar traduções alternativas">ambos</span> <span class="hps" title="Clique para mostrar traduções alternativas">marca</span>m <span class="hps" title="Clique para mostrar traduções alternativas">o início</span> <span class="hps" title="Clique para mostrar traduções alternativas">e o</span> <span class="hps" title="Clique para mostrar traduções alternativas">fim</span> <span class="hps" title="Clique para mostrar traduções alternativas">da tag</span> <span class="hps" title="Clique para mostrar traduções alternativas">são</span> <span class="hps" title="Clique para mostrar traduções alternativas">obrigatórios</span></span></td> - </tr> - <tr> - <td>Elementos Permitidos de Origem</td> - <td><span class="short_text" id="result_box" lang="pt"><span class="hps" title="Clique para mostrar traduções alternativas">Qualquer</span> <span class="hps" title="Clique para mostrar traduções alternativas">elemento</span> <span class="hps" title="Clique para mostrar traduções alternativas">que</span> <span class="hps" title="Clique para mostrar traduções alternativas">aceita</span> <span class="hps" title="Clique para mostrar traduções alternativas">elementos de</span> <span class="hps" title="Clique para mostrar traduções alternativas">fluxo</span><span title="Clique para mostrar traduções alternativas">.</span></span></td> - </tr> - <tr> - <td>Documento Normativo</td> - <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-mark-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-mark-element">HTML5, section 4.5.11</a></td> - </tr> - </tbody> -</table> - -<h3 id="Atributos">Atributos</h3> - -<p>Esse elemento não tem outros atributos além dos <a class="new " href="../../../../en/HTML/global_attributes" rel="internal">atributos globais</a>, comuns para todos elementos.</p> - -<h3 class="editable" id="DOM_Interface">DOM Interface</h3> - -<p>Esse elemento implementa a interface <code><a href="/en/DOM/element" title="en/DOM/element">HTMLElement</a></code>.</p> - -<h3 id="Veja_também">Veja também</h3> - -<ul> - <li>O elemento {{ HTMLElement("figcaption") }}.</li> -</ul> diff --git a/files/pt-pt/web/html/element/head/index.html b/files/pt-pt/web/html/element/head/index.html deleted file mode 100644 index 852cc803a1..0000000000 --- a/files/pt-pt/web/html/element/head/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: '<head> : O elemento dos metadados (Cabeçalho) do documento' -slug: Web/HTML/Element/head -tags: - - Elemento - - HTML - - HTML:Metadata content - - Referencia - - Web -translation_of: Web/HTML/Element/head -original_slug: Web/HTML/Elemento/head ---- -<div>{{HTMLRef}}</div> - -<p>O <strong>elemento</strong> <strong><code><head></code> </strong>de <strong>HTML </strong>fornece a informação geral (metadados) sobre o documento, incluindo o seu título e hiperligações para as suas folhas de estilo e <em>scripts</em>.</p> - -<table class="properties"> - <tbody> - <tr> - <th><a href="/en-US/docs/Web/HTML/Content_categories">Categorias de conteúdo</a></th> - <td>None.</td> - </tr> - <tr> - <th>Permitted content</th> - <td>If the document is an {{HTMLElement("iframe")}} {{htmlattrxref("srcdoc", "iframe")}} document, or if title information is available from a higher level protocol, zero or more elements of metadata content.<br> - Otherwise, one or more elements of metadata content where exactly one is a {{HTMLElement("title")}} element.</td> - </tr> - <tr> - <th>Tag omission</th> - <td>The start tag may be omitted if the first thing inside the head element is an element.<br> - The end tag may be omitted if the first thing following the head element is not a space character or a comment.</td> - </tr> - <tr> - <th>Permitted parents</th> - <td>An {{HTMLElement("html")}} element, as its first child.</td> - </tr> - <tr> - <th>Permitted ARIA roles</th> - <td>None</td> - </tr> - <tr> - <th>DOM interface</th> - <td>{{domxref("HTMLHeadElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Atributos">Atributos</h2> - -<p>Este elemento inclui os <a href="/pt-PT/docs/Web/HTML/Atributos_globais">atributos globais</a>.</p> - -<dl> - <dt>{{htmlattrdef("profile")}} {{obsolete_inline}}</dt> - <dd>Os <em>URIs </em>de um ou mais perfis de metadados, separados por um espaço em branco.</dd> -</dl> - -<h2 id="Exemplo">Exemplo</h2> - -<pre class="brush: html"><html> - <head> - <title>Document title</title> - </head> -</html> -</pre> - -<h2 id="Notas">Notas</h2> - -<p>Modern, HTML5-compliant browsers automatically construct a <code><head></code> element if the tags are omitted in the markup. <a class="external" href="https://www.stevesouders.com/blog/2010/05/12/autohead-my-first-browserscope-user-test/">This behavior cannot be guaranteed in ancient browsers</a>.</p> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'semantics.html#the-head-element', '<head>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change from latest shapshot</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-head-element', '<head>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Obsoleted <code>profile</code></td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.1', '<head>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</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.head")}}</p> - -<h2 id="Consulte_também">Consulte também</h2> - -<ul> - <li>Elements that can be used inside a <code><head></code> element: {{HTMLElement("title")}}, {{HTMLElement("base")}}, {{HTMLElement("link")}}, {{HTMLElement("style")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("noscript")}}, {{HTMLElement("template")}}</li> -</ul> diff --git a/files/pt-pt/web/html/element/index.html b/files/pt-pt/web/html/element/index.html deleted file mode 100644 index fc993d2315..0000000000 --- a/files/pt-pt/web/html/element/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: Referência dos elementos HTML -slug: Web/HTML/Element -tags: - - Elemento - - HTML - - I10n:priority - - Referencia - - Web - - básico -translation_of: Web/HTML/Element -original_slug: Web/HTML/Elemento ---- -<div>{{HTMLSidebar("Elements")}}</div> - -<p><span class="seoSummary">Esta página lista todos os {{Glossary("HTML")}} {{Glossary("Element","elementos")}}.</span> Eles são agrupados por função para ajudá-lo a encontrar facilmente o que tem em mente. Uma lista alfabética de todos os elementos é fornecida na barra lateral na página de cada elemento, bem como nesta.</p> - -<div class="note"> -<p>Para mais informação sobre os conceitos básicos dos elementos e atributos HTML, consulte a <a href="/pt-PT/docs/Learn/HTML/Introducao_ao_HTML">secção sobre elementos no artigo de Introdução ao HTML</a>.</p> -</div> - -<h2 id="Raiz_principal">Raiz principal</h2> - -<p>{{HTMLRefTable("HTML Root Element")}}</p> - -<h2 id="Metadados_do_documento">Metadados do documento</h2> - -<p>Os metadados contêm informação acerca da página. Incluem informação sobre estilos, <em>scripts</em> e dados que ajudam a usar o software ({{Glossary("search engine", "motor de busca")}}, {{Glossary("Browser","Browsers")}}, etc.) e a interpretar a página. Os metadados para estilos e <em>scripts</em> devem ser definidos na página ou num link para um ficheiro que contém a informação.</p> - -<p>{{HTMLRefTable("HTML Document Metadata")}}</p> - -<h2 id="Secção_de_raiz">Secção de raiz</h2> - -<p>{{HTMLRefTable("Sectioning Root Element")}}</p> - -<h2 id="Segmentação_de_conteúdo">Segmentação de conteúdo</h2> - -<p>Os elementos de segmentação de conteúdo permitem-lhe organizar o documento em partes lógicas. Use os elementos de segmentação para criar um esquema vasto dos conteúdos da sua página, incluindo a navegação de cabeçalho e rodapé, e elementos de título para identificar secções de conteúdo.</p> - -<p>{{HTMLRefTable("HTML Sections")}}</p> - -<h2 id="Conteúdo_textual">Conteúdo textual</h2> - -<p>Use elementos textuais HTML para organizar blocos ou secções de conteúdo situados entre os elementos <code></body></code> de início {{HTMLElement("body")}} e fim. Sendo importantes para {{Glossary("accessibility")}} e {{Glossary("SEO")}}, estes elementos identificam o propósito ou estrutura desse conteúdo.</p> - -<p>{{HTMLRefTable("HTML Grouping Content")}}</p> - -<h2 id="Semântica_de_texto_em_linha">Semântica de texto em linha</h2> - -<p>Use a semântica de texto em linha do HTML para definir o significado, estrutura ou estilo de uma palavra, linha ou texto arbitrário.</p> - -<p>{{HTMLRefTable("HTML Text-Level Semantics")}}</p> - -<h2 id="Imagem_e_multimédia">Imagem e multimédia</h2> - -<p>O HTML suporta vários recursos multimédia como imagens, áudio e vídeo.</p> - -<p>{{HTMLRefTable("multimedia")}}</p> - -<h2 id="Conteúdo_incorporado">Conteúdo incorporado</h2> - -<p>Além do conteúdo multimédia regular, o HTML poderá incluir diversos outros conteúdos, ainda que a interação com este nem sempre seja fácil.</p> - -<p>{{HTMLRefTable({"include":["HTML embedded content"], "exclude":["multimedia"]})}}</p> - -<h2 id="Scripting"><em>Scripting</em></h2> - -<p>De modo a criar conteúdos dinâmicos e aplicações Web, o HTML suporta o uso de linguages de <em>script</em>, nomeadamente JavaScript. Certos elementos suportam esta capacidade.</p> - -<p>{{HTMLRefTable("HTML Scripting")}}</p> - -<h2 id="Edições_de_demarcação">Edições de demarcação</h2> - -<p>Estes elementos permitem-lhe dar indicações sobre que partes do texto específicas foram alteradas.</p> - -<p>{{HTMLRefTable("HTML Edits")}}</p> - -<h2 id="Conteúdo_de_tabela">Conteúdo de tabela</h2> - -<p>Estes elementos são usados para criar e manipular dados tabulares.</p> - -<p>{{HTMLRefTable("HTML tabular data")}}</p> - -<h2 id="Formulários">Formulários</h2> - -<p>O HTML fornece um número de elementos que podem ser usados em conjunto para criar formulários que o utilizador poderá preencher e submeter na página web ou aplicação. Existe uma considerável quantidade de informação sobre o mesmo disponível na página <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML forms guide</a>.</p> - -<p>{{HTMLRefTable({"include": ["HTML forms"], "exclude":["Deprecated"]})}}</p> - -<h2 id="Elementos_interativos">Elementos interativos</h2> - -<p>O HTML oferece uma selecção de elementos que ajudam a criar objectos interativos de interface com o utilizador.</p> - -<p>{{HTMLRefTable("elementos interativos HTML")}}</p> - -<h2 id="Componentes_da_Web">Componentes da Web</h2> - -<p>Os Componentes Web são uma tecnologia relacionada com o HTML que possibilitam a criação e utilização de elementos personalizados como se se tratassem de elementos HTML vulgares. Adicionalmente, poderá criar versões personalizadas de elementos HTML standard.</p> - -<p>{{HTMLRefTable({"include":["Web Components"],"exclude":["Deprecated", "Obsolete"]})}}</p> - -<h2 id="Elementos_obsoletos_e_desaprovados">Elementos obsoletos e desaprovados</h2> - -<div class="warning"> -<p><strong>Aviso:</strong> Estes são elementos HTML antigos que foram desaprovados e não devem ser usados. <strong>Nunca deve usá-los em projectos novos, e deve substitui-los em antigos projectos assim que possa.</strong> Os mesmos são aqui listados apenas para informação.</p> -</div> - -<p>{{HTMLRefTable({"include":["Deprecated","Obsolete"]})}}</p> diff --git a/files/pt-pt/web/html/element/nav/index.html b/files/pt-pt/web/html/element/nav/index.html deleted file mode 100644 index a17cc914b9..0000000000 --- a/files/pt-pt/web/html/element/nav/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: <nav> -slug: Web/HTML/Element/nav -translation_of: Web/HTML/Element/nav -original_slug: Web/HTML/Elemento/nav ---- -<div>{{HTMLRef}}</div> - -<p><span class="seoSummary">O elemento de <strong>HTML <code><nav></code> </strong>representa a seção de uma página cujo propósito é providenciar links de navegação, tanto dentro do documento em questão como para outros documentos. Exemplos comuns de seções de navegação são menus, tabelas de conteúdo e indíces.</span></p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row">Categorias de conteúdo</th> - <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, conteúdo de seccionamento, conteúdo palpável.</td> - </tr> - <tr> - <th scope="row">Conteúdo permitido</th> - <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>.</td> - </tr> - <tr> - <th scope="row">Omissão de tag</th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row">Pais permitidos</th> - <td>Qualquer elemento que permita <a href="/en-US/docs/HTML/Content_categories#Flow_content">flow content</a>.</td> - </tr> - <tr> - <th scope="row">Papeis ARIA permitidos</th> - <td>Nenhuns</td> - </tr> - <tr> - <th scope="row">interface DOM</th> - <td>{{domxref("HTMLElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Atributos">Atributos</h2> - -<p>Este elemento apenas inclui <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">atributos globais</a>.</p> - -<h2 id="Notas_de_utilização">Notas de utilização</h2> - -<ul> - <li>Nem todos os links num documento devem estar contidos num elemento <code><nav></code>, que é direcionado apenas para blocos de hiper-ligações de navegação principal; tipicamente o elemento {{HTMLElement("footer")}} tem uma lista de hiper-ligações que não necessitam de estar contidos no elemento {{HTMLElement("nav")}}.</li> - <li>Um documento poderá ter vários elementos {{HTMLElement("nav")}}, por exemplo, um para navegação na página e outro para navegação exterior da mesma.</li> - <li>User agents, tais como leitores de ecrã direcionados para utilizadores com limitações, podem utilizar este elemento para determinar a omissão ou não da renderização inicial deste conteúdo.</li> -</ul> - -<h2 id="Exemplos">Exemplos</h2> - -<p>No exemplo seguinte, um bloco <code><nav></code> é usado para conter uma lista não ordenada ({{HTMLElement("ul")}}) de hiper-ligações. Com o CSS apropriado, a lista pode ser apresentada como uma barra de navegação ou menu "drop-down.</p> - -<pre class="brush: html"><nav class="menu"> - <ul> - <li><a href="#">Home</a></li> - <li><a href="#">Sobre</a></li> - <li><a href="#">Contactos</a></li> - </ul> -</nav> -</pre> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentários</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'sections.html#the-nav-element', '<nav>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Sem alterações desde o ultimo snapshot da W3C.</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'sections.html#the-nav-element', '<nav>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Definição inicial</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibidade_de_Navegadores">Compatibidade de Navegadores</h2> - -<div class="hidden">A tabela de compatibilidades nesta página é gerada através de dados estruturados.Se gostaria de contribuir para esta coleta de dados por favor dirija-se a<a href="https://github.com/mdn/browser-compat-data"> https://github.com/mdn/browser-compat-data</a> e envie-nos um pull request.</div> - -<p>{{Compat("html.elements.nav")}}</p> - -<p>Ver também</p> - -<ul> - <li>Outros elementos relacionados com a secção: {{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> -</ul> diff --git a/files/pt-pt/web/html/element/progress/index.html b/files/pt-pt/web/html/element/progress/index.html deleted file mode 100644 index 5efef8ff83..0000000000 --- a/files/pt-pt/web/html/element/progress/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: progress -slug: Web/HTML/Element/progress -translation_of: Web/HTML/Element/progress -original_slug: Web/HTML/Elemento/progress ---- -<h2 id="Resumo">Resumo</h2> - -<p>O HTML <em>progress</em> (<code><progress></code>) é o elemento usado para mostrar o progresso de uma tarefa. Enquanto os detalhes específicos de como ele é exibido é deixado para o desenvolvedor web, é tipicamente exibido como uma barra de progresso.</p> - -<h2 id="Contexto_de_uso">Contexto de uso</h2> - -<table class="standard-table"> - <tbody> - <tr> - <td>Conteúdo permitido</td> - <td><a href="/en/HTML/Content_categories#Phrasing_content" title="en/HTML/Content categories#Phrasing content">Phrasing content</a></td> - </tr> - <tr> - <td>Tag omission</td> - <td>None, both, o inicio da tag e o final da tag são obrigatórios.</td> - </tr> - <tr> - <td>Elemento pai permitido</td> - <td><a href="/en/HTML/Content_categories#Phrasing_content" title="en/HTML/Content categories#Phrasing content">Phrasing content</a>, mas não deve haver descedentes no elemento progress .</td> - </tr> - <tr> - <td>Documento normativo</td> - <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-progress-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-progress-element">HTML5, section 4.10.16</a></td> - </tr> - </tbody> -</table> - -<h2 id="Atributos">Atributos</h2> - -<p>Como todos os outros elementos HTML, este elemento possui os <a href="/en/HTML/Global_attributes" rel="internal">atributos globais</a>.</p> - -<dl> - <dt>{{ htmlattrdef("form") }}</dt> - <dd>This attribute specifies the form which the <code>progress</code> element belongs to.</dd> - <dt>{{ htmlattrdef("max") }}</dt> - <dd>This attribute describes how much work the task indicated by the <code>progress</code> element requires.</dd> - <dt>{{ htmlattrdef("value") }}</dt> - <dd>This attribute specifies how much of the task that has been completed. If there is no <code>value</code> attribute, the progress bar is indeterminate; this indicates that an activity is ongoing with no indication of how long it is expected to take.</dd> -</dl> - -<p>You can use the {{ cssxref("orient") }} property to specify whether the progress bar should be rendered horizontally (the default) or vertically. The {{ cssxref(":indeterminate") }} pseudo-class can be used to match against indeterminate progress bars.</p> - -<h2 id="DOM_interface">DOM interface</h2> - -<p>Este elemento implementa a interface <code><a href="/en/DOM/HTMLProgressElement" title="en/DOM/HTMLProgressElement">HTMLProgressElement</a></code>.</p> - -<h2 id="Exemplos">Exemplos</h2> - -<pre class="script"><progress value="70" max="100">70 %</progress> -</pre> - -<h3 id="Resultado">Resultado</h3> - -<p><a href="/samples/html/progress.html">View Live Examples</a></p> - -<p>No Google Chrome, o resultado do progress parece deste modo:</p> - -<p><img alt="progress-1.png" class="default internal" src="/@api/deki/files/4946/=progress-1.png"></p> - -<h3 id="Exemplos_Adicionais">Exemplos Adicionais</h3> - -<p>Veja {{ cssxref("orient") }}.</p> - -<h2 id="Compatibilidade_dos_Browsers">Compatibilidade dos Browsers</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Características</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>6.0</td> - <td>{{ CompatGeckoDesktop("6.0") }}</td> - <td>No</td> - <td>11</td> - <td>nightlies</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Características</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>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<h3 id="Gecko_notes">Gecko notes</h3> - -<p>Gecko provides the {{ cssxref("::-moz-progress-bar") }} pseudo-element, which lets you style the part of the interior of the progress bar representing the amount of work completed so far.</p> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li>{{ cssxref("orient") }}</li> - <li>{{ cssxref(":indeterminate") }}</li> -</ul> diff --git a/files/pt-pt/web/html/element/video/index.html b/files/pt-pt/web/html/element/video/index.html deleted file mode 100644 index 3b67dddc5a..0000000000 --- a/files/pt-pt/web/html/element/video/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Video -slug: Web/HTML/Element/video -translation_of: Web/HTML/Element/video -original_slug: Web/HTML/Elemento/Video ---- -<p>{{ gecko_minversion_header("1.9.1") }}</p> -<p>O elemento <code>video</code> é usado para inserir conteúdo de vídeo em um documento HTML ou XHTML. O elemento <code>video</code> foi adicionado como parte do HTML 5.</p> -<ul> - <li>Tipo de Elemento: <a class="internal" href="/en/HTML/Block-level_elements" title="en/HTML/Block-level elements">block-level</a></li> - <li>Conteúdo Permitido: alternate text</li> -</ul> -<div class="note"> - <strong>Nota:</strong> Atualmente, o Firefox suporta apenas Theora para vídeo, em recipientes Ogg. Além disso, o servidor precisa servir o arquivo utilizando o <em>MIME type</em> correto para que o Firefox o reproduza corretamente.</div> -<h2 id="Atributos">Atributos</h2> -<p>Note que diversos atributos ainda não são suportados pelo Firefox.</p> -<dl> - <dt> - autoplay</dt> - <dd> - Um atributo booleano; se especificado, o vídeo iniciará a reprodução automaticamente assim que puder, portanto, sem para para finalizar o carregamento dos dados.</dd> - <dt> - autobuffer</dt> - <dd> - Um atributo booleano; se especificado, o vídeo iniciará a leitura dos dados (<em>buffering</em>) mesmo se não estiver configurado para reproduzir automaticamente. Isto deve ser usado para casos em que provavelmente o vídeo será reproduzido (por exemplo, se o usuário navegou para a página exclusivamente para reproduzir o vídeo, não se o vídeo foi inserido junto a outro conteúdo). O vídeo é lido (<em>buffered</em>) até que o <em>cache</em> de mídia esteja cheio.</dd> - <dt> - controls</dt> - <dd> - Se este atributo estiver presente, Firefox oferecerá controles para permitir que o usuário controle a reprodução do vídeo, incluindo volume, procura, e pausa/continuar.</dd> - <dt> - height</dt> - <dd> - A altura da área de exibição do vídeo, em pixels CSS.</dd> - <dt> - loop {{ unimplemented_inline() }} {{ bug(449157) }}</dt> - <dd> - Um atributo booleano; se especificado, ao alcançar o fim do vídeo, voltará ao início automaticamente.</dd> - <dt> - poster {{ unimplemented_inline() }} {{ bug(449156) }}</dt> - <dd> - Uma URL indicando um quadro pôster para se exibir enquanto não houver dados do vídeo disponíveis. Se este atributo não for especificado, nada é exibido até o vídeo estar disponível para reprodução.</dd> - <dt> - src</dt> - <dd> - A URL do vídeo a ser embutido. Este atributo é opcional; em vez disso você pode usar o elemento <a class="internal" href="/En/HTML/Element/Source" title="En/HTML/Element/Source"><code>source</code></a> (en) dentro do bloco video para especificar o vídeo a embutir.</dd> - <dt> - width</dt> - <dd> - A largura da área de exibição do vídeo, em pixels CSS.</dd> -</dl> -<p>O deslocamento de tempo é especificado como um valor de ponto flutuante indicando o número de segundos do deslocamento.</p> -<div class="note"> - <strong>Nota:</strong> A definição do valor de deslocamento de tempo ainda não está completa na especificação do HTML 5 e está sujeita a mudanças.</div> -<h2 id="Exemplos">Exemplos</h2> -<pre class="brush: html"><video src="videofile.ogg" autoplay> - Seu navegador não suporta o elemento <code>video</code>. -</video> -</pre> -<p>Reproduz um vídeo, inicia a reprodução assim que tenha recebido o bastante do vídeo para permitir a reprodução sem pausas para baixar mais.</p> -<h2 id="Veja_também">Veja também</h2> -<ul> - <li><a class="internal" href="/En/Media_formats_supported_by_the_audio_and_video_elements" title="En/Media formats supported by the audio and video elements">Media formats supported by the audio and video elements</a> (EN)</li> - <li><a class="internal" href="/Pt/HTML/Element/Audio" title="Pt/HTML/Element/Audio"><code>audio</code></a></li> - <li><a class="internal" href="/Pt/Usando_%C3%A1udio_e_v%C3%ADdeo_no_Firefox" title="Pt/Usando áudio e vídeo no Firefox">Usando áudio e vídeo no Firefox</a></li> - <li><a class="internal" href="/En/Manipulating_video_using_canvas" title="En/Manipulating video using canvas">Manipulating video using canvas</a> (EN)</li> - <li><code>{{ interface("nsIDOMHTMLMediaElement") }}</code></li> - <li><a class="external" href="http://tinyvid.tv/" title="http://tinyvid.tv/">TinyVid</a> - exemplos utilizando arquivos ogg no HTML 5. (EN)</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> (HTML 5 specification)</li> -</ul> -<p>{{ languages( { "fr": "fr/HTML/Element/video" } ) }}</p> diff --git a/files/pt-pt/web/html/global_attributes/index.html b/files/pt-pt/web/html/global_attributes/index.html deleted file mode 100644 index 3fc8adfbc8..0000000000 --- a/files/pt-pt/web/html/global_attributes/index.html +++ /dev/null @@ -1,481 +0,0 @@ ---- -title: Atributos globais -slug: Web/HTML/Global_attributes -tags: - - HTML - - Precisa Compatibilidade Navegador - - Referencia - - Web - - atributo -translation_of: Web/HTML/Global_attributes -original_slug: Web/HTML/Atributos_globais ---- -<div>{{HTMLSidebar("Global_attributes")}}</div> - -<div class="summary"> -<p>Os<strong> 'Atributos Globais' </strong>são atributos comuns a todos os elementos HTML; estes podem ser utilziados em todos os elementos, embora os atributos poderão não ter efeito em alguns elementos.</p> -</div> - -<p>Os atributos globais podem ser especificados em todos os <a href="/pt-PT/docs/Web/HTML/Elemento">elementos HTML</a>, <em> mesmo aqueles que não estão especificados no padrão</em>. Isso significa que qualquer elemento não padrão ainda deve permitir esses atributos, mesmo que utilizando esses elementos significa que o documento já não é mais compatível com HTML5. Por exemplo, navegadores compatíveis com HTML5 ocultam conteúdo marcado como <code><foo hidden>...<foo></code><code>, </code>mesmo que <code><foo></code> não seja um elemento HTML válido.</p> - -<p>Além dos atributos globais HTML básicos, também existem os seguintes atributos globais:</p> - -<ul> - <li><strong><code>xml:lang</code></strong> and <code><strong>xml:base</strong></code> — these are inherited from the XHTML specifications and deprecated, but kept for compatibility purposes.</li> - <li>The multiple <code><strong><a href="/en-US/docs/Web/Accessibility/ARIA">aria-*</a></strong></code> attributes, used for improving accessibility.</li> - <li>The event handler attributes: <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="Descrição">Descrição</h2> - -<dl> - <dt id="attr-accesskey"><code><a href="/en-US/docs/Web/HTML/Global_attributes/accesskey">accesskey</a></code></dt> - <dd>Provides a hint for generating a keyboard shortcut for the current element. This attribute consists of a space-separated list of characters. The browser should use the first one that exists on the computer keyboard layout.</dd> - <dt id="attr-class"><code><a href="/en-US/docs/Web/HTML/Global_attributes/class">class</a></code></dt> - <dd>Is a space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the <a href="/en-US/docs/Web/CSS/Class_selectors">class selectors</a> or functions like the method {{domxref("Document.getElementsByClassName()")}}.</dd> - <dt id="attr-contenteditable"><code><a href="/en-US/docs/Web/HTML/Global_attributes/contenteditable">contenteditable</a></code></dt> - <dd>Is an enumerated attribute indicating if the element should be editable by the user. If so, the browser modifies its widget to allow editing. The attribute must take one of the following values: - <ul> - <li><code>true</code> or the <em>empty string</em>, which indicates that the element must be editable;</li> - <li><code>false</code>, which indicates that the element must not be editable.</li> - </ul> - </dd> - <dt id="attr-contextmenu"><code><a href="/en-US/docs/Web/HTML/Global_attributes/contextmenu">contextmenu</a></code></dt> - <dd>Is the <code><a href="#attr-id"><strong>id</strong></a></code> of an {{HTMLElement("menu")}} to use as the contextual menu for this element.</dd> - <dt id="attr-dataset"><code><a href="/en-US/docs/Web/HTML/Global_attributes/data-*">data-*</a></code></dt> - <dd>Forms a class of attributes, called custom data attributes, that allow proprietary information to be exchanged between the <a href="/en-US/docs/Web/HTML">HTML</a> and its <a href="/en-US/docs/Glossary/DOM">DOM</a> representation that may be used by scripts. All such custom data are available via the {{domxref("HTMLElement")}} interface of the element the attribute is set on. The {{domxref("HTMLElement.dataset")}} property gives access to them.</dd> - <dt id="attr-dir"><code><a href="/en-US/docs/Web/HTML/Global_attributes/dir">dir</a></code></dt> - <dd>Is an enumerated attribute indicating the directionality of the element's text. It can have the following values: - <ul> - <li><code>ltr</code>, which means <em>left to right </em>and is to be used for languages that are written from the left to the right (like English);</li> - <li><code>rtl</code>, which means <em>right to left</em> and is to be used for languages that are written from the right to the left (like Arabic);</li> - <li><code>auto</code>, which let the user agent decides. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then apply that directionality to the whole element.</li> - </ul> - </dd> - <dt id="attr-draggable"><code><a href="/en-US/docs/Web/HTML/Global_attributes/draggable">draggable</a></code></dt> - <dd>Is an enumerated attribute indicating whether the element can be dragged, using the <a href="/en-us/docs/DragDrop/Drag_and_Drop">Drag and Drop API</a>. It can have the following values: - <ul> - <li><code>true</code>, which indicates that the element may be dragged</li> - <li><code>false</code>, which indicates that the element may not be dragged.</li> - </ul> - </dd> - <dt id="attr-dropzone"><code><a href="/en-US/docs/Web/HTML/Global_attributes/dropzone">dropzone</a></code> {{experimental_inline}}</dt> - <dd>Is an enumerated attribute indicating what types of content can be dropped on an element, using the <a href="/en-US/docs/DragDrop/Drag_and_Drop">Drag and Drop API</a>. It can have the following values: - <ul> - <li><code>copy</code>, which indicates that dropping will create a copy of the element that was dragged</li> - <li><code>move</code>, which indicates that the element that was dragged will be moved to this new location.</li> - <li><code>link</code>, will create a link to the dragged data.</li> - </ul> - </dd> - <dt id="attr-hidden"><code><a href="/en-US/docs/Web/HTML/Global_attributes/hidden">hidden</a></code></dt> - <dd>Is 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 id="attr-id"><code><a href="/en-US/docs/Web/HTML/Global_attributes/id">id</a></code></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> -</dl> - -<div class="note"> -<p><strong>Nota: </strong>os atributos <code>item*</code> são parte de uma <a class="external" href="https://html.spec.whatwg.org/multipage/microdata.html#microdata">funcionalidade Microdados HTML de WHATWG</a>.</p> -</div> - -<dl> - <dt id="attr-itemid"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemid">itemid</a></code> {{experimental_inline}}</dt> - <dd>The unique, global identifier of an item.</dd> - <dt id="attr-itemprop"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemprop">itemprop</a></code> {{experimental_inline}}</dt> - <dd>Used to add properties to an item. Every HTML element may have an itemprop attribute specified, where an itemprop consists of a name and value pair.</dd> - <dt id="attr-itemref"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemref">itemref</a></code> {{experimental_inline}}</dt> - <dd>Properties that are not descendants of an element with the <code>itemscope</code> attribute can be associated with the item using an <strong>itemref</strong>. Itemref provides a list of element ids (not <code>itemid</code>s) with additional properties elsewhere in the document.</dd> - <dt id="attr-itemscope"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemscope">itemscope</a> </code>{{experimental_inline}}</dt> - <dd>Itemscope (usually) works along with <a href="/en-US/docs/Web/HTML/Global_attributes/itemtype">itemtype </a>to specify that the HTML contained in a block is about a particular item. itemscope creates the Item and defines the scope of the itemtype associated with it. itemtype is a valid URL of a vocabulary (such as <a class="external external-icon" href="https://schema.org/">schema.org</a>) that describes the item and its properties context.</dd> - <dt id="attr-itemtype"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemtype">itemtype</a></code> {{experimental_inline}}</dt> - <dd>Specifies the URL of the vocabulary that will be used to define itemprop's (item properties) in the data structure. <a href="/en-US/docs/Web/HTML/Global_attributes/itemscope">Itemscope</a> is used to set the scope of where in the data structure the vocabulary set by itemtype will be active.</dd> - <dt id="attr-lang"><code><a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang</a></code></dt> - <dd>Participates in defining the language of the element, the language that non-editable elements are written in or the language that editable elements should be written in. The tag contains one single entry value in the format defined in the <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt"><em>Tags for Identifying Languages (BCP47)</em></a> IETF document. <a href="#attr-xml:lang"><strong>xml:lang</strong></a> has priority over it.</dd> -</dl> - -<dl> - <dt id="attr-slot"><code><a href="/en-US/docs/Web/HTML/Global_attributes/slot">slot</a></code> {{experimental_inline}}</dt> - <dd>Assigns a slot in a <a href="/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> -</dl> - -<dl> - <dt id="attr-spellcheck"><code><a href="/en-US/docs/Web/HTML/Global_attributes/spellcheck">spellcheck</a></code> {{experimental_inline}}</dt> - <dd>Is 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 id="attr-style"><code><a href="/en-US/docs/Web/HTML/Global_attributes/style">style</a></code></dt> - <dd>Contains <a href="/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 id="attr-tabindex"><code><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a></code></dt> - <dd>Is 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 takes 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> which means should be focusable and reachable via sequential keyboard navigation; its relative order is defined by the value of the attribute: the sequential follow the increasing number of the <a href="#attr-tabindex"><strong>tabindex</strong></a>. If several elements share the same tabindex, their relative order follows their relative position in the document).</li> - </ul> - </dd> - <dt id="attr-title"><code><a href="/en-US/docs/Web/HTML/Global_attributes/title">title</a></code></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 id="attr-translate"><code><a href="/en-US/docs/Web/HTML/Global_attributes/translate">translate</a></code> {{experimental_inline}}</dt> - <dd>Is 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> -</dl> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "dom.html#global-attributes", "Global attributes")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>From latest snapshot, {{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>spellcheck</code>, <code>draggable</code>, and <code>dropzone</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>contextmenu</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="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Funcionalidade</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td><code>accesskey</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>class</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>contenteditable</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("1.9")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>contextmenu</code></td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoDesktop(9)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>data-*</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("6")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>dir</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>draggable</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("1.8.1")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>dropzone</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>hidden</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("2")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>id</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>itemid</code>, <code>itemprop</code>, <code>itemref</code>, <code>itemscope</code>, <code>itemtype</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>lang</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>spellcheck</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("1.8.1")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>style</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>tabindex</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>title</code></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>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td><code>accesskey</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>class</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>contenteditable</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("1.9")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>contextmenu</code></td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>data-*</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("6")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>dir</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>draggable</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("1.8.1")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>dropzone</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>hidden</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("2")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>id</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>itemid</code>, <code>itemprop</code>, <code>itemref</code>, <code>itemscope</code>, <code>itemtype</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>lang</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>spellcheck</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("1.8.1")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>style</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>tabindex</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>title</code></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="Consultar_também">Consultar também</h2> - -<ul> - <li>Interfaces {{domxref("Element")}} e {{domxref("GlobalEventHandlers")}} que permitem-lhe consultar a maioria dos atributos globais.</li> -</ul> diff --git a/files/pt-pt/web/html/index.html b/files/pt-pt/web/html/index.html deleted file mode 100644 index c9cf09466b..0000000000 --- a/files/pt-pt/web/html/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: 'HTML: Linguagem de Marcação de Hipertexto' -slug: Web/HTML -tags: - - HTML - - HTML5 - - Landing - - Web - - 'l10n:priority' -translation_of: Web/HTML ---- -<div>{{HTMLSidebar}}</div> - -<p class="summary"><span class="seoSummary">Linguagem de Marcação de Hipertexto (<strong>HTML</strong>) é o bloco de criação mais básico da Web. Este define o significado e estrutura de um conteúdo da Web<em>. </em>Outras tecnologias para além de HTML, são geralmente utilizadas para descrever a aparência/apresentação de uma página da Web </span> <span class="seoSummary">(<a href="/pt-PT/docs/Web/CSS">CSS</a>)</span> <span class="seoSummary"> ou funcionalidade/comportamento </span> <span class="seoSummary">(<a href="/pt-PT/docs/Web/JavaScript">JavaScript</a>)</span>.</p> - -<p>"Hipertexto" refere-se a hiperligações que ligam páginas da <em>web</em><em> </em>entre si, dentro de um único site da <em>web</em> ou entre sites da <em>web</em>. As hiperligações são um aspeto fundamental da <em>web</em>. Ao enviar conteúdo para a Internet e vinculá-lo às páginas criadas por outras pessoas, torna-o em um participante ativo na <em>World Wide Web</em>.</p> - -<p>HTML utiliza "markup" para anotar texto, imagens, e outro conteúdo para o exibir num navegador da Web. A marcação de HTML inclui "elementos" especiais, tais como {{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")}}, e muitos outros.</p> - -<p>Um elemento HTML é separado de outro texto num documento por "etiquetas", que consistem no nome do elemento entre "<" e ">". O nome de um elemento dentro de uma etiqueta é insensível a maiúsculas e minúsculas. Isto é, pode ser escrito em maiúsculas, minúsculas ou uma mistura. Por exemplo a etiqueta <<strong>title> </strong>pode ser escrita como <<strong>Title</strong>>, <<strong>TITLE</strong>> ou de outras formas.</p> - -<p>Os artigos abaixo, irão ajudá-lo a saber mais sobre o HTML.</p> - -<section class="cleared" id="sect1"> -<ul class="card-grid"> - <li><span>Introdução ao HTML</span> - - <p>Se for novo no desenvolvimento da Web, certifique-se que lê o nosso artigo <a href="/pt-PT/docs/Learn/Comecar_com_a_Web/HTML_basicos">essencial de HTML </a>para saber mais sobre o que é o HTML e como o utilizar.</p> - </li> - <li><span>Tutoriais de HTML</span> - <p>Para artigos sobre como utilizar o HTML, bem como tutorials e exemplos completos, consulte a nossa <a href="/pt-PT/docs/Learn/HTML">Área de Aprendizagem de HTML</a>.</p> - </li> - <li><span>Referência HTML</span> - <p>Na nossa secção extensa de <a href="/pt-PT/docs/Web/HTML/Referencia">Referência HTML</a>, irá encontrar os detalhes sobre cada elemento e atributo no HTML.</p> - </li> -</ul> - -<div class="row topicpage-table"> -<div class="section"> -<h2 class="Tools" id="Tools" name="Tools">Tutoriais de principiante</h2> - -<p>Na nossa <a href="/pt-PT/docs/Learn/HTML">Área de Aprendizagem HTML</a> apresenta múltiplos módulos que ensinam HTML desde o início — não é necessário nenhum conhecimento prévio.</p> - -<dl> - <dt><a href="/pt-PT/docs/Learn/HTML/Introducao_ao_HTML">Introdução ao HTML</a></dt> - <dd>Este módulo define o palco, para que fique a conhecer os conceitos e sintaxe importantes, tais como a aplicação de HTML no texto, como criar hiperligações, e como utilizar HTML para estruturar uma página da Web.</dd> - <dt><a href="/pt-PT/docs/Learn/HTML/Multimedia_e_integracao">Multimédia e integração</a></dt> - <dd>Este módulo explora como usar o HTML para incluir multimédia nas suas páginas da web, incluindo as diferentes maneiras de como as imagens podem ser introduzidas, e como embutir vídeo, audio<span class="short_text" id="result_box" lang="pt"><span> e até mesmo outras páginas web inteiras.</span></span></dd> - <dt><a href="/pt-PT/docs/Learn/HTML/Tables">Tabelas de HTML</a></dt> - <dd>Representar dados em tabelas numa página web <span id="result_box" lang="pt"><span>de uma maneira compreensível e acessível pode ser um desafio. </span></span><span id="result_box" lang="pt"><span>Este módulo abrange a marcação básica de tabela, juntamente com recursos mais complexos, como a implementação de legendas e resumos.</span></span></dd> - <dt><a href="/pt-PT/docs/Learn/HTML/Formularios">Formulários HTML</a></dt> - <dd>Forms are a very important part of the Web — these provide much of the functionality you need for interacting with websites, e.g. registering and logging in, sending feedback, buying products, and more. This module gets you started with creating the client-side/front-end parts of forms.</dd> - <dt><a href="/pt-PT/docs/Learn/HTML/Como">Utilizar HTML para resolver problemas comuns</a></dt> - <dd>Provides links to sections of content explaining how to use HTML to solve very common problems when creating a web page: dealing with titles, adding images or videos, emphasizing content, creating a basic form, etc.</dd> -</dl> - -<h2 id="Tópicos_avançados">Tópicos avançados</h2> - -<dl> - <dt class="landingPageList"><a href="/pt-PT/docs/Web/HTML/CORS_enabled_image">Imagem CORS ativada</a></dt> - <dd class="landingPageList">O atributo <code><a href="/en-US/docs/Web/HTML/Element/img#attr-crossorigin">crossorigin</a></code>, em combinação com um cabeçalho <a class="glossaryLink" href="/en-US/docs/Glossary/CORS">CORS</a> apropriado, permite imagens definidas pelo elemento {{HTMLElement("img")}} para serem carregadas a partir de origens secundárias e utilziadas num elemento {{HTMLElement("canvas")}} como se fossem carregadas a partir de uma origem atual.</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">CORS settings attributes</a></dt> - <dd class="landingPageList">Some HTML elements that provide support for <a href="/en-US/docs/HTTP/Access_control_CORS">CORS</a>, such as {{HTMLElement("img")}} or {{HTMLElement("video")}}, have a <code>crossorigin</code> attribute (<code>crossOrigin</code> property), which lets you configure the CORS requests for the element's fetched data.</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Focus_management_in_HTML">Focus management in HTML</a></dt> - <dd class="landingPageList">The <code><a href="/en-US/docs/Web/API/Document/activeElement">activeElement</a></code> DOM attribute and the <code><a href="/en-US/docs/Web/API/Document/hasFocus">hasFocus()</a></code> DOM method help you track and control a user's interactions with elements on a web page.</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Using_the_application_cache">Using the application cache</a></dt> - <dd class="landingPageList">Application caching lets web-based applications run offline. You can use the <strong>Application Cache</strong> (<em>AppCache</em>) interface to specify resources that the browser should cache and make available to offline users. Applications that are cached load and work correctly even if users click the refresh button when they are offline.</dd> - <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content">Preloading content with rel="preload"</a></dt> - <dd class="landingPageList">The <code>preload</code> value of the {{htmlelement("link")}} element's {{htmlattrxref("rel", "link")}} attribute allows you to write declarative fetch requests in your HTML {{htmlelement("head")}}, specifying resources that your pages will need very soon after loading, which you therefore want to start preloading early in the lifecycle of a page load, before the browser's main rendering machinery kicks in. This ensures that they are made available earlier and are less likely to block the page's first render, leading to performance improvements. This article provides a basic guide to how <code>preload</code> works.</dd> -</dl> -</div> - -<div class="section"> -<h2 class="Documentation" id="Referências">Referências</h2> - -<dl> - <dt class="landingPageList"><a href="/pt-PT/docs/Web/HTML/Referencia">Referência HTML</a></dt> - <dd class="landingPageList">HTML consists of <strong>elements</strong>, each of which may be modified by some number of <strong>attributes</strong>. HTML documents are connected to each other with <a href="/en-US/docs/Web/HTML/Link_types">links</a>.</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Element">HTML element reference</a></dt> - <dd class="landingPageList">Browse a list of all <a class="glossaryLink" href="/en-US/docs/Glossary/HTML">HTML</a> <a class="glossaryLink" href="/en-US/docs/Glossary/Element">elements</a>.</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Attributes">HTML attribute reference</a></dt> - <dd class="landingPageList">Elements in HTML have <strong>attributes</strong>. These are additional values that configure the elements or adjust their behavior in various ways.</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Global_attributes">Global attributes</a></dt> - <dd class="landingPageList">Global attributes may be specified on all <a href="/en-US/docs/Web/HTML/Element">HTML elements</a>, <em>even those not specified in the standard</em>. This means that any non-standard elements must still permit these attributes, even though those elements make the document HTML5-noncompliant.</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Inline_elements">Inline elements</a> and <a href="/en-US/docs/Web/HTML/Block-level_elements">block-level elements</a></dt> - <dd class="landingPageList">HTML elements are usually "inline" or "block-level" elements. An inline element occupies only the space bounded by the tags that define it. A block-level element occupies the entire space of its parent element (container), thereby creating a "block."</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Link_types">Link types</a></dt> - <dd class="landingPageList">In HTML, various link types can be used to establish and define the relationship between two documents. Link elements that types can be set on include <a href="/en-US/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/en-US/docs/Web/HTML/Element/area"><code><area></code></a> and <a href="/en-US/docs/Web/HTML/Element/link"><code><link></code></a>.</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Supported_media_formats">Media formats supported by the HTML audio and video elements</a></dt> - <dd class="landingPageList">The <a href="/en-US/docs/Web/HTML/Element/audio"><code><audio></code></a> and <a href="/en-US/docs/Web/HTML/Element/video"><code><video></code></a> elements allow you to play audio and video media. These elements provide a browser-native alternative to similar capabilities found in Adobe Flash and other plug-ins.</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Kinds_of_HTML_content">Kinds of HTML content</a></dt> - <dd class="landingPageList">HTML is comprised of several kinds of content, each of which is allowed to be used in certain contexts and is disallowed in others. Similarly, each has a set of other content categories they can contain and elements which can or can't be used in them. This is a guide to these categories.</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">Quirks mode and standards mode</a></dt> - <dd class="landingPageList">Historical information on quirks mode and standards mode.</dd> -</dl> - -<h2 class="landingPageList" id="Tópicos_relacionados">Tópicos relacionados</h2> - -<dl> - <dt><a href="/pt-PT/docs/Web/HTML/Aplicar_cor__elementos_HTML_utilizando_CSS">Aplicar cor aos elementos HTML utilizando CSS</a></dt> - <dd>Este artigo aborda a maioria das formas em que utilzia CSS para adicionar cor ao conteúdo HTML, listando quais as partes dos documentos HTML que podem ser coloridas e quais as propriedades CSS que utilizam e quando o fazer. Inclui exemplos, hiperligações para ferramentas de criação de paletas e, mais.</dd> -</dl> -</div> -</div> -<span class="alllinks"><a href="/pt-PT/docs/tag/HTML">Ver Tudo...</a></span></section> diff --git a/files/pt-pt/web/html/link_types/index.html b/files/pt-pt/web/html/link_types/index.html deleted file mode 100644 index 7d26dd44bf..0000000000 --- a/files/pt-pt/web/html/link_types/index.html +++ /dev/null @@ -1,609 +0,0 @@ ---- -title: Tipos de hiperligação -slug: Web/HTML/Link_types -tags: - - HTML - - Hiperligação - - Referencia - - Tipos de hiperligação -translation_of: Web/HTML/Link_types -original_slug: Web/HTML/Tipos_de_hiperligacao ---- -<div>{{HTMLSidebar}}</div> - -<p>Em HTML, os seguintes tipos de hiperligação indicam a relação entre dois documentos, em que uma se interliga com a outra, utilizando um elemento {{HTMLElement("a")}}, {{HTMLElement("area")}}, ou {{HTMLElement("link")}}.</p> - -<table class="standard-table"> - <caption>List of the defined link types and their significance in HTML</caption> - <thead> - <tr> - <th scope="col">Tipo de Hiperligação</th> - <th scope="col">Descrição</th> - <th scope="col" style="width: 12em;">Permitido nestes elementos</th> - <th scope="col">Não permitido nestes elementos</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>alternate</code></td> - <td> - <ul> - <li>If the element is {{HTMLElement("link")}} and the {{htmlattrxref("rel", "link")}} attribute also contains the <code>stylesheet</code> type, the link defines an <a href="/en-US/docs/Alternative_style_sheets">alternative style sheet</a>; in that case the {{htmlattrxref("title", "link")}} attribute must be present and not be the empty string.</li> - <li>If the {{htmlattrxref("type","link")}} is set to <code>application/rss+xml</code> or <code>application/atom+xml</code>, the link defines a <a href="/en-US/docs/RSS/Getting_Started/Syndicating">syndication feed</a>. The first one defined on the page is the default.</li> - <li>Otherwise, the link defines an alternative page, of one of these types: - <ul> - <li>for another medium, like a handheld device (if the {{htmlattrxref("media","link")}} attribute is set)</li> - <li>in another language (if the {{htmlattrxref("hreflang","link")}} attribute is set),</li> - <li>in another format, such as a PDF (if the {{htmlattrxref("type","link")}} attribute is set)</li> - <li>a combination of these</li> - </ul> - </li> - </ul> - </td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> - <td><em>None</em>.</td> - </tr> - <tr> - <td><code>archives</code> {{obsolete_inline}}</td> - <td>Defines a hyperlink to a document that contains an archive link to this one. For example, a blog entry could link to a monthly index page this way.<br> - <br> - <strong>Note:</strong> Although recognized, the singular <code>archive</code> is incorrect and must be avoided.</td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> - <td><em>None.</em></td> - </tr> - <tr> - <td><code>author</code></td> - <td>Defines a hyperlink to a page describing the author or providing a way to contact the author.<br> - <br> - <strong>Note:</strong> This may be a <code>mailto:</code> hyperlink, but this is not recommended on public pages as robot harvesters will quickly lead to a lot of spam sent to the address. In that case, it is better to lead to a page containing a contact form.<br> - <br> - Although recognized, the {{htmlattrxref("rev", "link")}} attribute on {{HTMLElement("a")}}, {{HTMLElement("area")}} or{{HTMLElement("link")}} elements with a link type of <code>made</code> is incorrect and should be replaced by the {{htmlattrxref("rel", "link")}} attribute with this link type.</td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> - <td><em>None.</em></td> - </tr> - <tr> - <td><code>bookmark</code></td> - <td>Indicates that the hyperlink is a <a href="/en-US/docs/Permalink">permalink</a> for the nearest ancestor {{HTMLElement("article")}} element. If none, it is a permalink for the <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document">section</a> that the element is most closely associated to.<br> - <br> - This allows for bookmarking a single article in a page containing multiple articles, such as on a monthly summary blog page, or a blog aggregator.</td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> - <td>{{HTMLElement("link")}}</td> - </tr> - <tr> - <td><code>canonical</code></td> - <td>From Wikipedia, the free encyclopedia: <a href="https://en.wikipedia.org/wiki/Canonical_link_element">Canonical_link_element</a><br> - A canonical link element is an HTML element that helps webmasters prevent duplicate content issues by specifying the "canonical" or "preferred" version of a web page as part of search engine optimization.</td> - <td>{{HTMLElement("link")}}</td> - <td>???</td> - </tr> - <tr> - <td><code>dns-prefetch</code> {{experimental_inline}}</td> - <td>Hints to the browser that a resources is needed allowing the browser to do a DNS lookup and protocol handshaking before a user clicks the link.</td> - <td>{{HTMLElement("link")}}</td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> - </tr> - <tr> - <td><code>external</code></td> - <td>Indicates that the hyperlink leads to a resource outside the site of the current page; that is, following the link will make the user leave the site.</td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> - <td>{{HTMLElement("link")}}</td> - </tr> - <tr> - <td><code>first</code> {{obsolete_inline}}</td> - <td>Indicates that the hyperlink leads to the first resource of the <em>sequence</em> the current page is in.<br> - <br> - <strong>Note:</strong> Other link types related to linking resources in the same sequence are <code>last</code>, <code>prev</code>, <code>next</code>.<br> - <br> - Although recognized, the synonyms <code>begin</code> and <code>start</code> are incorrect and must be avoided.</td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> - <td><em>None.</em></td> - </tr> - <tr> - <td><code>help</code></td> - <td> - <ul> - <li>If the element is {{HTMLElement("a")}} or {{HTMLElement("area")}}, it indicates that the hyperlink leads to a resource giving further help about the parent of the element, and its descendants.</li> - <li>If the element is {{HTMLElement("link")}} it indicates that the hyperlink leads to a resource giving further help about the page as a whole.</li> - </ul> - </td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> - <td><em>None.</em></td> - </tr> - <tr> - <td><code>icon</code></td> - <td>Defines a resource for representing the page in the user interface, usually an icon (auditory or visual).<br> - <br> - The {{htmlattrxref("media","link")}}, {{htmlattrxref("type","link")}} and {{htmlattrxref("sizes","link")}} attributes allow the browser to select the most appropriate icon for its context. If several resources match, the browser will select the last one declared, in tree order. As these attributes are merely hints, and the resources may be inappropriate upon further inspection, the browser will then select another one, if appropriate.<br> - <br> - <strong>Note:</strong> Apple's iOS does not use this link type, nor the {{htmlattrxref("sizes","link")}} attribute, like others mobile browsers do, to select a webpage icon for Web Clip or a start-up placeholder. Instead it uses the non-standard <a class="external external-icon" href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4"><code>apple-touch-icon</code></a> and <a class="external external-icon" href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW6"><code>apple-touch-startup-image</code></a> respectively.<br> - <br> - The <code>shortcut</code> link type is often seen before <code>icon</code>, but this link type is non-conforming, ignored and <strong>web authors must not use it anymore</strong>.</td> - <td>{{HTMLElement("link")}}</td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> - </tr> - <tr> - <td><code>index</code> {{obsolete_inline}}</td> - <td>Indicates that the page is part of a <em>hierarchical</em> structure and that the hyperlink leads to the top level resource of that structure.<br> - <br> - If one or several <code>up</code> link types are also present, the number of these <code>up</code> indicates the depth of the current page in the hierarchy.</td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> - <td><em>None.</em></td> - </tr> - <tr> - <td><code>last</code> {{obsolete_inline}}</td> - <td>Indicates that the hyperlink leads to the <em>last</em> resource of the <em>sequence</em> the current page is in.<br> - <br> - <strong>Note:</strong> Other link types related to linking resources in the same sequence are <code>first</code>, <code>prev</code>, <code>next</code>.<br> - <br> - Although recognized, the synonym <code>end</code> is incorrect and must be avoided.</td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> - <td><em>None.</em></td> - </tr> - <tr> - <td><code>license</code></td> - <td>Indicates that the hyperlink leads to a document describing the licensing information. If not inside the {{HTMLElement("head")}} element, the standard doesn't distinguish between a hyperlink applying to a specific part of the document or to the document as a whole. Only the data on the page can indicate this.<br> - <br> - <strong>Note: </strong>Although recognized, the synonym <code>copyright</code> is incorrect and must be avoided.</td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> - <td><em>None.</em></td> - </tr> - <tr> - <td><code>manifest</code></td> - <td>Indicates that the linked file is a <a href="https://developer.mozilla.org/en-US/docs/Web/Manifest">Web App Manifest</a>.</td> - <td>{{HTMLElement("link")}}</td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> - </tr> - <tr> - <td><code>next</code></td> - <td>Indicates that the hyperlink leads to the <em>next</em> resource of the <em>sequence</em> the current page is in.<br> - <br> - <strong>Note:</strong> Other link types related to linking resources in the same sequence are <code>first</code>, <code>prev</code>, <code>last</code>.</td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> - <td><em>None.</em></td> - </tr> - <tr> - <td><code>nofollow</code></td> - <td>Indicates that the linked document is not endorsed by the author of this one, for example if it has no control over it, if it is a bad example or if there is commercial relationship between the two (sold link). This link type may be used by some search engines that use popularity ranking techniques.</td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> - <td>{{HTMLElement("link")}}</td> - </tr> - <tr> - <td><code>noopener</code></td> - <td> - <p>Instructs the browser to open the link without granting the new browsing context access to the document that opened it — by not setting the {{domxref("Window.opener")}} property on the opened window (it returns <code>null</code>).<br> - <br> - This is especially useful when opening untrusted links, in order to ensure they cannot tamper with the originating document via the {{domxref("Window.opener")}} property (see <a href="https://mathiasbynens.github.io/rel-noopener/">About rel=noopener</a> for more details), while still providing the <code>Referer</code> HTTP header (unless <code>noreferrer</code> is used as well).</p> - - <p>Note that when <code>noopener</code> is used, nonempty target names other than <code>_top</code>, <code>_self</code>, and <code>_parent</code> are all treated like <code>_blank</code> in terms of deciding whether to open a new window/tab.</p> - </td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> - <td>{{HTMLElement("link")}}</td> - </tr> - <tr> - <td><code>noreferrer</code></td> - <td> - <p>Prevents the browser, when navigating to another page, to send this page address, or any other value, as referrer via the <code>Referer:</code> HTTP header.<br> - (In Firefox, before Firefox 37, this worked only in links found in pages. Links clicked in the UI, like "Open in a new tab" via the contextual menu, ignored this).</p> - </td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> - <td>{{HTMLElement("link")}}</td> - </tr> - <tr> - <td><code>pingback</code></td> - <td>Defines an external resource URI to call if one wishes to make a comment or a citation about the webpage. The protocol used to make such a call is defined in the <a href="http://www.hixie.ch/specs/pingback/pingback">Pingback 1.0</a> specification.<br> - <br> - <strong>Note:</strong> if the <code>X-Pingback:</code> HTTP header is also present, it supersedes the {{HTMLElement("link")}} element with this link type.</td> - <td>{{HTMLElement("link")}}</td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> - </tr> - <tr> - <td><code>preconnect</code> {{experimental_inline}}</td> - <td>Provides a hint to the browser suggesting that it open a connection to the linked web site in advance, without disclosing any private information or downloading any content, so that when the link is followed the linked content can be fetched more quickly.</td> - <td>{{HTMLElement("link")}}</td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> - </tr> - <tr> - <td><code>prefetch</code></td> - <td>Suggests that the browser fetch the linked resource in advance, as it is likely to be requested by the user. Starting with Firefox 44, the value of the {{htmlattrxref("crossorigin", "link")}} attribute is taken into consideration, making it possible to make anonymous prefetches.<br> - <br> - <strong>Note:</strong> The <a href="/en-US/docs/Link_prefetching_FAQ">Link Prefetch FAQ</a> has details on which links can be prefetched and on alternative methods.</td> - <td>{{HTMLElement("a")}} {{unimplemented_inline}},<br> - {{HTMLElement("area")}} {{unimplemented_inline}},<br> - {{HTMLElement("link")}}</td> - <td><em>None.</em></td> - </tr> - <tr> - <td><code>preload</code></td> - <td>Tells the browser to download a resource because this resource will be needed later during the current navigation. See <a href="/en-US/docs/Web/HTML/Preloading_content">Preloading content with rel="preload"</a> for more details.</td> - <td>{{HTMLElement("link")}}</td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> - </tr> - <tr> - <td><code>prerender</code> {{experimental_inline}}</td> - <td>Suggests that the browser fetch the linked resource in advance, and that it also render the prefetched content offscreen so it can be quickly presented to the user once needed.</td> - <td>{{HTMLElement("link")}}</td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> - </tr> - <tr> - <td><code>prev</code></td> - <td>Indicates that the hyperlink leads to the <em>preceding</em> resource of the <em>sequence</em> the current page is in.<br> - <br> - <strong>Note:</strong> You can also use the <code>next</code> keyword to specify a link to the next page in the sequence.<br> - <br> - Although recognized, the synonym <code>previous</code> is incorrect and must be avoided.</td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> - <td><em>None.</em></td> - </tr> - <tr> - <td><code>search</code></td> - <td>Indicates that the hyperlink references a document whose interface is specially designed for searching in this document, or site, and its resources.<br> - <br> - If the {{htmlattrxref("type","link")}} attribute is set to <code>application/opensearchdescription+xml </code>the resource is an <a href="/en-US/docs/Creating_OpenSearch_plugins_for_Firefox">OpenSearch plugin</a> that can be easily added to the interface of some browsers like Firefox or Internet Explorer.</td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> - <td><em>None.</em></td> - </tr> - <tr> - <td><code>shortlink</code></td> - <td>From Wikipedia, the free encyclopedia: <a href="https://en.wikipedia.org/wiki/URL_shortening">URL shortening</a><br> - Some websites create short links to make sharing links via instant messaging easier.</td> - <td>{{HTMLElement("link")}}</td> - <td>???</td> - </tr> - <tr> - <td><code>stylesheet</code></td> - <td>Defines an external resource to be used as a stylesheet. If the <code>type</code> is not set, the browser should assume it is a <code>text/css</code> stylesheet until further inspection.<br> - <br> - If used in combination with the <code>alternate</code> keyword, it defines an <a href="/en-US/docs/Alternative_style_sheets">alternative style sheet</a>; in that case the {{htmlattrxref("title", "link")}} attribute must be present and not be the empty string.</td> - <td>{{HTMLElement("link")}}</td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> - </tr> - <tr> - <td><code>sidebar</code> {{non-standard_inline}}</td> - <td>Indicates that the hyperlink leads to a resource that would be better suited for a secondary browsing context, like a <em>sidebar</em>. Browsers, that don't have such a context will ignore this keyword.<br> - <br> - While once part of the HTML specification, this has been removed from the spec and is only implemented by Firefox at this time.</td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> - <td><em>None.</em></td> - </tr> - <tr> - <td><code>tag</code></td> - <td>Indicates that the hyperlink refers to a document describing a <em>tag</em> that applies to this document.<br> - <br> - <strong>Note:</strong> This link type should not be set on links to a member of a tag cloud as these do not apply to a single document but to a set of pages.</td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> - <td>{{HTMLElement("link")}}</td> - </tr> - <tr> - <td><code>up</code> {{obsolete_inline}}</td> - <td>Indicates that the page is part of a <em>hierarchical</em> structure and that the hyperlink leads to the higher level resource of that structure.<br> - <br> - The number of <code>up</code> link types indicates the depth difference between the current page and the linked resource.</td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> - <td><em>None.</em></td> - </tr> - </tbody> -</table> - -<h2 id="Specifications" name="Specifications">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Preload','#x2.link-type-preload','preload')}}</td> - <td>{{Spec2('Preload')}}</td> - <td>Added <code>preload</code>.</td> - </tr> - <tr> - <td>{{SpecName('Resource Hints', '#dfn-preconnect', 'preconnect')}}</td> - <td>{{Spec2('Resource Hints')}}</td> - <td>Added <code>dns-prefetch</code>, <code>preconnect</code>, and <code>prerender</code> values.</td> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'semantics.html#the-link-element', '<link>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change since last snapshot ({{SpecName('HTML WHATWG')}})</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-link-element', '<link>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Added <code>tag</code>, <code>stylesheet</code>, <code>search</code>, <code>prev</code>, <code>prefetch</code>, <code>noreferrer</code>, <code>nofollow</code>, <code>next</code>, <code>license</code>, <code>icon</code>, <code>help</code>, <code>bookmark</code>, <code>author</code>, and <code>alternate</code>.</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="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Funcionalidade</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>Alternative stylesheets</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("1.9")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>prefetch</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>prerender</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}<sup>[4]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>preconnect</code></td> - <td>{{CompatChrome(46)}}</td> - <td>{{CompatGeckoDesktop("39")}}<sup>[1]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>dns-prefetch</code></td> - <td>{{CompatChrome(46)}}</td> - <td>{{CompatGeckoDesktop("1.9")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>preload</code></td> - <td>{{CompatChrome(50.0)}}</td> - <td>{{CompatNo}}<sup>[3]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>noopener</code></td> - <td>{{CompatChrome(49.0)}}</td> - <td>{{CompatGeckoDesktop("52")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatOpera(36)}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>manifest</code></td> - <td>{{CompatNo}}<sup>[2]</sup></td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Android Webview</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</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>{{CompatGeckoMobile("1.0")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>Alternative stylesheets</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile("2.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>prefetch</code></td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>prerender</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}<sup>[4]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>preconnect</code></td> - <td>{{CompatChrome(46)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile("39")}} </td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatChrome(42.0)}}<sup>[1]</sup></td> - </tr> - <tr> - <td><code>dns-prefetch</code></td> - <td>{{CompatChrome(46)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile("1.9")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>preload</code></td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(50.0)}}</td> - <td>{{CompatNo}}<sup>[3]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatChrome(50.0)}}</td> - </tr> - <tr> - <td><code>noopener</code></td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(49.0)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>32</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatChrome(49.0)}}</td> - </tr> - <tr> - <td><code>manifest</code></td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(39.0)}}</td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - <td>{{CompatChrome(39.0)}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Before Firefox 41, it didn't obey the {{htmlattrxref("crossorigin", 'link')}} attribute.</p> - -<p>[2] Since this is a mobile feature, desktop ignores it rather than throwing an error.</p> - -<p>[3] This feature was available in Firefox 56, but only for cacheable resources. It has been disabled in Firefox 57 because of various web compatibility issues (e.g. {{bug(1405761)}}). An improved version that works for non-cacheable resources is expected to land in Firefox 59.</p> - -<p>[4] This was implemented behind a pref in Gecko 53 — <code>dom.linkPrerender.enabled</code>.— but then removed because of lack of uptake and removal in Chromium. See {{bug(1383876)}}.</p> - -<div id="SL_balloon_obj" style="display: block;"> -<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%; opacity: 0; display: block; left: -8px; top: -25px; transition: visibility 2s ease 0s, opacity 2s linear 0s;"> </div> - -<div id="SL_shadow_translation_result2" class="hidden"> </div> - -<div id="SL_shadow_translator" class="hidden"> -<div id="SL_planshet"> -<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_Bproviders"> -<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div> - -<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div> - -<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div> -</div> - -<div id="SL_alert_bbl" class="hidden"> -<div id="SLHKclose" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_alert_cont"> </div> -</div> - -<div id="SL_TB"> -<table id="SL_tables"> - <tbody><tr> - <td class="SL_td"><input></td> - <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> - <td class="SL_td"> - <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Alternar Idiomas"> </div> - </td> - <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> - <td class="SL_td"> - <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ouça"> </div> - </td> - <td class="SL_td"> - <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Copiar"> </div> - </td> - <td class="SL_td"> - <div id="SL_bbl_font_patch"> </div> - - <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Tamanho da fonte"> </div> - </td> - <td class="SL_td"> - <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ajuda"> </div> - </td> - <td class="SL_td"> - <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Fixar a janela de pop-up"> </div> - </td> - </tr> -</tbody></table> -</div> -</div> - -<div id="SL_shadow_translation_result" style=""> </div> - -<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_player2"> </div> - -<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div> - -<div id="SL_Balloon_options" style="background: rgb(255, 255, 255) repeat scroll 0% 0%;"> -<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<table id="SL_tbl_opt" style="width: 100%;"> - <tbody><tr> - <td><input></td> - <td> - <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"> </div> - </td> - <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td> - <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td> - </tr> -</tbody></table> -</div> -</div> -</div> diff --git a/files/pt-pt/web/html/reference/index.html b/files/pt-pt/web/html/reference/index.html deleted file mode 100644 index 4c7d3ed2af..0000000000 --- a/files/pt-pt/web/html/reference/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: Referência HTML -slug: Web/HTML/Reference -tags: - - HTML - - Landing - - Referencia - - Web -translation_of: Web/HTML/Reference -original_slug: Web/HTML/Referencia ---- -<div>{{HTMLSidebar}}</div> - -<p>Esta referência <a href="/en-US/docs/Web/HTML">HTML</a> descreve <strong>todos os elementos</strong> e<strong> atributos</strong> de HTML, incluindo os <strong>atributos globais</strong> que se aplicam a todos os elementos.</p> - -<dl> - <dd></dd> - <dt><a href="/pt-PT/docs/Web/HTML/Elemento">Referência de elementos HTML</a></dt> - <dd>Esta página lista todos os HTML elementos.</dd> - <dt><a href="/pt-PT/docs/Web/HTML/Atributos">Referência de atibuto HTML</a></dt> - <dd></dd> - <dt><a href="/pt-PT/docs/Web/HTML/Atributos_globais">Atributos globais</a></dt> - <dd></dd> - <dt><a href="/pt-PT/docs/Web/HTML/Tipos_de_hiperligacao">Tipos de hiperligação</a></dt> - <dd>Em HTML, os seguintes tipos de hiperligação indicam a relação entre dois documentos, em que uma se interliga com a outra, utilizando um elemento <a>, <area>, ou <link>.</dd> -</dl> - -<p><span class="alllinks"><a href="/pt-PT/docs/tag/HTML" title="Article tagged: HTML">Ver todas as páginas "HTML" etiquetadas...</a></span></p> |