diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
| commit | 074785cea106179cb3305637055ab0a009ca74f2 (patch) | |
| tree | e6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/pt-br/web/html | |
| parent | da78a9e329e272dedb2400b79a3bdeebff387d47 (diff) | |
| download | translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2 translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip | |
initial commit
Diffstat (limited to 'files/pt-br/web/html')
140 files changed, 25555 insertions, 0 deletions
diff --git a/files/pt-br/web/html/applying_color/index.html b/files/pt-br/web/html/applying_color/index.html new file mode 100644 index 0000000000..1cd0881566 --- /dev/null +++ b/files/pt-br/web/html/applying_color/index.html @@ -0,0 +1,488 @@ +--- +title: Applying color to HTML elements using CSS +slug: Web/HTML/Applying_color +translation_of: Web/HTML/Applying_color +--- +<div>{{HTMLRef}}</div> + +<p>O uso de cores é uma forma fundamental da expressão humana. Crianças experimentam com cores antes mesmo de ter a destreza manual para desenhar. Talvez por isso, a cor é uma das primeiras coisas com a qual as pessoas querem experimentar quando estão aprendendo a desenvolver websites. Com<span class="seoSummary"> <a href="/en-US/docs/Web/CSS">CSS</a>, há muitas maneiras de acrescentar cor nos seus <a href="/en-US/docs/Web/HTML/Element">elementos HTML</a> para criar exatamente o visual que você quiser. Esse artigo é um preparativo introduzindo cada uma das formas que a cor CSS pode ser usada no HTML.</span></p> + +<p>Felizmente, adicionar cor no seu HTML é muito fácil, e você pode colorir praticamente qualquer coisa.</p> + +<p>Vamos passar pela maior parte de tudo que você precisará saber quando usar cor, incluindo uma {{anch("Things that can have color", "lista do que pode ser colorido e quais propriedades CSS estão envolvidas")}}, {{anch("How to describe a color", "como descrever uma cor")}}, e como de fato {{anch("Using color", "usar cores em folhas de estilo e scripts")}}. Também daremos uma olhada em como {{anch("Letting the user picka color", "permitir que o usuário escolha uma cor")}}.</p> + +<p>Então, encerraremos o assunto com uma breve discussão de como {{anch("Using color wisely", "usar cores sabiamente")}}: como selecionar cores apropriadas, tendo em mente as necessidades de pessoas com diferentes capacidades visuais.</p> + +<h2 id="Coisas_que_podem_ter_cor">Coisas que podem ter cor</h2> + +<p>No nível dos elementos, tudo no HTML pode ter uma cor aplicada. Ao invés, vamos pensar nos tipos de coisas que são desenhadas nos elementos, como texto e bordas e assim por diante. Para cada um deles, veremos uma lista das propriedades CSS que aplicam cor neles.</p> + +<p>Em um nível fundamental, a propriedade {{cssxref("color")}} define a cor do primeiro plano do conteúdo de um elemento HTML. Já a propriedade {{cssxref("background-color")}} define a cor do plano de fundo de um elemento HTML. Essas propriedades podem ser usadas em praticamente qualquer elemento.</p> + +<h3 id="Texto">Texto</h3> + +<p>Sempre que um elemento é renderizado, essas propriedades são usadas para determinar a cor do texto, seu plano de fundo, e quaisquer decorações no texto.</p> + +<dl> + <dt>{{cssxref("color")}}</dt> + <dd>A cor usada para desenhar o texto e quaisquer<a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals#Font_style_font_weight_text_transform_and_text_decoration"> decorações de texto</a> (como a adição de sublinhados ou tachados e assim por diante).</dd> + <dt>{{cssxref("background-color")}}</dt> + <dd>A cor do plano de fundo do texto.</dd> + <dt>{{cssxref("text-shadow")}}</dt> + <dd>Configura um efeito de sombra aplicado ao texto. Entre as opções para os aspectos da sombra, está a cor base da sombra (que será então desfocada e mesclada com o plano de fundo, com base nos outros parâmetros). Veja {{SectionOnPage("/en-US/docs/Learn/CSS/Styling_text/Fundamentals", "Sombras projetadas em texto")}} para descobrir mais.</dd> + <dt>{{cssxref("text-decoration-color")}}</dt> + <dd>Por padrão, decorações de texto (como sublinhados, tachados, etc) usam a propriedade <code>color</code> para definir suas cores. No entanto, você pode sobrepor esse comportamento e usar uma cor diferente para elas com a propriedade <code>text-decoration-color</code>.</dd> + <dt>{{cssxref("text-emphasis-color")}}</dt> + <dd>A cor usada para desenhar símbolos de ênfase adjacentes a cada caractere no texto. Isso é usado primariamente para desenhar texto para idiomas do Leste Asiático. </dd> + <dt>{{cssxref("caret-color")}}</dt> + <dd>A cor usada para desenhar o {{Glossary("caret")}} (às vezes referido como o cursor de entrada de texto) dentro do elemento. Isso é útil apenas em elementos editáveis, como {{HTMLElement("input")}} e {{HTMLElement("textarea")}} ou elementos cujo atributo HTML {{htmlattrxref("contenteditable")}} está definido.</dd> +</dl> + +<h3 id="Caixas">Caixas</h3> + +<p>Todo elemento é uma caixa com algum tipo de conteúdo, e tem um plano de fundo e uma borda em adição a qualquer conteúdo que a caixa possa ter.</p> + +<dl> + <dt>{{anch("Borders")}}</dt> + <dd>Veja a seção {{anch("Borders")}} com uma lista das propriedades CSS que você pode usar para configurar as cores das bordas de uma caixa.</dd> + <dt>{{cssxref("background-color")}}</dt> + <dd>A cor de plano de fundo para usar em áreas do elemento que não têm conteúdo de primeiro plano.</dd> + <dt>{{cssxref("column-rule-color")}}</dt> + <dd>A cor utilizada para desenhar a linha que separa colunas de texto.</dd> + <dt>{{cssxref("outline-color")}}</dt> + <dd>A cor utilizada para desenhar um contorno por fora do elemento. Esse contorno é diferente da borda no sentido de que não há um espaço reservado para ele no documento (portanto, pode sobrepor outros conteúdos). Isso é geralmente usado como um indicador de foco, para mostrar qual elemento receberá eventos de input (entrada de informações).</dd> +</dl> + +<h3 id="Bordas">Bordas</h3> + +<p>Qualquer elemento pode ter uma <a href="/en-US/docs/Learn/CSS/Styling_boxes/Borders">borda</a> desenhada em torno dele. Uma borda básica de elemento é uma linha desenhada em torno dos cantos do conteúdo do elemento. Veja {{SectionOnPage("/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model", "Box properties")}} para aprender sobre a relação entre elementos e suas bordas, e o artigo <a href="/en-US/docs/Learn/CSS/Styling_boxes/Borders">Estilizando bordas usando CSS </a>para descobrir mais sobre como aplicar estilo em bordas.</p> + +<p>Você pode usar a propriedade abreviada de {{cssxref("border")}}, que permite configurar tudo sobre a borda de uma só vez (incluindo características que não são a cor, como sua largura, estilo (sólido, tracejado, etc), e assim por diante).</p> + +<dl> + <dt>{{cssxref("border-color")}}</dt> + <dd>Especifica uma única cor para todos os lados da borda do elemento.</dd> + <dt>{{cssxref("border-left-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, e {{cssxref("border-bottom-color")}}</dt> + <dd>Permite definir a cor do lado correspondente da borda do elemento.</dd> + <dt>{{cssxref("border-block-start-color")}} e {{cssxref("border-block-end-color")}}</dt> + <dd>Com esses, você pode definir a cor usada para desenhar as bordas mais próximas do início e do fim do bloco que essa borda rodeia. Em um modo de escrita da esquerda para a direita (como o português é escrito), o início da borda do bloco é o topo e o final é a base. Isso difere do início e final em linha, que são as bordas esquerda e direita (correspondendo a onde cada linha de texto na caixa começa e termina).</dd> + <dt>{{cssxref("border-inline-start-color")}} e {{cssxref("border-inline-end-color")}}</dt> + <dd>Isso permite que você defina cor para as beiradas da borda mais próxima ao início e fim do começo das linhas de texto dentro da caixa. O lado que será definido depende das propriedades {{cssxref("writing-mode")}}, {{cssxref("direction")}}, e {{cssxref("text-orientation")}}, que normalmente (mas não sempre) são usadas para ajustar a direção do texto com base no idioma exibido. Por exemplo, se o texto da caixa está sendo renderizado da direita para a esquerda, então o <code>border-inline-start-color</code> é aplicado ao lado direito da borda.</dd> +</dl> + +<h3 id="Outras_formas_de_usar_cor">Outras formas de usar cor</h3> + +<p>CSS não é a única tecnologia web que suporta cor. Há tecnologias de gráficos disponíveis na web que também suportam cor. </p> + +<dl> + <dt>A <a href="/en-US/docs/Web/API/Canvas_API">Canvas API</a> HTML</dt> + <dd>Permite desenhar gráficos 2D rasterizados em um elemento {{HTMLElement("canvas")}}. Veja nosso <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">tutorial Canvas</a> para descobrir mais.</dd> + <dt><a href="/en-US/docs/Web/SVG">SVG</a> (Scalable Vector Graphics)</dt> + <dd>Permite desenhar imagens usando comandos que criam formas, padrões e linhas específicas para produzir uma figura. Comandos SVG são formatados como XML, e podem ser embedados diretamente em uma página web ou colocados na página usando o elemento {{HTMLElement("img")}}, como qualquer outro tipo de imagem.</dd> + <dt><a href="/en-US/docs/Web/API/WebGL_API">WebGL</a></dt> + <dd>A Web Graphics Library é uma API OpenGL e ES-based para desenhar gráficos 2D e 3D de alta performance na web. Veja<a href="/en-US/docs/Learn/WebGL"> Aprenda WebGL para gráficos 2D e 3D</a> para descobrir mais.</dd> +</dl> + +<h2 id="Como_descrever_uma_cor">Como descrever uma cor</h2> + +<p>Para representar uma cor no CSS, você precisa encontrar uma forma de traduzir o conceito análogo de "cor" em uma forma digital que um computador possa usar. Isso é normalmente feito decompondo a cor em componentes, como a quantidade de cada grupo de cores primárias que se misturam, ou quão brilhante será a cor. Assim, há diversas formas de descrever uma cor em CSS. </p> + +<p>Para uma discussão mais detalhada sobre cada tipo de valor de cor, veja a referência para a unidade CSS {{cssxref("<color>")}}.</p> + +<h3 id="Palavras-chave">Palavras-chave</h3> + +<p>Um conjunto de nomes padrão de cores foi definido, permitindo que você use essas palavras-chave em vez de representações numéricas de cores, se você preferir isso e houver uma palavra-chave que represente a exata cor que você quer usar. Palavras-chave de cores incluem as cores primárias e secundárias padrão (como <code>red</code>, <code>blue</code>, ou <code>orange</code>), tons de cinza (de <code>black</code> a <code>white</code>, incluindo cores como <code>darkgray</code> e <code>lightgrey</code>), e uma variedade de outras cores mescladas como <code>lightseagreen</code>, <code>cornflowerblue</code>, e <code>rebeccapurple</code>.</p> + +<p>Veja {{SectionOnPage("/en-US/docs/Web/CSS/color_value", "Palavras-chave de cor", "code")}} para uma lista de todas as palavras-chave de cores disponíveis.</p> + +<h3 id="Valores_RGB">Valores RGB</h3> + +<p>Há três formas de representar uma cor RGB em CSS. </p> + +<h4 id="Notação_hexadecimal_em_string">Notação hexadecimal em string</h4> + +<p>A notação em string hexadecimal representa uma cor usando dígitos hexadecimais correspondentes a cada um dos componentes da cor (vermelho, verde e azul). Um quarto componente também pode ser incluído: o canal alpha (ou opacidade). Cada componente da cor pode ser representado por um número entre 0 e 255 (0x00 and 0xFF) ou, opcionalmente, por um número entre 0 e 15 (0x0 and 0xF). Todos os componentes <em>devem</em> ser especificados usando o mesmo número de dígitos. Se você usar a notação de um dígito, a cor final é computada usando cada dígito do componente duas vezes; ou seja, <code>"#D"</code> se torna <code>"#DD"</code> quando for desenhado.</p> + +<p>Uma cor em notação hexadecimal em string sempre começa com o caractere <code>"#"</code>. Depois, vêm os dígitos hexadecimais do código da cor. A string não diferencia maiúsculas de minúsculas.</p> + +<dl> + <dt><code>"#rrggbb"</code></dt> + <dd>Especifica uma cor totalmente opaca cujo componente vermelho é o número hexadecimal <code>0xrr</code>, o componente verde é <code>0xgg</code>, e o componente azul é <code>0xbb</code>.</dd> + <dt><code>"#rrggbbaa"</code></dt> + <dd>Especifica uma cor cujo componente vermelho é o número hexadecimal <code>0xrr</code>, o componente verde é <code>0xgg</code>, e o componente azul é <code>0xbb</code>. O canal alpha é especificado por <code>0xaa</code>; quanto mais baixo o seu valor, mais translúcida a cor se torna.</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>Especifica uma cor cujo componente vermelho é o número hexadecimal <code>0xrr</code>, o componente verde é <code>0xgg</code>, e o componente azul é <code>0xbb</code>. O canal alpha é especificado por <code>0xaa</code>; quanto mais baixo o seu valor, mais translúcida a cor se torna.</dd> +</dl> + +<p>Por exemplo, você pode representar a cor opaca azul vibrante como <code>"#0000ff"</code> ou <code>"#00f"</code>. Para torná-lo 25% opaco, você pode usar <code>"#0000ff44"</code> ou <code>"#00f4"</code>.</p> + +<h4 id="Notação_funcional_RGB">Notação funcional RGB</h4> + +<p>A notação funcional RGB (Red/Green/Blue), como a notação em string hexadecimal, representa cores usando seus componentes vermelho, verde e azul (assim como, opcionalmente, um componente de canal alpha para opacidade). No entanto, ao invés de usar uma string, a cor é definida usando a função CSS {{cssxref("rgb()")}}. Essa função aceita como parâmetros de entrada os valores dos componentes vermelho, verde e azul e um quarto parâmetro opcional, o valor do canal alpha.</p> + +<p>Valores válidos para cada um desses parâmetros são:</p> + +<dl> + <dt><code>red</code>, <code>green</code>, e <code>blue</code></dt> + <dd>Cada um deve ser um valor {{cssxref("<integer>")}} (inteiro) entre 0 e 255 (incluso), ou uma {{cssxref("<percentage>")}} (porcentagem) de 0% a 100%.</dd> + <dt><code>alpha</code></dt> + <dd>O canal alpha é um número entre 0.0 (totalmente transparente) e 1.0 (totalmente opaco). Você pode também especificar uma porcentagem onde 0% é o mesmo que 0.0 e 100% é o mesmo que 1.0.</dd> +</dl> + +<p>Por exemplo, um vermelho vivo que é 50% opaco pode ser representado como <code>rgb(255, 0, 0, 0.5)</code> ou <code>rgb(100%, 0, 0, 50%)</code>.</p> + +<h3 id="Notação_funcional_HSL">Notação funcional HSL </h3> + +<p>Designers e artistas frequentemente preferem trabalhar usando o método de cor {{interwiki("wikipedia", "HSL and HSV", "HSL")}} (Hue/Saturation/Luminosity, tradução: "Matiz/Saturação/Luminosidade"). Na web, cores HSL são representadas usando notação funcional HSL. O uso da função CSS <code>hsl()</code> é muito similar ao da função <code>rgb().</code></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>Figura 1. Um cilindro de cor HSL.</strong> Hue (matiz) define a cor em si, com base na sua posição ao longo de um círculo que representa as cores do espectro visível. Saturation (saturação) é uma porcentagem que representa sua posição no caminho entre ser um tom de cinza ou ter a maior quantidade possível da matiz dada. Conforme o valor de Luminance ou Lightness (luminosidade) aumenta, a cor transiciona do mais escura possível até o mais clara possível (do preto ao branco). Imagem cortesia do usuário <a href="http://commons.wikimedia.org/wiki/User:SharkD">SharkD</a> na <a href="https://www.wikipedia.org/">Wikipedia</a>, distribuída sob a licença <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY-SA 3.0</a>.</em></figcaption> +</figure> +</div> + +<p>O valor do componente hue/matriz (H) de uma cor HSL é um ângulo partindo do vermelho e passando em círculo pelo amarelo, verde, ciano, azul e magenta (terminando de volta no vermelho em 360°) que identifica qual é a cor base. O valor pode ser especificado em qualquer unidade de {{cssxref("<angle>")}} (ângulo) suportada por CSS, incluindo graus (<code>deg</code>, de "degrees"), radianos (<code>rad</code>, de "radians"), grados (<code>grad</code>, de "gradians") ou revoluções (<code>turn</code>, de "turns"). Mas isso não controla quão vívida ou apagada, ou quão clara ou escura a cor é. </p> + +<p>O componente saturation/saturação (S) da cor especifica qual porcentagem da cor final é composta pela matiz especificada. O restante é definido pelo nível de cinza fornecido pelo componente luminance/luminosidade (L). </p> + +<p>Pense como se você fosse criar a cor perfeita de tinta:</p> + +<ol> + <li>Você começa com uma tinta de base que tenha a intensidade máxima possível de uma cor dada, como o azul mais intenso que pode ser representado pela tela do usuário. Esse é o componente hue/matiz (H): um valor que representa o ângulo no círculo de cor para a matiz vívida que queremos usar como base.</li> + <li>Então, seleciona uma tinta na escala de cinza que corresponde a quão clara você quer que a cor seja; essa é a luminance/luminosidade (L). Você quer que seja muito clara e quase branca, ou muito escura e perto do preto, ou algo no meio do caminho? Isso é especificado usando uma porcentagem, onde 0% é perfeitamente preto e 100% é perfeitamente branco (independente da saturação ou matiz). Os valores no meio são a área cinza.</li> + <li>Agora que você tem uma tinta cinza e uma cor perfeitamente vívida, você precisa misturar as duas. O componente saturation/saturação (S) da cor indica qual porcentagem da cor final deve ser composta dessa cor perfeitamente vívida. O resto da cor final é feito da tinta cinza que representa a saturação. </li> +</ol> + +<p>Você também pode opcionalmente incluir um canal alpha, para tornar a cor menos que 100% opaca.</p> + +<p>Aqui estão alguns exemplos de cores na notação HSL: </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 que quando você omite a unidade de medida da matiz, é considerado que ela está em graus/degrees (<code>deg</code>).</p> +</div> + +<h2 id="Usando_cor">Usando cor</h2> + +<p>Agora que você sabe quais propriedades CSS existentes permitem que você aplique cor a elementos, e quais formatos pode usar para descrever cores, você pode unir ambos para começar a fazer uso delas. Como você pode ter visto na lista em {{anch("Things that can have color")}}, há muitas coisas que podem ser coloridas com CSS. Vejamos este tema por dois lados: usando cor dentro de uma {{Glossary("stylesheet")}}, e adicionando e mudando cor usando código {{Glossary("JavaScript")}} para alterar os estilos dos elementos.</p> + +<h3 id="Especificando_cores_em_folhas_de_estilo">Especificando cores em folhas de estilo</h3> + +<p>A forma mais fácil de aplicar cor a elementos—e a forma que você normalmente fará isso—é simplesmente especificar as cores no CSS que será utilizado para renderizar os elementos. Embora não usaremos cada uma das propriedades mencionadas anteriormente, veremos alguns exemplos. O conceito é o mesmo, onde quer que você aplique a cor.</p> + +<p>Vejamos um exemplo, começando por analisar os resultados que queremos atingir: </p> + +<div>{{EmbedLiveSample("Specifying_colors_in_stylesheets", 650, 150)}}</div> + +<h4 id="HTML">HTML</h4> + +<p>O HTML responsável por criar o exemplo acima é mostrado aqui:</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>Esse exemplo é bastante simples, usando uma {{HTMLElement("div")}} para envolver o conteúdo, que consiste de mais duas <code><div></code>s, cada uma estilizada diferentemente com um único parágrafo ({{HTMLElement("p")}}) em cada caixa.</p> + +<p>A mágica acontece, como sempre, no CSS; onde aplicamos a cor definirá o layout para o HTML acima.</p> + +<h4 id="CSS">CSS</h4> + +<p>Vejamos o CSS para criar os resultados acima, uma parte por vez, para que possamos revisar as partes interessantes uma a uma.</p> + +<pre class="brush: css">.wrapper { + width: 620px; + height: 110px; + margin: 0; + padding: 10px; + border: 6px solid mediumturquoise; +}</pre> + +<p>A classe <code>.wrapper</code> é usada para designar estilos à {{HTMLElement("div")}} que envolve todo o resto do nosso conteúdo. Isso estabelece o tamanho do container usando {{cssxref("width")}} e {{cssxref("height")}}, bem como sua {{cssxref("margin")}} e {{cssxref("padding")}}.</p> + +<p>Mais interessante para nossa discussão aqui é o uso da propriedade {{cssxref("border")}} para estabelecer uma borda em torno dos limites externos do elemento. Essa borda é uma linha sólida, com 6 pixels de largura, na cor <code>mediumturquoise</code>.</p> + +<p>Nossas duas caixas coloridas compartilham algumas propriedades em comum, então agora estabelecemos uma classe, <code>.box</code>, que define essas propriedades compartilhadas:</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>Em suma, <code>.box</code> estabelece o tamanho de cada caixa, assim como a configuração da fonte usada dentro dela. Também tiramos proveito de <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexbox</a> para centralizar facilmente os conteúdos de cada caixa. Nós habilitamos o modo <code>flex</code> usando {{cssxref("display", "display: flex")}}, e definimos {{cssxref("justify-content")}} e {{cssxref("align-items")}} como <code>center</code>. Então, podemos criar uma classe para cada uma das duas caixas que defina as propriedades que as diferem.</p> + +<pre class="brush: css">.boxLeft { + float: left; + background-color: rgb(245, 130, 130); + outline: 2px solid darkred; +}</pre> + +<p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">A classe </span></font>.boxLeft</code>—que, apropriadamente, é usada para estilizar a caixa na esquerda—flutua a caixa para a esquerda, e então configura as cores:</p> + +<ul> + <li>A cor de fundo da caixa é definida mudando o valor da propriedade CSS {{cssxref("background-color")}} para <code>rgb(245, 130, 130)</code>.</li> + <li>Um contorno é definido para a caixa. Diferente da mais comumente utilizada <code>border</code>, {{cssxref("outline")}} não afeta o layout em nada; apenas desenha sobre qualquer coisa que esteja fora da caixa do elemento, em vez de abrir espaço como a <code>border</code> faz. Esse contorno é uma linha vermelha escura sólida que tem dois pixels de espessura. Note o uso da palavra-chave <code>darkred</code> ao especificar a cor.</li> + <li>Note que não estamos explicitamente definindo a cor do texto. Isso significa que o valor de {{cssxref("color")}} será herdado do elemento-pai mais próximo que a defina. Por padrão, essa cor é preta. </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>Finalmente, a classe <code>.boxRight</code> descreve as propriedades únicas da caixa que está à direita. A caixa está definida para flutuar à direita, de modo que apareça ao lado da caixa anterior. Então, as seguintes cores são estabelecidas: </p> + +<ul> + <li>A <code>background-color</code> é definida usando o valor HSL especificado com <code>hsl(270deg, 50%, 75%)</code>. É um tom de roxo médio.</li> + <li>O <code>outline</code> da caixa é usado para especificar que a caixa deve ser envolvida em uma linha tracejada de quatro pixels de espessura cuja cor é um roxo um pouco mais escuro (<code>rgb(110, 20, 120)</code>).</li> + <li>A cor de primeiro plano (texto) é especificada definindo a propriedade {{cssxref("color")}} para <code>hsl(0deg, 100%, 100%)</code>. Essa é uma das muitas formas de especificar a cor branca. </li> + <li>Acrescentamos uma linha ondulada verde sob o texto com {{cssxref("text-decoration")}}.</li> + <li>Finalmente, um pouco de sombra é acrescentado ao texto usando {{cssxref("text-shadow")}}. Seu parâmetro <code>color</code> é definido como <code>black</code>.</li> +</ul> + +<h2 id="Permitindo_que_o_usuário_escolha_uma_cor">Permitindo que o usuário escolha uma cor</h2> + +<p>Há muitas situações em que o seu website pode precisar permitir que o usuário selecione uma cor. Talvez você tenha uma interface de usuário customizável, ou você está implementando um app de desenho. Talvez você tenha texto editável e precise deixar o usuário escolher a cor do texto. Ou talvez seu app permita que o usuário defina cores para pastas ou itens. Apesar de historicamente ter sido necessário implementar o seu próprio {{interwiki("wikipedia", "color picker")}}, o HTML agora suporta que os navegadores forneçam um seletor de cor para seu uso através do elemento {{HTMLElement("input")}}, usando <code>"color"</code> como o valor do seu atributo {{htmlattrxref("type", "input")}}.</p> + +<p>O elemento <code><input></code> representa uma cor apenas na {{anch("Hexadecimal string notation", "notação hexadecimal em string")}} explicada acima.</p> + +<h3 id="Exemplo_Selecionando_uma_cor">Exemplo: Selecionando uma cor</h3> + +<p>Vamos observar um exemplo simples em que o usuário pode escolher uma cor. Conforme o usuário ajusta a cor, a borda em torno do exemplo muda para refletir a nova cor. Depois de terminar e escolher a cor final, o valor do seletor de cor é exibido. </p> + +<p>{{EmbedLiveSample("Example_Picking_a_color", 525, 275)}}</p> + +<div class="note"> +<p>No macOS, você indica que finalizou a seleção da cor fechando a janela do seletor de cor.</p> +</div> + +<h4 id="HTML_2">HTML</h4> + +<p>O HTML aqui cria uma caixa que contém um controle do seletor de cor (com um rótulo criado usando o elemento {{HTMLElement("label")}}) e um elemento de parágrafo vazio ({{HTMLElement("p")}}) no qual será emitido um texto do nosso código JavaScript. </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>O CSS simplesmente estabelece um tamanho para a caixa e alguns estilos básicos para aparência. A borda também é estabelecida com 2 pixels de largura e uma cor que não vai permanecer, cortesia do JavaScript abaixo...</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>O script aqui faz a tarefa de atualizar a cor inicial da borda para refletir o valor do seletor de cor. Então, dois event handlers são adicionados para lidar com o input do elemento <code><a href="/en-US/docs/Web/HTML/Element/input/color"><input type="color"></a></code>.</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>O evento {{event("input")}} é enviado cada vez que o valor do elemento muda; isto é, cada vez que o usuário ajusta a cor no seletor. Cada vez que esse evento chega, nós configuramos a cor da borda da caixa para refletir o valor atual do seletor de cor. </p> + +<p>O evento {{event("change")}} é recebido quando o valor do seletor de cor é finalizado. Nós respondemos mudando o conteúdo do elemento <code><p></code> com o ID <code>"output"</code> para uma string que descreve a cor finalmente selecionada.</p> + +<h2 id="Usando_cor_com_sabedoria">Usando cor com sabedoria</h2> + +<p>Fazer as escolhas certas ao selecionar cores ao criar um website pode ser um processo complicado, especialmente se você não tem uma boa base em arte, design ou pelo menos teoria básica da cor. A escolha incorreta de cor pode tornar seu site pouco atraente, ou pior, deixar o conteúdo ilegível devido a problemas com contraste ou cores conflitantes. Pior ainda, usar as cores incorretas pode tornar seu conteúdo completamente inutilizável por pessoas com certos problemas de visão, especialmente daltonismo. </p> + +<h3 id="Encontrando_as_cores_certas">Encontrando as cores certas</h3> + +<p>Pensar nas cores corretas pode ser complicado, especialmente sem treinamento em arte ou design. Felizmente, há ferramentas disponíveis que podem te ajudar. Elas não podem substituir a ajuda de um bom designer para tomar essas decisões, mas podem definitivamente te ajudar a começar. </p> + +<h4 id="Cor_de_base">Cor de base</h4> + +<p>O primeiro passo é escolher sua<strong> cor de base</strong>. Essa é a cor que de certa forma define seu website ou o assunto do site. Da mesma forma que associamos verde com a bebida {{interwiki("wikipedia", "Mountain Dew")}} e podemos relacionar a cor azul com o céu ou oceano, escolher uma cor base apropriada para representar seu site é um bom lugar para começar. Há muitas formas de selecionar uma cor base; algumas idéias incluem: </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="Color_and_accessibility">Color and accessibility</h3> + +<p>There are several ways color can be an {{Glossary("accessibility")}} problem. Improper or careless use of color can result in a web site or app that a percentage of your target audience may not be able to use adequately, resulting in lost traffic, lost business, and possibly even a public relations problem. So it's important to consider your use of color carefully.</p> + +<p>You should do at least basic research into {{interwiki("wikipedia", "color blindness")}}. There are several kinds; the most common is red-green color blindness, which causes people to be unable to differentiate between the colors red and green. There are others, too, ranging from inabilities to tell the difference between certain colors to total inability to see color at all.</p> + +<div class="note"> +<p>The most important rule: never use color as the only way to know something. If, for example, you indicate success or failure of an operation by changing the color of a shape from white to green for success and red for failure, users with red-green color-blindness won't be able to use your site properly. Instead, perhaps use both text and color together, so that everyone can understand what's happening.</p> +</div> + +<p>For more information about color blindness, see the following articles:</p> + +<ul> + <li><a href="https://medlineplus.gov/colorblindness.html">Medline Plus: Color Blindness</a> (United States National Institute of Health)</li> + <li><a href="https://www.aao.org/eye-health/diseases/what-is-color-blindness">American Academy of Ophthamology: What Is Color Blindness?</a></li> + <li><a href="https://www.usability.gov/get-involved/blog/2010/02/color-blindness.html">Color Blindness & Web Design</a> (Usability.gov: United States Department of Health and Human Services)</li> +</ul> + +<h3 id="Palette_design_example">Palette design example</h3> + +<p>Let's consider a quick example of selecting an appropriate color palette for a site. Imagine that you're building a web site for a new game that takes place on the planet Mars. So let's do a <a href="https://www.google.com/search?q=Mars&tbm=isch">Google search for photos of Mars</a>. Lots of good examples of Martian coloration there. We carefully avoid the mockups and the photos from movies. And we decide to use a photo taken by one of the Mars landers humanity has parked on the surface over the last few decades, since the game takes place on the planet's surface. We use a color picker tool to select a sample of the color we choose.</p> + +<p>Using an eyedropper tool, we identify a color we like and determine that the color in question is <code>#D79C7A</code>, which is an appropriate rusty orange-red color that's so stereotypical of the Martian surface.</p> + +<p>Having selected our base color, we need to build out our palette. We decide to use <a href="http://www.paletteon.com/">Paletteon</a> to come up with the other colors we need. Upon opening Paletton, we see:</p> + +<p><img alt="Right after loading Paletton." src="https://mdn.mozillademos.org/files/15451/paletton1.png" style="height: 361px; width: 600px;"></p> + +<p>Next, we enter our color's hex code (<code>D79C7A</code>) into the "Base RGB" box at the bottom-left corner of the tool:</p> + +<p><img alt="After entering base color" src="https://mdn.mozillademos.org/files/15453/paletton2.png" style="height: 361px; width: 600px;"></p> + +<p>We now see a monochromatic palette based on the color we picked from the Mars photo. If you need a lot of related colors for some reason, those are likely to be good ones. But what we really want is an accent color. Something that will pop along side the base color. To find that, we click the "add complementary" toggle underneath the menu that lets you select the palette type (currently "Monochromatic"). Paletton computes an appropriate accent color; clicking on the accent color down in the bottom-right corner tells us that this color is <code>#508D7C</code>.</p> + +<p><img alt="Now with complementary colors included." src="https://mdn.mozillademos.org/files/15455/paletton3.png" style="height: 361px; width: 600px;"></p> + +<p>If you're unhappy with the color that's proposed to you, you can change the color scheme, to see if you find something you like better. For example, if we don't like the proposed greenish-blue color, we can click the Triad color scheme icon, which presents us with the following:</p> + +<p><img alt="Triad color scheme selected" src="https://mdn.mozillademos.org/files/15457/paletton4.png" style="height: 361px; width: 600px;"></p> + +<p>That greyish blue in the top-right looks pretty good. Clicking on it, we find that it's <code>#556E8D</code>. That would be used as the accent color, to be used sparingly to make things stand out, such as in headlines or in the highlighting of tabs or other indicators on the site:</p> + +<p><img alt="Triad color scheme selected" src="https://mdn.mozillademos.org/files/15459/paletton-color-detail.png" style="height: 370px; width: 526px;"></p> + +<p>Now we have our base color and our accent. On top of that, we have a few complementary shades of each, just in case we need them for gradients and the like. The colors can then be exported in a number of formats so you can make use of them.</p> + +<p>Once you have these colors, you will probably still need to select appropriate neutral colors. Common design practice is to try to find the sweet spot where there's just enough contrast that the text is crisp and readable but not enough contrast to become harsh for the eyes. It's easy to go too far in one way or another so be sure to get feedback on your colors once you've selected them and have examples of them in use available. If the contrast is too low, your text will tend to be washed out by the background, leaving it unreadable, but if your contrast is too high, the user may find your site garish and unpleasant to look at.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a></li> + <li><a href="/en-US/docs/Web/Guide/Graphics">Graphics on the web</a></li> + <li><a href="/en-US/docs/Tools/DevToolsColors">MDN's color picker tool</a></li> +</ul> diff --git a/files/pt-br/web/html/canvas/a_basic_ray-caster/index.html b/files/pt-br/web/html/canvas/a_basic_ray-caster/index.html new file mode 100644 index 0000000000..ca188eb6f9 --- /dev/null +++ b/files/pt-br/web/html/canvas/a_basic_ray-caster/index.html @@ -0,0 +1,76 @@ +--- +title: A basic ray-caster +slug: Web/HTML/Canvas/A_basic_ray-caster +translation_of: Web/API/Canvas_API/A_basic_ray-caster +--- +<div>{{CanvasSidebar}}</div> + +<div class="summary"> +<p>Esse artigo disponibiliza um exemplo interessante do mundo real do uso do elemento {{HTMLElement("canvas")}} para fazer renderização via software de um ambiente em 3D utilizando <em>ray-casting</em>.</p> +</div> + +<p>{{EmbedGHLiveSample("canvas-raycaster/index.html", 900, 300)}}</p> + +<p><strong><a href="http://mdn.github.io/canvas-raycaster/">Abrir em uma nova janela</a></strong></p> + +<h2 id="Why.3F" name="Why.3F">Porquê?</h2> + +<p>Depois de perceber, para meu deleite, que o elemento <canvas> que eu estava <a href="http://www.whatwg.org/specs/web-apps/current-work/#dynamic">lendo sobre</a> ele não estava apenas próximo de ser suportado pelo Firefox, mas que <strong>já</strong> estava com suporte na versão atual do Safari, eu tinha que tentar que fazer um pequeno teste.</p> + +<p>A <a href="/pt-BR/docs/Web/API/Canvas_API">visão geral do canvas</a> e o <a href="/pt-BR/docs/Canvas_tutorial">tutorial</a> que eu encontrei no MDN são incríveis, mas ninguém havia escrito sobre animação, então eu pensei que poderia portar um exemplo de raycaster básico que eu havia trabalhado um tempo atrás, e ver e ver que tipo de performance nós podemos esperar te um pixel buffer controlado por JavaScript.</p> + +<p> </p> + +<h2 id="How.3F" name="How.3F">Como?</h2> + +<p>A ideia básica é usar o {{domxref("window.setInterval","setInterval()")}} com um delay arbitrário que corresponda a uma taxa de atualização desejada. Depois de cada intervalo uma função de atualização irá redesenhar o canvas mostrando a view atual. Eu sei que poderia ter iniciado com um exemplo mais simples, mas estou certo que o tutorial do canvas vai fazê-lo, e eu queria verificar se poderia fazer isso.</p> + +<p>Sendo assim, a cada atualização, o raycaster verifica se você pressionou qualquer tecla por último, para conservar os cálculos não fazendo casting caso você esteja ocioso. Se você tiver pressionado, então o canvas é limpo, o solo e o céu são desenhados, a posição da câmera e/ou a orientação são atualizados, e os raios são feitos. <span id="result_box" lang="pt"><span title="As the rays intersect walls, then they render a vertical sliver of canvas in the color of the wall they've hit, blended with a darker version of the color according to the distance to the wall.">Como os raios se cruzam paredes, então eles tornam uma tira de tela vertical na cor da parede que eles atingiram, misturado com uma versão mais escura da cor de acordo com a distância para a parede. </span><span title="The height of the sliver is also modulated by the distance from the camera to the wall, and is drawn centered over the horizon line. + +">A altura da fita também é modulada pela distância da câmera para a parede, e é desenhada centrada sobre a linha do horizonte.</span><br> + <br> + <span title="The code I ended up with is a regurgitated amalgam of the raycaster chapters from an old André LaMotheTricks of the Game Programming Gurus book (ISBN: 0672305070), and a java raycaster I found online, filtered through my compulsion to rename everything so it makes sense">O código que eu acabei com é um amálgama regurgitado dos capítulos de raycaster de um velho André LaMothe<em>Tricks</em> do <em>livro de Gurus de Programação de Jogos</em> <sub>(ISBN: 0672305070)</sub>, e um<a href="http://www.shinelife.co.uk/java-maze/"> jaspe raycaster</a> que encontrei online, filtrado através da minha compulsão de renomear tudo para que faça sentido </span><span title="to me, and all the tinkering that had to be done to make things work well. +">Para mim, e todos os ajustes que tinham que ser feitos para fazer as coisas funcionarem bem.</span></span></p> + +<p> </p> + +<h1 id="Resultados"><strong>Resultados</strong></h1> + +<p> </p> + +<p><br> + <span title="The canvas in Safari 2.0.1 performed surprisingly well.">A tela no Safari 2.0.1 apresentou surpreendentemente bem. </span><span title="With the blockiness factor cranked up to render slivers 8 pixels wide, I can run a 320 x 240 window at 24 fps on my Apple mini.">Com o fator de bloqueio criado para produzir slivers 8 pixels de largura, eu posso executar uma janela de 320 x 240 em 24 fps no meu Apple mini. </span><span title="Firefox 1.5 Beta 1 is even faster;">Firefox 1.5 Beta 1 é ainda mais rápido; </span><span title="I can run 320 x 240 at 24 fps with 4 pixel slivers.">Eu posso executar 320 x 240 em 24 fps com 4 pixel slivers. </span><span title="Not exactly a new member of the ID software family, but pretty decent considering it's a fully interpreted environment, and I didn't have to worry about memory allocation or video modes or coding inner routines in assembler or anything.">Não exatamente um novo membro da família de software de ID, mas bastante decente considerando que é um ambiente totalmente interpretado, e eu não tenho que se preocupar com a alocação de memória ou modos de vídeo ou rotinas internas de codificação em assembler ou qualquer coisa. </span><span title="The code does attempt to be very efficient, using array look-ups of pre-computed values, but I'm no optimization guru, so things could probably be written faster. + +">O código tenta ser muito eficiente, usando pesquisas de matrizes de valores pré-calculados, mas não sou um guru de otimização, então as coisas provavelmente poderiam ser escritas mais rapidamente.</span><br> + <br> + <span title="Also, it leaves a lot to be desired in terms of trying to be any sort of game engine—there are no wall textures, no sprites, no doors, not even any teleporters to get to another level.">Além disso, deixa muito a desejar em termos de tentar ser qualquer tipo de motor de jogo - não há texturas de parede, não sprites, sem portas, nem mesmo teleportadores para chegar a outro nível. </span><span title="But I'm pretty confident all those things could be added given enough time.">Mas estou bastante confiante de que todas essas coisas poderiam ser adicionadas com tempo suficiente. </span><span title="The canvas API supports pixel copying of images, so textures seem feasible.">A API de tela aceita a cópia de pixels de imagens, portanto, as texturas parecem possíveis. </span><span title="I'll leave that for another article, probably from another person.">Vou deixar isso para outro artigo, provavelmente de outra pessoa. </span><span title="=) +">=)</span></p> + +<p> </p> + +<h2 id="O_ray-caster"><strong>O ray-caster</strong></h2> + +<p> </p> + +<p><br> + <span title="The nice people here have manually copied my files up so you can take a look, and for your hacking enjoyment I've posted the individual file contents as code listings (see below). + +">As pessoas agradáveis aqui têm copiado manualmente meus arquivos para que você possa dar uma olhada, e para o seu prazer de hacking eu postei o conteúdo do arquivo individual como listagem de código (veja abaixo).</span><br> + <br> + <span title="So there you are, fire up Safari 1.3+ or Firefox 1.5+ or some other browser that supports the <canvas> element and enjoy!">Então você está lá, o fogo até Safari 1.3 ou Firefox 1.5 ou outro navegador que suporta o elemento <canvas> e divirta-se!</span><br> + <br> + <small><a href="https://github.com/mdn/canvas-raycaster/blob/master/input.js">input.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/Level.js">Level.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/Player.js">Player.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/index.html">RayCaster.html</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/RayCaster.js">RayCaster.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/trace.css">trace.css</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/trace.js">trace.js</a> </small></p> + +<p> </p> + +<p> </p> + +<p> </p> + +<p> </p> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a></li> +</ul> diff --git a/files/pt-br/web/html/canvas/index.html b/files/pt-br/web/html/canvas/index.html new file mode 100644 index 0000000000..821909e726 --- /dev/null +++ b/files/pt-br/web/html/canvas/index.html @@ -0,0 +1,134 @@ +--- +title: Canvas +slug: Web/HTML/Canvas +tags: + - API + - Canvas + - Referência(2) +translation_of: Web/API/Canvas_API +--- +<p>{{CanvasSidebar}}</p> + +<p class="summary">A <strong>Canvas API</strong> provê maneiras de desenhar gráficos via <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript">JavaScript</a> e via elemento <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML">HTML</a> {{HtmlElement("canvas")}}. Entre outras coisas, ele pode ser utilizado para animação, gráficos de jogos, visualização de dados, manipulação de fotos e processamento de vídeo em tempo real.</p> + +<p class="summary">A Canvas API foca amplamente em gráficos 2D. A <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/WebGL">WebGL API</a>, que também usa o elemento <code><canvas></code>, desenha gráficos 2D e 3D acelerados por hardware.</p> + +<h2 id="Exemplo_básico">Exemplo básico</h2> + +<p>Este exemplo simples desenha um retângulo verde para um canvas.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<p>O método {{domxref("Document.getElementById()")}} pega uma referência para o elemento HTML <code><canvas></code>. Em seguida, o método {{domxref("HTMLCanvasElement.getContext()")}} pega o contexto daquele elemento - a coisa sobre a qual o desenho será renderizado.</p> + +<p>O desenho atual é feito usando a interface {{domxref("CanvasRenderingContext2D")}}. A propriedade {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} faz o retângulo verde. O método {{domxref("CanvasRenderingContext2D.fillRect()", "fillRect()")}} coloca seu canto superior direito em (10, 10) e dá a ele o tamanho de 150 unidades de largura e 100 de altura.</p> + +<pre class="brush: js">const canvas = document.getElementById('canvas'); +const ctx = canvas.getContext('2d'); + +ctx.fillStyle = 'green'; +ctx.fillRect(10, 10, 150, 100); +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{ EmbedLiveSample('Exemplo_básico', 700, 180) }}</p> + +<h2 id="Referência">Referência</h2> + +<ul> + <li>{{domxref("HTMLCanvasElement")}}</li> + <li>{{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasGradient")}}</li> + <li>{{domxref("CanvasImageSource")}}</li> + <li>{{domxref("CanvasPattern")}}</li> + <li>{{domxref("ImageBitmap")}}</li> + <li>{{domxref("ImageData")}}</li> + <li>{{domxref("RenderingContext")}}</li> + <li>{{domxref("TextMetrics")}}</li> + <li>{{domxref("OffscreenCanvas")}} {{experimental_inline}}</li> + <li>{{domxref("Path2D")}} {{experimental_inline}}</li> + <li>{{domxref("ImageBitmapRenderingContext")}} {{experimental_inline}}</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> As interfaces relacionadas ao <code>WebGLRenderingContext</code> são referenciadas sob <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a>.</p> +</div> + +<p>{{domxref("CanvasCaptureMediaStream")}} é uma interface relacionada.</p> + +<h2 id="Guias_e_Tutoriais">Guias e Tutoriais</h2> + +<dl> + <dt></dt> + <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial">Tutorial Canvas</a></dt> + <dd>Um tutorial compreensivo abordando o uso básico da API de Canvas e suas funcionalidades avançadas.</dd> + <dt><a href="http://joshondesign.com/p/books/canvasdeepdive/title.html">Mergulhando no Canvas HTML5</a></dt> + <dd>Uma introdução prática e extensa à API Canvas e WebGL.</dd> + <dt><a href="http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html">Guia Canvas</a></dt> + <dd>Uma referência acessível para a API Canvas.</dd> + <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster">Demonstração: Um <em>ray-caster</em> básico</a> </dt> + <dd>Uma demonstração de animação <em>ray-tracing</em> usando canvas.</dd> + <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">Manipulando vídeos usando canvas</a></dt> + <dd>Combinando {{HTMLElement("video")}} e {{HTMLElement("canvas")}} para manipular dados de vídeo em tempo real.</dd> +</dl> + +<h2 id="Bibliotecas">Bibliotecas</h2> + +<p>A API Canvas é extremamente poderosa, mas nem sempre é simples de usar. As bibliotecas listadas abaixo podem fazer a criação de projetos baseados em canvas mais rápida e fácil.</p> + +<ul> + <li><a href="http://www.createjs.com/easeljs">EaselJS</a> é uma biblioteca de código aberto que facilita criações de jogos, arte generativa e outras experiências altamente gráficas.</li> + <li><a href="http://fabricjs.com/">Fabric.js</a> é uma biblioteca código aberto em canvas com suporte à SVG.</li> + <li><a href="https://www.patrick-wied.at/static/heatmapjs/">heatmap.js</a> é uma biblioteca de código aberto para criar mapas de calor (heatmaps) baseados em canvas.</li> + <li><a href="http://thejit.org/">JavaScript InfoVis Toolkit</a> cria visualizações de dados interativas.</li> + <li><a href="https://konvajs.github.io/">Konva.js</a> é uma biblioteca de canvas 2D para aplicações <em>desktop</em> e móveis.</li> + <li><a href="https://p5js.org/">p5.js </a>tem um conjunto completo de funcionalidades de desenho canvas para artistas, <em>designers</em>, educadores e iniciantes.</li> + <li><a href="http://paperjs.org/">Paper.js</a> é um framework de código-aberto para scripting de vetores gŕaficos que funciona sobre o Canvas HTML5.</li> + <li><a href="https://phaser.io/">Phaser</a> é um framework de código-aberto rápido, grátis e divertido para jogos de navegador desenvolvidos com Canvas e WebGL.</li> + <li><a href="http://processingjs.org/">Processing.js</a> é um conversor da linguagem de visualização Processing.</li> + <li><a href="https://ptsjs.org/">Pts.js</a> é uma biblioteca para codificação criativa e visualização em canvas e SVG.</li> + <li><a href="https://github.com/jeremyckahn/rekapi">Rekapi</a> é uma API de animação <em>key-framing</em> para Canvas.</li> + <li><a href="http://scrawl.rikweb.org.uk/">Scrawl-canvas</a> é uma biblioteca JavaScript de código aberto para criação e manipulação de elementos canvas 2D.</li> + <li>O framework <a href="http://zimjs.com/">ZIM</a> provê conveniências, componentes e controles para programar criatividade no canvas - inclui acessibilidade e centenas de tutoriais cheios de cores.</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> Veja a <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL API</a> para bibliotecas 2D e 3D que usam WebGL.</p> +</div> + +<h2 id="Especificações">Especificações</h2> + +<div class="section"> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificações</th> + <th scope="col">Estado</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#2dcontext', 'the 2D rendering context')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> + +<p>Aplicações Mozilla ganharam suporte para <code><canvas></code> a partir do Gecko 1.8 (<a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/1.5">Firefox 1.5</a>). O elemento foi originalmente introduzido pela Apple para o Dashboard OS X e Safari. O Internet Explorer suporta <code><canvas></code> quando inclui-se um script do projeto Explorer Canvas, da google. Google Chrome e Opera 9 também suportam <code><canvas></code>.</p> + +<h2 id="Ver_também">Ver também</h2> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/WebGL">WebGL</a></li> +</ul> diff --git a/files/pt-br/web/html/controlando_verificacao_ortografica_em_formularios_html/index.html b/files/pt-br/web/html/controlando_verificacao_ortografica_em_formularios_html/index.html new file mode 100644 index 0000000000..131257026a --- /dev/null +++ b/files/pt-br/web/html/controlando_verificacao_ortografica_em_formularios_html/index.html @@ -0,0 +1,68 @@ +--- +title: Controlando a verificação ortográfica em formulários HTML +slug: Web/HTML/Controlando_verificacao_ortografica_em_formularios_HTML +tags: + - Gerenciamento de configuração + - HTML + - Intermediário +translation_of: Web/HTML/Global_attributes/spellcheck +--- +<p><span class="seoSummary">{{ gecko_minversion_header("1.8.1") }} Firefox 2 introduz suporte à verificação ortográfica para áreas de texto e campos de texto em formulários web.</span> O usuário pode especificar usando a interface about:config se a verificação ortográfica é ou não habilitada e se checará áreas de texto e campos de texto ou somente áreas de texto.</p> + +<p>Por padrão, áreas de texto e documentos <code><a href="/pt-BR/docs/Web/API/Document/designMode">designMode</a></code> tem ortografia verificada e caixas de texto de uma única linha não tem. Isto é assim porque os usuários do Firefox podem se distrair ou se incomodar se o Firefox marcar coisas como IDs de usuários ou endereços de e-mail como erros de ortografia.</p> + +<p>Porém, podem haver situações nas quais este comportamento não é necessariamente apropriado. Por exemplo, se uma área de texto tem o objetivo de ser usada para editar HTML ou servir de entrada para outro tipo de texto que não seja semântico, a verificação ortográfica seria um entrave em vez de uma ajuda. Da mesma forma, podem haver casos nos quais um site faça uma recomendação de que o Firefox habilite a verificação ortográfica para um campo de texto específico, como campos de busca ou assunto/título de e-mail, mesmo estes sendo geralmente campos de texto de uma única linha.</p> + +<p>Se um site deseja recomendar o uso ou não de verificação ortográfica para um elemento<code> <input></code> específico, ele pode usar o atributo <code>spellcheck</code>, espefcificando o valor <code>true</code> para recomendar o uso da verificação ortográfica ou <code>false</code> para recomendar o não uso.</p> + +<p>Tenha em mente que a recomendação do site pode ser ignorada pelo usuário se o mesmo tiver desativado a verificação ortográfica setando a configuração <code>layout.spellcheckDefault</code> para 0. Se a configuração <code>layout.spellcheckDefault</code> tiver qualquer outro valor, as recomendações serão consideradas.</p> + +<p>Você pode codificar um campo de texto linha-única (elemento HTML <code><input></code>) habilitando a verificação ortográfica da seguinte forma:</p> + +<pre class="eval"><span class="nowiki"><input type="text" size="50" spellcheck="true"></span> +</pre> + +<p>Da mesma forma, você pode desabilitar a verificação ortográfica em uma área de texto (elemento <code><textarea></code>) da seguinte forma:</p> + +<pre class="eval"><span class="nowiki"><textarea spellcheck="false"></textarea></span> +</pre> + +<p>Você pode controlar um documento em seu <code>designMode</code> (tipicamente usado para implementar edição de texto rica) setando o atributo <code>spellcheck</code> no elemento <code><body></code> de um documento.</p> + +<p>Você também pode aplicar o atributo <code>spellcheck</code> em outros elementos, tais como os elementos <code><span></code> e <code><div></code>, e nesse caso todos os elementos <code><input></code> dentro dessas tags irão herdar esta configuração; elementos <code><input></code> que não tem um atributo <code>spellcheck</code> setado, irão herdar a configuração de verificação ortográfica de seu elemento pai. Se não houver nenhuma configuração setada na cadeia antecessora de elementos, a configuração padrão será usada.</p> + +<p>Por exemplo:</p> + +<pre class="brush: html"><div spellcheck="true"> + <label>Escreva algo: </label><input type="text" size="50"> + <br> + <label>Escreva outra coisa: </label><input type="text" size="50"> +</div> +<br> +<label>Mais alguma coisa: </label><input type="text" size="50"> +</pre> + +<p>Neste exemplo HTML acima, os dois primeiros campos de texto terão a verificação ortográfica e o terceiro não terá.</p> + +<p id="lang">{{ h1_gecko_minversion("Controlando o idioma da verificação ortográfica", "9.0") }}</p> + +<p>Iniciando no Gecko 9.0 {{ geckoRelease("9.0") }}, a verificação ortográfica usa o atributo {{ htmlattrxref("lang", "input") }} do elemento {{ HTMLElement("input") }} para determinar o idioma padrão da verificação ortográfica. Se o {{ HTMLElement("input") }} não tiver o atributo <code>lang</code> setado, esse atributo é procurado em cada elemento pai superior até chegar ao elemento raiz do documento.</p> + +<p>Fazendo assim, se o usuário tem os dicionários de Português e Inglês instalados, e um elemento editável tiver o atributo <code>lang="en"</code>, o dicionário inglês será automaticamente usado para este elemento.</p> + +<p>Por exemplo:</p> + +<pre class="brush: html"><html lang="pt-BR"> +<body> + <textarea></textarea> + <textarea lang="en"></textarea> + <div lang="ru"> + <textarea></textarea> + </div> +</body> +</html> +</pre> + +<p>No exemplo HTML acima, o primeiro {{ HTMLElement("textarea") }} terá ortografia checada em Português, o segundo em Inglês e o terceiro em Russo.</p> + +<p>Se um elemento especifica o idioma e o usuário não tem dicionário instalado para este idioma, a verificação ortográfica fica desabilitada por padrão, embora o usuário possa escolher por habilitá-la manualmente.</p> diff --git a/files/pt-br/web/html/cors_imagens_habilitadas/index.html b/files/pt-br/web/html/cors_imagens_habilitadas/index.html new file mode 100644 index 0000000000..5e41b735fe --- /dev/null +++ b/files/pt-br/web/html/cors_imagens_habilitadas/index.html @@ -0,0 +1,113 @@ +--- +title: CORS_habilitar_imagens +slug: Web/HTML/CORS_imagens_habilitadas +tags: + - CORS + - Canvas problems + - Crossorigin + - Segurança do Canvas +translation_of: Web/HTML/CORS_enabled_image +--- +<p><span class="seoSummary">The HTML specification introduces a {{ htmlattrxref("crossorigin", "img") }} attribute for images that, in combination with an appropriate {{Glossary("CORS")}} header, allows images defined by the {{ HTMLElement("img") }} element that are loaded from foreign origins to be used in canvas as if they were being loaded from the current origin.</span></p> + +<p>See <a href="/en/HTML/CORS_settings_attributes" title="CORS settings attributes">CORS settings attributes</a> for details on how the <code>crossorigin</code> attribute is used.</p> + +<h2 id="O_que_é_um_contaminado_canvas">O que é um "contaminado" canvas?</h2> + +<p>Embora você possa usar imagens sem aprovação do CORS em seu canvas, criando contaminação ao canvas. Uma vez o canvas tenhya sido "contaminado" você não pode mais "puxar" informações do canvas.Por exemplo, você pode não mais usar os métodos canvas toBlob(), toDataURL(), ou getImageData(), fazendo isto você irá lançar um erro de sergurança.</p> + +<p>Esta proteção de usuário tem tido dados expostos por uso de informações de imagens de site web remoto sem permissão.</p> + +<h2 id="Exemplo_Armazenando_uma_imagem_de_uma_origem_estrangeira">Exemplo: Armazenando uma imagem de uma origem estrangeira</h2> + +<p> </p> + +<p>Você precisa ter um servidor hospedando as imagenscom o apropriado Access-Control-Allow-Origin cabeçalho. Adicionando atributos crossOrigin faz uma requisição ao cabeçalho. Você pode usar este exemplo das <a href="https://github.com/h5bp/server-configs-apache/blob/fc379c45f52a09dd41279dbf4e60ae281110a5b0/src/.htaccess#L36-L53">Configurações Apache Server HTML5 Boilerplate</a> para aproximadamente responder com este cabeçalho de resposta.</p> + +<pre class="brush:xml"><IfModule mod_setenvif.c> + <IfModule mod_headers.c> + <span class="nt"><FilesMatch</span> <span class="s">"\.(cur|gif|ico|jpe?g|png|svgz?|webp)$"</span><span class="nt">></span> + SetEnvIf Origin ":" IS_CORS + Header set Access-Control-Allow-Origin "*" env=IS_CORS + </FilesMatch> + </IfModule> +</IfModule></pre> + +<p>Dado que está tudo classificado, você permiti salvar àquelas imagens no <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage">Armazenamento DOM</a></p> + +<pre class="brush: js">var img = new Image, + canvas = document.createElement("canvas"), + ctx = canvas.getContext("2d"), + src = "http://example.com/image"; // insert image url here + +img.crossOrigin = "Anonymous"; + +img.onload = function() { + canvas.width = img.width; + canvas.height = img.height; + ctx.drawImage( img, 0, 0 ); + localStorage.setItem( "savedImageData", canvas.toDataURL("image/png") ); +} +img.src = src; +// make sure the load event fires for cached images too +if ( img.complete || img.complete === undefined ) { + img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="; + img.src = src; +}</pre> + +<h2 id="Compatiibilidade_do_Browser">Compatiibilidade do Browser</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>13</td> + <td>8</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html">Usando imagens de Cross-domínio em WebGL e Chrome 13</a></li> + <li><a href="http://whatwg.org/html#attr-img-crossorigin">Especificações HTML - o atributo crossorigin</a></li> +</ul> diff --git a/files/pt-br/web/html/dicas_para_criar_páginas_html_de_carregamento_rápido/index.html b/files/pt-br/web/html/dicas_para_criar_páginas_html_de_carregamento_rápido/index.html new file mode 100644 index 0000000000..e693b6fed8 --- /dev/null +++ b/files/pt-br/web/html/dicas_para_criar_páginas_html_de_carregamento_rápido/index.html @@ -0,0 +1,135 @@ +--- +title: Dicas para criar páginas HTML de carregamento rápido +slug: Web/HTML/Dicas_para_criar_páginas_HTML_de_carregamento_rápido +tags: + - Performance +translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages +--- +<p>Estas dicas são baseadas em conhecimento comum e experimentação.</p> +<p>Uma página web otimizada não apenas provê um site mais responsivo aos visitantes, como também reduz a carga sobre os servidores e a conexão com a Internet. Isso pode ser crucial para sites de grande volume ou sites que tenham um pico de tráfego devido a circunstâncias extraordinárias, como plantões de notícias urgentes.</p> +<p>Otimizar a performance do carregamento de páginas não serve apenas para o conteúdo que será visto por visitantes com linha discada ou aparelhos móveis. É igualmente importante para banda larga e pode levar a melhorias dramáticas até mesmo para seus visitantes com as mais rápidas conexões.</p> +<h2 id="Dicas" name="Dicas">Dicas</h2> +<h3 id="Reduza_o_peso_da_página" name="Reduza_o_peso_da_página">Reduza o peso da página</h3> +<p>O peso da página é, de longe, o fator mais importante na performance de seu carregamento.</p> +<p>Reduzir o peso da página através da eliminação de espaço em branco desnecessário e comentários, comumente conhecido como minimização, e mover scripts e CSS <em>inline</em> para arquivos externos pode melhorar a performance de download sem muita necessidade de outras mudanças na estrutura da página.</p> +<p>Ferramentas como <a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a> podem automaticamente cortar espaços em branco desnecessários e linhas vazias de um código HTML validado. Outras ferramentas podem "comprimir" JavaScript ao reformatar o código-fonte ou o obfuscando e substituindo identificadores longos por versões mais curtas.</p> +<h3 id="Minimize_o_número_de_arquivos" name="Minimize_o_número_de_arquivos">Minimize o número de arquivos</h3> +<p>Reduzir o número de arquivos referenciados por uma página diminui o número de conexões <a href="/en-US/docs/HTTP" title="en-US/docs/HTTP">HTTP</a> requeridas para realizar o download da página.</p> +<p>Dependendo das configurações de cache do <em>browser</em>, este pode enviar uma requisição <code>If-Modified-Since</code> ao servidor para cada arquivo CSS, JavaScript ou de imagem, perguntando se o arquivo foi modificado desde a última vez que foi baixado.</p> +<p>Ao reduzir o número de arquivos referenciados de dentro de uma página, reduz-se o tempo necessário para essas requisições serem enviadas e suas respostas recebidas.</p> +<p>Se você usa muitas imagens de fundo em seu CSS, pode reduzir o número de verificações HTTP combinando imagens em um único arquivo, o que é conhecido como um <em>sprite</em> de imagens. Então você apenas utiliza a mesma imagem cada vez que precisá-la, ajustando as coordenadas x/y apropriadamente. Essa técnica funciona melhor com elementos que terão dimensões limitadas, não sendo aplicável para todas as imagens. Contudo, o número menor de requisições HTTP e <em>caching</em> de uma única imagem devem ajudar a reduzir o tempo de carregamento.</p> +<p>Muito tempo gasto pesquisando quando foi a modificação mais recente de arquivos referenciados pode atrasar a exibição inicial de uma página, já que o <em>browser</em> deve verificar o momento de modificação para cada arquivo CSS ou JavaScript antes de carregar a página.</p> +<h3 id="Reduza_pesquisa_de_domínio" name="Reduza_pesquisa_de_domínio">Reduza pesquisa de domínio</h3> +<p>Já que cada domínio distinto demanda tempo durante uma pesquisa de DNS, o tempo de carregamento da página aumentará conforme o número de domínios distintos que aparecem em links de CSS e fontes de JavaScript e imagens.</p> +<p>Pode nem sempre ser prático, mas você deve sempre tomar cuidado para utilizar apenas o mínimo necessário de domínios diferentes nas suas páginas.</p> +<h3 id="Conteúdo_em_cache_reutilizado" name="Conteúdo_em_cache_reutilizado">Conteúdo em cache reutilizado</h3> +<p>Assegure que qualquer conteúdo que possa ser armazenado em cache o seja, e com tempos de expiração adequados.</p> +<p>Em especial, atente ao cabeçalho <code>Last-Modified</code>. Ele permite mecanismos de cache eficientes; através desse cabeçalho, informações sobre o arquivo que o agente de usuário quer carregar, como quando foi modificado da última vez, são transferidas. A maioria dos servidores web automaticamente anexam o cabeçalho <code>Last-Modified</code> a páginas estáticas (p. ex.: <code>.html</code>, <code>.css</code>), baseado na data de última modificação armazenada no sistema de arquivos. Com páginas dinâmicas (p. ex:<code>.php</code>, <code>.aspx</code>), isso não pode ser feito, e o cabeçalho não é enviado.</p> +<p>Então, para essas páginas que são geradas dinamicamente, alguma pesquisa adicional é benéfica. Isso vai salvar muito tempo em requisições nas páginas que normalmente não permitem armazenamento em cache.</p> +<p>Mais informações:</p> +<ol> + <li><a class="external" href="http://fishbowl.pastiche.org/2002/10/21/http_conditional_get_for_rss_hackers">Get HTTP Condicional para Hackers RSS</a></li> + <li><a class="external" href="http://annevankesteren.nl/archives/2005/05/http-304">HTTP 304: Not Modified</a></li> + <li><a class="external" href="http://www.cmlenz.net/archives/2005/05/on-http-last-modified-and-etag">Sobre o Last-Modified HTTP e ETag</a></li> +</ol> +<h3 id="Estabeleça_a_ordem_dos_componentes_da_página_de_forma_otimizada" name="Estabeleça_a_ordem_dos_componentes_da_página_de_forma_otimizada">Estabeleça a ordem dos componentes da página de forma otimizada</h3> +<p>Baixe o conteúdo da página primeiro, junto com qualquer CSS ou JavaScript que pode ser requerido para sua exibição inicial, de modo que o usuário receba a resposta mais rápida possível durante o carregamento. Esse conteúdo é tipicamente texto, e portanto pode ser beneficiado por técnicas de compressão de texto durante o tráfego, permitindo uma resposta ainda mais rápida ao usuário.</p> +<p>Quaisquer elementos dinâmicos que requeiram que a página complete seu carregamento antes de serem usados devem ser inicialmente desabilitados, e apenas habilitados após o carregamento completo. Isso fará com que o JavaScript seja carregado após o conteúdo da página, o que melhorará a aparência geral do carregamento.</p> +<h3 id="Reduza_o_número_de_scripts" name="Reduza_o_número_de_scripts">Reduza o número de scripts <em>inline</em></h3> +<p>Scripts <em>inline</em> podem ser custosos para o carregamento, uma vez que o parser deve assumir que o script pode modificar a estrutura da página enquanto o processo de <em>parsing</em> está em andamento. Reduzir o número de scripts <em>inline</em> no geral e reduzir o uso de <code>document.write()</code> para a saída de conteúdo pode melhorar o carregamento da página. Use métodos <a href="/en-US/docs/AJAX" title="en-US/docs/AJAX">AJAX</a> modernos para manipular o conteúdo da página, ao invés de abordagens antigas baseadas em <code>document.write()</code>.</p> +<h3 id="Use_CSS_moderno_e_marcação_validada" name="Use_CSS_moderno_e_marcação_validada">Use CSS moderno e marcação validada</h3> +<p>O uso de CSS moderno reduz a quantidade de marcação, pode reduzir a necessidade de imagens, em termos de layout, e frequentemente substitui imagens de textos estilizados -- que "custam" muito mais do que o texto estilizado com CSS.</p> +<p>Usar marcações validadas tem outras vantagens. Primeiro, <em>browsers</em> não precisarão realizar correção de erros durante o <em>parsing</em> de HTML (isso é à parte da preocupação filosófica de permitir variação de formato na entrada do usuário, e então programaticamente "corrigir" ou normalizá-la; ou se, ao invés disso, forçar um formato de entrada rígido, sem tolerância a desvios).</p> +<p>Além do mais, marcação válida permite o livre uso de outras ferramentas que podem pré-processar páginas web. Por exemplo, <a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a> pode remover espaços em branco e tags finais opcionais; contudo, a ferramenta não será executada em uma página com erros graves de marcação.</p> +<h3 id="Divida_seu_conteúdo" name="Divida_seu_conteúdo">Divida seu conteúdo</h3> +<p>Layout de tabelas é um método legado que não deve mais ser empregado. Layouts utilizando blocos {{ HTMLElement("div") }} e, no futuro próximo, <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="en-US/docs/CSS3_Columns">layout multi-colunas CSS3</a> ou <a href="/pt-BR/docs/Usando_caixas_flexiveis_css" title="pt-BR/docs/Usando_caixas_flexiveis_css">layout de caixas flexíveis CSS3</a>, devem ser utilizadas ao invés disso.</p> +<p>Tabelas ainda são consideradas marcações válidas, mas devem ser usadas para exibir dados tabulares. Para ajudar o browser a renderizar sua página mais rapidamente, você deve evitar aninhar suas tabelas.</p> +<p>Ao invés de realizar aninhamentos profundos como:</p> +<pre><TABLE> + <TABLE> + <TABLE> + ... + </TABLE> + </TABLE> +</TABLE></pre> +<p>use tabelas não-aninhadas ou divs, como em</p> +<pre><TABLE>...</TABLE> +<TABLE>...</TABLE> +<TABLE>...</TABLE> +</pre> +<p>Veja também: <a class="external" href="http://www.w3.org/TR/css3-multicol/" title="http://www.w3.org/TR/css3-multicol/">Especificações do layout multi-colunas CSS3</a> e <a class="external" href="http://www.w3.org/TR/css3-flexbox/" title="http://www.w3.org/TR/css3-flexbox/">layout de caixas flexíveis CSS3</a></p> +<h3 id="Especifique_tamanhos_para_imagens_e_tabelas" name="Especifique_tamanhos_para_imagens_e_tabelas">Especifique tamanhos para imagens e tabelas</h3> +<p>Se o <em>browser</em> puder imediatamente determinar a altura e/ou largura de suas imagens e tabelas, ele será capaz de exibir uma página sem ter que recalcular o fluxo do conteúdo. Isso não apenas acelera a exibição da página como previne mudanças irritantes no layout ao finalizar o carregamento. Por essa razão, <code>height</code> e <code>width</code> devem ser especificadas para imagens, sempre que possível.</p> +<p>Tabelas devem usar a combinação CSS selector:property:</p> +<pre> table-layout: fixed; +</pre> +<p>e devem especificar as larguras das colunas usando as tags HTML <code>COL</code> e <code>COLGROUP</code>.</p> +<h3 id="Escolha_bem_seus_requisitos_de_agente_de_usuário" name="Escolha_bem_seus_requisitos_de_agente_de_usuário">Escolha bem seus requisitos de agente de usuário</h3> +<p>Para atingir as maiores melhorias no design de páginas, tenha certeza de que requisitos de agente de usuário razoáveis estejam especificados para os projetos. Não espere que seu conteúdo apareça de forma perfeita, pixel por pixel, em todos os <em>browsers</em>, especialmente nos obsoletos.</p> +<p>Idealmente, seus requisitos básicos devem ser baseados em considerações sobre os <em>browsers</em> modernos que suportam os padrões relevantes. Isso pode incluir: Firefox 3.6+ em qualquer plataforma, Internet Explorer 8.0+ no Windows, Opera 10+ no Windows, e Safari 4 no Mac OS X.</p> +<p>Note, contudo, que muitas das dicas listadas neste artigo são técnicas de senso comum que se aplicam a qualquer agente-usuário, e podem ser aplicadas a qualquer página web, independentemente de requisitos de compatibilidade em <em>browsers</em>.</p> +<h2 id="Exemplo_de_estrutura_de_página" name="Exemplo_de_estrutura_de_página">Exemplo de estrutura de página</h2> +<p>· <code>HTML</code></p> +<dl> + <dd> + · <code>HEAD</code></dd> +</dl> +<dl> + <dd> + <dl> + <dd> + · <code>LINK </code>...<br> + Arquivos CSS requeridos para a aparência da página. Minimize o número de arquivos para performance enquanto mantém CSS não-relacionado em arquivos separados para manutenção.</dd> + </dl> + </dd> +</dl> +<dl> + <dd> + <dl> + <dd> + · <code>SCRIPT </code>...<br> + Arquivos JavaScript para funções <strong>requeridas</strong> durante o carregamento da página, sem qualquer DHTML que só pode ser executado após o carregamento completo.</dd> + <dd> + Minimize o número de arquivos para performance enquanto mantém JavaScript não-relacionado em arquivos separados para manutenção.</dd> + </dl> + </dd> +</dl> +<dl> + <dd> + · <code>BODY</code></dd> + <dd> + · Páginas de conteúdo visíveis ao usuário em pequenas divisões (tabelas / divs) que podem ser exibidas sem esperar a página inteira ser baixada.</dd> +</dl> +<dl> + <dd> + <dl> + <dd> + · <code>SCRIPT </code>...<br> + Quaisquer scripts que forem usados para realizar DHTML. Um script DHTML geralmente só pode ser executado após o carregamento completo da página e a inicialização de todos os objetos necessários. Não há necessidade de carregar esses scripts antes do conteúdo. Isso apenas desacelera a aparência inicial do carregamento da página.</dd> + <dd> + Minimize o número de arquivos para performance enquanto mantém CSS não-relacionado em arquivos separados para manutenção.</dd> + <dd> + Se uma ou mais imagens forem usadas para efeitos de <em>rollover</em>, você deve pré-carregá-las aqui após o conteúdo da página ter sido baixado.</dd> + </dl> + </dd> +</dl> +<h2 id="Use_async_and_defer_se_possível" name="Use_async_and_defer_se_possível">Use async and defer, se possível</h2> +<p>Faça com que scripts JavaScript sejam compatíveis tanto com <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">async</a> como <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">defer</a> e use <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">async</a> sempre que possível, especialmente se você tiver múltiplas tags de script.</p> +<p>Com isso, a página pode parar de renderizar enquanto o JavaScript ainda estiver sendo carregado. Do contrário, o <em>browser</em> não renderizará nada que estiver após as tags de script sem esses atributos.</p> +<p>Nota: Apesar desses atributos ajudarem muito na primeira vez que a página for carregada, você não pode confiar que vai funcionar em todos os <em>browsers</em>. Se você seguir todas as orientações para produzir bom código JavaScript, não há necessidade de alterá-lo.</p> +<h2 id="Links_Relacionados" name="Links_Relacionados">Links Relacionados</h2> +<ul> + <li>Livro: <a class="external" href="http://www.websiteoptimization.com/">"Speed Up Your Site" por Andy King</a></li> + <li>O excelente e muito completo <a class="external" href="http://developer.yahoo.com/performance/rules.html" title="http://developer.yahoo.com/performance/rules.html">Melhores Práticas para Acelerar Seu Web Site</a> (Yahoo!)</li> + <li>Ferramentas para analisar e otimizar a performance: <a href="https://developers.google.com/speed/pagespeed/" title="https://developers.google.com/speed/pagespeed/">Google PageSpeed</a></li> +</ul> +<div class="originaldocinfo"> + <h2 id="Informações_do_Documento_Original" name="Informações_do_Documento_Original">Informações do Documento Original</h2> + <ul> + <li>Autor(es): Bob Clary, Evangelista de Tecnologia, Netscape Communications</li> + <li>Última Data de Atualização: Publicado em 04 Abr 2003</li> + <li>Informações de Copyright: Copyright © 2001-2003 Netscape. Todos os direitos reservados.</li> + <li>Nota: Este artigo reeditado foi originalmente parte do site DevEdge.</li> + </ul> +</div> +<p> </p> diff --git a/files/pt-br/web/html/element/a/index.html b/files/pt-br/web/html/element/a/index.html new file mode 100644 index 0000000000..e1445c8ab8 --- /dev/null +++ b/files/pt-br/web/html/element/a/index.html @@ -0,0 +1,486 @@ +--- +title: <a> +slug: Web/HTML/Element/a +tags: + - Conteúdo + - Elemento + - HTML + - Internet + - Rede + - Referencia + - Semántica HTML a nivel de texto + - Web +translation_of: Web/HTML/Element/a +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">O <strong>elemento</strong> <strong><code><a></code> </strong>em <strong>HTML </strong>(ou elemento âncora), com o atributo <a href="#href"><code>href</code></a> cria-se um hiperligação nas páginas web, arquivos, endereços de emails, ligações na mesma página ou endereços na URL.</span> O conteúdo dentro de cada <code><a></code> <strong>precisará</strong> indicar o destino do link.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/a.html")}}</div> + +<p class="hidden">O exemplo de código está armazenado no repositório GitHub. Se deseja contribuir, clone o projeto no <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e nos envie uma pull request (subir as atualizações).</p> + +<h2 id="Atributos">Atributos</h2> + +<p>Os atributos do elemento incluem os <a href="/en-US/docs/Web/HTML/Global_attributes">atributos globais</a>.</p> + +<dl> + <dt id="download">{{HTMLAttrDef("download")}}{{HTMLVersionInline(5)}}</dt> + <dd>Leva o usuário a salvar a URL em vez de navegar até ela. Pode ser usado com ou sem um valor:</dd> + <dd> + <ul> + <li>Sem um valor, o <em>browser </em>irá sugerir um nome de arquivo/extensão, gerado a partir de diversas origens: + <ul> + <li>O cabeçalho HTTP {{HTTPHeader("Content-Disposition")}}</li> + <li>O segmento final no <a href="/en-US/docs/Web/API/URL/pathname">path</a> (caminho) da URL</li> + <li>The {{Glossary("MIME_type", "media type")}} (from the ({{HTTPHeader("Content-Type")}} header, the start of a <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs"><code>data:</code> URL</a>, or {{domxref("Blob.type")}} for a <a href="/en-US/docs/Web/API/URL/createObjectURL"><code>blob:</code> URL</a>)</li> + </ul> + </li> + <li>A definição de um valor o sugere como o nome do arquivo. Caracteres <code>/</code> e <code>\</code> são convertidos para <em>underscores </em>(<code>_</code>).Arquivos de sistema talvez proibam alguns caracteres em nomes de arquivos, então o navegador irá ajustar o nome sugerido caso necessário. </li> + </ul> + + <div class="note"><strong>Notes:</strong> + + <ul> + <li><code>download</code> somente funciona para <a href="/en-US/docs/Web/Security/Same-origin_policy">URLs de mesma origem </a>, ou os esquemas <code>blob:</code> e <code>data:</code></li> + <li>Se <code>Content-Disposition</code> tiver um diferente <code>filename</code> (nome do arquivo) que <code>download</code>, o cabeçalho tem prioridade. (Se <code>Content-Disposition: inline</code>, Firefox prioriza o cabeçalho enquanto o Chrome escolhe <code>download</code>.)</li> + </ul> + </div> + </dd> + <dt id="href">{{HTMLAttrDef("href")}}</dt> + <dd> + <p>A URL para a qual o hiperlink aponta. Links não se restrigem a URLs baseadas no protocolo HTTP — eles podem utilizar qualquer tipo de URL suportado pelos browsers:</p> + + <ul> + <li>Sections of a page with fragment URLs(Seções de página com fragmentos URL)</li> + <li>Pieces of media files with media fragments (Pedaços de arquivos de mídia com fragmentos da própria mídia)</li> + <li>Números de telefone com <code>tel:</code> URLs</li> + <li>Email addresses with(Endereço de email com) <code>mailto:</code> URLs</li> + <li>Alguns navegadores talvez não aguentem certos arranjos em URL, para isso os websites fazem uso do <code><a href="/en-US/docs/Web/API/Navigator/registerProtocolHandler">registerProtocolHandler()</a></code></li> + </ul> + </dd> + <dt id="hreflang">{{HTMLAttrDef("hreflang")}}</dt> + <dd>Hints at the human language of the linked URL. No built-in functionality. Allowed values are the same as <a href="/en-US/docs/Web/HTML/Global_attributes/lang">the global <code>lang</code> attribute</a>.</dd> + <dt id="ping">{{HTMLAttrDef("ping")}}</dt> + <dd>Uma lista de URLs separadas por espaços. Quando o link é seguido, o brrowser enviará requisições {{HTTPMethod("POST")}} com o corpo <code>PING</code> para as URLs. Typically for tracking.</dd> + <dt id="referrerpolicy">{{HTMLAttrDef("referrerpolicy")}}{{Experimental_Inline}}</dt> + <dd>Quanto do <a href="/en-US/docs/Web/HTTP/Headers/Referer">referrer</a> para ser enviado quando acessar o link. Acesse <a href="/en-US/docs/Web/HTTP/Headers/Referrer-Policy"><code>Referrer-Policy</code></a> para possíveis valores e seus efeitos.</dd> + <dt id="rel">{{HTMLAttrDef("rel")}}</dt> + <dd>The relationship of the linked URL as space-separated <a href="/en-US/docs/Web/HTML/Link_types">link types</a>.</dd> + <dt id="target">{{HTMLAttrDef("target")}}</dt> + <dd>Where to display the linked URL, as the name for a <em>browsing context</em> (a tab, window, or <code><iframe></code>). The following keywords have special meanings for where to load the URL: + <ul> + <li><code>_self</code>: No atual contexto de pesquisa. (Default)</li> + <li><code>_blank</code>: Normalmente uma nova aba, porém usuários podem configurar seus navegadores para abrir em uma nova janela.</li> + <li><code>_parent</code>: the parent browsing context of the current one. If no parent, behaves as <code>_self</code>.</li> + <li><code>_top</code>: the topmost browsing context (the "highest" context that’s an ancestor of the current one). If no ancestors, behaves as <code>_self</code>.</li> + </ul> + + <div class="note"> + <p><strong>Note:</strong> Quando usando <code>target</code>, adicione <code>rel="noreferrer noopener"</code> para evitar "exploit" para <code>window.opener</code> API;</p> + </div> + + <div class="blockIndicator warning"> + <p><strong>Note:</strong> Linking to another page with <code>target="_blank"</code> will run the new page in the same process as your page. If the new page executes JavaScript, your page's performance may suffer. This can also be avoided by using <code>rel="noreferrer noopener"</code>.</p> + </div> + </dd> + <dt id="type">{{HTMLAttrDef("type")}}</dt> + <dd>Hints at the linked URL’s format with a {{Glossary("MIME type")}}. No built-in functionality.</dd> +</dl> + +<h3 id="Obsolete_attributes">Obsolete attributes</h3> + +<dl> + <dt id="charset">{{HTMLAttrDef("charset")}}{{Obsolete_Inline("HTML5")}}</dt> + <dd>Hinted at the {{Glossary("character encoding")}} of the linked URL. + <div class="note"> + <p><strong>Note:</strong> This attribute is obsolete and <strong>should not be used by authors</strong>. Use the HTTP {{HTTPHeader("Content-Type")}} header on the linked URL.</p> + </div> + </dd> + <dt id="coords">{{HTMLAttrDef("coords")}}{{Obsolete_Inline("HTML5")}}</dt> + <dd>Used with <a href="#shape">the <code>shape</code> attribute</a>. A comma-separated list of coordinates.</dd> + <dt id="name">{{HTMLAttrDef("name")}}{{Obsolete_Inline("HTML5")}}</dt> + <dd>Was required to define a possible target location in a page. In HTML 4.01, <code>id</code> and <code>name</code> could both be used on <code><a></code>, as long as they had identical values. + <div class="note"> + <p><strong>Note:</strong> Use the global attribute {{HTMLAttrxRef("id")}} instead.</p> + </div> + </dd> + <dt id="rev">{{HTMLAttrDef("rev")}}{{Obsolete_Inline("HTML5")}}</dt> + <dd>Specified a reverse link; the opposite of <a href="#rel">the <code>rel</code> attribute</a>. Deprecated for being very confusing.</dd> + <dt id="shape">{{HTMLAttrDef("shape")}}{{Obsolete_Inline("HTML5")}}</dt> + <dd>The shape of the hyperlink’s region in an image map. + <div class="note"><strong>Note:</strong> Use the {{HTMLElement("area")}} element for image maps instead.</div> + </dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Interactive_content">interactive content</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Transparent_content_model">Transparent</a>, containing either <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a> (excluding <a href="/en-US/docs/Web/HTML/Content_categories#Interactive_content">interactive content</a>) or <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>, or any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>, but not other <code><a></code> elements.</td> + </tr> + <tr> + <th scope="row">Implicit ARIA role</th> + <td>{{ARIARole("link")}} when <code>href</code> attribute is present, otherwise <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">no corresponding role</a></td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td> + <p>When <code>href</code> attribute is present:</p> + + <ul> + <li>{{ARIARole("button")}}</li> + <li>{{ARIARole("checkbox")}}</li> + <li>{{ARIARole("menuitem")}}</li> + <li>{{ARIARole("menuitemcheckbox")}}</li> + <li>{{ARIARole("menuitemradio")}}</li> + <li>{{ARIARole("option")}}</li> + <li>{{ARIARole("radio")}}</li> + <li>{{ARIARole("switch")}}</li> + <li>{{ARIARole("tab")}}</li> + <li>{{ARIARole("treeitem")}}</li> + </ul> + + <p>When <code>href</code> attribute is not present:</p> + + <ul> + <li>any</li> + </ul> + </td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{DOMxRef("HTMLAnchorElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples">Examples</h2> + +<h3 id="Linking_to_an_absolute_URL">Linking to an absolute URL</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><a href="https://www.mozilla.com"> + Mozilla +</a></pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample('Linking_to_an_absolute_URL')}}</p> + +<h3 id="Linking_to_relative_URLs">Linking to relative URLs</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><a href="//example.com">Scheme-relative URL</a> +<a href="/en-US/docs/Web/HTML">Origin-relative URL</a> +<a href="./p">Directory-relative URL</a> +</pre> + +<div class="hidden"> +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">a { display: block; margin-bottom: 0.5em }</pre> +</div> + +<h4 id="Result_2">Result</h4> + +<p>{{EmbedLiveSample('Linking_to_relative_URLs')}}</p> + +<h3 id="Linking_to_an_element_on_the_same_page">Linking to an element on the same page</h3> + +<pre class="brush: html notranslate"><!-- <a> element links to the section below --> +<p><a href="#Section_further_down"> + Jump to the heading below +</a></p> + +<!-- Heading to link to --> +<h2 id="Section_further_down">Section further down</h2> +</pre> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> You can use <code>href="#top"</code> or the empty fragment (<code>href="#"</code>) to link to the top of the current page, <a href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#scroll-to-the-fragment-identifier">as defined in the HTML specification</a>.</p> +</div> + +<h3 id="Linking_to_an_email_address">Linking to an email address</h3> + +<p>To create links that open in the user's email program to let them send a new message, use the <code>mailto:</code> scheme:</p> + +<pre class="brush: html notranslate"><a href="mailto:nowhere@mozilla.org">Send email to nowhere</a></pre> + +<p>For details about <code>mailto:</code> URLs, such as including a subject or body, see <a href="/en-US/docs/Web/Guide/HTML/Email_links">Email links</a> or {{RFC(6068)}}.</p> + +<h3 id="Linking_to_telephone_numbers">Linking to telephone numbers</h3> + +<pre class="brush: html notranslate"><a href="tel:+49.157.0156">+49 157 0156</a> +<a href="tel:+1(555)5309">(555) 5309</a></pre> + +<p><code>tel:</code> link behavior varies with device capabilities:</p> + +<ul> + <li>Cellular devices autodial the number.</li> + <li>Most operating systems have programs that can make calls, like Skype or FaceTime.</li> + <li>Websites can make phone calls with {{domxref("Navigator/registerProtocolHandler", "registerProtocolHandler")}}, such as <code>web.skype.com</code>.</li> + <li>Other behaviors include saving the number to contacts, or sending the number to another device.</li> +</ul> + +<p>See {{RFC(3966)}} for syntax, additional features, and other details about the <code>tel:</code> URL scheme.</p> + +<h3 id="Using_the_download_attribute_to_save_a_<canvas>_as_a_PNG">Using the download attribute to save a <canvas> as a PNG</h3> + +<p>To save a {{HTMLElement("canvas")}} element’s contents as an image, you can create a link with a <code>download</code> attribute and the canvas data as a <code>data:</code> URL:</p> + +<h4 id="Example_painting_app_with_save_link">Example painting app with save link</h4> + +<h5 id="HTML_3">HTML</h5> + +<pre class="brush: html notranslate"><p>Paint by holding down the mouse button and moving it. + <a href="" download="my_painting.png">Download my painting</a> +</p> + +<canvas width="300" height="300"></canvas> +</pre> + +<h5 id="CSS_2">CSS</h5> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} +canvas { + background: #fff; + border: 1px dashed; +} +a { + display: inline-block; + background: #69c; + color: #fff; + padding: 5px 10px; +}</pre> + +<h5 id="JavaScript">JavaScript</h5> + +<pre class="brush: js notranslate">var canvas = document.querySelector('canvas'), + c = canvas.getContext('2d'); +c.fillStyle = 'hotpink'; + +function draw(x, y) { + if (isDrawing) { + c.beginPath(); + c.arc(x, y, 10, 0, Math.PI*2); + c.closePath(); + c.fill(); + } +} + +canvas.addEventListener('mousemove', event => + draw(event.offsetX, event.offsetY) +); +canvas.addEventListener('mousedown', () => isDrawing = true); +canvas.addEventListener('mouseup', () => isDrawing = false); + +document.querySelector('a').addEventListener('click', event => + event.target.href = canvas.toDataURL() +); +</pre> + +<h5 id="Result_3">Result</h5> + +<p>{{EmbedLiveSample('Example_painting_app_with_save_link', '100%', '400')}}</p> + +<h2 id="Security_and_privacy">Security and privacy</h2> + +<p><code><a></code> elements can have consequences for users’ security and privacy. See <a href="/en-US/docs/Web/Security/Referer_header:_privacy_and_security_concerns"><code>Referer</code> header: privacy and security concerns</a> for information.</p> + +<p>Using <code>target="_blank"</code> without <code>rel="noreferrer"</code> and <code>rel="noopener"</code> makes the website vulnerable to {{domxref("window.opener")}} API exploitation attacks (<a href="https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/">vulnerability description</a>).</p> + +<h2 id="Accessibility">Accessibility</h2> + +<h3 id="Strong_link_text">Strong link text</h3> + +<p><strong>The content inside a link should indicate where the link goes</strong>, even out of context.</p> + +<h4 id="Inaccessible_weak_link_text">Inaccessible, weak link text</h4> + +<p>A sadly common mistake is to only link the words “click here” or “here”:</p> + +<pre class="brush: html example-bad notranslate"><p> + Learn more about our products <a href="/products">here</a>. +</p> +</pre> + +<h4 id="Strong_link_text_2">Strong link text</h4> + +<p>Luckily, this is an easy fix, and it’s actually shorter than the inaccessible version!</p> + +<pre class="brush: html example-good notranslate"><p> + Learn more <a href="/products">about our products</a>. +</p></pre> + +<p>Assistive software have shortcuts to list all links on a page. However, strong link text benefits all users — the “list all links” shortcut emulates how sighted users quickly scan pages.</p> + +<h3 id="onclick_events">onclick events</h3> + +<p>Anchor elements are often abused as fake buttons by setting their <code>href</code> to <code>#</code> or <code>javascript:void(0)</code> to prevent the page from refreshing, then listening for their <code>click</code> events .</p> + +<p>These bogus <code>href</code> values cause unexpected behavior when copying/dragging links, opening links in a new tab/window, bookmarking, or when JavaScript is loading, errors, or is disabled. They also convey incorrect semantics to assistive technologies, like screen readers.</p> + +<p>Use a {{HTMLElement("button")}} instead. In general, <strong>you should only use a hyperlink for navigation to a real URL</strong>.</p> + +<h3 id="External_links_and_linking_to_non-HTML_resources">External links and linking to non-HTML resources</h3> + +<p>Links that open in a new tab/window via <code>target="_blank"</code>, or links that point to a download file should indicate what will happen when the link is followed.</p> + +<p>People experiencing low vision conditions, navigating with the aid of screen reading technology, or with cognitive concerns may be confused when a new tab, window, or application opens unexpectedly. Older screen-reading software may not even announce the behavior.</p> + +<h4 id="Link_that_opens_a_new_tabwindow">Link that opens a new tab/window</h4> + +<pre class="brush: html notranslate"><a target="_blank" href="https://www.wikipedia.org"> + Wikipedia (opens in new tab) +</a> +</pre> + +<h4 id="Link_to_a_non-HTML_resource">Link to a non-HTML resource</h4> + +<pre class="brush: html notranslate"><a href="2017-annual-report.ppt"> + 2017 Annual Report (PowerPoint) +</a> +</pre> + +<p>If an icon is used to signify link behavior, make sure it has {{HTMLAttrxRef("alt", "img", "alt text", "true")}}:</p> + +<pre class="brush: html notranslate"><a target="_blank" href="https://www.wikipedia.org"> + Wikipedia + <img alt="(opens in new tab)" src="newtab.svg"> +</a> + +<a href="2017-annual-report.ppt"> + 2017 Annual Report + <img alt="(PowerPoint file)" src="ppt-icon.svg"> +</a></pre> + +<ul> + <li><a href="https://webaim.org/techniques/hypertext/hypertext_links">WebAIM: Links and Hypertext - Hypertext Links</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.2_—_Predictable_Make_Web_pages_appear_and_operate_in_predictable_ways">MDN / Understanding WCAG, Guideline 3.2</a></li> + <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G200.html">G200: Opening new windows and tabs from a link only when necessary</a></li> + <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G201.html">G201: Giving users advanced warning when opening a new window</a></li> +</ul> + +<h3 id="Skip_links">Skip links</h3> + +<p>A <strong>skip link</strong> is a link placed as early as possible in {{HTMLElement("body")}} content that points to the beginning of the page's main content. Usually, CSS hides a skip link offscreen until focused.</p> + +<pre class="notranslate"><body> + <a href="#content">Skip to main content</a> + + <header> + … + </header> + + <main id="content"> <!-- The skip link jumps to here --> +</pre> + +<pre class="brush: css notranslate">.skip-link { + position: absolute; + top: -3em; + background: #fff; +} +.skip-link:focus { + top: 0; +}</pre> + +<p>Skip links let keyboard users bypass content repeated throughout multiple pages, such as header navigation.</p> + +<p>Skip links are especially useful for people who navigate with the aid of assistive technology such as switch control, voice command, or mouth sticks/head wands, where the act of moving through repetitive links can be laborious.</p> + +<ul> + <li><a href="https://webaim.org/techniques/skipnav/">WebAIM: "Skip Navigation" Links</a></li> + <li><a href="https://a11yproject.com/posts/skip-nav-links/">How-to: Use Skip Navigation links</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_%E2%80%94_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN / Understanding WCAG, Guideline 2.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html">Understanding Success Criterion 2.4.1</a></li> +</ul> + +<h3 id="Size_and_proximity">Size and proximity</h3> + +<h4 id="Size">Size</h4> + +<p>Interactive elements, like links, should provide an area large enough that it is easy to activate them. This helps a variety of people, including those with motor control issues and those using imprecise inputs such as a touchscreen. A minimum size of 44×44 <a href="https://www.w3.org/TR/WCAG21/#dfn-css-pixels">CSS pixels</a> is recommended.</p> + +<p>Text-only links in prose content are exempt from this requirement, but it’s still a good idea to make sure enough text is hyperlinked to be easily activated.</p> + +<ul> + <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html">Understanding Success Criterion 2.5.5: Target Size</a></li> + <li><a href="http://adrianroselli.com/2019/06/target-size-and-2-5-5.html">Target Size and 2.5.5</a></li> + <li><a href="https://a11yproject.com/posts/large-touch-targets/">Quick test: Large touch targets</a></li> +</ul> + +<h4 id="Proximity">Proximity</h4> + +<p>Interactive elements, like links, placed in close visual proximity should have space separating them. Spacing helps people with motor control issues, who may otherwise accidentally activate the wrong interactive content.</p> + +<p>Spacing may be created using CSS properties like {{CSSxRef("margin")}}.</p> + +<ul> + <li><a href="https://axesslab.com/hand-tremors/">Hand tremors and the giant-button-problem</a></li> +</ul> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Referrer Policy", "#referrer-policy-delivery-referrer-attribute", "referrer attribute")}}</td> + <td>{{Spec2("Referrer Policy")}}</td> + <td>Added the <code>referrerpolicy</code> attribute.</td> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "textlevel-semantics.html#the-a-element", "<a>")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "textlevel-semantics.html#the-a-element", "<a>")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML4.01", "struct/links.html#h-12.2", "<a>")}}</td> + <td>{{Spec2("HTML4.01")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.a")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{HTMLElement("link")}} is similar to <code><a></code>, but for metadata hyperlinks that are invisible to users.</li> + <li>{{CSSxRef(":link")}} is a CSS pseudo-class that will match <code><a></code> elements with valid <code>href</code> attributes.</li> +</ul> diff --git a/files/pt-br/web/html/element/abbr/index.html b/files/pt-br/web/html/element/abbr/index.html new file mode 100644 index 0000000000..a5336e70ec --- /dev/null +++ b/files/pt-br/web/html/element/abbr/index.html @@ -0,0 +1,155 @@ +--- +title: <abbr> +slug: Web/HTML/Element/abbr +tags: + - Elemento + - HTML + - Internet + - Rede + - Referencia + - Semántica HTML a nivel de texto + - Web + - abbr + - abreviação + - acrônimo + - definições + - semántica +translation_of: Web/HTML/Element/abbr +--- +<h2 id="Sumário">Sumário</h2> + +<p>O <em>Elemento</em> <em>HTML <code><abbr></code> </em>(ou Elemento de Abreviação HTML) representa uma abreviação e opcionalmente fornece uma descrição completa para ela. Se presente, o atributo <code><strong>title</strong></code> deve conter a descrição completa e apenas ela.</p> + +<div class="note"> +<p><strong>Nota de uso: </strong>Quando presente, o número gramatical (singular/plural) do texto no atributo <code><strong>title</strong></code> deve ser correspondente ao do conteúdo do elemento <code><abbr></code>. Isso também deve ocorrer no caso das linguagens com mais de dois números gramaticais (por exemplo, em árabe não há somente palavras no singular e plural, mas tem também uma categoria dual).</p> +</div> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categorias de conteúdo</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Conteúdo de fluxo</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">conteúdo de fraseamento</a>, conteúdo palpável</li> + <li><dfn>Conteúdo permitido</dfn><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Conteúdo de fraseamento</a>.</li> + <li><dfn>Omissão de tag</dfn> {{no_tag_omission}}</li> + <li><dfn>Elementos-pai permitidos</dfn> Qualquer elemento que aceite como filho <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">conteúdo de fraseamento</a>.</li> + <li><dfn>Interface DOM</dfn> {{domxref("HTMLElement")}} Após o Gecko 1.9.2 (Firefox 3.6) (e incluindo ele), o Firefox implementou a interface {{domxref("HTMLSpanElement")}} para este elemento.</li> +</ul> + +<h2 id="Atributos">Atributos</h2> + +<p><span style="line-height: 21px;">Este elemento inclui apenas os </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">atributos globais</a><span style="line-height: 21px;">.</span></p> + +<p>Use o atributo <strong>title</strong> para definir a descrição completa da abreviação. Muitos navegadores exibem a descrição quando passa-se o mouse por cima da abreviação.</p> + +<h2 id="Estilo_padrão">Estilo padrão</h2> + +<p>O propósito deste elemento é meramente a conveniência de autores e todos os navegadores mostram ele como um elemento dentro de uma linha ({{cssxref('display')}}<code>: inline</code>) por padrão, embora o estilo aplicado sobre ele seja diferente entre diferentes navegadores:</p> + +<ul> + <li>Alguns navegadores, como o Internet Explorer, não aplicam nenhum estilo à mais do que é aplicado ao elemento {{HTMLElement("span")}}.</li> + <li>Opera, Firefox, e alguns outros adicionam um sublinhado pontilhado ao conteúdo do elemento.</li> + <li>Alguns poucos navegadores não apenas adicionam um sublinhado pontilhado, mas também colocam o texto em versalete (small caps); para evitar este tipo de estilo, adicione algo como {{cssxref('font-variant')}}<code>: none</code> no CSS que administra este caso.</li> +</ul> + +<p>É fortemente recomendado que autores web não confiem no estilo padrão. Note que este elemento não é suportado pelo Internet Explorer anterior ao IE7. Como tais versões do IE também não permitem que se aplique estilo para elementos desconhecidos, o seguinte script é necessário para permitir isso:</p> + +<pre class="brush:html"><!--[if lte IE 6]> + <script> + document.createElement("abbr"); + </script> +<![endif]--></pre> + +<h2 id="Exemplo">Exemplo</h2> + +<pre class="brush: html"><p>Obama é presidente dos <abbr title="Estados Unidos da América">EUA</abbr></p> +</pre> + +<h3 id="Result" name="Result">Resultado</h3> + +<p>Obama é presidente dos <abbr title="Estados Unidos da América">EUA</abbr></p> + +<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('HTML WHATWG', 'text-level-semantics.html#the-abbr-element', '<abbr>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'the-abbr-element.html#the-abbr-element', '<abbr>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '<abbr>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<p>{{Compat("html.elements.abbr")}}</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>Suporte básico</td> + <td>2.0</td> + <td>{{CompatGeckoDesktop(1.0)}}</td> + <td>7.0</td> + <td>1.3</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidade</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>Outros elementos que possuem <a href="/en-US/docs/HTML/Text_level_semantics_conveying_elements" title="HTML/Text level semantics conveying elements">semântica à nível de texto</a>: {{HTMLElement("a")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/pt-br/web/html/element/acronym/index.html b/files/pt-br/web/html/element/acronym/index.html new file mode 100644 index 0000000000..ae9d1d4e71 --- /dev/null +++ b/files/pt-br/web/html/element/acronym/index.html @@ -0,0 +1,109 @@ +--- +title: <acronym> +slug: Web/HTML/Element/acronym +tags: + - Elemento + - HTML + - Internet + - Obsoleto + - Rede + - Referencia + - Web +translation_of: Web/HTML/Element/acronym +--- +<div>{{obsolete_header}}</div> + +<h2 id="Summary" name="Summary">Resumo</h2> + +<p>O Elemento HTML Acrônimo (<code><acronym>)</code> permite à autores claramente indicar que uma seqüência de caracteres compõe um acrônimo ou uma abreviação de uma palavra.</p> + +<div class="note"> +<p><strong>Nota de uso: </strong>Este elemento foi removido no HTML5 e não deve ser usado mais. Ao invés dele, desenvolvedores devem usar o elemento {{HTMLElement("abbr")}}.</p> +</div> + +<h2 id="Attributes" name="Attributes">Atributos</h2> + +<p>Este elemento não possui qualquer outro atributo além dos <a class="new " href="/en-US/docs/HTML/global_attributes" rel="internal" title="HTML/global attributes">atributos globais</a>, comuns à todos os elementos.</p> + +<h2 id="DOM_Interface" name="DOM_Interface">Interface DOM</h2> + +<p>Este elemento implementa a interface {{domxref('HTMLElement')}}.</p> + +<div class="note"><strong>Nota de implementação: </strong>Após o Gecko 1.9.2 inclusive, Firefox implementa a interface {{domxref('HTMLSpanElement')}} para este elemento.</div> + +<h2 id="Example" name="Example">Exemplo</h2> + +<pre class="brush:html"><p>A <acronym title="World Wide Web">WWW</acronym> é somente um dos componentes da Internet.</p> +</pre> + +<h2 id="Default_styling" name="Default_styling">Estilo padrão</h2> + +<p>Embo is purely for the convenira o propósito desta tag seja meramente a conveniência dos autores, seu estilo padrão varia entre diferentes navegadores:</p> + +<ul> + <li>Alguns navegadores, como o Internet Explorer, não criam qualquer estilo diferente do de um elemento {{HTMLElement("span")}}.</li> + <li>Opera, Firefox, e alguns outros adicionam um sublinhado pontilhado no conteúdo do elemento.</li> + <li>Alguns poucos navegadores não somente adicionam um sublinhado pontilhado, mas também colocam o conteúdo em versalete (small caps); para evitar este estilo, adicione algo como {{cssxref('font-variant')}}<code>: none</code> no CSS que cuida deste caso.</li> +</ul> + +<p>É portanto fortemente recomendado que autores web não confiem no estilo padrão do navegador para este elemento.</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<p>{{Compat("html.elements.acronym")}}</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 (WebKit)</th> + </tr> + <tr> + <td>Suporte básico</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>Funcionalidade</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Ver também</h2> + +<ul> + <li>O elemento HTML {{HTMLElement("abbr")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/pt-br/web/html/element/address/index.html b/files/pt-br/web/html/element/address/index.html new file mode 100644 index 0000000000..ea65bf24d4 --- /dev/null +++ b/files/pt-br/web/html/element/address/index.html @@ -0,0 +1,163 @@ +--- +title: <address> +slug: Web/HTML/Element/address +tags: + - Autor + - Contato + - Elemento + - Email + - Endereço + - Endereço de Email + - HTML + - Informação de Contato + - Referencia + - Seções HTML + - Web +translation_of: Web/HTML/Element/address +--- +<h2 id="Resumo">Resumo</h2> + +<p>O <strong>elemento HTML <code><address></code></strong> fornece informações de contato para seu ancestral {{HTMLElement("article")}} ou {{HTMLElement("body")}} mais próximo; no segundo caso, ele se aplica ao documento inteiro.</p> + +<p>A informação de contato fornecida por um conteúdo do elemento <code><address></code> pode tomar qualquer forma que é apropriada para o contexto, e pode incluir qualquer tipo de informação de contato necessária, como endereço físico, URL, email, telefone, mídia social, coordenadas geográficas, por aí vai. Deve incluir o nome da pessoa, grupo, ou organização para qual as informações de contato se referem.</p> + +<p><code><address></code> pode ser usado em uma variedade de contextos, como fornecer informação de contato de uma empresa no header da página, ou indicar o autor de um artigo incluindo um elemento <code><address></code> dentro do {{HTMLElement("article")}}.</p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categoria de conteúdo</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Conteúdo de fluxo</a>, conteúdo palpável.</li> + <li><dfn>Conteúdo permitido</dfn><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Conteúdo de fluxo</a>, mas sem nenhum elemento <span style="font-family: Courier New;"><address></span> aninhado, e sem conteúdo de cabeçalho ({{HTMLElement("hgroup")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}), e nem conteúdo de seção como ({{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}), e sem{{HTMLElement("header")}} ou o elemento {{HTMLElement("footer")}}.</li> + <li><dfn>Omissão de tag</dfn> {{no_tag_omission}}</li> + <li><dfn>Elementos-pai permitidos</dfn> Qualquer elemento que aceite <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">conteúdo de fluxo</a>, exceto os elementos <address> (de acordo com o princípio lógico da simetria, se a tag <address>, como pai, não pode ter elemento <address> como filho, então o mesmo conteúdo <address> não pode ter tag <address> como pai).</li> + <li> </li> + <li><dfn>Regras ARIA permitidas</dfn> Nenhuma</li> + <li><dfn>Interface DOM</dfn> {{domxref("HTMLElement")}}. Antes do Gecko 2.0 (Firefox 4), Gecko implementava este elemento usando a interface {{domxref("HTMLSpanElement")}}</li> +</ul> + +<h2 id="Atributos">Atributos</h2> + +<p><span style="line-height: 21px;">Este elemento inclui somente os </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">atributos globais</a><span style="line-height: 21px;">.</span></p> + +<h2 id="Notas_de_uso">Notas de uso</h2> + +<ul> + <li>Para representar um endereço arbitrário, um que não é relacionado à informação para contato, use um elemento {{HTMLElement("p")}} ao invés do elemento <address>.</li> + <li>Este elemento não deve conter mais informação além da informação de contato, como uma data de publicação (a qual pertence ao elemento {{HTMLElement("time")}}).</li> + <li>Tipicamente um elemento <address> pode ser posicionado dentro do elemento {{HTMLElement("footer")}} da seção atual, se houver um.</li> +</ul> + +<h2 id="Exemplo">Exemplo</h2> + +<pre class="brush: html"> <address> + Voce pode contatar o autor em <a href="http://www.somedomain.com/contact">www.somedomain.com</a>.<br> + Se encontrar qualquer bug, por favor <a href="mailto:webmaster@somedomain.com">contate o administrador do site</a>.<br> + Você tambem pode querer nos visitar:<br> + Mozilla Foundation<br> + 1981 Landings Drive<br> + Building K<br> + Mountain View, CA 94043-0801<br> + USA + </address> +</pre> + +<h3 id="Resultado">Resultado</h3> + +<address>Voce pode contatar o autor em <a href="http://www.somedomain.com/contact">www.somedomain.com</a>.<br> +Se encontrar qualquer bug, por favor <a href="mailto:webmaster@somedomain.com">contate o administrador do site</a>.<br> +Você tambem pode querer nos visitar:<br> +Mozilla Foundation<br> +1981 Landings Drive<br> +Building K<br> +Mountain View, CA 94043-0801<br> +USA</address> + +<address> </address> + +<p>Embora o elemento <code>address</code> exiba o texto com o mesmo estilo padrão que os elementos {{HTMLElement("i")}} ou {{HTMLElement("em")}}, ele é mais apropriado de ser usado quando se lida com informação de contato, já que ele fornece informação semântica adicional.</p> + +<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('HTML WHATWG', 'sections.html#the-address-element', '<address>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-address-element', '<address>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.6', '<address>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="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>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>1.0</td> + <td>5.12</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidade</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mini</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.7")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_também">Ver também</h2> + +<ul> + <li>Outros elementos relacionados à seção: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("footer")}}, {{HTMLElement("section")}}, {{HTMLElement("header")}};</li> + <li class="last"><a class="deki-ns current" href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Seções e delineamento de um documento HTML5</a>.</li> +</ul> diff --git a/files/pt-br/web/html/element/applet/index.html b/files/pt-br/web/html/element/applet/index.html new file mode 100644 index 0000000000..c43ac84884 --- /dev/null +++ b/files/pt-br/web/html/element/applet/index.html @@ -0,0 +1,133 @@ +--- +title: <applet> +slug: Web/HTML/Element/applet +translation_of: Web/HTML/Element/applet +--- +<div> + {{obsolete_header}}</div> +<h2 id="Resumo">Resumo</h2> +<p>The HTML Applet Element (<code><applet></code>) identifies the inclusion of a Java applet.</p> +<div class="note"> + <p><strong>Usage note: </strong>This element has been removed in HTML5 and shouldn't be used anymore. Instead web developers should use the more generic {{HTMLElement("object")}} element.</p> +</div> +<h2 id="Attributes" name="Attributes">Atributos</h2> +<dl> + <dt> + {{htmlattrdef("align")}}</dt> + <dd> + This attribute is used to position the applet on the page relative to content that might flow around it. The HTML 4.01 specification defines values of bottom, left, middle, right, and top, whereas Microsoft and Netscape also might support <strong>absbottom</strong>, <strong>absmiddle</strong>, <strong>baseline</strong>, <strong>center</strong>, and <strong>texttop</strong>.</dd> + <dt> + {{htmlattrdef("alt")}}</dt> + <dd> + This attribute causes a descriptive text alternate to be displayed on browsers that do not support Java. Page designers should also remember that content enclosed within the <code><applet></code> element may also be rendered as alternative text.</dd> + <dt> + {{htmlattrdef("archive")}}</dt> + <dd> + This attribute refers to an archived or compressed version of the applet and its associated class files, which might help reduce download time.</dd> + <dt> + {{htmlattrdef("code")}}</dt> + <dd> + This attribute specifies the URL of the applet's class file to be loaded and executed. Applet filenames are identified by a .class filename extension. The URL specified by code might be relative to the <code>codebase</code> attribute.</dd> + <dt> + {{htmlattrdef("codebase")}}</dt> + <dd> + This attribute gives the absolute or relative URL of the directory where applets' .class files referenced by the code attribute are stored.</dd> + <dt> + {{htmlattrdef("datafld")}}</dt> + <dd> + This attribute, supported by Internet Explorer 4 and higher, specifies the column name from the data source object that supplies the bound data. This attribute might be used to specify the various {{HTMLElement("param")}} elements passed to the Java applet.</dd> + <dt> + {{htmlattrdef("datasrc")}}</dt> + <dd> + Like <code>datafld</code>, this attribute is used for data binding under Internet Explorer 4. It indicates the id of the data source object that supplies the data that is bound to the {{HTMLElement("param")}} elements associated with the applet.</dd> + <dt> + {{htmlattrdef("height")}}</dt> + <dd> + This attribute specifies the height, in pixels, that the applet needs.</dd> + <dt> + {{htmlattrdef("hspace")}}</dt> + <dd> + This attribute specifies additional horizontal space, in pixels, to be reserved on either side of the applet.</dd> + <dt> + {{htmlattrdef("mayscript")}}</dt> + <dd> + In the Netscape implementation, this attribute allows access to an applet by programs in a scripting language embedded in the document.</dd> + <dt> + {{htmlattrdef("name")}}</dt> + <dd> + This attribute assigns a name to the applet so that it can be identified by other resources; particularly scripts.</dd> + <dt> + {{htmlattrdef("object")}}</dt> + <dd> + This attribute specifies the URL of a serialized representation of an applet.</dd> + <dt> + {{htmlattrdef("src")}}</dt> + <dd> + As defined for Internet Explorer 4 and higher, this attribute specifies a URL for an associated file for the applet. The meaning and use is unclear and not part of the HTML standard.</dd> + <dt> + {{htmlattrdef("vspace")}}</dt> + <dd> + This attribute specifies additional vertical space, in pixels, to be reserved above and below the applet.</dd> + <dt> + {{htmlattrdef("width")}}</dt> + <dd> + This attribute specifies in pixels the width that the applet needs.</dd> +</dl> +<h2 id="Exemplo">Exemplo</h2> +<pre class="brush: html"><applet code="game.class" align="left" archive="game.zip" height="250" width="350"> + <param name="difficulty" value="easy"> + <b>Sorry, you need Java to play this game.</b> +</applet> +</pre> +<h2 id="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</h2> +<p>{{CompatibilityTable}}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mini</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> + </table> +</div> +<h2 id="Notas">Notas</h2> +<p>The W3C specification does not encourage the use of <code><applet></code> and prefers the use of the {{HTMLElement("object")}} tag. Under the strict definition of HTML 4.01, this element is deprecated and entirely obsolete in HTML5.</p> +<div> + {{HTMLRef}}</div> diff --git a/files/pt-br/web/html/element/area/index.html b/files/pt-br/web/html/element/area/index.html new file mode 100644 index 0000000000..3301dcec3c --- /dev/null +++ b/files/pt-br/web/html/element/area/index.html @@ -0,0 +1,196 @@ +--- +title: <area> +slug: Web/HTML/Element/area +translation_of: Web/HTML/Element/area +--- +<h2 id="Resumo">Resumo</h2> + +<p>O <em>HTML <code><area></code> elemento</em> define uma região hot-spot em uma imagem, e, opcionalmente, associa-lo com um {{Glossary ("Hyperlink", "link de hipertexto")}}. Este elemento é usado somente dentro de um {{HTMLElement ("map")}} elemento.</p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML / Content_categories">As categorias de conteúdo</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="Categorias HTML / conteúdo # content Fluxo"> de conteúdo de fluxo</a> , <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="Categorias HTML / conteúdo # content Phrasing">conteúdo fraseado</a> .</li> + <li><dfn>Permitida conteúdo</dfn> vazio; este é um elemento vazio.</li> + <li><dfn>Tag omissão</dfn> {{no_tag_omission}}</li> + <li><dfn>Permitida elementos pai</dfn> Qualquer elemento que aceita <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="Categorias HTML / conteúdo # content Phrasing">conteúdo fraseado</a> . O <code><area></code> elemento deve ter um ancestral {{HTMLElement ("mapa")}}, mas ele não precisa ser um pai direta.</li> + <li><dfn>Interface DOM</dfn> {{domxref ("HTMLAreaElement")}}</li> +</ul> + +<h2 id="Atributos">Atributos</h2> + +<p><span style="line-height: 21px;">Este elemento inclui os </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML / atributos globais">atributos globais </a><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{Htmlattrdef ("accesskey")}} {{HTMLVersionInline ("4")}} só, {{obsolete_inline ("5.0")}}</dt> + <dd>Especifica um acelerador de navegação pelo teclado para o elemento. Pressionando ALT ou uma chave semelhante, em associação com o caractere especificado seleciona a forma de controle correlacionada com a seqüência de teclas. Os projetistas de página são avisados para evitar sequências de teclas já vinculados aos navegadores. Este atributo é global desde HTML5.</dd> +</dl> + +<dl> + <dt>{{Htmlattrdef ("alt")}}</dt> + <dd>Uma alternativa seqüência de texto para exibir em navegadores que não exibem imagens. O texto deve ser formulada de modo a que apresenta o usuário com o mesmo tipo de escolha como a imagem iria oferecer quando exibido sem o texto alternativo. Em HTML4, este atributo é necessário, mas pode ser uma string vazia (""). Em HTML5, este atributo é necessário apenas se o <strong>href</strong> atributo é usado.</dd> +</dl> + +<dl> + <dt>{{Htmlattrdef ("coords")}}</dt> + <dd>Um conjunto de valores que especificam as coordenadas da região de hot-spot. O número e o significado dos valores dependem do valor especificado para a <strong>forma</strong> de atributo. Para um <code>rect</code> forma ou retângulo, o <strong>coords</strong> valor é de dois pares x, y: left, top, right, e bottom. Para um <code>círculo</code> forma, o valor é <code>x, y, r</code> onde <code>x, y</code> é um par especificando o centro do círculo e <code>r</code> é um valor para o raio. Para um <code>poli</code> ou polígono <forma, o valor é um conjunto de pares x, y de cada ponto no polígono: <code>X1, Y1, X2, Y2, x3, y3,</code> e assim por diante. Em HTML4, os valores são números de pixels ou porcentagens, se um sinal de porcentagem (%) é anexado; em HTML5, os valores são números de pixels CSS.</dd> + <dt>{{Htmlattrdef ("download")}} {{HTMLVersionInline ("5")}}</dt> + <dd>Este atributo, se presente, indica que o autor tem a intenção que o hiperlink seja usado para o download de um recurso. Consulte {{HTMLElement ("a")}} para uma descrição completa da {{htmlattrxref ("download", "a")}} atributo.</dd> +</dl> + +<dl> + <dt>{{Htmlattrdef ("href")}}</dt> + <dd>A meta de hyperlink para a área. Seu valor é uma URL válida. Em HTML4, quer este atributo ou o <strong>nohref</strong> atributo deve estar presente no elemento. Em HTML5, este atributo pode ser omitido; em caso afirmativo, o elemento de área não representa um hiperlink.</dd> +</dl> + +<dl> + <dt>{{Htmlattrdef ("hreflang")}} {{HTMLVersionInline ("5")}}</dt> + <dd>Indica o idioma do recurso ligado. Os valores permitidos são determinados por <a class="external" href="http://www.ietf.org/rfc/bcp/bcp47.txt" title="http://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a> . Utilize este atributo somente se a <strong>href</strong> atributo está presente.</dd> +</dl> + +<dl> + <dt>{{Htmlattrdef ("name")}} {{HTMLVersionInline ("4")}} só, {{obsolete_inline ("5.0")}}</dt> + <dd>Defina um nome para a área clicável de modo que possa ser programado por navegadores mais antigos.</dd> +</dl> + +<dl> + <dt>{{Htmlattrdef ("media")}} {{HTMLVersionInline ("5")}}</dt> + <dd>Uma dica da mídia para o qual o recurso ligado foi projetado, por exemplo <code>impressão e tela</code> . Se omitido, o padrão é <code>tudo</code> . Utilize este atributo somente se a <strong>href</strong> atributo está presente.</dd> +</dl> + +<dl> + <dt>{{Htmlattrdef ("nohref")}} {{HTMLVersionInline ("4")}} só, {{obsolete_inline ("5.0")}}</dt> + <dd>Indica que não existe hyperlink para a área associada. Ou este atributo ou a <strong>href</strong> atributo deve estar presente no elemento.</dd> + <dd> + <div class="note"> + <p><strong>Nota de Uso:</strong> Este atributo é obsoleto em HTML5, em vez omitindo o atributo <strong>href</strong> é suficiente.</p> + </div> + </dd> +</dl> + +<dl> + <dt>{{Htmlattrdef ("rel")}} {{HTMLVersionInline ("5")}}</dt> + <dd>Para âncoras contendo o <strong>href</strong> atributo, este atributo especifica a relação do objeto de destino para o objeto link. O valor é uma lista de valores de relacionamento, separados por vírgulas. Os valores e sua semântica será registrado por alguma autoridade que poderia ter significado para o autor do documento. A relação padrão, se nenhum outro é dado, é nula. Utilize este atributo somente se a <strong>href</strong> atributo está presente.</dd> + <dt>{{Htmlattrdef ("shape")}}</dt> + <dd>A forma do ponto de acesso associado. As especificações para colar 5 e HTML 4 definem os valores <code>rect</code> , que define uma região rectangular; <code>círculo</code> , o qual define uma região circular; <code>poli</code> , que define um polígono; e <code>padrão</code> , o que indica toda a região além de quaisquer formas definidas. Muitos navegadores, principalmente o Internet Explorer 4 e superior, apoio <code>circ</code> , <code>polígono</code> , e <code>retângulo</code> como valores válidos para <strong>forma</strong> ; estes valores são {{Non-standard_inline}}.</dd> +</dl> + +<dl> + <dt>{{Htmlattrdef ("tabindex")}} {{HTMLVersionInline ("4")}} só, {{obsolete_inline ("5.0")}}</dt> + <dd>Um valor numérico que especifica a posição da área definida na ordem de tabulação browser. Este atributo é global em HTML5.</dd> +</dl> + +<dl> + <dt>{{Htmlattrdef ("target")}}</dt> + <dd>Este atributo especifica onde exibir o recurso ligado. Em HTML4, este é o nome de, ou uma palavra-chave para um quadro. Em HTML5, que é um nome ou palavra-chave para um <em>contexto de navegação</em> (por exemplo, aba, janela ou quadro embutido). As seguintes palavras-chave têm significados especiais: + <ul> + <li><code>_self</code> : Carregar a resposta no mesmo quadro HTML4 (ou contexto de navegação HTML5), como o atual. Este valor é o padrão se o atributo não é especificado.</li> + <li><code>_blank</code> : Coloque a resposta em uma nova janela sem nome HTML4 ou contexto de navegação HTML5.</li> + <li><code>_parent</code> : Carregar a resposta para o pai HMTL4 conjunto de quadros do quadro atual ou HTML5 pai contexto de navegação do atual. Se não houver nenhum pai, esta opção se comporta da mesma maneira que <code>_self</code> .</li> + <li><code>_top</code> : Em HTML4: Carregar a resposta para a janela completa, originais, cancelando todos os outros quadros. Em HTML5: Carregar a resposta para o contexto de navegação de nível superior (ou seja, o contexto de navegação que é um ancestral do atual, e não tem pai). Se não houver nenhum pai, esta opção se comporta da mesma maneira que <code>_self</code> .</li> + </ul> + Utilize este atributo somente se a <strong>href</strong> atributo está presente.</dd> + <dt>{{Htmlattrdef ("type")}}</dt> + <dd>Este atributo especifica o tipo de mídia na forma de um tipo MIME para o destino do link. Geralmente, este é fornecido informações estritamente como consultivo; no entanto, no futuro, um navegador pode adicionar um pequeno ícone para os tipos de multimédia. Por exemplo, um navegador pode adicionar um pequeno ícone de alto-falante quando o tipo está definido para áudio / wav. Para obter uma lista completa de tipos MIME reconhecidos, consulte <a class="linkification-ext external" href="http://www.w3.org/TR/html4/references.html#ref-MIMETYPES" title="Linkification: http://www.w3.org/TR/html4/references.html # REF-MIMETYPES">http://www.w3.org/TR/html4/references.html # REF-MIMETYPES</a> . Utilize este atributo somente se a <strong>href</strong> atributo está presente.</dd> +</dl> + +<h2 id="Exemplo">Exemplo</h2> + +<pre class="brush: html"><mapa name="primary"> + <area shape="circle" coords="200,250,25" href="another.htm" /> + <area shape="default" nohref /> +</map> +</pre> + +<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 ('HTML WHATWG', 'a-map-element.html # da-area-elemento', '<area>')}}</td> + <td>{{Spec2 ('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName ('HTML5 W3C', 'incorporado-content-0.html # da-area-elemento', '<area>')}}</td> + <td>{{Spec2 ('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName ('HTML4.01', 'struct / objects.html # h-13.6.1', '<area>')}}</td> + <td>{{Spec2 ('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Cromo</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Ópera</th> + <th>Safári</th> + </tr> + <tr> + <td>Suporte básico</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>Característica</th> + <th>Andróide</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mini</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Notas">Notas</h2> + +<p>De acordo com o HTML 3.2, 4.0 e 5 especificações, a tag de fechamento <code></ área></code> é proibido.</p> + +<p>A especificação XHTML 1.0 requer uma barra: <code><area /></code> .</p> + +<p>Os <strong>ID</strong> , <strong>classe</strong> e <strong>estilo</strong> atributos têm o mesmo significado que os atributos essenciais definidas na especificação HTML 4, mas somente Netscape e Microsoft defini-los.</p> + +<p>Netscape 1 de nível não entendem o <strong>alvo</strong> atributo que se refere aos quadros.</p> + +<p>HTML 3.2 define apenas <strong>alt</strong> , <strong>coords</strong> , <strong>href</strong> , <strong>nohref</strong> e shape .</p> + +<p>{{HTMLRef}}</p> diff --git a/files/pt-br/web/html/element/article/index.html b/files/pt-br/web/html/element/article/index.html new file mode 100644 index 0000000000..cff322b0cb --- /dev/null +++ b/files/pt-br/web/html/element/article/index.html @@ -0,0 +1,124 @@ +--- +title: article (artigo) +slug: Web/HTML/Element/article +translation_of: Web/HTML/Element/article +--- +<h2 id="Resumo">Resumo</h2> + +<p>O <em>Elemento HTML Article</em> (<span style="font-family: Courier New;"><article></span>) representa uma composição independente em um documento, página, aplicação, ou site, ou que é destinado a ser distribuido de forma independente ou reutilizável, por exemplo, em sindicação. Este poderia ser o post de um fórum, um artigo de revista ou jornal, um post de um blog, um comentário enviado por um usuário, um gadget ou widget interativos, ou qualquer outra forma de conteúdo independente.</p> + +<div class="note"> +<p><em>Notas de uso:</em></p> + +<ul> + <li>Quando um elemento <code><article></code> está aninhado, o elemento interior representa um artigo relacionado com o elemento exterior. Por exemplo, os comentários do post de um blog podem ser elementos <code><article></code> aninhados em <code><article></code> representando o post do blog.</li> + <li>Informações sobre o autor de um elemento <code><article></code> podem ser fornecidas através do elemento {{ HTMLElement("address") }} ,mas ele não se aplica aos elementos <code><article></code> aninhados.</li> + <li>A data e hora de publicação de um elemento <code><article></code> pode ser descrita usando o atributo {{ htmlattrxref("pubdate", "time") }} de um elemento {{ HTMLElement("time") }}.</li> +</ul> +</div> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<table class="fullwidth-table" style="height: 117px; width: 1125px;"> + <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>Nenhuma, tanto tag de início quanto de fim são obrigatórias</td> + </tr> + <tr> + <td>Elementos pai permitidos</td> + <td> + <p>Qualquer elemento que aceita <a href="/en/HTML/Content_categories#flow_content" title="https://developer.mozilla.org/en/HTML/Content_categories#flow_content">flow content</a>. Note-se que um elemento <code><article></code> não pode ser descendente de um elemento {{ HTMLElement("address") }}.</p> + </td> + </tr> + <tr> + <td>Documento normativo</td> + <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-article-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-article-element">HTML5, section 4.4.4</a></td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento não possui outros elementos se não os <a href="/en/HTML/Global_attributes" rel="internal">global attributes</a>, comuns a todos os elementos.</p> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Este elemento implementa a interface <code><a href="/en/DOM/element" title="en/DOM/element">HTMLElement</a></code> .</p> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush: html"><article> + <h4>Um artigo realmente impressionante</h4> + <p>Lotes de texto incrível.</p> +</article> +</pre> + +<h3 id="Resultado">Resultado</h3> + +<div style="background-color: #F6F6F2;"><article> +<h4 id="Um_artigo_realmente_impressionante">Um artigo realmente impressionante</h4> + +<p>Lotes de texto incrível.</p> +</article></div> + +<h3 id="Compatibilidade">Compatibilidade</h3> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte Básico</td> + <td>5</td> + <td>{{ CompatGeckoDesktop("2.0") }}</td> + <td>9.0</td> + <td>11.10</td> + <td>4.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte Básico</td> + <td>2.2</td> + <td>{{ CompatGeckoMobile("2.0") }}</td> + <td>9.0</td> + <td>11.0</td> + <td>5.0 (iOS 4.2)</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>Outros elementos de seção relacionados: {{ HTMLElement("body") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("section") }}, {{ HTMLElement("aside") }}, {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}, {{ HTMLElement("hgroup") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("address") }}</li> + <li class="last"><a class="deki-ns current" href="/en/Sections_and_Outlines_of_an_HTML5_document" title="en/Sections and Outlines of an HTML5 document">Sections and outlines of an HTML5 document</a>.</li> +</ul> diff --git a/files/pt-br/web/html/element/aside/index.html b/files/pt-br/web/html/element/aside/index.html new file mode 100644 index 0000000000..629f66e439 --- /dev/null +++ b/files/pt-br/web/html/element/aside/index.html @@ -0,0 +1,129 @@ +--- +title: <aside> +slug: Web/HTML/Element/aside +tags: + - Elemento + - HTML + - HTML5 + - Internet + - Rede + - Referencia + - Seções HTML + - Web +translation_of: Web/HTML/Element/aside +--- +<h2 id="Sumario">Sumario</h2> + +<p>O elemento <em>HTML <code><aside></code> </em>representa uma seção de uma página que consiste de conteúdo que é tangencialmente relacionado ao conteúdo do seu entorno, que poderia ser considerado separado do conteúdo. Essas seções são, muitas vezes, representadas como barras laterais. Elas muitas vezes contem explicações laterais, como a definição de um glossário; conteúdo vagamente relacionado, como avisos; a biografia do autor; ou, em aplicações web, informações de perfil ou links de blogs relacionados.</p> + +<div class="note"> +<p><em>Notas de uso:</em></p> + +<ul> + <li><strong>Não use</strong> o elemento <code><aside></code> para texto entre parenteses, pois este tipo de texto é considerado parte do fluxo principal.</li> +</ul> +</div> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categoria de conteudo</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Conteudo de fluxo</a>, conteudo de secionamento, conteudo palpavel.</li> + <li><dfn>Conteudo permitido</dfn><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Conteudo de fluxo</a>.</li> + <li><dfn>Omissao de tag</dfn> Nenhuma, ambas as tags de início e fim são obrigatórias.</li> + <li><dfn>Elementos pai permitidos</dfn>Qualquer elemento que aceita <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">conteudo de fluxo</a>. Note que um elemento <code><aside></code> nao deve ser descendente de um elemento {{HTMLElement("address")}}.</li> + <li><dfn>Interface DOM</dfn> {{domxref("HTMLElement")}}</li> +</ul> + +<h2 id="Atributos">Atributos</h2> + +<p><span style="line-height: 21px;">Este elemento inclui apenas os <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">atributos globais</a></span><span style="line-height: 21px;">.</span></p> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush: html"><aside> + <p>Algum conteudo relacionado a um &lt;article&gt;</p> +</aside> +</pre> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificaçao</th> + <th scope="col">Status</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-aside-element', '<aside>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'the-aside-element.html#the-aside-element', '<aside>')}} {{todo("brokenLink")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_com_browsers">Compatibilidade com browsers</h2> + +<p>{{CompatibilityTable}}</p> + +<p>{{Compat("html.elements.aside")}}</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>Suporte basico</td> + <td>5</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>9.0</td> + <td>11.10</td> + <td>4.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidade</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte basico</td> + <td>2.2</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>9.0</td> + <td>11.0</td> + <td>5.0 (iOS 4.2)</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>Outros elementos de seçao relacionados: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li> + <li><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Seçoes e outlines de um documento HTML5</a>.</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/pt-br/web/html/element/audio/index.html b/files/pt-br/web/html/element/audio/index.html new file mode 100644 index 0000000000..24b982c0ca --- /dev/null +++ b/files/pt-br/web/html/element/audio/index.html @@ -0,0 +1,301 @@ +--- +title: audio +slug: Web/HTML/Element/Audio +translation_of: Web/HTML/Element/audio +--- +<h2 id="Sumário">Sumário</h2> + +<p>O elemento <code>audio</code> é utilizado para embutir conteúdo de som em um documento HTML ou XHTML.O elemento <code>audio</code> foi adicionado como parte do HTML5.</p> + +<p>Você pode utilizar recursos avançados da API de áudio — que são específicas do Gecko — para gerar e manipular diretamente fluxo de áudio a partir do código JavaScript. Veja <a href="/en-US/docs/Introducing_the_Audio_API_Extension" title="en-US/docs/Introducing the Audio API Extension">Introducing the audio API extension</a> para detalhes.</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-US/docs/HTML/Content_categories#transparent_content" title="en-US/docs/HTML/Content categories#transparent content">Transparent content</a>, tanto um atributo <code>src</code> quanto um ou mais elementos {{ HTMLElement("source") }}, seguidos por um <a href="/en-US/docs/HTML/Content_categories#flow_content" title="en-US/docs/HTML/Content categories#flow content">flow content</a> ou <a href="/en-US/docs/HTML/Content_categories#phrasing_content" title="en-US/docs/HTML/Content categories#phrasing content">phrasing content</a>, sem{{ HTMLElement("video") }} ou elementos <code><audio></code>.</td> + </tr> + <tr> + <td>Omissão de tag</td> + <td>Nenhuma, tanto as tags iniciais quanto as finais devem estar presentes.</td> + </tr> + <tr> + <td>Elementos pai permitidos</td> + <td>Qualquer elemento que aceite <a href="/en-US/docs/HTML/Content_categories#flow_content" rel="internal">flow content</a>, ou qualquer elemento que aceite <a href="/en-US/docs/HTML/Content_categories#phrasing_content" rel="internal">phrasing content</a>.</td> + </tr> + <tr> + <td>Documento normativo</td> + <td><a class="external" href="http://www.w3.org/TR/html5/video.html#audio" title="http://www.w3.org/TR/html5/video.html#audio">HTML5, section 4.8.7</a></td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Como todos os elementos HTML, este elemento suporta os <a href="/en-US/docs/HTML/Global_attributes" title="en-US/docs/HTML/Global attributes">global attributes</a>.</p> + +<dl> + <dt>{{ htmlattrdef("autoplay") }}</dt> + <dd>Um atributo Booleano; se especificado (mesmo se o valor for "false"!), o áudio iniciará automaticamente assim que possível sem parar de carregar os dados.</dd> + <dt>{{ htmlattrdef("autobuffer") }} {{ obsolete_inline("2.0") }}</dt> + <dd>Um atributo Booleano; se especificado, o audio será baixado automaticamente, mesmo se não está configurado para reprodução automática. Isto continua até que o cache de mídia esteja cheio, ou até que o o arquivo de áudio completo tenha sido baixado, o que vier primeiro. Isto deve ser utilizado apenas quando é esperado que o usuário escolherá tocar o áudio; por exemplo, se o usuário navegou para a página utilizando um link "Reproduzir". Este atributo foi removido no Gecko 2.0 {{ geckoRelease("2.0") }} em razão do atributo <code>preload</code>.</dd> + <dt>{{ htmlattrdef("buffered") }}</dt> + <dd>Um atributo que pode ser lido para determinar os intervalos do áudio que já foram carregados. Este atributo contém um objeto {{ domxref("TimeRanges") }}.</dd> + <dt>{{ htmlattrdef("controls") }}</dt> + <dd>Se esse atributo estiver presente, o navegador oferecerá controles para permitir ao usuário controlar a reprodução do áudio, incluindo volume, navegação, e pausa/continuação da reprodução.</dd> + <dt>{{ htmlattrdef("loop") }}</dt> + <dd>Um atributo Booleano; se especificado, ao chegar no fim do áudio, ele voltará automaticamente para o começo.</dd> + <dt>{{ htmlattrdef("mozCurrentSampleOffset") }} {{ gecko_minversion_inline("2.0") }} {{ non-standard_inline() }}</dt> + <dd>The offset, specified as the number of samples since the beginning of the audio stream, at which the audio is currently playing.</dd> + <dt>{{ htmlattrdef("muted") }}</dt> + <dd>Um atributo Booleano que indica se o áudio será inicializado silenciado.</dd> + <dt>{{ htmlattrdef("played") }}</dt> + <dd>Um objeto {{ domxref("TimeRanges") }}indicando que todo o áudio foi reproduzido.</dd> + <dt>{{ htmlattrdef("preload") }}</dt> + <dd>Esse atributo enumerado pretende dar uma sugestão ao navegador sobre o que o autor pensa que proporcionará uma melhor experiência do usuário. Ele pode ter os seguintes valores: + <ul> + <li><span style="font-family: Courier New;">none: </span>indica que o usuário não necessitará consultar o áudio ou que o servidor quer minimizar seu tráfego; em outros termos indica que o áudio não deve ser pré-carregado;</li> + <li><span style="font-family: Courier New;">metadata</span>: indica que embora o usuário não necessitará consultar o áudio, pegar os meta-dados (ex: comprimento) é interessante;</li> + <li><span style="font-family: Courier New;">auto</span>: indica que o usuário necessita ter prioridade; em outros termos isso significa que, se necessário, o áudio inteiro pode ser baixado, mesmo que não seja esperado a execução;</li> + <li>Uma <em>string vazia</em>: é um sinônimo do valor <span style="font-family: Courier New;">auto</span>.</li> + </ul> + + <p>Se não definido, seu valor padrão será definido pelo navegador (isto é, cada navegador pode escolher seu valor padrão), embora a especificação recomenda que seja definido para o <span style="font-family: Courier New;">metadata</span>.</p> + + <div class="note"><strong>Notas de uso:</strong> + + <ul> + <li>O atributo <code>autoplay</code> tem precedência sobre o <code>preload,</code>pois se é necessário executar o áudio automaticamente, o navegador obviamente o baixará. Definindo ambos <code>autoplay</code> e <code>preload</code> é permitido pela especificação.</li> + <li>O navegador não é forçado pela especifição a seguir o valor desse atributo; é apenas uma sugestão.</li> + </ul> + </div> + </dd> + <dt>{{ htmlattrdef("src") }}</dt> + <dd>A URL do áudio a ser incorporado. Isso é sujeito a <a class="internal" href="/en-US/docs/HTTP_access_control" title="en-US/docs/HTTP access control">HTTP access controls</a>. Isto é opcional; ao invés disso você pode usar o elemento <code><a class="external" href="http://developer.mozilla.org/en-US/docs/pt-BR/HTML/Element/source"><source></a></code> dentro do bloco do áudio para especificar o vídeo a ser incorporado .</dd> +</dl> + +<p>O tempo de compensação (time offset) entre o áudio e o vídeo está especificado como um valor de ponto flutuante (float) representando o número de segundos da compensação.</p> + +<div class="note"><strong>Nota:</strong> A definição de valor de tempo de compensação ainda não foi completada na especificação do HTML 5 e está sujeita a mudança.</div> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: html"><!-- Reprodução simples de áudio --> +<audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay> + O seu navegador não suporta o elemento <code>audio</code>. +</audio> + +<!-- Reprodução de áudio com legendas --> +<audio src="foo.ogg"> + <track kind="captions" src="foo.en.vtt" srclang="en" label="English"> + <track kind="captions" src="foo.sv.vtt" srclang="sv" label="Svenska"> +</audio> +</pre> + +<p>Reproduz o arquivo de áudio anexado a esse artigo.</p> + +<h2 id="Interface_do_DOM">Interface do DOM</h2> + +<ul> + <li><a href="/en-US/docs/DOM/HTMLAudioElement" title="en-US/docs/DOM/HTMLAudioElement">HTMLAudioElement</a></li> +</ul> + +<h2 id="Compatibilidade_dos_Navegadores">Compatibilidade dos Navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte Básico</td> + <td>3.0</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>9.0</td> + <td>10.5</td> + <td>3.1</td> + </tr> + <tr> + <td> + <p>Atributo<code> autoplay</code></p> + </td> + <td>3.0</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>9.0</td> + <td>10.5</td> + <td>3.1</td> + </tr> + <tr> + <td> + <p>Atributo<code> buffered</code></p> + </td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoDesktop("2.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Atributo <code>controls</code></td> + <td>3.0</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>9.0</td> + <td>10.5</td> + <td>3.1</td> + </tr> + <tr> + <td>Atributo <code>loop</code></td> + <td>3.0</td> + <td>{{ CompatGeckoDesktop("11.0") }}</td> + <td>9.0</td> + <td>10.5</td> + <td>3.1</td> + </tr> + <tr> + <td>Atributo <code>muted</code></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoDesktop("11.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Propriedade <code>played</code></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoDesktop("15.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Atributo<code> preload</code></td> + <td>3.0</td> + <td>{{ CompatGeckoDesktop("2.0") }}</td> + <td>9.0</td> + <td>Supported under the older name <code>autobuffer</code></td> + <td>3.1</td> + </tr> + <tr> + <td>Atributo <code>src</code></td> + <td>3.0</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>9.0</td> + <td>10.5</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte Básico</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("1.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Atributo <code>autoplay</code></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("1.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Atributo <code>buffered</code></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("2.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Atributo <code>controls</code></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("1.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Atributo <code>loop</code></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("11.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Atributo <code>muted</code></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("11.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Propriedade <code>played</code></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("15.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Atributo <code>preload</code></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("2.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Atributo <code>src</code></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("1.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div class="note"><strong>Nota:</strong> Para que o Gecko reproduza o áudio, o servidor deve disponibilizar o arquivo utilizando o tipo MIME correto.</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a class="internal" href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="en-US/docs/Media formats supported by the audio and video elements">Media formats supported by the audio and video elements</a></li> + <li><a href="/en-US/docs/Introducing_the_Audio_API_Extension" title="en-US/docs/Introducing the Audio API Extension">Introducing the audio API extension</a></li> + <li><a href="/en-US/docs/DOM/HTMLAudioElement" title="en-US/docs/DOM/HTMLAudioElement"><code>HTMLAudioElement</code></a></li> + <li><a class="internal" href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" title="en-US/docs/NsIDOMHTMLMediaElement"><code>nsIDOMHTMLMediaElement</code></a></li> + <li><a class="internal" href="http://developer-new.mozilla.org/pt-BR/docs/HTML/Element/Video" title="pt-BR/docs/HTML/Element/Video"><code>video</code></a></li> + <li><a class="internal" href="/en-US/docs/Using_HTML5_audio_and_video" title="en-US/docs/Using audio and video in Firefox">Using audio and video</a></li> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#audio" title="http://www.whatwg.org/specs/web-apps/current-work/#audio">The <code>audio</code> element</a> (Especificação HTML5)</li> +</ul> + +<p></p> diff --git a/files/pt-br/web/html/element/b/index.html b/files/pt-br/web/html/element/b/index.html new file mode 100644 index 0000000000..7033ed49f6 --- /dev/null +++ b/files/pt-br/web/html/element/b/index.html @@ -0,0 +1,120 @@ +--- +title: <b> +slug: Web/HTML/Element/b +tags: + - Elemento + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/b +--- +<h2 id="Resumo">Resumo</h2> +<p>O <strong>elemento HTML <b></strong> representa um intervalo de texto estilísticamente diferente do texto normal, sem transmitir qualquer importância ou relevância. Ele é geralmente usado para destacar palavras-chaves em um resumo, nomes de produtos em um comentário ou outros vãos de texto cuja a apresentação típica seria negrito. Outro exemplo de seu uso é como marcação da frase principal de cada paragrafo de um artigo.</p> +<div class="note"> + <p><strong>Notas de Uso:</strong></p> + <ul> + <li>Não confunda o elemento <b> com os elementos {{HTMLElement("strong")}} , {{HTMLElement("em")}} ou {{HTMLElement("mark")}} . O elemento {{HTMLElement("strong")}} representa um texto com importância, {{HTMLElement("em")}} coloca alguma ênfase no texto e o elemento {{HTMLElement("mark")}} representa o texto relevante. O elemento <b> não transmite essa informação semântica especial. Você deve usá-lo apenas quando os outros elementos citados não se encaixam na situação.</li> + <li>Também não é recomendado marcar títulos de cabeçalhos usando o elemento <b>. Para isso, use as tags {{HTMLElement("h1")}} até {{HTMLElement("h6")}}. usando essas tags você terá liberdade de mudar o estilo padrão dos elementos e não ficará preso ao negrito do elemento <b>.</li> + <li>É uma boa prática usar o atributo de classe <b>, a fim de transmitir informação semântica adicional. Isso facilita o desenvolvimento de várias "stylings" de um documento web, sem a necessidade de alterar o seu código HTML.</li> + <li>Historicamente, o elemento <b> foi criado para fazer o texto ficar em negrito. Porém as informações de estilo ficou obsoleta desde o HTML4, de modo que significado da tag <b> foi alterado.</li> + <li>Se não a propósito semântico sobre o uso do elemento <b>, usar a propriedade css <a href="https://developer.mozilla.org/en-US/docs/CSS/font-weight" title="font-weight">font-weight</a> com algum volume seria uma escolha melhor para fazer o texto ficar em negrito.</li> + </ul> +</div> +<ul class="htmlelt"> + <li><dfn><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn> <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, palpable content.</li> + <li><dfn>Permitted content</dfn> <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Phrasing content</a>.</li> + <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li> + <li><dfn>Permitted parent elements</dfn> Any element that accepts <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>.</li> + <li><dfn>DOM interface</dfn> {{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the <a href="https://developer.mozilla.org/en-US/docs/DOM/span" title="DOM/span"><code>HTMLSpanElement</code></a> interface for</li> +</ul> +<h2 id="Atributos">Atributos</h2> +<p>Este elemento só inclui os <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">atributos globais</a><span style="line-height: 21px;">.</span></p> +<h2 id="Exemplo">Exemplo</h2> +<pre class="brush: html"><p> + Este artigo descreve vários <b>níveis de texto</b>. Ele explica a utilização do elemento em um documento <b>HTML</b>. +</p> +Palavras-chave são exibidas com o estilo padrão do elemento <b>, provavelmente em negrito. +</pre> +<h3 id="Resultado">Resultado</h3> +<p>Este artigo descreve vários<strong> níveis de texto</strong>. Ele explica a utilização do elemento em um documento <strong>HTML</strong>.</p> +<p>Palavras-chave são exibidas com o estilo padrão do elemento <b>, provavelmente em negrito.</p> +<h2 id="Specifications" name="Specifications">Especificações</h2> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificaçoes</th> + <th scope="col">Estado</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-b-element', '<b>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-b-element', '<b>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<b>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> +<h2 id="Navegadores_Compatíveis">Navegadores Compatíveis</h2> +<p>{{CompatibilityTable}}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte Basico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte Basico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> + </table> +</div> +<h2 id="Veja_Também">Veja Também</h2> +<ul> + <li>Outros elementos de transporte <a href="/en-US/docs/HTML/Text_level_semantics_conveying_elements" title="HTML/Text level semantics conveying elements">text-level semantics</a>: {{HTMLElement("a")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("abbr")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li> + <li><a class="external" href="http://www.w3.org/International/questions/qa-b-and-i-tags">Using <b> and <i> elements (W3C)</a></li> +</ul> +<div> + {{HTMLRef}}</div> diff --git a/files/pt-br/web/html/element/base/index.html b/files/pt-br/web/html/element/base/index.html new file mode 100644 index 0000000000..4f200eb802 --- /dev/null +++ b/files/pt-br/web/html/element/base/index.html @@ -0,0 +1,138 @@ +--- +title: <base> +slug: Web/HTML/Element/base +translation_of: Web/HTML/Element/base +--- +<h2 id="Resumo">Resumo</h2> + +<p>O <em>elemento HTML Base</em> (<strong><base></strong>) especifica o endereço (URL) utilizada por todos os endereços relativos contidos dentro de um documento. Há um número máximo de 1 (um) elemento <em>Base </em><base> do documento.</p> + +<div class="note"><strong>Nota de uso:</strong> Se multiplos elementos <code><base></code> forem especificados, apenas o primeiro valor de <strong>href</strong> e <strong>target</strong> serão utilizados, os demais serão ignorados.</div> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn> Metadata content.</li> + <li><dfn>Permitted content</dfn> None, it is an {{Glossary("empty element")}}.</li> + <li><dfn>Tag omission</dfn> There must be no closing tag.</li> + <li><dfn>Permitted parent elements</dfn> Any {{HTMLElement("head")}} that doesn't contain any other {{HTMLElement("base")}} element</li> + <li><dfn>DOM interface</dfn> {{domxref("HTMLBaseElement")}}</li> +</ul> + +<h2 id="Atributos">Atributos</h2> + +<p><span style="line-height: 21px;">Este elemento inclui os </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">atributos globais</a><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{htmlattrdef("href")}}</dt> + <dd> + <div>O URL de base para ser usado em todo o documento para endereços URL relativos.</div> + + <div>Se este atributo for especificado, este elemento deve vir antes de quaisquer outros elementos com atributos cujos valores são URLs. </div> + + <div>Endereços (URLs) absolutos e relativos são permitidos (mas ver seção nota abaixo).</div> + </dd> + <dt>{{htmlattrdef("target")}}</dt> + <dd>Esse elemento é uma palavra-chave que indica o local padrão para exibir o resultado quando os hiperlinks causarem navegações, por elementos que não têm referência alvo explícita. Em HTML5, é um nome ou palavra-chave para um contexto de navegação. (por exemplo, guia, janela, ou frame incorporada). As seguintes formas têm significados específicos:</dd> +</dl> + +<ul> + <li>_self: Coloca i resultado no mesmo quadro HTML4 ou contexto de navegação, caso HTML5, como o atual. Este valor é o padrão se o atributo não for especificado.</li> + <li>_blank: Coloca o resultado em uma nova janela HTML4 ou janela no contexto de navegação HTML5.</li> + <li>_parent: Coloca o resultado no conjunto de quadros pai do quadro atual no caso de HTML4 ou contexto de navegação pai no atual HTML5. Se não houver nenhum pai, esta opção se comporta como a forma _self.</li> + <li>_top: Em HTML4: Coloca o resultado na janela completa, original, cancelando todos os outros quadros. Em HTML5: Coloca o resultado no contexto de navegação de nível superior (ou seja, o contexto de navegação em que é um antepassado do atual, e não o pai). Se não houver nenhum pai, este opção se comporta da mesma forma que _self.</li> +</ul> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush: html"><base href="http://www.example.com/"> +<base target="_blank" href="http://www.example.com/"> +</pre> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificações</th> + <th scope="col">Estado</th> + <th scope="col">Comentários</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-base-element', '<base>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata#the-base-element', '<base>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.4', '<base>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Navegadores_Compatíveis">Navegadores Compatíveis</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recursos</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte Básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recursos</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte Básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Notas">Notas</h2> + +<ul> + <li>A URL base de um documento pode ser consultada utilizando o seguinte script {{domxref('document.baseURI')}}.</li> + <li>Support of relative URIs for <code>href</code> was added in Gecko 2.0 (Firefox 4.0)</li> + <li>HTML 2.0 and 3.2 define only the <code>href</code> attribute</li> + <li>XHTML requires a trailing slash: <code><base /></code></li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/pt-br/web/html/element/bdi/index.html b/files/pt-br/web/html/element/bdi/index.html new file mode 100644 index 0000000000..84fe08c3b3 --- /dev/null +++ b/files/pt-br/web/html/element/bdi/index.html @@ -0,0 +1,118 @@ +--- +title: <bdi> +slug: Web/HTML/Element/bdi +translation_of: Web/HTML/Element/bdi +--- +<h2 id="Resumo">Resumo</h2> + +<div style="color: rgb(68, 68, 68); font-family: 'Segoe UI'; line-height: 20px;"><span id="ouHighlight__0_2TO0_0">O</span><span id="noHighlight_0.25321983080357313"> </span><span id="ouHighlight__4_7TO2_5">HTML</span><span id="noHighlight_0.6554693980142474"> </span><span id="ouHighlight__9_13TO7_11"><bdi></span><span id="ouHighlight__15_21TO12_19">elemento</span><span id="noHighlight_0.9511294178664684"> </span><span id="ouHighlight__23_25TO21_23">(ou</span><span id="noHighlight_0.9838762788567692"> </span><span id="ouHighlight__52_59TO25_32">elemento</span><span id="noHighlight_0.4640860806684941"> de </span><span id="ouHighlight__42_50TO37_46">isolamento</span><span id="noHighlight_0.6476994450204074"> de </span><span id="ouHighlight__27_40TO51_63">Bi-direcional</span><span id="ouHighlight__52_59TO64_64">)</span><span id="noHighlight_0.9751175972633064"> </span><span id="ouHighlight__61_68TO66_70">isola</span><span id="noHighlight_0.46404190897010267"> </span><span id="ouHighlight__70_70TO72_73">um</span><span id="noHighlight_0.8199374077375978"> </span><span id="ouHighlight__72_75TO75_80">trecho</span><span id="ouHighlight__77_78TO82_83">de</span><span id="noHighlight_0.10497640678659081"> </span><span id="ouHighlight__80_83TO85_89">texto</span><span id="noHighlight_0.6559448065236211"> </span><span id="ouHighlight__85_88TO91_93">que</span><span id="noHighlight_0.43894259887747467"> </span><span id="ouHighlight__90_94TO95_98">pode</span><span id="noHighlight_0.16636165999807417"> </span><span id="ouHighlight__96_97TO100_102">ser</span><span id="noHighlight_0.4350285651162267"> </span><span id="ouHighlight__99_107TO104_112">formatado</span><span id="noHighlight_0.6019896985962987"> </span><span id="ouHighlight__109_110TO114_115">em</span><span id="noHighlight_0.7196951480582356"> </span><span id="ouHighlight__112_112TO117_119">uma</span><span id="noHighlight_0.010187389561906457"> </span><span id="ouHighlight__124_132TO121_127">direção</span><span id="noHighlight_0.700361228780821"> </span><span id="ouHighlight__114_122TO129_137">diferente</span><span id="noHighlight_0.2754423574078828"> </span><span id="ouHighlight__134_137TO139_140">de</span><span id="noHighlight_0.3110014407429844"> </span><span id="ouHighlight__139_143TO142_146">outro</span><span id="noHighlight_0.2142986578401178"> </span><span id="ouHighlight__145_148TO148_152">texto</span><span id="noHighlight_0.8142082458361983"> </span><span id="ouHighlight__150_156TO154_157">fora</span><span id="noHighlight_0.9718295908533037"> </span><span id="ouHighlight__158_160TO159_162">dela</span><span id="noHighlight_0.08479978539980948">.</span></div> + +<div style="color: rgb(68, 68, 68); font-family: 'Segoe UI'; line-height: 20px;"> </div> + +<p><span id="ouHighlight__0_3TO0_3">Este</span><span id="noHighlight_0.7554138673003763"> </span><span id="ouHighlight__5_11TO5_12">elemento</span><span id="noHighlight_0.9105970792006701"> </span><span id="ouHighlight__13_14TO14_14">é</span><span id="noHighlight_0.02825332246720791"> </span><span id="ouHighlight__16_21TO16_19">útil</span><span id="noHighlight_0.49017372098751366"> </span><span id="ouHighlight__23_26TO21_22">ao</span><span id="noHighlight_0.833095996407792"> </span><span id="ouHighlight__28_36TO24_33">incorporar</span><span id="noHighlight_0.6412814292125404"> o </span><span id="ouHighlight__38_41TO37_41">texto</span><span id="noHighlight_0.5279295009095222"> </span><span id="ouHighlight__43_46TO43_45">com</span><span id="noHighlight_0.6386495919432491"> </span><span id="ouHighlight__48_49TO47_49">uma</span><span id="noHighlight_0.8489199872128665"> </span><span id="ouHighlight__59_72TO51_57">direção</span><span id="noHighlight_0.9773911898955703"> </span><span id="ouHighlight__51_57TO59_70">desconhecida</span><span id="noHighlight_0.5116830433253199">,</span><span id="noHighlight_0.7326054258737713"> </span><span id="ouHighlight__75_78TO73_74">de</span><span id="noHighlight_0.008567805867642164"> </span><span id="ouHighlight__80_80TO76_77">um </span><span id="ouHighlight__82_89TO79_92">banco de dados</span><span id="noHighlight_0.24359390302561224"> </span><span id="ouHighlight__91_93TO94_96">por</span><span id="noHighlight_0.1003112040925771"> </span><span id="ouHighlight__95_101TO98_104">exemplo</span><span id="noHighlight_0.4042799514718354">,</span><span id="noHighlight_0.9500157283619046"> </span><span id="ouHighlight__104_109TO107_117">no interior</span><span id="noHighlight_0.8313138401135802"> do </span><span id="ouHighlight__111_114TO122_126">texto</span><span id="noHighlight_0.5792264079209417"> </span><span id="ouHighlight__116_119TO128_130">com</span><span id="noHighlight_0.6307996944524348"> </span><span id="ouHighlight__121_121TO132_134">uma</span><span id="noHighlight_0.4534156653098762"> </span><span id="ouHighlight__129_142TO136_142">direção</span><span id="noHighlight_0.24449271336197853"> </span><span id="ouHighlight__123_127TO144_147">fixa</span><span id="noHighlight_0.3078894999343902">.</span></p> + +<p><span id="ouHighlight__0_5TO0_5">Apesar</span><span id="noHighlight_0.8827422398608178"> do </span><span id="ouHighlight__11_14TO10_14">mesmo</span><span id="noHighlight_0.882797094527632"> </span><span id="ouHighlight__23_28TO16_21">efeito</span><span id="noHighlight_0.8019994916394353"> </span><span id="ouHighlight__16_21TO23_28">visual</span><span id="noHighlight_0.06297104642726481"> </span><span id="ouHighlight__30_32TO30_33">pode</span><span id="noHighlight_0.3491354058496654"> </span><span id="ouHighlight__34_35TO35_37">ser</span><span id="noHighlight_0.6706520325969905"> </span><span id="ouHighlight__37_44TO39_47">alcançado</span><span id="noHighlight_0.7179052042774856"> </span><span id="ouHighlight__46_50TO49_54">usando</span><span id="noHighlight_0.8405010907445103"> </span><span id="ouHighlight__52_54TO56_56">a</span><span id="noHighlight_0.41030527791008353"> </span><span id="ouHighlight__60_63TO58_62">regra</span><span id="noHighlight_0.8244769684970379"> de </span><span id="ouHighlight__56_58TO67_69">CSS</span><span id="ouHighlight__65_92TO71_98">{{cssxref("unicode-bidi")}}:</span><span id="noHighlight_0.7606142449658364"> </span><span id="ouHighlight__94_100TO100_105">isolar</span><span id="noHighlight_0.7547905251849443"> </span><span id="ouHighlight__105_105TO107_108">um</span><span id="noHighlight_0.8205506079830229"> </span><span id="ouHighlight__107_129TO110_132">{{HTMLElement("span")}}</span><span id="noHighlight_0.5687660162802786"> </span><span id="ouHighlight__131_132TO134_135">ou</span><span id="noHighlight_0.8983000349253416"> </span><span id="ouHighlight__134_140TO137_141">outro</span><span id="noHighlight_0.23344315774738789"> </span><span id="ouHighlight__158_164TO143_150">elemento</span><span id="noHighlight_0.9712034852709621"> de </span><span id="ouHighlight__142_156TO155_164">formatação</span><span id="noHighlight_0.6452725476119667"> de </span><span id="ouHighlight__142_156TO169_173">texto</span><span id="noHighlight_0.371194236446172">,</span><span id="noHighlight_0.6485432204790413"> </span><span id="ouHighlight__167_169TO176_176">o</span><span id="noHighlight_0.08094707457348704"> </span><span id="ouHighlight__180_186TO178_188">significado</span><span id="noHighlight_0.39352240110747516"> </span><span id="ouHighlight__171_178TO190_198">semântico</span><span id="noHighlight_0.9879310647957027"> </span><span id="ouHighlight__191_194TO200_201">só</span><span id="noHighlight_0.49152605095878243"> </span><span id="ouHighlight__188_189TO203_203">é</span><span id="noHighlight_0.3073125807568431"> </span><span id="ouHighlight__196_203TO205_216">transportado</span><span id="noHighlight_0.9707951827440411"> </span><span id="ouHighlight__205_206TO218_221">pelo</span><span id="noHighlight_0.5125817665830255"> </span><span id="ouHighlight__208_210TO223_230">elemento</span><span id="noHighlight_0.9626453767996281"> de</span><span id="ouHighlight__212_216TO235_239"><bdi></span><span id="noHighlight_0.382017228519544">.</span><span id="noHighlight_0.7930675493553281"> </span><span id="ouHighlight__227_236TO242_254">Especialmente</span><span id="noHighlight_0.9823549354914576">,</span><span id="noHighlight_0.9089996474795043"> </span><span id="ouHighlight__239_246TO257_270">os navegadores</span><span id="noHighlight_0.4786272435449064"> </span><span id="ouHighlight__252_258TO272_276">podem</span><span id="noHighlight_0.812615460017696"> </span><span id="ouHighlight__263_268TO278_284">ignorar</span><span id="noHighlight_0.4324913469608873"> </span><span id="ouHighlight__274_280TO286_292">estilos</span><span id="noHighlight_0.8354158513247967"> </span><span id="ouHighlight__270_272TO294_296">CSS</span><span id="noHighlight_0.443051362875849">.</span><span id="noHighlight_0.22193246567621827"> </span><span id="ouHighlight__286_289TO299_303">Nesse</span><span id="noHighlight_0.4085162605624646"> </span><span id="ouHighlight__293_296TO305_308">caso</span><span id="noHighlight_0.4657177780754864">,</span><span id="noHighlight_0.9268165768589824"> </span><span id="ouHighlight__299_301TO311_311">o</span><span id="noHighlight_0.39682723418809474"> </span><span id="ouHighlight__303_306TO313_317">texto </span><span id="ouHighlight__308_312TO319_323">seria</span><span id="noHighlight_0.2573021047282964"> </span><span id="ouHighlight__314_318TO325_329">ainda</span><span id="noHighlight_0.2587680167052895"> </span><span id="ouHighlight__323_331TO331_342">corretamente</span><span id="noHighlight_0.4873588739428669"> </span><span id="ouHighlight__333_341TO344_350">exibido</span><span id="noHighlight_0.00005012121982872486"> </span><span id="ouHighlight__343_347TO352_357">usando</span><span id="noHighlight_0.959427208872512"> </span><span id="ouHighlight__349_351TO359_359">o</span><span id="noHighlight_0.46664790343493223"> </span><span id="ouHighlight__358_364TO361_368">elemento</span><span id="noHighlight_0.8604529893491417"> </span><span id="ouHighlight__353_356TO370_373">HTML</span><span id="noHighlight_0.9177420460619032">,</span><span id="noHighlight_0.08654749696142972"> </span><span id="ouHighlight__367_369TO376_378">mas</span><span id="noHighlight_0.43514942773617804"> se </span><span id="ouHighlight__371_381TO383_389">tornará</span><span id="noHighlight_0.5058314143680036"> </span><span id="ouHighlight__383_389TO391_394">lixo </span><span id="ouHighlight__391_394TO396_401">quando</span><span id="noHighlight_0.6406023774761707"> </span><span id="ouHighlight__396_400TO403_408">usando</span><span id="noHighlight_0.9773929887451231"> </span><span id="ouHighlight__402_404TO410_410">o</span><span id="noHighlight_0.4543722909875214"> </span><span id="ouHighlight__410_416TO412_417">estilo</span><span id="noHighlight_0.3970386404544115"> </span><span id="ouHighlight__406_408TO419_421">CSS</span><span id="noHighlight_0.6424709260463715"> </span><span id="ouHighlight__418_419TO423_426">para</span><span id="noHighlight_0.5918963155709207"> </span><span id="ouHighlight__421_426TO428_437">transmitir</span><span id="noHighlight_0.9250977048650384"> </span><span id="ouHighlight__428_435TO439_447">semântica</span><span id="noHighlight_0.6185589011292905">.</span></p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>, palpable content.</li> + <li><dfn>Permitted content</dfn><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Flow_content">Phrasing content</a>.</li> + <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li> + <li><dfn>Permitted parent elements</dfn> Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Flow_content">phrasing content</a>.</li> + <li><dfn>DOM interface</dfn> {{domxref("HTMLElement")}}</li> +</ul> + +<h2 id="Atributos">Atributos</h2> + +<p><span id="ouHighlight__0_3TO0_3" style="color: #444444; font-family: segoe ui; line-height: 20px;">Como</span><span id="noHighlight_0.001214201096445322" style="color: #444444; font-family: segoe ui; line-height: 20px;"> </span><span id="ouHighlight__5_7TO5_12" style="color: #444444; font-family: segoe ui; line-height: 20px;">todos os</span><span id="noHighlight_0.826984302373603" style="color: #444444; font-family: segoe ui; line-height: 20px;"> </span><span id="ouHighlight__9_13TO14_19" style="color: #444444; font-family: segoe ui; line-height: 20px;">outros</span><span id="noHighlight_0.4603832468856126" style="color: #444444; font-family: segoe ui; line-height: 20px;"> </span><span id="ouHighlight__20_27TO21_29" style="color: #444444; font-family: segoe ui; line-height: 20px;">elementos</span><span id="noHighlight_0.7513500798959285" style="color: #444444; font-family: segoe ui; line-height: 20px;"> do </span><span id="ouHighlight__15_18TO34_37" style="color: #444444; font-family: segoe ui; line-height: 20px;">HTML</span><span id="noHighlight_0.836860227631405" style="color: #444444; font-family: segoe ui; line-height: 20px;">,</span><span id="noHighlight_0.6667805451434106" style="color: #444444; font-family: segoe ui; line-height: 20px;"> </span><span id="ouHighlight__30_33TO40_43" style="color: #444444; font-family: segoe ui; line-height: 20px;">este</span><span id="noHighlight_0.24774297140538692" style="color: #444444; font-family: segoe ui; line-height: 20px;"> </span><span id="ouHighlight__35_41TO45_52" style="color: #444444; font-family: segoe ui; line-height: 20px;">elemento</span><span id="noHighlight_0.9662830734159797" style="color: #444444; font-family: segoe ui; line-height: 20px;"> </span><span id="ouHighlight__43_45TO54_56" style="color: #444444; font-family: segoe ui; line-height: 20px;">tem</span><span id="noHighlight_0.06186480657197535" style="color: #444444; font-family: segoe ui; line-height: 20px;"> </span><span id="ouHighlight__47_49TO58_59" style="color: #444444; font-family: segoe ui; line-height: 20px;">os</span><span id="noHighlight_0.5859726471826434" style="color: #444444; font-family: segoe ui; line-height: 20px;"> </span><span id="ouHighlight__58_67TO61_69" style="color: #444444; font-family: segoe ui; line-height: 20px;">atributos</span><span id="noHighlight_0.02038295636884868" style="color: #444444; font-family: segoe ui; line-height: 20px;"> </span><span id="ouHighlight__51_56TO71_77" style="color: #444444; font-family: segoe ui; line-height: 20px;">globais</span><span id="noHighlight_0.44103528815321624" style="color: #444444; font-family: segoe ui; line-height: 20px;">, </span><span id="ouHighlight__70_73TO80_82" style="color: #444444; font-family: segoe ui; line-height: 20px;">com</span><span id="noHighlight_0.5824840031564236" style="color: #444444; font-family: segoe ui; line-height: 20px;"> </span><span id="ouHighlight__75_75TO84_86" style="color: #444444; font-family: segoe ui; line-height: 20px;">uma</span><span id="noHighlight_0.18953034467995167" style="color: #444444; font-family: segoe ui; line-height: 20px;"> </span><span id="ouHighlight__77_82TO88_94" style="color: #444444; font-family: segoe ui; line-height: 20px;">pequena</span><span id="noHighlight_0.3756751879118383" style="color: #444444; font-family: segoe ui; line-height: 20px;"> </span><span id="ouHighlight__93_102TO96_104" style="color: #444444; font-family: segoe ui; line-height: 20px;">diferença</span><span id="noHighlight_0.4072504623327404" style="color: #444444; font-family: segoe ui; line-height: 20px;"> de </span><span id="ouHighlight__84_91TO109_117" style="color: #444444; font-family: segoe ui; line-height: 20px;">semântica</span><span id="noHighlight_0.673395758960396" style="color: #444444; font-family: segoe ui; line-height: 20px;">:</span><span id="noHighlight_0.25477161654271185" style="color: #444444; font-family: segoe ui; line-height: 20px;"> </span><span id="ouHighlight__105_107TO120_120" style="color: #444444; font-family: segoe ui; line-height: 20px;">o</span><span id="noHighlight_0.521450299071148" style="color: #444444; font-family: segoe ui; line-height: 20px;"> </span><span id="ouHighlight__113_121TO122_129" style="color: #444444; font-family: segoe ui; line-height: 20px;">atributo</span><span id="noHighlight_0.6080204544123262" style="color: #444444; font-family: segoe ui; line-height: 20px;"> </span><span id="ouHighlight__109_111TO131_133" style="color: #444444; font-family: segoe ui; line-height: 20px;">dir</span><span id="noHighlight_0.6893899932038039" style="color: #444444; font-family: segoe ui; line-height: 20px;"> </span><span id="ouHighlight__126_128TO135_137" style="color: #444444; font-family: segoe ui; line-height: 20px;">não</span><span id="noHighlight_0.6315366947092116" style="color: #444444; font-family: segoe ui; line-height: 20px;"> </span><span id="ouHighlight__123_124TO139_139" style="color: #444444; font-family: segoe ui; line-height: 20px;">é</span><span id="noHighlight_0.6892995934467763" style="color: #444444; font-family: segoe ui; line-height: 20px;"> </span><span id="ouHighlight__130_138TO141_147" style="color: #444444; font-family: segoe ui; line-height: 20px;">herdado</span><span id="noHighlight_0.987318622181192" style="color: #444444; font-family: segoe ui; line-height: 20px;">.</span><span id="noHighlight_0.29314392316155136" style="color: #444444; font-family: segoe ui; line-height: 20px;"> </span><span id="ouHighlight__141_142TO150_151" style="color: #444444; font-family: segoe ui; line-height: 20px;">Se</span><span id="noHighlight_0.5244616428390145" style="color: #444444; font-family: segoe ui; line-height: 20px;"> </span><span id="ouHighlight__144_146TO153_155" style="color: #444444; font-family: segoe ui; line-height: 20px;">não </span><span id="ouHighlight__148_150TO157_164" style="color: #444444; font-family: segoe ui; line-height: 20px;">definido</span><span id="noHighlight_0.5649776619393378" style="color: #444444; font-family: segoe ui; line-height: 20px;">,</span><span id="noHighlight_0.4689762145280838" style="color: #444444; font-family: segoe ui; line-height: 20px;"> </span><span id="ouHighlight__153_155TO167_167" style="color: #444444; font-family: segoe ui; line-height: 20px;">o</span><span id="noHighlight_0.5695626470260322" style="color: #444444; font-family: segoe ui; line-height: 20px;"> </span><span id="ouHighlight__165_169TO169_173" style="color: #444444; font-family: segoe ui; line-height: 20px;">valor</span><span id="noHighlight_0.10759570635855198" style="color: #444444; font-family: segoe ui; line-height: 20px;"> </span><span id="ouHighlight__157_163TO175_180" style="color: #444444; font-family: segoe ui; line-height: 20px;">padrão</span><span id="noHighlight_0.9993769233115017" style="color: #444444; font-family: segoe ui; line-height: 20px;"> </span><span id="ouHighlight__171_172TO182_182" style="color: #444444; font-family: segoe ui; line-height: 20px;">é</span><span id="noHighlight_0.7498440719209611" style="color: #444444; font-family: segoe ui; line-height: 20px;"> </span><span id="ouHighlight__174_176TO184_184" style="color: #444444; font-family: segoe ui; line-height: 20px;">o</span><span id="noHighlight_0.7486646100878716" style="color: #444444; font-family: segoe ui; line-height: 20px;"> </span><span id="ouHighlight__178_181TO186_189" style="color: #444444; font-family: segoe ui; line-height: 20px;">auto</span><span id="noHighlight_0.49608228635042906" style="color: #444444; font-family: segoe ui; line-height: 20px;"> </span><span id="ouHighlight__183_187TO191_193" style="color: #444444; font-family: segoe ui; line-height: 20px;">que</span><span id="noHighlight_0.5011617795098573" style="color: #444444; font-family: segoe ui; line-height: 20px;"> </span><span id="ouHighlight__189_191TO195_199" style="color: #444444; font-family: segoe ui; line-height: 20px;">deixa</span><span id="noHighlight_0.04530308395624161" style="color: #444444; font-family: segoe ui; line-height: 20px;"> </span><span id="ouHighlight__193_195TO201_201" style="color: #444444; font-family: segoe ui; line-height: 20px;">o</span><span id="noHighlight_0.6820721987169236" style="color: #444444; font-family: segoe ui; line-height: 20px;"> </span><span id="ouHighlight__197_203TO203_211" style="color: #444444; font-family: segoe ui; line-height: 20px;">navegador</span><span id="noHighlight_0.6961749503389001" style="color: #444444; font-family: segoe ui; line-height: 20px;"> </span><span id="ouHighlight__205_210TO213_219" style="color: #444444; font-family: segoe ui; line-height: 20px;">decidir</span><span id="noHighlight_0.07850909815169871" style="color: #444444; font-family: segoe ui; line-height: 20px;"> </span><span id="ouHighlight__212_214TO221_221" style="color: #444444; font-family: segoe ui; line-height: 20px;">a</span><span id="noHighlight_0.6631842595525086" style="color: #444444; font-family: segoe ui; line-height: 20px;"> </span><span id="ouHighlight__216_224TO223_229" style="color: #444444; font-family: segoe ui; line-height: 20px;">direção</span><span id="noHighlight_0.11175237642601132" style="color: #444444; font-family: segoe ui; line-height: 20px;"> </span><span id="ouHighlight__226_230TO231_238" style="color: #444444; font-family: segoe ui; line-height: 20px;">com base </span><span id="ouHighlight__232_233TO240_241" style="color: #444444; font-family: segoe ui; line-height: 20px;">no</span><span id="noHighlight_0.8664585656952113" style="color: #444444; font-family: segoe ui; line-height: 20px;"> </span><span id="ouHighlight__249_255TO243_250" style="color: #444444; font-family: segoe ui; line-height: 20px;">conteúdo</span><span id="noHighlight_0.42073241784237325" style="color: #444444; font-family: segoe ui; line-height: 20px;"> </span><span id="ouHighlight__235_237TO252_253" style="color: #444444; font-family: segoe ui; line-height: 20px;">do</span><span id="noHighlight_0.01093503856100142" style="color: #444444; font-family: segoe ui; line-height: 20px;"> </span><span id="ouHighlight__239_247TO255_262" style="color: #444444; font-family: segoe ui; line-height: 20px;">elemento</span><span id="noHighlight_0.09879596228711307" style="color: #444444; font-family: segoe ui; line-height: 20px;">.</span></p> + +<h2 id="Exemplo">Exemplo</h2> + +<pre class="brush: html"><p dir="ltr">Esta palavra arábica <bdi>ARABIC_PLACEHOLDER</bdi> é automaticamente voltada da direita</p> +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p dir="ltr">Esta palavra arábica <bdi>ARABIC_PLACEHOLDER</bdi> é automaticamente voltada da direita</p> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-bdi-element', '<bdi>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'the-bdi-element.html#the-bdi-element', '<bdi>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_com_Navegadores">Compatibilidade com Navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>16</td> + <td>{{CompatGeckoDesktop("10.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("10.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 dir="ltr" id="Veja_Também">Veja Também:</h2> + +<ul> + <li>Related HTML element: {{HTMLElement("bdo")}}</li> + <li>Related HTML properties: {{cssxref("direction")}}, {{cssxref("unicode-bidi")}}</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/pt-br/web/html/element/bdo/index.html b/files/pt-br/web/html/element/bdo/index.html new file mode 100644 index 0000000000..c87148deb9 --- /dev/null +++ b/files/pt-br/web/html/element/bdo/index.html @@ -0,0 +1,106 @@ +--- +title: <bdo> +slug: Web/HTML/Element/bdo +tags: + - HTML + - bdo + - ltr + - rtl +translation_of: Web/HTML/Element/bdo +--- +<div>{{HTMLRef}}</div> + +<p>O <strong><em>elemento </em>HTML <code><bdo></code> </strong>(<em>bidirectional override</em>) é usado para substituir a direcionalidade atual do texto. Isso faz com que a direcionalidade dos personagens seja ignorada em favor da direcionalidade especificada.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</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#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>Any</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the <code><a href="/en-US/docs/Web/API/HTMLSpanElement">HTMLSpanElement</a></code> interface for this element.</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Os atributos desse elemento incluem os <a href="/en-US/docs/HTML/Global_attributes">atributos globais</a>.</p> + +<dl> + <dt>{{htmlattrdef("dir")}}</dt> + <dd>Direção de texto neste elemento. Os valores possíveis são: + <ul> + <li><code>ltr</code>: Indica que o texto ficará da <strong>Esquerda para a Direita</strong> (<strong>L</strong>eft-<strong>T</strong>o-<strong>R</strong>ight).</li> + <li><code>rtl</code>: Indica que o texto ficará da <strong>Direita</strong> <strong> para a Esquerda </strong>(<strong>R</strong>eft-<strong>T</strong>o-<strong>L</strong>ight).</li> + </ul> + </dd> +</dl> + +<h2 id="Examplos">Examplos</h2> + +<pre class="brush: html"><!-- Muda a direção do texto --> +<p>Este texto ficará da esquerda para a direita.</p> +<p><bdo dir="rtl">Este texto ficará da direita para a esquerda.</bdo></p> +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample('Examplos')}}</p> + +<h2 id="Notas">Notas</h2> + +<p>A especificação HTML 4 não especificam eventos para este elemento; eles foram adicionados no XHTML. Este é provavelmente um descuido.</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-bdo-element', '<bdo>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-bdo-element', '<bdo>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'dirlang.html#h-8.2.4', '<bdo>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_Navegadores">Compatibilidade de Navegadores</h2> + +<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você quiser contribuir com os dados, verifique <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos um pedido de puxar.</div> + +<p>{{Compat("html.elements.bdo")}}</p> diff --git a/files/pt-br/web/html/element/big/index.html b/files/pt-br/web/html/element/big/index.html new file mode 100644 index 0000000000..bfabe40970 --- /dev/null +++ b/files/pt-br/web/html/element/big/index.html @@ -0,0 +1,80 @@ +--- +title: '<big>: Elemento para deixar o texto maio' +slug: Web/HTML/Element/big +translation_of: Web/HTML/Element/big +--- +<div>{{obsolete_header}}</div> + +<p><span class="seoSummary">The obsolete <strong>HTML Big Element</strong> (<strong><code><big></code></strong>) renders the enclosed text at a font size one level larger than the surrounding text (<code>medium</code> becomes <code>large</code>, for example).</span> The size is capped at the browser's maximum permitted font size.</p> + +<div class="note"> +<p><strong>Usage note: </strong>As it was purely presentational, this element has been removed in <a href="/en-US/docs/Web/Guide/HTML/HTML5" title="/en-US/docs/Web/Guide/HTML/HTML5">HTML5</a> and shouldn't be used anymore. Instead web developers should use the CSS {{cssxref("font-size")}} property to adjust the font size.</p> +</div> + +<h2 id="Atributos">Atributos</h2> + +<p>This element has no other attributes than the <a href="/en-US/docs/HTML/global_attributes" title="HTML/global attributes">global attributes</a>, common to all elements.</p> + +<h2 id="Examples">Examples</h2> + +<p>Here we see examples showing the use of <code><big></code> followed by an example showing how to accomplish the same results using modern CSS syntax instead.</p> + +<h3 id="Usando_<big>">Usando <code><big></code></h3> + +<div id="Using_big"> +<p>Este elemento usa o comando <code><big></code> para aumentar o tamanho do texto. O elemento é obsoleto, porém aceitável em todos os navegadores.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p> + Este é o primeiro texto. <big>Este texto usa big +para ficar com a aparência maior.</big> +</p></pre> +</div> + +<h4 id="Resultado">Resultado</h4> + +<p>{{EmbedLiveSample("Using_big", 640, 60)}}</p> + +<h3 id="Using_CSS_font-size">Using CSS <code>font-size</code></h3> + +<p>This example uses the CSS {{cssxref("font-size")}} property to increase the font size by one level.</p> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.bigger { + font-size: larger; +}</pre> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><p> + This is the first sentence. <span class="bigger">This whole + sentence is in bigger letters.</span> +</p></pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample("Using_CSS_font-size", 640, 60)}}</p> + +<h2 id="DOM_interface">DOM interface</h2> + +<p>This element implements the {{domxref('HTMLElement')}} interface.</p> + +<div class="note"><strong>Implementation note: </strong>Up to Gecko 1.9.2 inclusive, Firefox implements the {{domxref('HTMLSpanElement')}} interface for this element.</div> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.big")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>CSS: {{cssxref("font-size")}}, {{cssxref("font")}}</li> + <li>HTML: {{htmlelement("small")}}, {{htmlelement("font")}}, {{htmlelement("style")}}</li> + <li>HTML 4.01 Specification: <a class="external" href="http://www.w3.org/TR/html4/present/graphics.html#h-15.2">Font Styles</a></li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/pt-br/web/html/element/blink/index.html b/files/pt-br/web/html/element/blink/index.html new file mode 100644 index 0000000000..b36ceed2c8 --- /dev/null +++ b/files/pt-br/web/html/element/blink/index.html @@ -0,0 +1,102 @@ +--- +title: <blink> +slug: Web/HTML/Element/blink +tags: + - Elemento + - HTML + - Não-padrão + - Obsoleto + - Web +translation_of: Web/HTML/Element/blink +--- +<div>{{Deprecated_header}} {{Non-standard_header}}</div> + +<h2 id="Sumário">Sumário</h2> + +<p>O elemento HTML Blink (<code><blink></code>) é um elemento não-padrão que faz com que o texto pisque lentamente.</p> + +<div class="warning"> +<p class="note"><strong>Aviso:</strong> Não use este elemento pois, além de não ser padrão, é <strong>obsoleto</strong>. Texto piscante é desaprovado por vários padrões de acessibilidade, e a especificação CSS permite que navegadores ignorem o valor "blink".</p> +</div> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Este elemento não é suportado, e portanto implementa a interface {{domxref("HTMLUnknownElement")}}.</p> + +<h2 id="Exemplo">Exemplo</h2> + +<pre class="brush:html"><blink>Why would somebody use this?</blink> +</pre> + +<h3 id="Resultado_(atenuado!)">Resultado (atenuado!)</h3> + +<p><img alt="Image:HTMLBlinkElement.gif" src="/@api/deki/files/247/=HTMLBlinkElement.gif"></p> + +<h2 id="Especificação">Especificação</h2> + +<p>Este elemento não é padrão e não faz parte de nenhuma especificação. Se você não acredita em nós,<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/obsolete.html#non-conforming-features"> veja por si mesmo na especificação HTML</a>.</p> + +<h2 id="Compatibilidade_entre_Navegadores">Compatibilidade entre Navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatNo}}</td> + <td>Até {{CompatGeckoDesktop("22.0")}}<br> + {{CompatNo}} a partir de {{CompatGeckoDesktop("23.0")}}</td> + <td>{{CompatNo}}</td> + <td>Até 12.1<br> + {{CompatNo}} a partir de 15.0</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatNo}}</td> + <td>Até {{CompatGeckoMobile("22.0")}}<br> + {{CompatNo}} a partir de {{CompatGeckoMobile("23.0")}}</td> + <td>{{CompatNo}}</td> + <td>Até 12.1<br> + {{CompatNo}} a partir de 15.0</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="http://www.montulli.org/theoriginofthe%3Cblink%3Etag">History of the creation of the HTML <code><blink></code> element</a>.</li> + <li>{{cssxref("text-decoration")}}, onde existe um valor "blink", embora os navegadores não sejam obrigados a fazê-lo piscar.</li> + <li>{{htmlelement("marquee")}}, outro elemento não-padrão semelhante.</li> + <li><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations" title="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">CSS animations</a> são o caminho correto para obter este efeito.</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/pt-br/web/html/element/blockquote/index.html b/files/pt-br/web/html/element/blockquote/index.html new file mode 100644 index 0000000000..8883bc62b5 --- /dev/null +++ b/files/pt-br/web/html/element/blockquote/index.html @@ -0,0 +1,153 @@ +--- +title: <blockquote> +slug: Web/HTML/Element/blockquote +tags: + - Elemento + - HTML + - MDN + - Referencia + - Web + - blogger + - português brasil + - tag +translation_of: Web/HTML/Element/blockquote +--- +<h2 id="Sumário">Sumário</h2> + +<p><span id="result_box" lang="pt"><span class="hps">O</span> Elemento <span class="hps">HTML</span> <span class="hps"><blockquote</span><span class="atn">> (</span><span>ou</span> Elemento <span class="hps">HTML </span></span><span lang="pt">de citação de bloco<span>) indica que o</span> <span class="hps">texto incluído</span> <span class="hps">é uma</span> <span class="hps">longa citação</span><span>.</span> <span class="hps">Normalmente</span><span>, este</span> <span class="hps">é processado</span> <span class="hps">visualmente</span> <span class="hps">pelo</span> <span class="hps">recuo</span> <span class="hps">(ver <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/blockquote#Notes">Notas</a></span> <span class="hps">sobre como</span> <span class="hps">mudá-lo</span><span>)</span><span>.</span> <span class="hps">A</span> <span class="hps">URL</span> <span class="hps">para a</span> <span class="hps">fonte da citação</span> <span class="hps">pode ser dada</span> <span class="hps">usando o atributo</span> <strong><span class="hps">cite</span></strong><span>,</span> <span class="hps">enquanto</span> <span class="hps">uma representação de texto</span> <span class="hps">da fonte</span> <span class="hps">pode ser dada</span> <span class="hps">usando o</span> </span>{{HTMLElement("cite")}}<span lang="pt"> <span class="hps">elemento.</span></span></p> + +<ul class="htmlelt"> + <li> </li> + <li><dfn><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categorias de conteúdo</a></dfn> <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Fluxo de conteúdo</a><span id="result_box" lang="pt"><span class="hps">,</span> <span class="hps">raiz</span> <span class="hps">selecionamento</span><span>,</span> <span class="hps">conteúdo</span> <span class="hps">palpável.</span></span></li> + <li><dfn>Conteúdo permitido</dfn> <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Phrasing_content">Fluxo de conteúdo</a>.</li> + <li><dfn>Tag Omissão</dfn> {{no_tag_omission}}</li> + <li><dfn>Elementos permitidos</dfn> + <div id="gt-src-tools"> + <div id="tts_button"><span class="short_text" id="result_box" lang="pt"><span class="hps">Qualquer elemento</span> <span class="hps">que aceita</span> <span class="hps">o <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content">fluxo de conteúdo.</a></span></span></div> + </div> + </li> + <li><dfn>Papéis ARIA permitidos</dfn>Qualquer</li> + <li><dfn>Interface DOM</dfn> {{domxref("HTMLQuoteElement")}}</li> +</ul> + +<h2 id="Atributos">Atributos</h2> + +<p><span style="line-height: 21px;">Este elemento inclui os <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">atributos globais</a>.</span></p> + +<dl> + <dt>{{htmlattrdef("cite")}}</dt> + <dd><span id="result_box" lang="pt"><span class="hps">Uma URL</span> <span class="hps">que designa</span> <span class="hps">um documento de origem</span> <span class="hps">ou mensagem para</span> <span class="hps">a informação</span> <span class="hps">citada</span><span>.</span> <span class="hps">Este atributo</span> <span class="hps">destina-se a</span> <span class="hps">apontar para</span> <span class="hps">informações explicando</span> <span class="hps">o contexto ou</span> <span class="hps">a referência para a</span> <span class="hps">cotação.</span></span></dd> +</dl> + +<h2 id="Notas">Notas</h2> + +<dl> + <dd> + <p>Para alterar o recuo de <code><blockquote></code>, use a propriedade <a href="https://developer.mozilla.org/en-US/docs/CSS">CSS</a> {{cssxref("margin")}}.</p> + + <p>Para citações curtas, use o elemento {{HTMLElement("q")}}.</p> + </dd> +</dl> + +<h2 id="Exemplo">Exemplo</h2> + +<pre class="brush: html language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>blockquote</span> <span class="attr-name token">cite</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://developer.mozilla.org<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Esta é uma citação tirada da + Mozilla Developer Center.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>blockquote</span><span class="punctuation token">></span></span></code></pre> + +<p><span id="result_box" lang="pt"><span class="hps">O código HTML acima vai resultar em:</span></span></p> + +<blockquote cite="http://developer.mozilla.org"> +<p><span id="result_box" lang="pt"><span class="hps">Esta é uma</span> <span class="hps">citação</span> <span class="hps">tirada</span> <span class="hps">da</span> <span class="hps">Mozilla Developer Center</span><span>.</span></span></p> +</blockquote> + +<h2 id="Specifications" name="Specifications">Especificação</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-blockquote-element', '<blockquote>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-blockquote-element', '<blockquote>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.2', '<blockquote>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_com_navegador">Compatibilidade com navegador</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="sect1"> </h2> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><span id="result_box" lang="pt"><span class="hps">O elemento</span> {{HTMLElement("q")}} <span class="hps">para</span> <span class="hps">citações em linha</span><span>.</span></span></li> + <li><span lang="pt"><span class="hps">O elemento</span> </span><span id="result_box" lang="pt">{{HTMLElement("q")}}</span><span lang="pt"> <span class="hps">para citações</span> <span class="hps">de origem.</span></span></li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/pt-br/web/html/element/body/index.html b/files/pt-br/web/html/element/body/index.html new file mode 100644 index 0000000000..5ce9c6e6c0 --- /dev/null +++ b/files/pt-br/web/html/element/body/index.html @@ -0,0 +1,232 @@ +--- +title: <body> +slug: Web/HTML/Element/body +tags: + - Elemento raiz + - Elemetos + - HTML + - Referências + - Seções + - Web +translation_of: Web/HTML/Element/body +--- +<p>{{HTMLRef}}</p> + +<p>O <strong>elemento </strong><code><body></code> do <strong>HTML </strong>representa o conteúdo de um documento HTML. è permitido apenas um <code><body></code> por documento.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="https://developer.mozilla.org/pt-BR/docs/Web/Guide/HTML/Categorias_de_conteudo">Categorias</a></th> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document#Sectioning_roots">Seção raiz</a>.</td> + </tr> + <tr> + <th scope="row">Conteúdo permitido</th> + <td><a href="https://developer.mozilla.org/pt-BR/docs/Web/Guide/HTML/Categorias_de_conteudo#Conte%C3%BAdo_de_fluxo">Conteúdo de fluxo</a>.</td> + </tr> + <tr> + <th scope="row"><dfn>Omissão de tag</dfn></th> + <td> + <p>A tag inicial pode ser omitida se a primeira coisa dentro do elemento não for um espaço, comentário, elemento {{HTMLElement("script")}} ou elemento {{HTMLElement("style")}}.</p> + + <p>A tag final pode ser omitida se o elemento body possuir conteúdo ou tem uma tag inicial e não é imediatamente seguida por um comentário.</p> + </td> + </tr> + <tr> + <th scope="row"><dfn>Elementos pais permitidos</dfn></th> + <td>Deve ser o segundo elemento de um elemento {{HTMLElement("html")}}.</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLBodyElement")}} + <ul> + <li>O elemento <code><body></code> expõe a interface {{domxref("HTMLBodyElement")}}.</li> + <li>Você pode acessar o elemento body através do atributo {{domxref("document.body")}}.</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Estes elementos incluem os <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> + +<dl> + <dt>{{htmlattrdef("alink")}} {{obsolete_inline}}</dt> + <dd>Cor do texto para hyperlinks quando selecionados. Esse método não está em conformidade, utilize a propriedade <em>{{cssxref("color")}} em conjunto com a pseudo-classe {{cssxref(":active")}} </em></dd> + <dt>{{htmlattrdef("background")}} {{obsolete_inline}}</dt> + <dd>URI de uma imagem para usar como um papel de parede. Esse método não está em conformidade, utilize a propriedade<em> CSS {{cssxref("background")}}.</em></dd> + <dt>{{htmlattrdef("bgcolor")}} {{obsolete_inline}}</dt> + <dd>Cor de fundo do documento. Esse método não está em conformidade, utilize a propriedade<em> CSS {{cssxref("background-color")}}.</em></dd> + <dt>{{htmlattrdef("bottommargin")}} {{obsolete_inline}}</dt> + <dd>The margin of the bottom of the body. Esse método não está em conformidade, utilize a propriedade<em> CSS {{cssxref("margin-bottom")}}.</em></dd> + <dt>{{htmlattrdef("leftmargin")}} {{obsolete_inline}}</dt> + <dd>The margin of the left of the body. Esse método não está em conformidade, utilize a propriedade<em> CSS {{cssxref("margin-left")}}.</em></dd> + <dt>{{htmlattrdef("link")}} {{obsolete_inline}}</dt> + <dd>Cor de textos de links não visitados. Esse método não está em conformidade, utilize o <em>{{cssxref("color")}} em conjunto com a pseudo-classe {{cssxref(":link")}}</em></dd> + <dt>{{htmlattrdef("onafterprint")}}</dt> + <dd>Função para chamar depois que o usuário solicitou a impressão do documento.</dd> + <dt>{{htmlattrdef("onbeforeprint")}}</dt> + <dd>Função para chamar quando o usuário solicita a impressão do documento.</dd> + <dt>{{htmlattrdef("onbeforeunload")}}</dt> + <dd>Função para chamar quando o documento está prestes a ser descarregado.</dd> + <dt>{{htmlattrdef("onblur")}}</dt> + <dd>Função para chamar quando o documento perde foco.</dd> + <dt>{{htmlattrdef("onerror")}}</dt> + <dd>Função para chamar quando o documento falha ao carregar corretamente.</dd> + <dt>{{htmlattrdef("onfocus")}}</dt> + <dd>Função para chamar quando o documento recebe foco.</dd> + <dt>{{htmlattrdef("onhashchange")}}</dt> + <dd>Function to call when the fragment identifier part (starting with the hash (<code>'#'</code>) character) of the document's current address has changed.</dd> + <dt>{{htmlattrdef("onlanguagechange")}} {{experimental_inline}}</dt> + <dd>Function to call when the preferred languages changed.</dd> + <dt>{{htmlattrdef("onload")}}</dt> + <dd>Função para chamar quando o documento terminar de carregar</dd> + <dt>{{htmlattrdef("onmessage")}}</dt> + <dd>Função para chamar quando o documento receber uma mensagem.</dd> + <dt>{{htmlattrdef("onoffline")}}</dt> + <dd>Função para chamar quando a conexão com a internet falha.</dd> + <dt>{{htmlattrdef("ononline")}}</dt> + <dd>Função para chamar quando a conexão com a internet é restaurada.</dd> + <dt>{{htmlattrdef("onpopstate")}}</dt> + <dd>Function to call when the user has navigated session history.</dd> + <dt>{{htmlattrdef("onredo")}}</dt> + <dd>Function to call when the user has moved forward in undo transaction history.</dd> + <dt>{{htmlattrdef("onresize")}}</dt> + <dd>Function to call when the document has been resized.</dd> + <dt>{{htmlattrdef("onstorage")}}</dt> + <dd>Function to call when the storage area has changed.</dd> + <dt>{{htmlattrdef("onundo")}}</dt> + <dd>Function to call when the user has moved backward in undo transaction history.</dd> + <dt>{{htmlattrdef("onunload")}}</dt> + <dd>Function to call when the document is going away.</dd> + <dt>{{htmlattrdef("rightmargin")}} {{obsolete_inline}}</dt> + <dd>The margin of the right of the body. <em>This method is non-conforming, use CSS {{cssxref("margin-right")}} property on the element instead.</em></dd> + <dt>{{htmlattrdef("text")}} {{obsolete_inline}}</dt> + <dd>Foreground color of text. <em>This method is non-conforming, use CSS {{cssxref("color")}} property on the element instead.</em></dd> + <dt>{{htmlattrdef("topmargin")}} {{obsolete_inline}}</dt> + <dd>The margin of the top of the body. <em>This method is non-conforming, use CSS {{cssxref("margin-top")}} property on the element instead.</em></dd> + <dt>{{htmlattrdef("vlink")}} {{obsolete_inline}}</dt> + <dd>Cor do texto para links já visitados. Esse método não está em conformidade, utilize a propriedade<em> CSS {{cssxref("color")}} em conjunto com a pseudo-classe {{cssxref(":visited")}}.</em></dd> +</dl> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-body-element', '<body>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Changed the list of non-conforming features.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-body-element', '<body>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Obsoleted the formerly deprecated attributes. Defined the behavior of the non-conforming and never standardized <code>margintop</code>, <code>marginleft</code>, <code>marginright</code> and <code>marginbottom</code>. Added the <code>on*</code> attributes.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.1', '<body>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Deprecated the <code>alink</code>, <code>background</code>, <code>bgcolor</code>, <code>link</code>, <code>text</code> and <code>vlink</code> attributes.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_dos_Browsers">Compatibilidade dos Browsers</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>onlanguagechange</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("32")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>bottommargin</code>, <code>leftmargin</code>, <code>rightmargin</code>, <code>topmargin</code> {{obsolete_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("35")}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>onlanguagechange</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("32")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>bottommargin</code>, <code>leftmargin</code>, <code>rightmargin</code>, <code>topmargin</code> {{obsolete_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("35")}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Was supported before this in Quirk Mode only.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{HTMLElement("html")}}</li> + <li>{{HTMLElement("head")}}</li> +</ul> diff --git a/files/pt-br/web/html/element/br/index.html b/files/pt-br/web/html/element/br/index.html new file mode 100644 index 0000000000..eacef2ed1d --- /dev/null +++ b/files/pt-br/web/html/element/br/index.html @@ -0,0 +1,153 @@ +--- +title: <br> +slug: Web/HTML/Element/br +translation_of: Web/HTML/Element/br +--- +<h2 id="Summary" name="Summary">Sumário</h2> + +<p>O elemento HTML <em>quebra-de-linha</em> <br> produz uma quebra de linha em um texto (carriage-return).É útil para escrever poemas ou um endereço, onde a divisão de linha é significante.</p> + +<p>Não use <br> para aumentar o espaço entre as linhas de texto; para isso use a propiedade <a href="/en-US/docs/CSS" title="CSS">CSS</a> {{cssxref('margin')}} ou o elemento {{HTMLElement("p")}}.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categorias de Conteúdo</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Conteúdo de Fluxo</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">conteúdo fraseado</a>.</td> + </tr> + <tr> + <th scope="row">Conteúdo permitido</th> + <td>Nenhum, é um {{Glossary("empty element")}}.</td> + </tr> + <tr> + <th scope="row">Omissão de tag</th> + <td>Deve ter uma tag de abertura, e não deve ter uma tag de fechamento. Em documentos XHTML , escreve esse elemento como <code><br /></code>.</td> + </tr> + <tr> + <th scope="row">Elementos pai permitidos</th> + <td>Qualquer elemento que aceita <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">conteúdo fraseado</a>.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLBRElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">Atributos</h2> + +<p>Este elemento inclue os <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">Atributos globais</a><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{htmlattrdef("clear")}} {{deprecatedGeneric('inline','HTML4.01')}} {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>Indica onde começar a próxima linha depois da quebra. + <div class="note"> + <p><strong>Nota de Uso: </strong>Este atributo está obsoleto em {{HTMLVersionInline(5)}} e <strong>Não deve ser usado por autores</strong>. Use a propiedade CSS {{CSSxref('clear')}} em vez disso.</p> + </div> + </dd> +</dl> + +<h2 id="Example" name="Example">Exemplo</h2> + +<pre class="brush: html">Mozilla Foundation<br> +1981 Landings Drive<br> +Building K<br> +Mountain View, CA 94043-0801<br> +USA +</pre> + +<p>Saída do HTML acima:</p> + +<p>Mozilla Foundation<br> + 1981 Landings Drive<br> + Building K<br> + Mountain View, CA 94043-0801<br> + USA</p> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-br-element', '<br>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-br-element', '<br>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.2.1', '<br>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade com o browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suporte Básico</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte Básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li>O elemento {{HTMLElement("address")}}</li> + <li>O elemento {{HTMLElement("p")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/pt-br/web/html/element/button/index.html b/files/pt-br/web/html/element/button/index.html new file mode 100644 index 0000000000..250bf44cfa --- /dev/null +++ b/files/pt-br/web/html/element/button/index.html @@ -0,0 +1,321 @@ +--- +title: <button> +slug: Web/HTML/Element/button +tags: + - Elemento + - Formulários HTML + - HTML + - Intermediário + - Referência(2) + - Web + - formulários +translation_of: Web/HTML/Element/button +--- +<h2 id="Sumário">Sumário</h2> + +<p>O <strong>Elemento HTML <em><code><button></code></em></strong> representa um botão clicável.</p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categorias de conteúdo</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Conteúdo de fluxo</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">conteúdo fraseado</a>, <a href="/en-US/docs/HTML/Content_categories#Interactive_content" title="HTML/Content categories#Interactive content">Conteúdo iterativo</a>, <a href="/en-US/docs/HTML/Content_categories#Form_listed" title="HTML/Content categories#Form listed">listado</a>, <a href="/en-US/docs/HTML/Content_categories#Form_labelable" title="HTML/Content categories#Form labelable">rotulável</a>, e elemento <a href="/en-US/docs/HTML/Content_categories#Form_submittable" title="HTML/Content categories#Form submittable">enviável</a> <a href="/en-US/docs/HTML/Content_categories#Form-associated_" title="HTML/Content categories#Form-associated ">associado a formulário</a>, conteúdo palpável.</li> + <li><dfn>Conteúdo permitido</dfn> <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Conteúdo fraseado</a>.</li> + <li><dfn>Omissão de Tag</dfn>Nenhuma, as tags de abertura e fechamento são obrigatórias.</li> + <li><dfn>Elementos pai permitidos</dfn> Qualquer elemento que aceite <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">conteúdo fraseado</a>.</li> + <li><dfn>Interface DOM</dfn> {{domxref("HTMLButtonElement")}}</li> + <li><dfn>Tipo de elemento</dfn> Inline</li> + <li></li> +</ul> + +<h2 id="Atributos">Atributos</h2> + +<p><span style="line-height: 21px;">Esse elemento inclui os </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">atributos globais</a><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{htmlattrdef("autofocus")}} {{HTMLVersionInline(5)}}</dt> + <dd>Esse atributo booleano permite-o especificar que o botão possuirá o foco de entrada assim que a página carrega, a menos que o usuário sobrecreva esse comportamento digitanto um controle diferente. Apenas um elemento de um documento associado a um formulário pode ter esse atributo específico.</dd> + <dt>{{htmlattrdef("autocomplete")}} {{non-standard_inline}}</dt> + <dd>O uso desse atributo em um {{HTMLElement("button")}} não está padronizado nem dentro das especificações do Firefox. Por padrão, diferente de outros navegadores, o <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">Firefox persiste com o estado dinâmico desativado</a> de um {{HTMLElement("button")}} nas páginas carregadas. Definir o valor desse atributo para <code>off</code> (ex: <code>autocomplete="off"</code>) desabilita esse recurso. Veja {{bug(654072)}}.</dd> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd> + <p>Esse atributo booleano indica que o usuário não poderá interagir com o botão. Se esse atributo não for especificado, o botão herdará a configuração do elemento que o contém, por exemplo {{HTMLElement("fieldset")}}, se não existir nenhum elemento com o atributo <strong>disabled</strong> definido, então o botão estará habilitado.</p> + + <p>Firefox irá, diferente de outros navegadores, por padrão, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persiste com o estado dinâmico desativado</a> de um {{HTMLElement("button")}} sob as páginas carregadas. Use o atributo {{htmlattrxref("autocomplete","button")}} para controlar esse recurso.</p> + </dd> + <dt>{{htmlattrdef("form")}} {{HTMLVersionInline(5)}}</dt> + <dd>O elemento de formulário que o botão está associado (é o <em>formulário proprietário</em>). O valor do atributo deve ser o atributo <strong>id</strong> de um elemento {{HTMLElement("form")}} no mesmo documento. Se esse atributo não for especificado, o elemento <code><button></code> deve ser descendente de um elemento de formulário. Esse atributo permite que você coloque elementos <code><button></code> em qualquer lugar do documento, não apenas como descendente de seus elementos {{HTMLElement("form")}}.</dd> + <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline(5)}}</dt> + <dd>A URI de um programa que processa a informação submetida pelo botão. Se especificado, ele sobrescreve o atributo {{htmlattrxref("action","form")}} do formulário proprietário do botão.</dd> + <dt>{{htmlattrdef("formenctype")}} {{HTMLVersionInline(5)}}</dt> + <dd>Se o botão é um botão de envio, esse atributo especifica o tipo de conteúdo que é usado para enviar o formulário para o servidor; Possíveis valores são: + <ul> + <li><code>application/x-www-form-urlencoded</code>: O valor padrão se o atributo não está especificado.</li> + <li><code>multipart/form-data</code>: Use esse valor se você está usando um elemento {{HTMLElement("input")}} com o atributo {{htmlattrxref("type","input")}} definido para o <code>arquivo</code>.</li> + <li><code>text/plain</code></li> + </ul> + + <p>Se esse atributo fro especificado, ele sobrescreve o atributo {{htmlattrxref("enctype","form")}} do formulário proprietário do botão.</p> + </dd> + <dt>{{htmlattrdef("formmethod")}} {{HTMLVersionInline(5)}}</dt> + <dd>Se o botão for um botão de envio, esse atributo especifica o método HTTP que o navegador usará para enviar o formulário. Possíveis valores são: + <ul> + <li><code>post</code>: Os dados obtidos do formulário são incluídos em seu corpo e enviados para o servidor.</li> + <li><code>get</code>: Os dados obtidos do formulário são anexados aos atributos URI do <strong>formulário</strong>, com uma '?' como separador, e o resultado URI é enviado para o servidor. Use esse método quando o formulário não possui efeitos colaterais e contém apenas caracteres ASCII.</li> + </ul> + + <p>Se especificado, esse atributo sobrescreve o atributo {{htmlattrxref("method","form")}} do formulário proprietário do botão.</p> + </dd> + <dt>{{htmlattrdef("formnovalidate")}} {{HTMLVersionInline(5)}}</dt> + <dd>Se o botão é um botão de envio, esse atributo Booleano especifica que o formulário não é para ser validado quando submetido. Se esse atributo for especificado, ele sobrescreve o atributo {{htmlattrxref("novalidate","form")}} do formulário proprietário do botão.</dd> + <dt>{{htmlattrdef("formtarget")}} {{HTMLVersionInline(5)}}</dt> + <dd>Se o botão é um botão de envio, esse atributo é um nome ou palavra-chave indicando onde exibir a resposta que é recebida após o envio do formulário. Esse é um nome de, ou palavra-chave para, um <em>contexto de navegação</em> (por exemplo, uma aba, janela ou quadro embutido). Se esse atributo é especificado, ele sobrescreve o atributo {{htmlattrxref("target", "form")}} do formulário proprietário do botão. As seguintes palavras-chaves possuem significados especiais: + <ul> + <li><code>_self</code>: Carrega a resposta no mesmo contexto navegação como o atual. Esse valor é o padrão se o atributo não é especificado.</li> + <li><code>_blank</code>: Carrega a resposta em um contexto de navegação sem nome.</li> + <li><code>_parent</code>: Carrega a resposta no contexto de navegação pai do atual. Se não há nenhum pai, essa opção passa a ser o mesmo que <code>_self</code>.</li> + <li><code>_top</code>: Carrega a resposta para o contexto de navegação no nível superior (ou seja, o contexto de navegação é um ancestral do atual e não possui nenhum pai). Se não possui nenhum pai, essa opção passa a agir da mesma forma que <code>_self</code>.</li> + </ul> + </dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>O nome do botão que é enviado com os dados do formulário.</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>O tipo de botão. O possíveis valores são: + <ul> + <li><code>submit</code>: O botão envia os dados do formulário para o servidor. Esse é o padrão se o atributo não for especifidado, ou se o atributo é dinamicamente mudado para um valor vazio ou inválido.</li> + <li><code>reset</code>: O botão restaura todos os controles para seus valores iniciais.</li> + <li><code>button</code>: O botão não possui comportamento padrão. Ele pode ter scripts do lado do cliente associado com os eventos do elemento, no qual são acionados quando o evento ocorrer.</li> + </ul> + </dd> + <dt>{{htmlattrdef("value")}}</dt> + <dd>O valor inicial do botão.</dd> + <dt></dt> +</dl> + +<h2 id="Examples" name="Examples">Notas</h2> + +<p>É muito mais fácil estilizar elementos <code><button></code> do que elementos {{HTMLElement("input")}}. Você pode adicionar conteúdo HTML (como <code><em></code>, <code><strong></code>, ou até <code><img></code>), e usar pseudo-elementos {{Cssxref("::after")}} e {{Cssxref("::before")}} para executar composições complexas, enquanto {{HTMLElement("input")}} aceita apenas um atributo <code>value</code> do tipo texto.</p> + +<h2 id="Example" name="Example">Exemplo</h2> + +<pre class="brush:html"><button name="button">Click me</button> +</pre> + +<p>{{ EmbedLiveSample('Example', 200, 64) }}</p> + +<p>Note que esse botão possui CSS aplicado.</p> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificações</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-button-element', '<button>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-button-element', '<button>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.5', '<button>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Atributo <code>formaction</code></td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Atributo <code>formenctype</code></td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.6</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Atributo <code>formmethod</code></td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Atributo <code>autofocus</code></td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>9.6</td> + <td>5.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Atributo <code>formaction</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Atributo <code>formenctype</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Atributo <code>formmethod</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Clicando_e_focando">Clicando e focando</h3> + +<p>Se um {{HTMLElement("button")}} é clicado, como efeito ele (por padrão) ganha o foco que varia de acordo com o navegador e o SO. O resultado para {{HTMLElement("input")}} do tipo <code>type="button"</code> e <code>type="submit"</code> são os mesmos.</p> + +<table> + <caption>Clicar em um {{HTMLElement("button")}} dá foco a ele?</caption> + <tbody> + <tr> + <td>Navegadores de Desktop</td> + <th>Windows 8.1</th> + <th>OS X 10.9</th> + </tr> + <tr> + <th>Firefox 30.0</th> + <td style="background-color: LawnGreen;">Sim</td> + <td style="background-color: red;">Não (nem com um<code> tabindex</code>)</td> + </tr> + <tr> + <th>Chrome 35</th> + <td style="background-color: LawnGreen;">Sim</td> + <td style="background-color: LawnGreen;">Sim</td> + </tr> + <tr> + <th>Safari 7.0.5</th> + <td style="background-color: silver;">N/A</td> + <td style="background-color: red;">Não (nem com um <code>tabindex</code>)</td> + </tr> + <tr> + <th>Internet Explorer 11</th> + <td style="background-color: LawnGreen;">Sim</td> + <td style="background-color: silver;">N/A</td> + </tr> + <tr> + <th>Presto (Opera 12)</th> + <td style="background-color: LawnGreen;">Sim</td> + <td style="background-color: LawnGreen;">Sim</td> + </tr> + </tbody> +</table> + +<table> + <caption>Tocar em um {{HTMLElement("button")}} dá foco a ele?</caption> + <tbody> + <tr> + <td>Navegadores Moveis</td> + <th>iOS 7.1.2</th> + <th>Android 4.4.4</th> + </tr> + <tr> + <th>Safari Mobile</th> + <td style="background-color: red;">Não (nem com um <code>tabindex</code>)</td> + <td style="background-color: silver;">N/A</td> + </tr> + <tr> + <th>Chrome 35</th> + <td style="background-color: red;">Não (nem com um <code>tabindex</code>)</td> + <td style="background-color: LawnGreen;">Sim</td> + </tr> + <tr> + </tr> + </tbody> +</table> + +<h2 id="Notas">Notas</h2> + +<p>Elementos <code><button></code> são muito mais fáceis estilizá-los do que elementos {{HTMLElement("input")}}. Você pode adicionar dentro do conteúdo do HTML (imagine em <code><em></code>, <code><strong></code> ou mesmo <code><img></code>), e fazer uso do pseudo-elemento {{Cssxref(":after")}} e {{Cssxref(":before")}} para realizar renderizações complexas enquanto {{HTMLElement("input")}} apenas aceita um atributo com valor textual.</p> + +<p>IE7 possui um bug ao enviar um formulário com <code><button type="submit" name="myButton" value="foo">Click me</button></code>, os dados POST enviados terá como resultado em <code>myButton=Click me</code> em vez de <code>myButton=foo</code>.<br> + IE6 possui um bug ainda pior quando enviado um formulário através de um botão por enviar TODOS os botões do formulário com o mesmo bug do IE7.<br> + Esse bug foi corrigido no IE8.</p> + +<p>Firefox adicionará, com propósitos de acessibilidade, uma pequena borda pontinhada e um botão focado. Essa borda será declarada por meio de CSS, no estilo do navegador, mas você pode sobrescreve-lo se necessário para adicionar seu próprio estilo de foco usando <code>button{{cssxref("::-moz-focus-inner")}} { }</code></p> + +<p>Firefox irá, diferente de outros navegadores, por padrão, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persistir o estado dinâmico desativado</a> de um {{HTMLElement("button")}} sob o carregamento das páginas. Definindo o valor do atributo {{htmlattrxref("autocomplete","button")}} para <code>off</code> desabilita esse recurso. See {{bug(654072)}}.</p> + +<p>Firefox <35 para Android define um padrão {{ cssxref("background-image") }} gradiente em todos os botões (see {{bug(763671)}}). Isso pode ser desabilitado usando <code>background-image: none</code>.</p> + +<h2 id="Veja_também">Veja também</h2> + +<p>Outros elementos que são usados para criar formulários: {{HTMLElement("form")}}, {{HTMLElement("datalist")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}},{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}}, {{HTMLElement("meter")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}.</p> + +<div>{{HTMLRef}}</div> diff --git a/files/pt-br/web/html/element/canvas/index.html b/files/pt-br/web/html/element/canvas/index.html new file mode 100644 index 0000000000..fc82268ae7 --- /dev/null +++ b/files/pt-br/web/html/element/canvas/index.html @@ -0,0 +1,130 @@ +--- +title: canvas +slug: Web/HTML/Element/canvas +translation_of: Web/HTML/Element/canvas +--- +<h2 id="Sumário">Sumário</h2> + +<p>O elemento HTML <em>Canvas</em> (<code><canvas></code>) pode ser utilizado para desenhar gráficos utilizando scripts (geralmente <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a>). Por exemplo, além de desenhar gráficos, ele pode ser usado para fazer composições de fotos e também para animações. Você poderá colocar conteúdos alternativos dentro do bloco <code><canvas></code>. Este conteúdo será renderizado também em navegadores antigos e em navegadores com JavaScript desabilitado.</p> + +<p>Para mais artigos sobre canvas, veja <a href="/en/HTML/Canvas" title="en/HTML/Canvas">canvas topic page</a>.</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td>Conteúdo permitido</td> + <td>Transparente, tanto <a href="/en/HTML/Content_categories#phrasing_content" title="en/HTML/Content categories#phrasing content">phrasing content</a> ou <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 tags</td> + <td>Nenhuma, tanto a tag de início quanto a de fim devem ser incluídas.</td> + </tr> + <tr> + <td>Elementos "pai" permitidos</td> + <td>Qualquer elemento que aceite <a href="/en/HTML/Content_categories#phrasing_content" title="en/HTML/Content categories#phrasing content">phrasing content</a> ou <a href="/en/HTML/Content_categories#flow_content" title="en/HTML/Content categories#flow content">flow content</a>. </td> + </tr> + <tr> + <td>Documento normativo</td> + <td><a class="external" href="http://www.w3.org/TR/html5/the-canvas-element.html#the-canvas-element" title="http://www.w3.org/TR/html5/the-canvas-element.html#the-canvas-element">HTML 5, section 4.8.10</a></td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Como qualquer outro elemento HTML, este também tem <a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">global attributes</a>.</p> + +<dl> + <dt>{{ htmlattrdef("width") }}</dt> + <dd> A largura do espaço em pixels CSS. O padrão é 300.</dd> + <dt>{{ htmlattrdef("height") }}</dt> + <dd>A altura do espaço em pixels CSS. O padrão é 150.</dd> +</dl> + +<p>{{ Note("The displayed size of the canvas can be changed using a stylesheet. The image is scaled during rendering to fit the styled size.") }}</p> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<ul> + <li><a href="/en/DOM/HTMLCanvasElement" title="en/DOM/HTMLCanvasElement">HTMLCanvasElement</a></li> +</ul> + +<h2 id="Exemplo">Exemplo</h2> + +<pre class="brush: html"><<span class="start-tag">canvas</span><span class="attribute-name"> id</span>=<span class="attribute-value">"canvas" </span><span class="attribute-name">width</span>=<span class="attribute-value">"300" </span><span class="attribute-name">height</span>=<span class="attribute-value">"300"</span>> + Desculpe-me, seu navegador não suporta o elemento &<span class="entity">lt;</span>canvas&<span class="entity">gt;</span>. +</<span class="end-tag">canvas</span>> +</pre> + +<h2 id="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatGeckoDesktop("1.8") }}</td> + <td>1.0</td> + <td>9.0</td> + <td><a class="external" href="http://www.opera.com/docs/changelogs/windows/900/" title="http://www.opera.com/docs/changelogs/windows/900/">9.0</a></td> + <td><a class="external" href="http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/HTML-canvas-guide/Introduction/Introduction.html" title="http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/HTML-canvas-guide/Introduction/Introduction.html">2.0</a></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatGeckoMobile("1.8") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Notas_específicas_sobre_navegadores">Notas específicas sobre navegadores</h3> + +<h4 id="Firefox_(Gecko)">Firefox (Gecko)</h4> + +<ul> + <li>Antes do Gecko 5.0 {{ geckoRelease("5.0") }}, a altura e a largura do elemento canvas eram <em>integers</em> verificados.</li> + <li>Anteriormente ao Gecko 6.0 {{ geckoRelease("6.0") }}, um elemento {{ HTMLElement("canvas") }} com altura e largura iguais a zero eram renderizados como se tivesse as dimensões padrão.</li> + <li>Antes do Gecko 12.0 {{ geckoRelease("12.0") }}, se o JavaScript estivesse desabilitado, o elemento <code><canvas></code> era renderizado ao invés de mostrar o conteúdo de <em>fallback</em>, conforme a <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html">specification</a>.</li> +</ul> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en/HTML/Canvas" title="https://developer.mozilla.org/en/HTML/Canvas">MDN canvas portal</a></li> + <li>Um <a href="/en/Canvas_tutorial" title="Canvas tutorial">canvas tutorial</a></li> + <li><a class="external" href="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html" title="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html">Canvas cheat sheet</a></li> + <li><a href="/en-US/demos/tag/tech:canvas" title="https://developer.mozilla.org/en-US/demos/tag/tech:canvas/">Canvas-related demos</a></li> +</ul> + +<p>{{ languages( { "de": "de/HTML/Element/canvas", "en": "en/HTML/Element/canvas", "es": "es/HTML/Elemento/canvas", "ja": "ja/HTML/Element/canvas", "ko": "ko/HTML/Element/canvas", "nl": "nl/HTML/HTML_Tags/canvas", "pl": "pl/HTML/Element/canvas", "ru": "Ru/HTML/Element/canvas", "zh-cn": "cn/HTML/Element/canvas", "fr": "fr/HTML/Element/canvas" } ) }}</p> diff --git a/files/pt-br/web/html/element/caption/index.html b/files/pt-br/web/html/element/caption/index.html new file mode 100644 index 0000000000..0100a868d4 --- /dev/null +++ b/files/pt-br/web/html/element/caption/index.html @@ -0,0 +1,196 @@ +--- +title: <caption> +slug: Web/HTML/Element/caption +tags: + - Elementos + - Tabela HTML + - Título de tabela + - título +translation_of: Web/HTML/Element/caption +--- +<h2 id="Sumário">Sumário</h2> + +<p>O <strong>Elemento</strong> <strong>HTML <code><caption></code> (</strong>ou <em>Elemento HTML Subtitulo de Tabela</em>) representa o título de uma tabela. Embora ele seja sempre o primeiro filho de um {{HTMLElement("table")}}, seu estilo, usando CSS pode colocar ele em qualquer lugar relativo a tabela.</p> + +<div class="note"><strong>Nota de Uso</strong>: Quando o elemento {{HTMLElement("table")}} que é o pai deste {{HTMLElement("caption")}} é o único filho de um elemento {{HTMLElement("figure")}}, use o elemento {{HTMLElement("figcaption")}} no lugar.</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categoria de conteúdo</a></th> + <td>Nenhuma.</td> + </tr> + <tr> + <th scope="row">Conteúdo permitido</th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="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">Elementos pais permitidos</th> + <td>Um elemento {{HTMLElement("table")}}, como seu primeiro filho.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLTableCaptionElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento inclui os <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">atributos globais</a>.</p> + +<p> </p> + +<h3 id="Atributos_obsoletos">Atributos obsoletos</h3> + +<p>Os seguintes atributos são obsoletos e não devem ser usados. Estão documentados abaixo apenas como referência ao atualizar o código, e interesse histórico.</p> + +<p> </p> + +<dl> + <dt>{{htmlattrdef("align")}} {{deprecatedGeneric('inline','HTML4.01')}} {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>Esse atributo enumerado indica como o caption deve ser alinhado em relação a tabela. Ele pode ter os seguintes valores: + <ul> + <li><code>left</code>, exibido a esquerda da tabela</li> + <li><code>top</code>, exibido antes da tabela</li> + <li><code>right</code>, exibido a direita da tabela</li> + <li><code>bottom</code>, exibido abaixo da tabela</li> + </ul> + + <div class="note"><strong>Nota de uso: </strong>Não use este atributo, como ele foi depreciado: o elemento {{HTMLElement("caption")}} deve ser estilizado usando <a href="/en-US/docs/CSS" title="CSS">CSS</a>. Para dar um efeito similar ao atributo <code>align</code>, use as propriedades <a href="/en-US/docs/CSS" title="CSS">CSS</a> {{cssxref("caption-side")}} e {{cssxref("text-align")}}.</div> + </dd> +</dl> + +<h2 id="Notas_de_uso">Notas de uso</h2> + +<p>Quando o elemento {{HTMLElement("table")}} que contém o <caption> é o único descendente de um elemento {{HTMLElement("figure")}}, você deve usar o {{HTMLElement("figcaption")}} elemento em vez de <caption>.</p> + +<h2 id="Exemplo">Exemplo</h2> + +<p>Esse exemplo mostra uma tabela que tem título.</p> + +<pre><code><table> + <caption>Exemplo de título</caption> + <tr> + <th>Login</th> + <th>Email</th> + </tr> + <tr> + <td>usuario1</td> + <td>usuario1@dominio.com</td> + </tr> + <tr> + <td>usuario2</td> + <td>usuario2@dominio.com</td> + </tr> +</table></code></pre> + +<pre><code>caption { + caption-side: top; + align: right; +} +table { + border-collapse: collapse; + border-spacing: 0px; +} +table, th, td { + border: 1px solid black; +}</code></pre> + +<p>{{EmbedLiveSample('Exemplo', 650, 100)}}</p> + +<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('HTML WHATWG', 'tables.html#the-caption-element', '<caption>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-caption-element', '<caption>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/tables.html#h-11.2.2', '<caption>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte Básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte Básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>Outros elementos HTML relacionados ao elemento table: {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};</li> + <li>Propriedades CSS que pode ser especialmente utéis para estilizar o elemento {{HTMLElement("caption")}}: + <ul> + <li>{{cssxref("text-align")}}, {{cssxref("caption-side")}}.</li> + </ul> + </li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/pt-br/web/html/element/center/index.html b/files/pt-br/web/html/element/center/index.html new file mode 100644 index 0000000000..5dd930cedd --- /dev/null +++ b/files/pt-br/web/html/element/center/index.html @@ -0,0 +1,69 @@ +--- +title: '<center>: O elemento de texto centralizado (obsoleto)' +slug: Web/HTML/Element/center +tags: + - Alinhamento de Texto + - Elemento + - HTML + - Obsoleto + - Referencia + - Texto + - Web + - alinhamento + - center +translation_of: Web/HTML/Element/center +--- +<div>{{obsolete_header()}}</div> + +<p><span class="seoSummary">O elemento <strong>Center do HTML</strong> (<strong><code><center></code></strong>) se tornou obsoleto, é um <a href="/pt-BR/docs/Web/HTML/Elementos_block-level" title="HTML/Block-level_elements">elemento de nível de bloco</a> que exibe o conteúdo em nível de bloco ou em linha centralizado horizontalmente dentro do elemento que o contém.</span> O contêiner {{HTMLElement ("body")}} geralmente está presente, mas não é necessário. Essa tag foi descontinuada no HTML 4 (e XHTML 1) em favor da propriedade CSS {{Cssxref ("text-align")}}, que pode ser aplicada ao elemento {{HTMLElement ("div")}} ou à um paragráfo indivídual {{HTMLElement ("p")}}. Para blocos de centralização, use outras propriedades CSS como {{Cssxref ("margin-left")}} e {{Cssxref ("margin-right")}} e defina-as como <code>auto</code> (ou defina {{Cssxref ("margin") }} para <code>0 auto</code>).</p> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Este elemento implementa a interface {{domxref("HTMLElement")}}.</p> + +<div class="note"> +<p><strong>Nota de implementação:</strong> até o Gecko 1.9.2 inclusive, o Firefox implementa a interface {{domxref("HTMLSpanElement")}} para este elemento.</p> +</div> + +<h2 id="Example_1" name="Example_1">Exemplo 1</h2> + +<pre class="brush: html notranslate"><center>Esse texto vai ficar centralizado. +<p>Este parágrafo também.</p></center> +</pre> + +<p>O efeito da centralização vai acontecer até onde o elemento <code>center</code> for fechado.</p> + +<h2 id="Example_2" name="Example_2">Exemplo 2 (Alternativa CSS)</h2> + +<pre class="brush: html notranslate"><div style="text-align:center">Esse texto vai ficar centralizado. +<p>Este parágrafo também.</p></div> +</pre> + +<p>Isso acontece por os textos que sofreram as alterações estão dentro dos elementos que foi aplicado a propriedade.</p> + +<h2 id="Example_3" name="Example_3">Exemplo 3 (Alternativa CSS)</h2> + +<pre class="brush: html notranslate"><p style="text-align:center">Essa linha vai ficar centralizada.<br> +E esta linha também.</p> +</pre> + +<h2 id="Notes" name="Notes">Nota</h2> + +<p>Aplicar {{Cssxref("text-align")}}<code>:center</code> a um elemento {{HTMLElement("div")}} ou {{HTMLElement("p")}} centraliza o <em>conteúdo</em> desses elementos, deixando suas dimensões gerais inalteradas.</p> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + +<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você gostaria de contribuir com os dados, verifique <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos envie uma solicitação de pull.</div> + +<p>{{Compat("html.elements.center")}}</p> + +<p>Apesar de obsoleto, o elemento é aceito em todos os navegadores do mercado.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{Cssxref("text-align")}}</li> + <li>{{Cssxref("display")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/pt-br/web/html/element/cite/index.html b/files/pt-br/web/html/element/cite/index.html new file mode 100644 index 0000000000..48e43bd17a --- /dev/null +++ b/files/pt-br/web/html/element/cite/index.html @@ -0,0 +1,149 @@ +--- +title: <cite> +slug: Web/HTML/Element/cite +translation_of: Web/HTML/Element/cite +--- +<p>O <strong>elemento</strong> <strong>HTML <cite> </strong>representa uma referência a um trabalho artístico. Deve incluir o título do trabalho ou uma URL de referência, que pode ser em uma forma abreviada de acordo com as convenções usadas para a adição dos metadados de citação.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</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#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>Any</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the {{domxref("HTMLSpanElement")}} interface for this element.</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento inclui apenas <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">atributos globais</a>.</p> + +<h2 id="Notas">Notas</h2> + +<ul> + <li>Um trabalho criativo deve conter a citação de um livro,um documento,um ensaio,um poema,um filme,um programa de televisão,um video game,uma escultura,uma pintura,uma produção cinematográfica,um jogo,uma opera,um musical,uma exibição,um relatório de um caso legal,um programa de computador,um website,uma página da web,um post de um blog ou comentário,um post em um forum ou um comentário no mesmo,um tweet,uma obra ou discurso,etc.</li> + <li>O W3C específica alguns estados para referenciar um trabalho criativo que deve incluir o nome do autor,enquanto a WHATWG declarou que não deve ser incluso o nome do autor sob nenhuma circustância.</li> + <li>Use o atributo {{htmlattrxref("cite", "blockquote")}} em um elemento {{HTMLElement("blockquote")}} ou {{HTMLElement("q")}} para referenciar uma fonte online.</li> + <li>Para evitar que o itálico padrão do estilo seja usado pelo elemento <cite> use a propiedade {{cssxref("font-style")}} do CSS.</li> + <li>To avoid the default italic style from being used for the <cite> element use the <a href="/en-US/docs/CSS" title="CSS docs">CSS</a> {{cssxref("font-style")}} property.</li> +</ul> + +<h2 id="Exemplo">Exemplo</h2> + +<pre class="brush: html notranslate">Mais infirmações podem ser encontrada em <cite>[ISO-0000]</cite>.</pre> + +<p>A saída do HTML acima:</p> + +<p>Mais infirmações podem ser encontrada em <cite>[ISO-0000].</cite></p> + +<h2 id="Especificação">Especificação</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specificação</th> + <th scope="col">Estado</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-cite-element', '<cite>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-cite-element', '<cite>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<cite>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Navegadores_compatíveis">Navegadores compatíveis</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>O elemento {{HTMLElement("blockquote")}} é para citações longas.</li> + <li>O elemento {{HTMLElement("q")}} é para citações curtas ou na mesma linha.</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/pt-br/web/html/element/code/index.html b/files/pt-br/web/html/element/code/index.html new file mode 100644 index 0000000000..062315a7c9 --- /dev/null +++ b/files/pt-br/web/html/element/code/index.html @@ -0,0 +1,108 @@ +--- +title: '<code>: O Elemento Inline Code' +slug: Web/HTML/Element/code +translation_of: Web/HTML/Element/code +--- +<div>{{HTMLRef}}</div> + +<p id="Summary"><span class="seoSummary">O <strong>elemento</strong> <strong>HTML <code><code></code> </strong>apresenta seu conteúdo estilizado de maneira a indicar que o texto é um pequeno fragmento de código. Por padrão</span>, o conteúdo é exibido utilizando a fonte monoespaçada padrão do {{Glossary("user agent", "user agent's")}}.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/code.html", "tabbed-shorter")}}</div> + + + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>Any</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the {{domxref("HTMLSpanElement")}} interface for this element.</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Esse elemento inclui apenas os <a href="/en-US/docs/Web/HTML/Global_attributes" title="HTML/Global attributes">global attributes</a>.</p> + +<h2 id="Exemplo">Exemplo</h2> + +<p>Um parágrafo que inlcui <code><code></code>:</p> + +<pre class="brush: html"><p>A função <code>selectAll()</code> destaca todo o texto no +campo de entrada então o usuário pode, por exemplo, copiar ou deletar o texto.</p> +</pre> + +<p>A sainda gerada por esse trecho HTML se parece com isso:</p> + +<p>{{EmbedLiveSample("Example", 640, 70)}}</p> + +<h2 id="Notas">Notas</h2> + +<p>Para representar múltiplas linha de código, envolva o elemento <code><code></code> dentro do elemento {{HTMLElement("pre")}}. O elemento <code><code></code> por si só representa somente uma única senteça ou linha de código.</p> + +<p>Uma regra CSS pode ser definida para o seletor <code>code</code> para sobrescrever a fonte padrão do navegador. Preferências definidas pelo usuário podem ter precedência sore o CSS especifciado.</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-code-element', '<code>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-code-element', '<code>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<code>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h2> + + + +<p>{{Compat("html.elements.code")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{HTMLElement("samp")}}</li> + <li>{{HTMLElement("kbd")}}</li> + <li>{{HTMLElement("command")}} (deprecated)</li> + <li>{{HTMLElement("var")}}</li> + <li>{{HTMLElement("pre")}}</li> +</ul> diff --git a/files/pt-br/web/html/element/col/index.html b/files/pt-br/web/html/element/col/index.html new file mode 100644 index 0000000000..68a7aec035 --- /dev/null +++ b/files/pt-br/web/html/element/col/index.html @@ -0,0 +1,230 @@ +--- +title: <col> +slug: Web/HTML/Element/col +translation_of: Web/HTML/Element/col +--- +<div>{{HTMLRef}}</div> + +<div>O elemento <strong>HTML <code><col></code> </strong>define uma tabela contendo colunas e sendo utilizada para definições semanticas em todas as colunas comuns. É normalmente encontrada dentro do elemento("colgroup")}} .</div> + +<div>Este elemento permite a estilização de colunas utilizando-se do CSS, porém apenas um numero pequeno de atributos que terão efeito dentro das colunas (<a href="https://www.w3.org/TR/CSS21/tables.html#columns">veja as especificações do CSS 2.1</a> a partir dessa lista).</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Content categories</a></th> + <td>None.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td>None, it is an {{Glossary("empty element")}}.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>The start tag is mandatory, but, as it is a void element, the use of an end tag is forbidden.</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>{{HTMLElement("colgroup")}} only, though it can be implicitly defined as its start tag is not mandatory. The {{HTMLElement("colgroup")}} must not have a {{htmlattrxref("span", "colgroup")}} attribute.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>None</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLTableColElement")}}</td> + </tr> + </tbody> +</table> + +<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("align")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd>This enumerated attribute specifies how horizontal alignment of each column cell content will be handled. Possible values are: + <ul> + <li><code>left</code>, aligning the content to the left of the cell</li> + <li><code>center</code>, centering the content in the cell</li> + <li><code>right</code>, aligning the content to the right of the cell</li> + <li><code>justify</code>, inserting spaces into the textual content so that the content is justified in the cell</li> + <li><code>char</code>, aligning the textual content on a special character with a minimal offset, defined by the {{htmlattrxref("char", "col")}} and {{htmlattrxref("charoff", "col")}} attributes {{unimplemented_inline(2212)}}.</li> + </ul> + + <p>If this attribute is not set, its value is inherited from the {{htmlattrxref("align", "colgroup")}} of the {{HTMLElement("colgroup")}} element this <code><col></code> element belongs too. If there are none, the <code>left</code> value is assumed.</p> + + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (not supported) in the latest standard. + + <ul> + <li>To achieve the same effect as the <code>left</code>, <code>center</code>, <code>right</code> or <code>justify</code> values: + + <ul> + <li>Do not try to set the {{cssxref("text-align")}} property on a selector giving a {{HTMLElement("col")}} element. Because {{HTMLElement("td")}} elements are not descendant of the {{HTMLElement("col")}} element, they won't inherit it.</li> + <li>If the table doesn't use a {{htmlattrxref("colspan", "td")}} attribute, use the <code>td:nth-child(an+b)</code> CSS selector. Set <code>a</code> to zero and <code>b </code>to the position of the column in the table, e.g. <code>td:nth-child(2) { text-align: right; }</code> to right-align the second column.</li> + <li>If the table does use a {{htmlattrxref("colspan", "td")}} attribute, the effect can be achieved by combining adequate CSS attribute selectors like <code>[colspan=n]</code>, though this is not trivial.</li> + </ul> + </li> + <li>To achieve the same effect as the <code>char</code> value, in CSS3, you can use the value of the {{htmlattrxref("char", "col")}} as the value of the {{cssxref("text-align")}} property {{unimplemented_inline}}.</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt> + <dd>This attribute defines the background color of each cell of the column. It is one of the 6-digit hexadecimal code as defined in <a class="external" href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>, prefixed by a '#'. One of the sixteen predefined color strings may be used: + <table style="width: 80%;"> + <tbody> + <tr> + <td style="background-color: black; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>black</code> = "#000000"</td> + <td style="background-color: green; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>green</code> = "#008000"</td> + </tr> + <tr> + <td style="background-color: silver; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>silver</code> = "#C0C0C0"</td> + <td style="background-color: lime; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>lime</code> = "#00FF00"</td> + </tr> + <tr> + <td style="background-color: gray; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>gray</code> = "#808080"</td> + <td style="background-color: olive; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>olive</code> = "#808000"</td> + </tr> + <tr> + <td style="background-color: white; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>white</code> = "#FFFFFF"</td> + <td style="background-color: yellow; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>yellow</code> = "#FFFF00"</td> + </tr> + <tr> + <td style="background-color: maroon; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>maroon</code> = "#800000"</td> + <td style="background-color: navy; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>navy</code> = "#000080"</td> + </tr> + <tr> + <td style="background-color: red; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>red</code> = "#FF0000"</td> + <td style="background-color: blue; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>blue</code> = "#0000FF"</td> + </tr> + <tr> + <td style="background-color: purple; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>purple</code> = "#800080"</td> + <td style="background-color: teal; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>teal</code> = "#008080"</td> + </tr> + <tr> + <td style="background-color: fuchsia; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>fuchsia</code> = "#FF00FF"</td> + <td style="background-color: aqua; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>aqua</code> = "#00FFFF"</td> + </tr> + </tbody> + </table> + + <div class="note"><strong>Usage note:</strong> Do not use this attribute, as it is non-standard and only implemented in some versions of Microsoft Internet Explorer: the {{HTMLElement("col")}} element should be styled using <a href="/en-US/docs/CSS">CSS</a>. To give a similar effect to the <strong>bgcolor</strong> attribute, use the <a href="/en-US/docs/CSS">CSS</a> property {{cssxref("background-color")}}, on the relevant {{HTMLElement("td")}} elements.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("char")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd>This attribute is used to set the character to align the cells in a column on. Typical values for this include a period (.) when attempting to align numbers or monetary values. If {{htmlattrxref("align", "col")}} is not set to <code>char</code>, this attribute is ignored. + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard. To achieve the same effect as the {{htmlattrxref("char", "col")}}, in CSS3, you can use the character set using the {{htmlattrxref("char", "col")}} attribute as the value of the {{cssxref("text-align")}} property {{unimplemented_inline}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd>This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the <strong>char</strong> attribute. + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("span")}}</dt> + <dd>This attribute contains a positive integer indicating the number of consecutive columns the <code><col></code> element spans. If not present, its default value is <code>1</code>.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("valign")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd>This attribute specifies the vertical alignment of the text within each cell of the column. Possible values for this attribute are: + <ul> + <li><code>baseline</code>, which will put the text as close to the bottom of the cell as it is possible, but align it on the <a class="external" href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">baseline</a> of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as <code>bottom</code>.</li> + <li><code>bottom</code>, which will put the text as close to the bottom of the cell as it is possible;</li> + <li><code>middle</code>, which will center the text in the cell;</li> + <li>and <code>top</code>, which will put the text as close to the top of the cell as it is possible.</li> + </ul> + + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard: + + <ul> + <li>Do not try to set the {{cssxref("vertical-align")}} property on a selector giving a {{HTMLElement("col")}} element. Because {{HTMLElement("td")}} elements are not descendant of the {{HTMLElement("col")}} element, they won't inherit it.</li> + <li>If the table doesn't use a {{htmlattrxref("colspan", "td")}} attribute, use the <code>td:nth-child(an+b)</code> CSS selector where a is the total number of the columns in the table and b is the ordinal position of the column in the table. Only after this selector the {{cssxref("vertical-align")}} property can be used.</li> + <li>If the table does use a {{htmlattrxref("colspan", "td")}} attribute, the effect can be achieved by combining adequate CSS attribute selectors like <code>[colspan=n]</code>, though this is not trivial.</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("width")}} {{obsolete_inline("html5")}}</dt> + <dd>This attribute specifies a default width for each column in the current column group. In addition to the standard pixel and percentage values, this attribute might take the special form <code>0*</code>, which means that the width of each column in the group should be the minimum width necessary to hold the column's contents. Relative widths such as <code>0.5*</code> also can be used.</dd> +</dl> + +<h2 id="Exemplo">Exemplo</h2> + +<p>Please see the {{HTMLElement("table")}} page for examples on <code><col></code>.</p> + +<h2 id="Especificação">Especificação</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'tables.html#the-col-element', '<col>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-col-element', '<col>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/tables.html#h-11.2.4.2', '<col>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_com_Demais_Navegadores">Compatibilidade com Demais Navegadores</h2> + + + +<p>{{Compat("html.elements.col")}}</p> + +<h2 id="Veja_Também">Veja Também</h2> + +<ul> + <li>Other table-related HTML elements: {{HTMLElement("caption")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};</li> + <li>CSS properties and pseudo-classes that may be specially useful to style the <code><col></code> element: + <ul> + <li>the {{cssxref("width")}} property to control the width of the column;</li> + <li>the {{cssxref(":nth-child")}} pseudo-class to set the alignment on the cells of the column;</li> + <li>the {{cssxref("text-align")}} property to align all cells content on the same character, like '.'.</li> + </ul> + </li> +</ul> diff --git a/files/pt-br/web/html/element/command/index.html b/files/pt-br/web/html/element/command/index.html new file mode 100644 index 0000000000..99a42fb9db --- /dev/null +++ b/files/pt-br/web/html/element/command/index.html @@ -0,0 +1,129 @@ +--- +title: command +slug: Web/HTML/Element/command +translation_of: Web/HTML/Element/command +--- +<h2 class="editable" id="Sumário">Sumário</h2> + +<p>O elemento <code>command </code>representa um comando que o usuário pode chamar.</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td>Categorias de conteúdo</td> + <td><a href="/en/HTML/Content_categories#Flow_content" title="en/HTML/Content categories#Flow content">Flow content</a>, <a href="/en/HTML/Content_categories#Phrasing_content" title="en/HTML/Content categories#Phrasing content">phrasing content</a></td> + </tr> + <tr> + <td>Elementos permitidos</td> + <td>Nenhum, é um elemento vazio.</td> + </tr> + <tr> + <td>Omissão de tag</td> + <td>Deve ter uma tag inicial, mas não deve ter uma tag final.</td> + </tr> + <tr> + <td>Elementos pais permitidos</td> + <td>Qualquer elemento que aceite <a href="/en/HTML/Content_categories#Phrasing_content" title="https://developer.mozilla.org/en/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <td>Documento normativo</td> + <td><a class="external" href="http://dev.w3.org/html5/spec/Overview.html#the-command" title="http://dev.w3.org/html5/spec/Overview.html#the-command">HTML5, section 4.11.3</a></td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Como todos ou outros elementos HTML, esse elemento suporta os <a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">global attributes</a>.</p> + +<dl> + <dt>{{ htmlattrdef("checked") }}</dt> + <dd>Indica se o comando está selecionado ou não. Deve ser omitido a não ser que o atributo <code>type</code> seja <code>checkbox </code>ou <code>radio</code>.</dd> + <dt>{{ htmlattrdef("disabled") }}</dt> + <dd>Indica que o elemento não está disponível.</dd> + <dt>{{ htmlattrdef("icon") }}</dt> + <dd>Atribui uma figura para representar o comando.</dd> + <dt>{{ htmlattrdef("label") }}</dt> + <dd>O nome do comando, como será mostrado para o usuário.</dd> + <dt>{{ htmlattrdef("radiogroup") }}</dt> + <dd>Esse atributo dá o nome de um grupo de comandos, com <code>type</code> sendo <code>radio</code>, que vai ser ativado quando o comando for ativado. Esse atributo deve ser omitido a não ser que o atributo <code>type</code> seja <code>radio</code>.</dd> + <dt>{{ htmlattrdef("type") }}</dt> + <dd>Esse atributo indica o tipo do comando. Pode ter somente os seguintes valores: + <ul> + <li> + <p><code>command</code> ou vazio que é o estado padrão e indica que é um comando normal.</p> + </li> + <li> + <p><code>checkbox</code> indica que o comando pode ser alternado utilizando uma caixa de seleção.</p> + </li> + <li> + <p><code>radio</code> indica que o comando pode ser alternado utilizando uma radiobutton.</p> + </li> + </ul> + </dd> +</dl> + +<h2 id="Interface_do_DOM">Interface do DOM</h2> + +<p>Esse elemetno implementa a interface <code><a href="/en/DOM/HTMLCommandElement" rel="internal">HTMLCommandElement</a></code>.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush: html"><command type="command" label="Save" icon="icons/save.png" onclick="save()"> +</pre> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> + +<p>{{ languages( { "zh-cn": "zh-cn/HTML/Element/command" } ) }}</p> diff --git a/files/pt-br/web/html/element/conteúdo/index.html b/files/pt-br/web/html/element/conteúdo/index.html new file mode 100644 index 0000000000..1a1832de04 --- /dev/null +++ b/files/pt-br/web/html/element/conteúdo/index.html @@ -0,0 +1,101 @@ +--- +title: '<content>: The Shadow DOM Content Placeholder element (obsolete)' +slug: Web/HTML/Element/conteúdo +translation_of: Web/HTML/Element/content +--- +<div>{{Deprecated_header}}</div> + +<p><span class="seoSummary">The <strong>HTML <code><content></code> element</strong>—an obsolete part of the <a href="/en-US/docs/Web/Web_Components">Web Components</a> suite of technologies—was used inside of <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">Shadow DOM</a> as an {{glossary("insertion point")}}, and wasn't meant to be used in ordinary HTML.</span> It has now been replaced by the {{HTMLElement("slot")}} element, which creates a point in the DOM at which a shadow DOM can be inserted.</p> + +<div class="note"> +<p><strong>Note: </strong>Though present in early draft of the specifications and implemented in several browsers, this element has been removed in later versions of the spec, and should not be used. It is documented here to assist in adapting code written during the time it was included in the spec to work with newer versions of the specification.</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Transparent_content_model" title="HTML/Content_categories#Transparent_content_model">Transparent content</a>.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parent elements</th> + <td>Any element that accepts flow content.</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLContentElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">Attributes</h2> + +<p>This element includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> + +<dl> + <dt><code>select</code></dt> + <dd>A comma-separated list of selectors. These have the same syntax as CSS selectors. They select the content to insert in place of the <code><content></code> element.</dd> +</dl> + +<h2 id="Example">Example</h2> + +<p>Here is a simple example of using the <code><content></code> element. It is an HTML file with everything needed in it.</p> + +<div class="note"> +<p><strong>Note:</strong> For this code to work, the browser you display it in must support Web Components. See <a href="/en-US/docs/Web/Web_Components#Enabling_Web_Components_in_Firefox">Enabling Web Components in Firefox</a>.</p> +</div> + +<pre class="brush: html"><html> + <head></head> + <body> + <!-- The original content accessed by <content> --> + <div> + <h4>My Content Heading</h4> + <p>My content text</p> + </div> + + <script> + // Get the <div> above. + var myContent = document.querySelector('div'); + // Create a shadow DOM on the <div> + var shadowroot = myContent.createShadowRoot(); + // Insert into the shadow DOM a new heading and + // part of the original content: the <p> tag. + shadowroot.innerHTML = + '<h2>Inserted Heading</h2> <content select="p"></content>'; + </script> + + </body> +</html> +</pre> + +<p>If you display this in a web browser it should look like the following.</p> + +<p><img alt="content example" src="https://mdn.mozillademos.org/files/10077/content-example.png" style="height: 383px; width: 716px;"></p> + +<h2 id="Specifications">Specifications</h2> + +<p>This element is no longer defined by any specifications.</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.content")}}</p> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/Web_Components">Web Components</a></li> + <li>{{HTMLElement("shadow")}}, {{HTMLElement("slot")}}, {{HTMLElement("template")}}, {{HTMLElement("element")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/pt-br/web/html/element/data/index.html b/files/pt-br/web/html/element/data/index.html new file mode 100644 index 0000000000..f812028550 --- /dev/null +++ b/files/pt-br/web/html/element/data/index.html @@ -0,0 +1,104 @@ +--- +title: <data> +slug: Web/HTML/Element/data +translation_of: Web/HTML/Element/data +--- +<h2 id="Summary">Summary</h2> +<p>The <strong>HTML <code><data></code> Element</strong> links a given content with a machine-readable translation. If the content is time- or date-related, the {{HTMLElement("time")}} must be used.</p> +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, palpable content.</li> + <li><dfn>Permitted content</dfn><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">Phrasing content</a>.</li> + <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li> + <li><dfn>Permitted parent elements</dfn> Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>.</li> + <li><dfn>DOM interface</dfn> {{domxref("HTMLDataElement")}}</li> +</ul> +<h2 id="Attributes">Attributes</h2> +<p><span style="line-height: 21px;">This element includes the </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p> +<dl> + <dt> + {{htmlattrdef("value")}}</dt> + <dd> + This attribute specifies the machine-readable translation of the content of the element.</dd> +</dl> +<h2 id="Example">Example</h2> +<p>The following example displays product names but also associates each name with its UPC code.</p> +<pre class="brush: html"><p>New Products</p> +<ul> + <li><data value="3967381398">Mini Ketchup</data></li> + <li><data value="3967381399">Jumbo Ketchup</data></li> + <li><data value="3967381400">Mega Jumbo Ketchup</data></li> +</ul> +</pre> +<h2 id="Specifications" name="Specifications">Specifications</h2> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-data-element', '<data>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from {{Spec2('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-data-element', '<data>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> +<h2 id="Browser_compatibility">Browser compatibility</h2> +<p>{{CompatibilityTable}}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("22.0")}} {{bug("839371")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> + </table> +</div> +<h2 id="See_also">See also</h2> +<ul> + <li>The HTML {{HTMLElement("time")}} element.</li> +</ul> +<p>{{HTMLRef}}</p> diff --git a/files/pt-br/web/html/element/datalist/index.html b/files/pt-br/web/html/element/datalist/index.html new file mode 100644 index 0000000000..0ae859d164 --- /dev/null +++ b/files/pt-br/web/html/element/datalist/index.html @@ -0,0 +1,121 @@ +--- +title: datalist +slug: Web/HTML/Element/datalist +translation_of: Web/HTML/Element/datalist +--- +<h2 id="Sumário">Sumário</h2> + +<p>O elemento HTML <em>Datalist</em> (<span style="font-family: Courier New;"><datalist></span>) contém um conjunto de elementos {{ HTMLElement("option") }} que representam as opções possíveis para o valor de outros controles.</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> ou qualquer quantidade de elementos {{ HTMLElement("option") }} (ou nenhum)</td> + </tr> + <tr> + <td>Omissão de tags</td> + <td>Nenhuma, ambas as tags inicial e final são obrigatórias</td> + </tr> + <tr> + <td>Elementos pais permitidos</td> + <td>Qualquer elemento que aceite <a href="/en/HTML/Content_categories#phrasing_content" title="en/HTML/Content categories#phrasing content">phrasing content</a></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-datalist-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-datalist-element">HTML5, section 4.10.10</a></td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Esse elemento não tem nenhum atributo a não ser os <a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">global attributes</a>, comuns para todos os elementos.</p> + +<h2 class="editable" id="Interface_do_DOM">Interface do DOM</h2> + +<p>Esse elemento implementa a interface <code><a href="/en/DOM/HTMLDataListElement" title="en/DOM/HTMLDataListElement">HTMLDataListElement</a></code>.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush: html notranslate"><input list="browsers" /> +<datalist id="browsers"> + <option value="Chrome"> + <option value="Firefox"> + <option value="Internet Explorer"> + <option value="Opera"> + <option value="Safari"> +</datalist> +</pre> + +<p><a href="/samples/html/datalist.html">View Live Examples</a></p> + +<p>Esse código HTML é renderizado assim no Firefox 4:</p> + +<p><img alt="datalist.png" class="default internal" src="/@api/deki/files/4982/=datalist.png"></p> + +<h2 id="Compatibilidade">Compatibilidade</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>20</td> + <td>{{ CompatGeckoDesktop("2.0") }}</td> + <td>10</td> + <td>9.5</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("2.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>10</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Inclua este polyfill para fornecer suporte para navegadores mais antigos e atualmente incompatíveis:<br> + <a href="https://github.com/mfranzke/datalist-polyfill">datalist-polyfill</a></p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li class="last">O elemento {{ HTMLElement("input") }}, especialmente seu atributo {{ htmlattrxref("list", "input") }};</li> + <li class="last">O elemento {{ HTMLElement("option") }}.</li> +</ul> + +<div>{{ languages({ "zh-cn": "zh-cn/HTML/Element/datalist", "ja": "ja/HTML/Element/datalist" }) }}</div> diff --git a/files/pt-br/web/html/element/dd/index.html b/files/pt-br/web/html/element/dd/index.html new file mode 100644 index 0000000000..c2d712ec2a --- /dev/null +++ b/files/pt-br/web/html/element/dd/index.html @@ -0,0 +1,112 @@ +--- +title: '<dd>: elemento Detalhes da Descrição' +slug: Web/HTML/Element/dd +tags: + - Definição + - Detalhes da Descrição + - Elemento + - Elemento HTML + - HTML + - Internet + - Referencia + - Web + - dd + - detalhes + - lista de descrições + - lista descritiva +translation_of: Web/HTML/Element/dd +--- +<div>O <strong>elemento HTML <dd></strong> fornece detalhes ou uma definição mais completa do termo precedente (definido por {{HTMLElement("dt")}}) numa lista de descrições ({{HTMLElement("dl")}}).</div> + +<div> </div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/pt-BR/docs/Web/Guide/HTML/Categorias_de_conteudo">Categorias de conteúdo</a></th> + <td>Nenhuma.</td> + </tr> + <tr> + <th scope="row">Conteúdo permitido</th> + <td><a href="/pt-BR/docs/Web/Guide/HTML/Categorias_de_conteudo#Conte%C3%BAdo_de_fluxo">Conteúdo de fluxo</a>.</td> + </tr> + <tr> + <th scope="row">Omissão de Tag</th> + <td> + <p>A Tag inicial ({{HTMLElement("dd")}}) é obrigatória.<br> + A Tag final (</dd>) pode ser omitida se seguida imediatamente por outro elemento {{HTMLElement("dd")}}, ou se o elemento pai não tiver mais conteúdo.</p> + </td> + </tr> + <tr> + <th scope="row">Ancestrais permitidos</th> + <td>{{HTMLElement("dl")}} ou (em <a href="/en-US/docs/Glossary/WHATWG">WHATWG</a> HTML) uma {{HTMLElement("div")}} que está dentro de uma {{HTMLElement("dl")}}.</td> + </tr> + <tr> + <th scope="row">Tags irmãs</th> + <td>{{HTMLElement("dt")}} ou outro elemento {{HTMLElement("dd")}} .</td> + </tr> + <tr> + <th scope="row">Papeis ARIA permitidos</th> + <td>Nenhum.</td> + </tr> + <tr> + <th scope="row">Tipo de elemento DOM</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento inclui os <a href="/pt-BR/docs/Web/HTML/Global_attributes">atributos globais</a> como seus.</p> + +<dl> + <dt>{{htmlattrdef("nowrap")}} {{Non-standard_inline}}</dt> + <dd>Se o valor deste atributo for <code>yes</code>, o texto de definição não será envolvido. O valor padrão é <code>no</code>.</dd> +</dl> + +<h2 id="Exemplo">Exemplo</h2> + +<p>Para exemplos, veja <a href="/pt-BR/docs/Web/HTML/Element/dl#Exemplos">os exemplos de <dl></a>.</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-dd-element', '<dd>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-dd-element', '<dd>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '<dd>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_com_Navegadores">Compatibilidade com Navegadores</h2> + + + +<p>{{Compat("html.elements.dd")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{HTMLELement("dl")}}</li> + <li>{{HTMLElement("dt")}}</li> +</ul> diff --git a/files/pt-br/web/html/element/del/index.html b/files/pt-br/web/html/element/del/index.html new file mode 100644 index 0000000000..6900c024b6 --- /dev/null +++ b/files/pt-br/web/html/element/del/index.html @@ -0,0 +1,88 @@ +--- +title: <del> +slug: Web/HTML/Element/del +translation_of: Web/HTML/Element/del +--- +<h2 id="Sumário">Sumário</h2> +<p>O <strong style="line-height: 1.5;">elemento </strong><strong style="line-height: 1.5;">HTML <code><del></code></strong><span style="line-height: 1.5;"> (ou </span><em>Elemento </em><em>HTML </em><em>de Texto Excluído</em><span style="line-height: 1.5;">) representa uma parte do texto que foi excluída de um documento. Este elemento é (não necessariamente) renderizado pelos navegadores com uma linha entre o texto.</span></p> +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">Phrasing content</a> or <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">flow content</a>.</li> + <li><dfn>Permitted content</dfn> <a href="/en-US/docs/HTML/Content_categories#Transparent" title="HTML/Content categories#Transparent">Transparent</a>.</li> + <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li> + <li><dfn>Permitted parent elements</dfn> Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>.</li> + <li><dfn>DOM interface</dfn> {{domxref("HTMLModElement")}}</li> +</ul> +<h2 id="Attributes">Attributes</h2> +<p><span style="line-height: 21px;">This element includes the </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p> +<dl> + <dt> + {{htmlattrdef("cite")}}</dt> + <dd> + A URI for a resource that explains the change (for example, meeting minutes).</dd> + <dt> + {{htmlattrdef("datetime")}}</dt> + <dd> + This attribute indicates the time and date of the change and must be a <a class="external" href="http://www.w3.org/TR/html5/common-microsyntaxes.html#valid-date-string-with-optional-time" title="http://www.w3.org/TR/html5/common-microsyntaxes.html#valid-date-string-with-optional-time">valid date with an optional time string</a>. If the value cannot be parsed as a date with an optional time string, the element does not have an associated time stamp.</dd> +</dl> +<h2 id="Examples">Examples</h2> +<pre class="brush: html"><p><del>This text has been deleted</del></p></pre> +<h3 id="Result">Result</h3> +<div> + <del>This text has been deleted</del></div> +<h2 id="Specifications" name="Specifications">Specifications</h2> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'edits.html#the-del-element', '<del>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'edits.html#the-del-element', '<del>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.4', '<del>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> +<h2 id="Browser_compatibility">Browser compatibility</h2> +<p>{{CompatibilityTable}}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> + </table> +</div> +<h2 id="See_also">See also</h2> +<ul> + <li>{{HTMLElement("ins")}} element for insertions into a text</li> +</ul> +<div> + {{HTMLRef}}</div> diff --git a/files/pt-br/web/html/element/details/index.html b/files/pt-br/web/html/element/details/index.html new file mode 100644 index 0000000000..9243c04d5d --- /dev/null +++ b/files/pt-br/web/html/element/details/index.html @@ -0,0 +1,114 @@ +--- +title: details +slug: Web/HTML/Element/details +translation_of: Web/HTML/Element/details +--- +<h2 id="Sumário">Sumário</h2> + +<p>O elemento HTML <em>details</em> (<code><details></code>) é usado como uma ferramenta de onde o usuário irá obter informações adicionais.</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td>Conteúdo permitido</td> + <td>Um elemento {{ HTMLElement("summary") }} seguido por <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>Nenhuma, tanto as tas iniciais quanto as finais são obrigatórias.</td> + </tr> + <tr> + <td>Elementos pais permitidos</td> + <td>Qualquer elemento que aceite flow content.</td> + </tr> + <tr> + <td>Documento normativo</td> + <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#the-details-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#the-details-element">HTML5, section 4.11.1</a></td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Como todos os elementos HTML, esse elemento aceita os <a href="/en/HTML/Global_attributes" rel="internal">global attributes</a>.</p> + +<dl> + <dt>{{ htmlattrdef("open") }}</dt> + <dd>Esse atributo Booleano indica se os detalhes serão mostrados para o usuário ao carregar a página. Se omitido os detalhes não serão mostrados.</dd> +</dl> + +<h2 id="Interface_do_DOM">Interface do DOM</h2> + +<p>Esse elemento implemena a interface<code><a href="/en/DOM/HTMLDetailsElement" title="en/DOM/HTMLDetailsElement"> HTMLDetailsElement</a></code>.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush: html"><details> + <summary>Alguns detalhes</summary> + <p>Mais informações sobre os detalhes.</p> +</details> +</pre> + +<h3 id="Demonstração">Demonstração</h3> + +<p><a class="external" href="http://html5-demos.appspot.com/static/html5-whats-new/template/index.html#5" title="http://html5-demos.appspot.com/static/html5-whats-new/template/index.html#5">Demo</a></p> + +<h2 id="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>12</td> + <td>{{ CompatNo() }} {{ bug(591737) }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>4.0</td> + <td>{{ CompatNo() }} {{ bug(591737) }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{ HTMLElement("summary") }}</li> +</ul> + +<div class="noinclude">{{ languages({ "en": "en/HTML/Element/details", "ja": "ja/HTML/Element/details" }) }}</div> diff --git a/files/pt-br/web/html/element/dfn/index.html b/files/pt-br/web/html/element/dfn/index.html new file mode 100644 index 0000000000..38992c2dfb --- /dev/null +++ b/files/pt-br/web/html/element/dfn/index.html @@ -0,0 +1,141 @@ +--- +title: <dfn> +slug: Web/HTML/Element/dfn +tags: + - Elemento + - HTML semântico nível texto + - Referencia +translation_of: Web/HTML/Element/dfn +--- +<h2 id="Resumo">Resumo</h2> +<p>O elemento <strong>HTML <code><dfn></code> </strong> (ou <em>Elemento Definição </em><em>HTML</em>) representa uma instância de definição de um termo.</p> +<div class="note"> + <strong style="line-height: 1.5;">Notas de uso no </strong><strong>HTML5:</strong> + <ul> + <li>O elemento <code><dfn></code> marca o termo que será definido; a definição do termo deve ser data em torno de {{HTMLElement("p")}}, {{HTMLElement("section")}} ou uma lista de definições por grupo (usualmente um {{HTMLElement("dt")}}, {{HTMLElement("dd")}} pareado com o {{HTMLElement("dt")}}).</li> + <li>O valor exato do termo a ser definido é determinado pelas seguintes regras: + <ol> + <li>Se o elemento <dfn> tiver um atributo title, então o termo é o valor deste atributo.</li> + <li>Senão, se contiver somente um elemento {{HTMLElement("abbr")}} com um atributo {{htmlattrxref("title", "abbr")}}, então o termo é o valor deste atributo.</li> + <li><span style="line-height: 1.5;">Caso contrário, o conteúdo do texto do elemento </span><code style="font-style: italic; line-height: 1.5;"><dfn></code><span style="line-height: 1.5;"> é o termo a ser definido.</span></li> + </ol> + </li> + </ul> +</div> +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categorias de conteúdo</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Conteúdo de fluxo</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">Conteúdo de fraseamento</a>, conetúdo palpável.</li> + <li><dfn>Conteúdo permitido</dfn> <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Conteúdo de fraseamento</a>, mas um elemento {{HTMLElement("dfn")}} não deve ser um descendente.</li> + <li><dfn>Omissão de tag</dfn> {{no_tag_omission}}</li> + <li><dfn>Elementos pais permitidos</dfn>Qualquer elemento que aceite <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">conteúdo de fraseamento</a>.</li> + <li><dfn>Interface DOM</dfn> {{domxref("HTMLElement")}}</li> +</ul> +<h2 id="Atributos">Atributos</h2> +<p><span style="line-height: 21px;">Esse elemento inclui os </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">atributos globais</a><span style="line-height: 21px;">.</span></p> +<p>No HTML5, o atributo <strong>title</strong> tem um significado especial, como mencionado acima.</p> +<h2 id="Exemplos">Exemplos</h2> +<p>Os exemplos a seguir são válidos em HTML5.</p> +<pre class="brush: html"><!-- Define "A Internet" --> +<p><dfn id="def-internet">A Internet</dfn> é um sistema global de redes interconectadas que usam o Internet Protocol Suite (TCP/IP) para servir bilhões de usuários no mundo todo. +</p> +</pre> +<p>Posteriormente no mesmo documento:</p> +<pre class="brush: html"><dl> + <!-- Define "World-Wide Web" a definição de referência para "A Internet" --> + <dt> + <dfn> + <abbr title="World-Wide Web">WWW</abbr> + </dfn> + </dt> + <dd>A World-Wide Web (WWW) é um sistema de documentos de hipertexto interligados acessados pela <a href="#def-internet">Internet</a>.</dd> +</dl> +</pre> +<h3 id="Resultado">Resultado</h3> + +<p><dfn>A Internet</dfn> é um sistema global de redes interconectadas que usam o Internet Protocol Suite (TCP/IP) para servir bilhões de usuários no mundo todo.</p> +<dl> + + <dt> + <dfn><abbr title="World-Wide Web">WWW</abbr> </dfn></dt> + <dd> + A World-Wide Web (WWW) é um sistema de documentos de hipertexto interligados acessados pela <a href="#def-internet">Internet</a>.</dd> +</dl> +<h2 id="Specifications" name="Specifications">Especificações</h2> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-dfn-element', '<dfn>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-dfn-element', '<dfn>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<dfn>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> +<h2 id="Navegadores_compatíveis">Navegadores compatíveis</h2> +<div> + {{CompatibilityTable}}</div> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> + </table> +</div> +<h2 id="Veja_também">Veja também</h2> +<ul> + <li>Elementos relacionados à lista de definições: {{HTMLElement("dl")}}, {{HTMLElement("dt")}}, {{HTMLElement("dd")}}</li> + <li>{{HTMLElement("abbr")}}</li> +</ul> +<p>{{HTMLRef}}</p> diff --git a/files/pt-br/web/html/element/dialog/index.html b/files/pt-br/web/html/element/dialog/index.html new file mode 100644 index 0000000000..60d5cb0296 --- /dev/null +++ b/files/pt-br/web/html/element/dialog/index.html @@ -0,0 +1,167 @@ +--- +title: '<dialog>: O elemento Dialog' +slug: Web/HTML/Element/dialog +tags: + - Diálogo + - Elemento + - Elemento Interativos HTML + - Experimental + - HTML + - Referências + - Web +translation_of: Web/HTML/Element/dialog +--- +<p>O <strong> elemento HTML <code><dialog></code></strong> representa uma caixa de diálogo ou outro componente interativo, tal como um inspetor ou janela.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Categorias de conteúdo</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document#Sectioning_roots">sectioning root</a></td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a></td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Qualquer elemento que aceite <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a></td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>{{ARIARole("alertdialog")}}</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLDialogElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento inclui os atributos globais. O atributo <code>tabindex</code> não deve ser utilizado no elemento <code><dialog></code>.</p> + +<dl> + <dt>{{htmlattrdef("open")}}</dt> + <dd>Indica que o Dialog está ativo e pronto para uso. Quando o atributo <code>open</code> não for definido, ele não deve ser mostrado ao usuário.</dd> +</dl> + +<h2 id="Notas_de_uso">Notas de uso</h2> + +<ul> + <li>Elementos de formulário (<code><form></code>) podem ser integrados dentro de um elemento <code><dialog></code>, especificando-os com o atributo <code>method="dialog"</code>. Quando esse formulário é submetido, o diálogo é fechado com o seu {{domxref("HTMLDialogElement.returnValue", "returnValue")}} (valor de retorno) configurado para o valor botão <code>submit</code> do formulário que foi usado.</li> + <li>O pseudo-elemento CSS {{cssxref('::backdrop')}} pode ser usado para estilizar o fundo de um elemento <code><dialog></code>, como um escurecer um conteúdo inacessível enquanto uma janela <code>modal</code> está aberta, por exemplo. O backdrop(pano de fundo) só está disponível quando um diálogo é exibido com {{domxref("HTMLDialogElement.showModal()")}}.</li> +</ul> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Exemplo_simples">Exemplo simples</h3> + +<pre class="brush: html"><dialog open> + <p>Olá para todos!</p> +</dialog> +</pre> + +<h3 id="Exemplo_Avançado">Exemplo Avançado</h3> + +<p>Este exemplo abre uma caixa de diálogo contendo um formulário quando o botão "Update details" é clicado.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><!-- Um dialog simples contendo um form --> +<dialog open id="favDialog"> + <form method="dialog"> + <section> + <p><label for="favAnimal">Favorite animal:</label> + <select id="favAnimal"> + <option></option> + <option>Brine shrimp</option> + <option>Red panda</option> + <option>Spider monkey</option> + </select></p> + </section> + <menu> + <button id="cancel" type="reset">Cancel</button> + <button type="submit">Confirm</button> + </menu> + </form> +</dialog> + +<menu> + <button id="updateDetails">Update details</button> +</menu> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">(function() { + var updateButton = document.getElementById('updateDetails'); + var cancelButton = document.getElementById('cancel'); + var favDialog = document.getElementById('favDialog'); + + // O botão Update abre uma Dialog + updateButton.addEventListener('click', function() { + favDialog.showModal(); + }); + + // O botão cancelButtom fecha uma Dialog + cancelButton.addEventListener('click', function() { + favDialog.close(); + }); +})(); +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample("Advanced_example", "100%", 300)}}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-dialog-element', '<dialog>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.2', 'interactive-elements.html#the-dialog-element', '<dialog>')}}</td> + <td>{{Spec2('HTML5.2')}}</td> + <td>Difinição inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> + +<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você deseja contribuir com os dados, consulte https://github.com/mdn/browser-compat-data e envie-nos uma solicitação de recebimento.</div> + +<p>{{Compat("html.elements.dialog")}}</p> + +<h2 id="Polyfills">Polyfills</h2> + +<p>Inclua este polyfill para suportar browsers antigos.</p> + +<p><a href="https://github.com/GoogleChrome/dialog-polyfill">dialog-polyfill</a></p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>O {{event("close")}} evento</li> + <li>O {{event("cancel")}} evento</li> + <li>Guia de formulários HTML.</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/pt-br/web/html/element/dir/index.html b/files/pt-br/web/html/element/dir/index.html new file mode 100644 index 0000000000..d73763c91e --- /dev/null +++ b/files/pt-br/web/html/element/dir/index.html @@ -0,0 +1,64 @@ +--- +title: '<dir>: O elemento obsoleto Directory' +slug: Web/HTML/Element/dir +tags: + - Agrupando conteúdo HTML + - Directory + - Elemento + - HTML + - Listas HTML + - Obsoleto + - Referencia + - Web + - dir + - listas +translation_of: Web/HTML/Element/dir +--- +<div>{{Obsolete_header()}}</div> + +<p>O elemento de diretório HTML obsoleto (<span class="seoSummary"><strong><code><dir></code></strong>) é usado como um contêiner para um diretório de arquivos e/ou pastas, potencialmente com estilos e ícones aplicados pelo {{Glossary("user agent")}}.</span> Não use este elemento obsoleto; em vez disso, você deve usar o {{HTMLElement("ul")}} elemento para listas, incluindo listas de arquivos.</p> + +<div class="note">Nota de uso: não use este elemento. Embora presente nas primeiras especificações do HTML, foi descontinuado no HTML 4 e, desde então, foi totalmente removido. Nenhum dos principais navegadores suporta esse elemento.</div> + +<h2 id="DOM_interface">DOM interface</h2> + +<p> </p> + +<p>Este elemento implementa a interface {{domxref("HTMLDirectoryElement")}}.</p> + +<h2 id="Atributos">Atributos</h2> + +<p>Como todos os outros elementos HTML, este elemento suporta os <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">global attributes</a>.</p> + +<dl> + <dt>{{htmlattrdef("compact")}}</dt> + <dd>Este atributo booleano indica que a lista deve ser renderizada em um estilo compacto. A interpretação deste atributo depende do agente do usuário e não funciona em todos os navegadores. + <div class="note">Nota de uso: não use este atributo, pois ele foi descontinuado: o {{HTMLElement("dir")}} elemento deve ser estilizado usando <a href="/en-US/docs/CSS" title="CSS">CSS</a>. Para dar um efeito semelhante ao alcançado com o atributo <code>compact</code>, a propriedade <a href="/en-US/docs/CSS" title="CSS">CSS</a> {{cssxref("line-height")}} pode ser usado com um valor de <code>80%</code>.</div> + </dd> +</dl> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> + +<div class="hidden"> </div> + +<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você quiser contribuir com os dados, confira <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos um pedido de pull.</div> + +<p>{{Compat("html.elements.dir")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>Outros relacionados a lista de elementos HTML: {{HTMLElement("ol")}}, {{HTMLElement("ul")}}, {{HTMLElement("li")}}, e {{HTMLElement("menu")}};</li> + <li>Propriedades CSS que podem ser especialmente úteis para estilizar o <span style="font-size: 1rem; letter-spacing: -0.00278rem;">elemento </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;"><dir></code><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> :</span> + <ul> + <li>A propriedade {{cssxref('list-style')}}, útil para escolher a maneira como o ordinal é exibido.</li> + <li><a href="https://developer.mozilla.org/en-US/docs/CSS_Counters" title="CSS_Counters">CSS counters</a>, útil para lidar com listas aninhadas complexas.</li> + <li>A propriedade {{Cssxref('line-height')}}, útil para simular o atributo obsoleto {{htmlattrxref("compact", "dir")}}.</li> + <li>A propriedade {{cssxref('margin')}}, útil para controlar o recuo da lista.</li> + </ul> + </li> +</ul> + +<div> +<p>{{HTMLRef}}</p> +</div> diff --git a/files/pt-br/web/html/element/div/index.html b/files/pt-br/web/html/element/div/index.html new file mode 100644 index 0000000000..b1d38fea68 --- /dev/null +++ b/files/pt-br/web/html/element/div/index.html @@ -0,0 +1,121 @@ +--- +title: <div> +slug: Web/HTML/Element/div +translation_of: Web/HTML/Element/div +--- +<h2 id="Summary" name="Summary">Resumo</h2> + +<p>O <strong>elemento de divisão</strong> <strong><a href="/en-US/docs/Web/HTML">HTML</a> <code><div></code> </strong>é um container genérico para conteúdo de fluxo, que de certa forma não representa nada. Ele pode ser utilizado para agrupar elementos para fins de estilos (usando <strong>class</strong> ou <strong>id</strong>), ou porque eles compartilham valores de atributos, como <strong>lang</strong>. Ele deve ser utilizado somente quando não tiver outro elemento de semântica (tal como {{HTMLElement("article")}} ou {{HTMLElement("nav")}}).</p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Categoria de conteúdo</a></dfn> <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, palpable content.</li> + <li><dfn>Conteúdo permitido</dfn> <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>.</li> + <li><dfn>Omissão de tag</dfn>Nenhuma, as tags de abertura e fechamento são obrigatórias. {{no_tag_omission}}</li> + <li><dfn>Elementos pais permitidos</dfn>Qualquer elemento que aceite conteúdo de fluxo.</li> + <li><dfn>Interface DOM</dfn> {{domxref("HTMLDivElement")}}</li> +</ul> + +<h2 id="Attributes" name="Attributes">Atributos</h2> + +<p>Esse elemento inclui <a href="/en-US/docs/Web/HTML/Global_attributes">atributos globais</a>.</p> + +<p>No {{HTMLVersionInline(5)}}, o atributo <strong>align</strong> no <strong><div></strong> é obsoleto {{obsolete_inline}}.</p> + +<h2 id="Examples" name="Examples">Exemplos</h2> + +<pre class="brush: html"><div> + <p>Qualquer tipo de conteúdo aqui. Como &lt;p&gt;, &lt;table&gt;. Você dá o nome!</p> +</div> +</pre> + +<h3 id="Result" name="Result">Resultado</h3> + +<p>Qualquer tipo de conteúdo aqui. Como <p>, <table>. Você dá o nome!</p> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-div-element', '<div>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-div-element', '<div>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.4', '<div>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade dos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li>Semantic sectioning elements: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}</li> + <li>{{HTMLElement("span")}} element for styling of phrasing content</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/pt-br/web/html/element/dl/index.html b/files/pt-br/web/html/element/dl/index.html new file mode 100644 index 0000000000..4294a0fda2 --- /dev/null +++ b/files/pt-br/web/html/element/dl/index.html @@ -0,0 +1,180 @@ +--- +title: dl +slug: Web/HTML/Element/dl +tags: + - Elemento + - HTML + - Internet + - Rede + - Referencia + - Web +translation_of: Web/HTML/Element/dl +--- +<h2 id="Resumo">Resumo</h2> + +<p>O elemento HTML <em>Definition List</em><span style="line-height: 21px;"> (</span><code style="color: rgb(51, 51, 51); font-size: 14px; line-height: 21px;"><dl></code><span style="line-height: 21px;">)</span> engloba uma lista de pares de termos e descrições. Um uso comum para este elemento é para implementar um glossário ou exibir metadados(uma lista de pares chave e valor).</p> + +<h2 id="Contexto_de_Uso">Contexto de Uso</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td>Conteúdo permitido</td> + <td>Zero ou mais elementos {{ HTMLElement("dt") }}, cada um seguido de um ou mais elementos {{ HTMLElement("dd") }}</td> + </tr> + <tr> + <td>Omissão de Tag</td> + <td>Nenhum, este é um {{Glossary("elemento vazio")}}.</td> + </tr> + <tr> + <td>Permite elementos pai</td> + <td>Qualquer elemento que aceite <a href="/en/HTML/Content_categories#flow_content" title="en/HTML/Content categories#flow content">conteúdo de fluxo</a>.</td> + </tr> + <tr> + <td>Documentação normativa</td> + <td><a class="external" href="http://www.w3.org/TR/html5/grouping-content.html#the-dl-element" title="http://www.w3.org/TR/html5/grouping-content.html#the-dl-element">HTML5, section 4.5.8</a>; <a class="external" href="http://www.w3.org/TR/html401/struct/lists.html#h-10.3" title="http://www.w3.org/TR/html401/struct/lists.html#h-10.3">HTML 4.01, section 10.3</a></td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Como todo elemento HTML, ele fornece os <a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">attributos globais</a>.</p> + +<dl> + <dt>{{ htmlattrdef("compact") }} {{ Non-standard_inline() }}</dt> + <dd>Obriga a definição da descrição aparecer na mesma linha que a definição do termo. Funciona apenas no Internet Explorer.</dd> +</dl> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Termo_e_definição_única">Termo e definição única</h3> + +<pre class="brush: html"><dl> + <dt>Firefox</dt> + <dd>A free, open source, cross-platform, graphical web browser + developed by the Mozilla Corporation and hundreds of volunteers.</dd> + + <!-- other terms and definitions --> +</dl> +</pre> + +<p>Output:</p> + +<p><img alt="Image:HTML-dl1.png" class="internal" src="/@api/deki/files/241/=HTML-dl1.png"></p> + +<h3 id="Múltiplos_termos_definição_única">Múltiplos termos, definição única</h3> + +<pre class="brush: html"><dl> + <dt>Firefox</dt> + <dt>Mozilla Firefox</dt> + <dt>Fx</dt> + <dd>A free, open source, cross-platform, graphical web browser + developed by the Mozilla Corporation and hundreds of volunteers.</dd> + + <!-- other terms and definitions --> +</dl> +</pre> + +<p>Saída:</p> + +<p><img alt="Image:HTML-dl2.png" class="internal" src="/@api/deki/files/242/=HTML-dl2.png"></p> + +<h3 id="Termo_único_múltiplas_definições">Termo único, múltiplas definições</h3> + +<pre class="brush: html"><dl> + <dt>Firefox</dt> + <dd>A free, open source, cross-platform, graphical web browser + developed by the Mozilla Corporation and hundreds of volunteers.</dd> + <dd>The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox, + is a mostly herbivorous mammal, slightly larger than a domestic cat + (60 cm long).</dd> + + <!-- other terms and definitions --> +</dl> +</pre> + +<p>Saída:</p> + +<p><img alt="Image:HTML-dl3.png" class="internal" src="/@api/deki/files/243/=HTML-dl3.png"></p> + +<h3 id="Múltiplos_termos_e_definições">Múltiplos termos e definições</h3> + +<p>Também é possível definir vários termos com as definições múltiplas correspondentes, combinando com os exemplos acima.</p> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<ul> + <li><a href="/en/DOM/HTMLDListElement" title="en/DOM/HTMLDListElement">HTMLDListElement</a></li> +</ul> + +<h2 id="Notas">Notas</h2> + +<p>Não use este elemento, (nor {{ HTMLElement("ul") }} elements), para criar meramente um recuo em uma página. Embora ele funcione, está é uma má prática e obscurece o significado da lista de definição.</p> + +<p>Para mudar a indentação de um termo, use a propriedadr <a href="/en/CSS" title="en/CSS">CSS</a> <a href="/en/CSS/margin" title="en/CSS/margin">margin</a>.</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidade de navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<p>{{Compat("html.elements.dl")}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>Elemento {{ HTMLElement("dt") }}</li> + <li>Elemento {{ HTMLElement("dd") }}</li> +</ul> + +<div>{{HTMLRef}}</div> + +<div> </div> + +<div>{{languages({ "en": "en/HTML/Element/dl", "pl": "pl/HTML/Element/dl", "ja": "ja/HTML/Element/dl"})}}</div> diff --git a/files/pt-br/web/html/element/dt/index.html b/files/pt-br/web/html/element/dt/index.html new file mode 100644 index 0000000000..9d01f20076 --- /dev/null +++ b/files/pt-br/web/html/element/dt/index.html @@ -0,0 +1,111 @@ +--- +title: <dt> +slug: Web/HTML/Element/dt +translation_of: Web/HTML/Element/dt +--- +<h2 id="Sumário">Sumário</h2> + +<p>O elemento <strong>HTML <code><dt></code></strong> (ou Elemento HTML de Definição de Termo) identifica um termo na lista de definição. Este elemento pode ocorrer somente em um elemento filho de {{HTMLElement("dl")}}. Geralmente seguido por um elemento {{HTMLElement("dd")}}; ou multiplos <code><dt></code> na mesma linha indicam vários termos sendo definidos pelo próximo element {{HTMLElement("dd")}}.</p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn> Vazio.</li> + <li><dfn>Permitted content</dfn>{{todo}} <a href="/en-US/docs/HTML/Content_categories#Flowing_content" title="HTML/Content_categories#Phrasing_content">Flow content</a>, but with no {{HTMLElement("header")}}, {{HTMLElement("footer")}}, sectioning content or heading content descendants.</li> + <li><dfn>Tag omission</dfn> Must have a start tag. The end tag may be omitted if this element is immediately followed by another <code><dd></code> element, or if there is no more content in the parent element.</li> + <li><dfn>Permitted parent elements</dfn> Before a {{HTMLElement("dt")}} or a {{HTMLElement("dd")}} element, inside a {{HTMLElement("dl")}}.</li> + <li><dfn>DOM interface</dfn> {{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the <a href="/en-US/docs/DOM/span" title="DOM/span"><span style="font-family: courier new;">HTMLSpanElement</span></a> interface for this element.</li> +</ul> + +<h2 id="Atributos">Atributos</h2> + +<p><span style="line-height: 21px;">Este elemento inclui somente</span><span style="line-height: 21px;"> </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">atributos globais</a><span style="line-height: 21px;">.</span></p> + +<h2 id="Exemplo">Exemplo</h2> + +<p>Para exemplo veja <a href="/en-US/docs/HTML/Element/dl#Examples" title="HTML/Element/dl#Examples">definição de lista</a>.</p> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-dt-element', '<dt>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-dt-element', '<dt>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '<dt>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Navegadores compatíveis</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{HTMLElement("dd")}}, {{HTMLElement("dl")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/pt-br/web/html/element/em/index.html b/files/pt-br/web/html/element/em/index.html new file mode 100644 index 0000000000..553027535b --- /dev/null +++ b/files/pt-br/web/html/element/em/index.html @@ -0,0 +1,117 @@ +--- +title: '<em>: O elemento de ênfase' +slug: Web/HTML/Element/em +tags: + - Elemento + - HTML + - Referencia + - Semântica inline HTML + - Web + - font-style +translation_of: Web/HTML/Element/em +--- +<p>O <strong>elemento</strong> <strong>HTML</strong> <code><strong><em></strong></code><strong> </strong>marca o texto que tem ênfase. O elemento <em> pode ser aninhado, com cada nível de aninhamento indicando um grau maior de ênfase.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Categorias de conteúdo</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Conteúdo fluído</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Phrasing_content">conteúdo de frase</a>, conteúdo palpável</td> + </tr> + <tr> + <th scope="row">Conteúdo permitido</th> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Conteúdo de frase</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 aceita <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Phrasing_content">conteúdo de frase</a>.</td> + </tr> + <tr> + <th scope="row">Funções de ARIA permitidas</th> + <td>Qualquer uma</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLElement")}} Até o Gecko 1.9.2 (Firefox 4) incluso, o Firefox implementa a interface{{domxref("HTMLSpanElement")}} para este elemento.</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento inclui somente os <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">atributos globais</a>.</p> + +<h2 id="Notas_de_uso">Notas de uso</h2> + +<p>Este elemento geralmente é mostrado no tipo itálico. Contudo, não deve ser usado simplesmente para aplicar estilo itálico; use o estilo CSS para esse propósito. Use o elemento {{HTMLElement("cite")}} para marcar o título de um trabalho (book, play, song, etc.); também é geralmente estilizado com tipo itálico, mas possui significado diferente. Use o elemento {{HTMLElement("strong")}} para marcar o texto que tem importância maior do que o texto que está em volta.</p> + +<h2 id="Exemplo">Exemplo</h2> + +<p>O elemento <code><em></code> é frequentemente usado para indicar um contraste implícito ou explícito.</p> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> + Em HTML 5, o que anteriormente era chamado de conteúdo + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>em</span><span class="punctuation token">></span></span>block-level<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>em</span><span class="punctuation token">></span></span> agora é chamado de conteúdo + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>em</span><span class="punctuation token">></span></span>flow<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>em</span><span class="punctuation token">></span></span> . +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span></code></pre> + +<h3 id="Resultado">Resultado</h3> + +<p>Em HTML5, o que anteriormente era chamado de conteúdo block-level (nível de bloco) agora é chamado de <em>flow</em> content (conteúdo fluído).</p> + +<h2 id="<i>_vs_<em>"><i> vs <em></h2> + +<p>É frequentemente confuso para novos desenvolvedores porque há vários elementos para expressar a ênfase em algum texto. <code><i></code> e <code><em></code> são talvez uns dos mais comuns. Por que usar <code><em></em></code> vs <code><i></i></code>? Eles produzem o mesmo resultado, certo?</p> + +<p>Não exatamente. O resultado visual é, por padrão, o mesmo - ambas as tags renderizam seu conteúdo em itálicos. Mas o significado semântico é diferente. A tag <code><em></code> representa ênfase importante de seus conteúdos, enquanto que a tag <code><i></code> representa o texto que é iniciado de uma prosa, como uma palavra estrangeira, pensamentos de um personagem ficcional, ou quando o texto se refere á definição de uma palavra em vez de representar seu significado semântico. (O título de um trabalho, tal como o nome de um livro ou filme, deve usar <code><cite></code>.)</p> + +<p>Um exemplo para <code><em></code> poderia ser: "Apenas já faça isso!", ou: "Nós temos que fazer algo acerca disso". Uma pessoa ou software lendo o texto pronunciaria as palavras em itálico com uma ênfase.</p> + +<p>Um exemplo para <code><i></code> poderia ser: "A <em>Rainha Mary </em>velejou na noite passada". Aqui, não é adicionada ênfase ou importância na palavra "Rainha Mary". É meramente indicado que o objeto em questão não é uma rainha chamada Mary, mas um navio chamado <em>Rainha Mary</em>. Outro exemplo para <code><i></code> poderia ser: "A palavra <em>o</em> é um artigo".</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-em-element', '<em>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-em-element', '<em>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<em>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatiblidade_de_navegador">Compatiblidade de navegador</h2> + +<div class="hidden">A tabela de compatibilidade nesta página é gerada de um dado estruturado. Se você gostaria de contribuir para os dados, por favor veja <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> nos envie uma solicitação de colocação.</div> + +<p>{{Compat("html.elements.em")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{HTMLElement("i")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/pt-br/web/html/element/embed/index.html b/files/pt-br/web/html/element/embed/index.html new file mode 100644 index 0000000000..ba8e9cff58 --- /dev/null +++ b/files/pt-br/web/html/element/embed/index.html @@ -0,0 +1,128 @@ +--- +title: <embed> +slug: Web/HTML/Element/embed +tags: + - Conteúdo externo + - Elemento + - HTML + - HTML5 + - Incorporação de conteúdo + - Incorporação de conteúdo HTML + - Internet + - Plugins + - Rede + - Referencia + - Web + - embutir + - incorporar +translation_of: Web/HTML/Element/embed +--- +<h2 id="Sumário">Sumário</h2> + +<p>O <strong>elemento HTML <code><embed></code> </strong>incorpora conteúdo externo no ponto especificado no documento. Este conteúdo é fornecido por um aplicativo externo ou outra fonte de conteúdo interativo, como um plug-in de navegador.</p> + +<p>{{EmbedInteractiveExample("pages/tabbed/embed.html", "tabbed-standard")}}</p> + +<div class="hidden"> +<p>A fonte deste exemplo interativo é armazenada em um repositório GitHub. Se você deseja contribuir com o projeto de exemplos interativos, clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e envie-nos uma solicitação de recebimento.</p> +</div> + +<div class="note"> +<p><strong>Nota</strong>: Este tópico documenta apenas o elemento definido como parte do HTML5. Ele não trata da implementação anterior e não padronizada do elemento.</p> +</div> + +<p>Lembre-se de que a maioria dos navegadores modernos descontinuou e removeu o suporte para plug-ins de navegador. Portanto, confiar no <code><embed> </code>geralmente não é aconselhável se você deseja que seu site funcione no navegador do usuário comum. </p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categoria de conteúdo</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, embedded content, interactive content, palpable content.</li> + <li><dfn>Conteúdo permitido</dfn> Nenhum, é um {{Glossary("empty element")}}.</li> + <li><dfn>Omissão de Tag</dfn>Deve iniciar com uma tag de início, mas não deve ter uma tag de fechamento.</li> + <li><dfn>Elementos pai (ancestral)<br> + permitidos</dfn>Qualquer elemento que aceita incorporação de conteúdo.</li> + <li><dfn>Interface DOM</dfn> {{domxref("HTMLEmbedElement")}}</li> +</ul> + +<h2 id="Atributos">Atributos</h2> + +<p><span style="line-height: 21px;">Este elemento inclui os </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">atributos globais</a><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{htmlattrdef("height")}}</dt> + <dd>A altura apresentada do recurso, em <a href="https://drafts.csswg.org/css-values/#px">CSS pixels.</a> Este deve ser um valor absoluto; porcentagens <em>não </em>são permitidas.</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>A URL do recurso que está sendo incorporado.</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>O <a href="https://wiki.developer.mozilla.org/en-US/docs/Glossary/MIME_type">tipo MIME</a> a ser usado para a seleção do <em>plug-in</em> de instanciação.</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>A largura apresentada do recurso, em CSS pixels. Este deve ser um valor absoluto; porcentagens <em>não </em>são permitidas.</dd> + <dt></dt> +</dl> + +<h2 id="Exemplo">Exemplo</h2> + +<pre class="brush: html"><embed type="video/quicktime" src="movie.mov" width="640" height="480"> +</pre> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-iframe-element.html#the-embed-element', '<embed>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-embed-element', '<embed>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_entre_navegadores">Compatibilidade entre navegadores</h2> + +<div class="note"> +<p><strong>Nota</strong>: Atualmente existe uma diferença na implementação pelos navegadores. Enquanto carrega, no Chrome e no Opera, aparece o conteúdo do recurso em HTML, no Firefox, mostra uma mensagem genérica falando que o conteúdo precisa de um <em>plug-in </em>(veja o {{Bug("730768")}}). É recomendado que se use os elementos {{HTMLElement("object")}} ou {{HTMLElement("iframe")}}.</p> +</div> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>Outros elementos usados para incorporar conteúdo de vários tipos, incluem: {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{SVGElement("svg")}}, and {{HTMLElement("video")}}.</li> + <li>Posicionamento e dimensionamento de conteúdos incorporados dentro da janela de exibição: {{cssxref("object-position")}} and {{cssxref("object-fit")}}</li> +</ul> + +<p>{{ HTMLRef }}</p> diff --git a/files/pt-br/web/html/element/fieldset/index.html b/files/pt-br/web/html/element/fieldset/index.html new file mode 100644 index 0000000000..33e28f65d6 --- /dev/null +++ b/files/pt-br/web/html/element/fieldset/index.html @@ -0,0 +1,407 @@ +--- +title: <fieldset> +slug: Web/HTML/Element/fieldset +translation_of: Web/HTML/Element/fieldset +--- +<div>{{HTMLRef}}</div> + +<p>O <strong>elemento</strong> <strong>HTML <code><fieldset></code></strong> é usado para agrupar elementos, assim como labels ({{HTMLElement("label")}}), dentro de um formulário web.</p> + +<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">Conteúdo de fluxo</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>Um elemento {{HTMLElement("legend")}} opcional, seguido por conteúdo de fluxo.</td> + </tr> + <tr> + <th scope="row">Omissão deTag</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Elementos pai permitidos</th> + <td>Qualquer elemento que aceita <a href="/en-US/docs/HTML/Content_categories#Flow_content">conteúdo de fluxo</a>.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLFieldSetElement")}}</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Note:</strong> diferente de quase todo outro elemento, a especificação do WHATWG HTML Rendering sugere <code>{{cssxref("min-width")}}: <a href="/en-US/docs/Web/CSS/width#Values">min-content</a></code> como parte do padrão de estilo para {{HTMLElement("fieldset")}}, e muitos navegadores implementam tal estilização (ou algo que se aproxima disto).</p> +</div> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento inclui os <a href="/en-US/docs/HTML/Global_attributes">atributos globais</a>.</p> + +<dl> + <dt>{{htmlattrdef("disabled")}} {{HTMLVersionInline(5)}}</dt> + <dd>Se este atributo Booleano está definido, os controles de formulario que são seus descendentes, exceto os descendentes de seu primeiro elemento opcional {{HTMLElement("legend")}}, estarão desativados, i.e., não editável. Eles não receberão qualquer evento de navegação, como clique do mouse ou relacionado com focus. Frequentemente os navegadores mostram tais controles em cinza.</dd> + <dt>{{htmlattrdef("form")}} {{HTMLVersionInline(5)}}</dt> + <dd>Este atributo tem o valor do atributo <strong>id </strong>do elemento {{HTMLElement("form")}} com que se relaciona. Seu valor padrão é o <strong>id </strong> do elemento {{HTMLElement("form")}} mais próximo.</dd> + <dt>{{htmlattrdef("name")}} {{HTMLVersionInline(5)}}</dt> + <dd>O nome associado com o grupo. + <div class="note"> O label para o fieldset é dado pelo primeiro elemento {{HTMLElement("legend")}} que é um filho do fieldset.</div> + </dd> +</dl> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Example_1_Formulário_com_fieldset_legend_e_label">Example #1: Formulário com fieldset, legend, e label</h3> + +<pre class="brush: html"><form action="test.php" method="post"> + <fieldset> + <legend>Title</legend> + <input type="radio" id="radio"> <label for="radio">Click me</label> + </fieldset> +</form></pre> + +<h3 id="Example_2_Simulando_um_editável_HTMLElement(select)_através_de_um_fieldset_de_radioboxes_e_textboxes*">Example #2: Simulando um editável {{HTMLElement("select")}} através de um <code>fieldset</code> de <a href="/en-US/docs/HTML/Element/Input">radioboxes</a> e <a href="/en-US/docs/HTML/Element/Input">textboxes</a>*</h3> + +<p>O exemplo a seguinte é feito de puro HTML e CSS. Não contém javascript.</p> + +<p><strong>Esteja avisado </strong>que leitores de tela (utilizados por cegos) e dispositivos de assistência não interpretarão o seguinte formulário corretamente; este exemplo seria um html invalido se os corretos elementos fossem usados.</p> + +<pre class="brush: html"><!doctype html> +<html> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> +<title>Editable [pseudo]select</title> +<style type="text/css"> + +/* Generic form fields */ + +fieldset.elist, input[type="text"], textarea, select, option, fieldset.elist ul, fieldset.elist > legend, fieldset.elist input[type="text"], fieldset.elist > legend:after { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +input[type="text"] { + padding: 0 20px; +} + +textarea { + width: 500px; + height: 200px; + padding: 20px; +} + +textarea, input[type="text"], fieldset.elist ul, select, fieldset.elist > legend { + border: 2px #cccccc solid; + border-radius: 10px; +} + +input[type="text"], fieldset.elist, select, fieldset.elist > legend { + height: 32px; + font-family: Tahoma; + font-size: 14px; +} + +input[type="text"]:hover, textarea:hover, select:hover, fieldset.elist:hover > legend { + background-color: #ddddff; +} + +select { + padding: 4px 20px; +} + +option { + height: 30px; + padding: 5px 4px; +} + +option:not(:checked), textarea:focus { + background-color: #ffcccc; +} + +fieldset.elist > legend:after, fieldset.elist label { + height: 28px; +} + +input[type="text"], fieldset.elist { + width: 316px; +} + +input[type="text"]:focus { + background: #ffcccc url("data:image/gif;base64,R0lGODlhEAAQANU5APnoxuvr6+uxPdvb2+rq6ri4uO7qxunp6dPT06SHV+/rx8vLy+nezLO0sbe3t9Ksas+qaaCEV8rKyp2dnf39/QAAAK6ursifZHFxcc/Qzu3mxYyMjExCJnV1dc6maO7u7o+Pj2tXNoaGhtfDpKCDVu3lxM+tcaKEV9bW1qOFVWNjY8KrisTExNra2nBbObGxsby8vO/mu7Kyso9ZAuzs7MSgAIiKhf///8zMzP///wAAAAAAAAAAAAAAAAAAAAAAACH5BAEAADkALAAAAAAQABAAAAaXwJxwSCwOYzWkMpkkZmoAqDQaJdpqAqw2m53NRjlboAarFczomcE0C99o8DgNMVM8Tm3bbYDr9x11DwkzDG5yc2oQJIRCenx/MxoeETM2Q3pxATMlF4MYlo17OAsdLispMyAioIY0BzMcITMTKBasjgssFTMqGxItMjYUoTQBBAQHxgE0wZcfMtDRMi/QrA022NnaNg1CQQA7") no-repeat 2px center !important; +} + +input[type="text"]:focus, textarea:focus, select:focus, fieldset.elist > legend { + border: 2px #ccaaaa solid; +} + +fieldset { + border: 2px #af3333 solid; + border-radius: 10px; +} + +/* Editable [pseudo]select (i.e. fieldsets with [class=elist]) */ + +fieldset.elist { + display: inline-block; + position: relative; + vertical-align: middle; + overflow: visible; + padding: 0; + margin: 0; + border: none; +} + +fieldset.elist ul { + position: absolute; + width: 100%; + max-height: 320px; + padding: 0; + margin: 0; + overflow: hidden; + background-color: transparent; +} + +fieldset.elist:hover ul { + background-color: #ffffff; + border: 2px #af3333 solid; + left: 2px; + overflow: auto; +} + +fieldset.elist ul > li { + list-style-type: none; + background-color: transparent; +} + +fieldset.elist label { + display: none; + width: 100%; +} + +fieldset.elist input[type="text"] { + width: 100%; + height: 30px; + line-height: 30px; + border: none; + background-color: transparent; + border-radius: 0; +} + +fieldset.elist > legend { + display: block; + margin: 0; + padding: 0 0 0 5px; + position: absolute; + width: 100%; + cursor: default; + background-color: #ccffcc; + line-height: 30px; + font-style: italic; +} + +fieldset.elist:hover > legend { + position: relative; + overflow: hidden; +} + +fieldset.elist > legend:after { + width: 20px; + content: "\2335"; + float: right; + text-align: center; + border-left: 2px #cccccc solid; + font-style: normal; + cursor: default; +} + +fieldset.elist:hover > legend:after { + background-color: #99ff99; +} + +fieldset.elist ul input[type="radio"] { + display: none; +} + +fieldset.elist input[type="radio"]:checked ~ label { + display: block; + width: 292px; + background-color: #ffffff; +} + +fieldset.elist:hover input[type="radio"]:checked ~ label { + width: 100%; +} + +fieldset.elist:hover label { + display: block; + height: 100%; +} + +fieldset.elist label:hover { + background-color: #3333ff !important; +} + +fieldset.elist:hover input[type="radio"]:checked ~ label { + background-color: #aaaaaa; +} + +</style> + +</head> +<body> + +<form method="get" action="test.php"> + +<fieldset> + <legend>Order a T-Shirt</legend> + <p>Write your name (simple textbox): <input type="text" /></p> + <p>Choose your size (simple select): + <select> + <option value="s">Small</option> + <option value="m">Medium</option> + <option value="l">Large</option> + <option value="xl">Extra Large</option> + </select></p> + <div>What address do you want to use? (editable pseudoselect) + <fieldset class="elist"> + <legend>Address&hellip;</legend> + <ul> + <li><input type="radio" value="1" id="address-switch_1" checked /><label for="address-switch_1"><input type="text" value="19 Quaker Ridge Rd. Bethel CT 06801" /></label></li> + <li><input type="radio" value="2" id="address-switch_2" /><label for="address-switch_2"><input type="text" value="1000 Coney Island Ave. Brooklyn NY 11230" /></label></li> + <li><input type="radio" value="3" id="address-switch_3" /><label for="address-switch_3"><input type="text" value="2962 Dunedin Cv. Germantown TN 38138" /></label></li> + <li><input type="radio" value="4" id="address-switch_4" /><label for="address-switch_4"><input type="text" value="915 E 7th St. Apt 6L. Brooklyn NY 11230" /></label></li> + </ul> + </fieldset> + </div> + <p>Write a comment:<br /> + <textarea></textarea></p> + <p><input type="reset" value="Reset" /> <input type="submit" value="Send!" /></p> +</fieldset> + +</form> + +</body> +</html> +</pre> + +<p><a href="/files/4563/editable_select.html">Veja este exemplo em ação</a></p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</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>Definição do elemento fieldset</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'rendering.html#the-fieldset-and-legend-elements')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Padrão sugerido de renderização dos elementos fieldset e legend</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>Definição inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_com_o_navegador">Compatibilidade com o navegador</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Aspecto</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte Básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>atributo desativado</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>12</td> + <td>6</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>Suporte Básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>atributo desativado</code></td> + <td>4.4</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>6.0</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Nem todo controle de formulário descendente de um fieldset desativado está propriamente desativado no IE11; ver <a href="https://connect.microsoft.com/IE/feedbackdetail/view/817488">IE bug 817488: <code>input[type="file"]</code> not disabled inside disabled <code>fieldset</code></a> and <a href="https://connect.microsoft.com/IE/feedbackdetail/view/962368/can-still-edit-input-type-text-within-fieldset-disabled">IE bug 962368: Can still edit <code>input[type="text"]</code> within <code>fieldset[disabled]</code></a>.</p> + +<h2 id="Erros">Erros</h2> + +<ul> + <li>{{Bug(504622)}} - Fieldsets nunca diminui abaixo de sua largura min-intrinsic</li> + <li><a href="https://bugs.webkit.org/show_bug.cgi?id=123507">WebKit bug 123507</a> - <code>min-width: {{cssxref("-webkit-min-content")}}</code> sobre fieldset</li> + <li><a href="http://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content">StackOverflow discussão com soluções alternativas para os bugs acima</a></li> +</ul> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>Outros elementos de formlários relacionados: {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} e {{HTMLElement("meter")}}.</li> + <li>Artigo de como usar o fieldset para <a href="https://blog.alura.com.br/formulario-com-form-validation-do-html5/">ajudar na validação do seu formulário html</a></li> +</ul> diff --git a/files/pt-br/web/html/element/figcaption/index.html b/files/pt-br/web/html/element/figcaption/index.html new file mode 100644 index 0000000000..6cc79265fe --- /dev/null +++ b/files/pt-br/web/html/element/figcaption/index.html @@ -0,0 +1,90 @@ +--- +title: '<figcaption>: O elemento de legenda da figura' +slug: Web/HTML/Element/figcaption +tags: + - Elemento + - HTML +translation_of: Web/HTML/Element/figcaption +--- +<div>{{HTMLRef}}</div> + +<div>O <strong>Elemento HTML Figcaption </strong>(<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.</div> + +<p> </p> + +<div></div> + +<div>{{EmbedInteractiveExample("pages/tabbed/figcaption.html","tabbed-shorter")}}</div> + +<div></div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Categorias de conteúdo</a></th> + <td>Nenhuma.</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>Nenhuma, tanto a tag de início quanto a de fim são obrigatórias.</td> + </tr> + <tr> + <th scope="row">Elemento Pai Permitido</th> + <td>Um Elemento {{HTMLElement("figure")}}</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Esse elemento possui somente os <a href="/en-US/docs/HTML/Global_attributes">atributos globais</a>.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<p>Por favor, consulte a página {{HTMLElement("figure")}} para visualizar o exemplos do elemento <code><figcaption></code>.</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-figcaption-element', '<figcaption>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-figcaption-element', '<figcaption>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.figcaption")}}</p> + +<h2 id="Veja_também">Veja também:</h2> + +<ul> + <li>O elemento {{HTMLElement("figure")}}.</li> +</ul> diff --git a/files/pt-br/web/html/element/figura/index.html b/files/pt-br/web/html/element/figura/index.html new file mode 100644 index 0000000000..309a10c791 --- /dev/null +++ b/files/pt-br/web/html/element/figura/index.html @@ -0,0 +1,193 @@ +--- +title: <figure> +slug: Web/HTML/Element/figura +translation_of: Web/HTML/Element/figure +--- +<h2 id="Resumo">Resumo</h2> + +<p>O <strong>Elemento HTML <code><figure></code> </strong>representa o conteúdo independente, frequentemente com uma legenda ({{HTMLElement("figcaption")}})<em><code>,</code></em> e é normalmente referido como uma única unidade. Enquanto ela está relacionada com o fluxo principal, sua posição é independente do fluxo principal.Normalmente, isso é uma imagem, uma ilustração, um diagrama, um trecho de código ou uma esquema que é referenciado no texto principal, mas que pode ser movido para outra página ou para um apêndice, sem afetar o fluxo principal.</p> + +<div class="note"> +<p><em>Notas de uso: </em></p> + +<ul> + <li>Being a <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document#Sectioning_root" title="Sections and Outlines of an HTML5 document#Sectioning root">sectioning root</a>, the outline of the content of the <span style="font-family: courier new;"><figure> </span>element is excluded from the main outline of the document.</li> + <li>Uma legenda pode ser associada com o elemento <code><figure></code> inserindo o elemento {{HTMLElement("figcaption")}} dentro dele (no inicio ou no fim).</li> +</ul> +</div> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document#Sectioning_root" title="Sections and Outlines of an HTML5 document#Sectioning root">sectioning root</a>, palpable content.</li> + <li><dfn>Permite conteúdo</dfn><dfn>A {{HTMLElement("figcaption")}} element, followed by <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">flow content</a>; or flow content followed by a {{HTMLElement("figcaption")}} element; or flow content</dfn>.</li> + <li><dfn>Omissão de TAGs</dfn> {{no_tag_omission}}</li> + <li><dfn>Permitted parent elements</dfn> Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>.</li> + <li><dfn>DOM interface</dfn> {{domxref("HTMLElement")}}</li> +</ul> + +<h2 id="Atributos">Atributos</h2> + +<p><span style="line-height: 1.5;">Este elemento só inclui os</span><span style="line-height: 21px;"> </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">atributos globais</a><span style="line-height: 21px;">.</span></p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Exemplo_1">Exemplo 1</h3> + +<pre class="brush: html"><!-- Apenas uma imagem--> +<figure> + <img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="Uma imagem impressionante"> +</figure> +<p></p> +<!-- Imagem com legenda --> +<figure> + <img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="Uma imagem impressionante"> + <figcaption>Legenda para a imagem impressionante</figcaption> +</figure> +<p></p> +</pre> + + +<figure><img alt="MDN Logo" src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"></figure> + +<p> </p> + + +<figure><img alt="MDN Logo" src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"> +<figcaption> +<p>Imagem1. MDN Logo</p> +</figcaption> +</figure> + +<p> </p> + +<h3 id="Example_2">Example 2</h3> + +<pre class="brush: html"> <figure> + <figcaption>Obtenha os detalhes do browser usando navigator</figcaption> + <pre> + function NavigatorExample(){ + var txt; + txt = "Browser CodeName: " + navigator.appCodeName; + txt+= "Browser Name: " + navigator.appName; + txt+= "Browser Version: " + navigator.appVersion ; + txt+= "Cookies Enabled: " + navigator.cookieEnabled; + txt+= "Platform: " + navigator.platform; + txt+= "User-agent header: " + navigator.userAgent; + } + </pre> +</pre> + +<figure> +<figcaption> +<p>Obtenha os detalhes do browser usando navigator</p> +</figcaption> + +<pre> function NavigatorExample(){ + var txt; + txt = "Browser CodeName: " + navigator.appCodeName; + txt+= "Browser Name: " + navigator.appName; + txt+= "Browser Version: " + navigator.appVersion ; + txt+= "Cookies Enabled: " + navigator.cookieEnabled; + txt+= "Platform: " + navigator.platform; + txt+= "User-agent header: " + navigator.userAgent; + } + </pre> +</figure> + +<h3 id="Exemplo_3">Exemplo 3</h3> + +<pre class="brush: html"><figure> + <figcaption><cite>Edsger Dijkstra :-</cite></figcaption> + <p>"Se o debugging é o processo de remoção de bugs de software, <br /> então programação deve ser o processo de colocá-los"<br /></p> + </figure> + + +</pre> + +<figure> +<figcaption><cite>Edsger Dijkstra :-</cite></figcaption> + +<p>"Se o debugging é o processo de remoção de bugs de software, <br> + <span style="line-height: 1.5;">então programação deve ser o processo de colocá-los</span><span style="line-height: 1.5;">"</span></p> +</figure> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-figure-element', '<figure>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-figure-element', '<figure>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Navegadores_compatíveis">Navegadores compatíveis</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte Básico</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>Recurso</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte Básico</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> + +<h2 id="Veja_Também">Veja Também</h2> + +<ul> + <li>O {{HTMLElement("figcaption")}} elemento.</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/pt-br/web/html/element/footer/index.html b/files/pt-br/web/html/element/footer/index.html new file mode 100644 index 0000000000..89d114f474 --- /dev/null +++ b/files/pt-br/web/html/element/footer/index.html @@ -0,0 +1,114 @@ +--- +title: footer (rodapé) +slug: Web/HTML/Element/footer +translation_of: Web/HTML/Element/footer +--- +<h3 id="Resumo"><strong>Resumo</strong></h3> + +<p>O elemento HTML de Rodapé (<footer>) representa um rodapé para o seu sectioning content (conteúdo de seção) mais próximo ou <a href="https://developer.mozilla.org/en-US/docs/Sections_and_Outlines_of_an_HTML5_document#sectioning_root" title="Sections and Outlines of an HTML5 document#sectioning root">sectioning root</a> elemento (ou seja, seu parente mais próximo {{HTMLElement ("article")}}, {{HTMLElement ("aside")}}, {{HTMLElement ("nav")}}, {{HTMLElement ("section")}}, {{HTMLElement ("blockquote")}}, {{HTMLElement ("body")}}, {{HTMLElement ("details" )}}, {{HTMLElement ("fieldset")}}, {{HTMLElement ("figure")}}, {{HTMLElement ("td")}}). Normalmente um rodapé contém informações sobre o autor da seção de dados, direitos autorais ou links para documentos relacionados.</p> + +<div class="note"> +<p><strong>Notas de Uso:</strong></p> + +<ul> + <li>Coloque informações sobre o autor em um elemento {{HTMLElement("address")}} que pode ser incluído no elemento <code><footer></code>.</li> + <li>O elemento <code><footer></code> não é sectioning content portanto, não introduz uma nova seção no <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">outline</a>.</li> +</ul> +</div> + +<h2 id="Contexto_de_uso">Contexto de uso:</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td>Conteúdo permitido</td> + <td><a href="/en-US/docs/HTML/Content_categories#flow_content" title="HTML/Content categories#flow content">Flow content</a>, mas não o <code><footer></code> ou {{HTMLElement("header")}} descendentes.</td> + </tr> + <tr> + <td>Omissão de tag</td> + <td>Nenhuma, ambas as tags de início e fim são obrigatórias.</td> + </tr> + <tr> + <td>Parent Elements permitidos</td> + <td> + <p>Qualquer elemento que aceite <a href="/en-US/docs/HTML/Content_categories#flow_content" title="HTML/Content categories#flow content">flow content</a>. Note-se que um elemento <footer> não deve ser um descendente de um {{HTMLElement("address")}}, {{HTMLElement("header")}} ou outro elemento <code><footer></code>.</p> + </td> + </tr> + <tr> + <td>Documento normativo</td> + <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-footer-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-footer-element">HTML5, section 4.4.9</a></td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento não tem outros atributos que os <a href="/en-US/docs/HTML/Global_attributes" rel="internal">global attributes</a>, comuns a todos os elementos.</p> + +<h2 class="editable" id="DOM_Interface">DOM Interface</h2> + +<p>Este elemento implementa a interface <code><a href="/en-US/docs/DOM/element" title="DOM/element">HTMLElement</a></code>.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush: html"><footer> + Algumas informações de copyright ou talvez alguma informação do autor de um <article>? +</footer> +</pre> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> + +<p>{{CompatibilityTable()}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte Básico</td> + <td>5</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>9.0</td> + <td>11.10</td> + <td>4.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte Básico</td> + <td>2.2</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>9.0</td> + <td>11.0</td> + <td>5.0 (iOS 4.2)</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>Outros elementos de seção relacionados {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("section")}}, {{HTMLElement("address")}};</li> + <li class="last"><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sections and outlines of an HTML5 document</a>.</li> +</ul> diff --git a/files/pt-br/web/html/element/form/index.html b/files/pt-br/web/html/element/form/index.html new file mode 100644 index 0000000000..0097e77db8 --- /dev/null +++ b/files/pt-br/web/html/element/form/index.html @@ -0,0 +1,215 @@ +--- +title: <form> +slug: Web/HTML/Element/form +translation_of: Web/HTML/Element/form +--- +<h2 id="Summary" name="Summary">Resumo</h2> + +<p>O <strong>elemento HTML <code><form></code> </strong>representa uma seção de um documento que contém controles interativos que permitem ao usuário submeter informação a um determinado servidor web.</p> + +<p>É possível utilizar as pseudo-classes de CSS {{cssxref(':valid')}} e{{cssxref(':invalid')}} para aplicar estilo a um elemento <code><form></code>.</p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, palpable content.</li> + <li><dfn>Permitted content</dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, but with no contained <code><form></code> elements.</li> + <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li> + <li><dfn>Permitted parent elements</dfn> Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">flow content</a>.</li> + <li><dfn>DOM interface</dfn> {{domxref("HTMLFormElement")}}</li> +</ul> + +<h2 id="Attributes" name="Attributes">Atributos</h2> + +<p><span style="line-height: 21px;">Este elemento inclue os </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">Atributos global</a><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{htmlattrdef("accept")}} {{HTMLVersionInline(4)}} {{obsolete_inline}}</dt> + <dd>A comma-separated list of content types that the server accepts. + <div class="note"><strong>Usage note:</strong> This attribute has been removed in HTML5 and should no longer be used. Instead, use the<span class="st"> {{htmlattrxref("accept", "input")}}</span> attribute of the specific {{HTMLElement("input")}} element.</div> + </dd> + <dt>{{htmlattrdef("accept-charset")}}</dt> + <dd>A list of character encodings that the server accepts. The list can be delimited by spaces or commas. The browser uses in the order in which they are listed. The default value is the reserved string "UNKNOWN", in which case the encoding corresponds to the encoding of the document containing the form element.<br> + HTML 4: In previous versions of HTML, the different character encodings could be delimited by spaces or commas. This is no longer the case in HTML5, where only spaces are correct.</dd> + <dt>{{htmlattrdef("action")}}</dt> + <dd>The URI of a program that processes the information submitted via the form. This value can be overridden by a {{htmlattrxref("formaction", "button")}} attribute on a {{HTMLElement("button")}} or {{HTMLElement("input")}} element.</dd> + <dt>{{htmlattrdef("autocomplete")}} {{HTMLVersionInline(5)}}</dt> + <dd>Indicates whether controls in this form can by default have their values automatically completed by the browser. This setting can be overridden by an <code>autocomplete</code> attribute on an element belonging to the form. Possible values are: + <ul> + <li><code>off</code>: The user must explicitly enter a value into each field for every use, or the document provides its own auto-completion method; the browser does not automatically complete entries.</li> + <li><code>on</code>: The browser can automatically complete values based on values that the user has entered during previous uses of the form.</li> + </ul> + + <div class="note"> + <p><strong>Note: </strong>If you set <code>autocomplete</code> to <code>off</code> in a form because the document provides its own auto-completion, then you should also set <code>autocomplete</code> to <code>off</code> for each of the form's <code>input</code> elements that the document can auto-complete. For details, see {{anch("Google Chrome notes")}}.</p> + </div> + </dd> + <dt>{{htmlattrdef("enctype")}}</dt> + <dd>When the value of the <code>method</code> attribute is <code>post</code>, this attribute is the <a href="http://en.wikipedia.org/wiki/Mime_type" title="http://en.wikipedia.org/wiki/Mime_type">MIME type</a> of content that is used to submit the form to the server. Possible values are: + <ul> + <li><code>application/x-www-form-urlencoded</code>: The default value if the attribute is not specified.</li> + <li><code>multipart/form-data</code>: Use this value if you are using an {{HTMLElement("input")}} element with the <code>type</code> attribute set to "file".</li> + <li><code>text/plain (HTML5)</code></li> + </ul> + + <p>This value can be overridden by a {{htmlattrxref("formenctype", "button")}} attribute on a {{HTMLElement("button")}} or {{HTMLElement("input")}} element.</p> + </dd> + <dt>{{htmlattrdef("method")}}</dt> + <dd>O <a href="/en-US/docs/HTTP" title="http://www.w3.org/Protocols/rfc2616/rfc2616.html">HTTP</a> method that the browser uses to submit the form. Possible values are: + <ul> + <li><code>post</code>: Corresponds to the HTTP <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5" title="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5">POST method</a> ; the data from the form is included in the body of the form and is sent to the server.</li> + <li><code>get</code>: Corresponds to the HTTP <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3" title="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3">GET method</a>; the data from the form are appended to the <code>action</code> attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.</li> + </ul> + + <p>This value can be overridden by a {{htmlattrxref("formmethod", "button")}} attribute on a {{HTMLElement("button")}} or {{HTMLElement("input")}} element.</p> + </dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>The name of the form. In HTML 4 its use is deprecated (<code>id</code> should be used instead). It must be unique among the forms in a document and not the empty string in HTML 5.</dd> + <dt>{{htmlattrdef("novalidate")}} {{HTMLVersionInline(5)}}</dt> + <dd>This Boolean attribute indicates that the form is not to be validated when it is submitted. If this attribute is missing (and therefore the form is validated), this default setting can be overridden by a {{htmlattrxref("formnovalidate", "button")}} attribute on a {{HTMLElement("button")}} or {{HTMLElement("input")}} element belonging to the form.</dd> + <dt>{{htmlattrdef("target")}}</dt> + <dd>A name or keyword indicating where to display the response that is received after submitting the form. In HTML 4, this is the name of, or a keyword for, a frame. In HTML5, it is a name of, or keyword for, a <em>browsing context</em> (for example, tab, window, or inline frame). The following keywords have special meanings: + <ul> + <li><code>_self</code>: Load the response into the same HTML 4 frame (or HTML5 browsing context) as the current one. This value is the default if the attribute is not specified.</li> + <li><code>_blank</code>: Load the response into a new unnamed HTML 4 window or HTML5 browsing context.</li> + <li><code>_parent</code>: Load the response into the HTML 4 frameset parent of the current frame or HTML5 parent browsing context of the current one. If there is no parent, this option behaves the same way as <code>_self</code>.</li> + <li><code>_top</code>: HTML 4: Load the response into the full, original window, canceling all other frames. HTML5: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as <code>_self</code>.</li> + <li><em>iframename</em>: The response is displayed in a named {{HTMLElement("iframe")}}.</li> + </ul> + + <p>HTML5: This value can be overridden by a {{htmlattrxref("formtarget", "button")}} attribute on a {{HTMLElement("button")}} or {{HTMLElement("input")}} element.</p> + </dd> +</dl> + +<h2 id="Examples" name="Examples">Exemplos</h2> + +<pre class="brush: html"><!-- Form que envia uma requisição GET --> +<form action="" method="get"> + <label for="GET-name">Name:</label> + <input id="GET-name" type="text" name="name"> + <input type="submit" value="Save"> +</form> + +<!-- Simple form which will send a POST request --> +<form action="" method="post"> + <label for="POST-name">Name:</label> + <input id="POST-name" type="text" name="name"> + <input type="submit" value="Save"> +</form> + +<!-- Form with fieldset, legend, and label --> +<form action="" method="post"> + <fieldset> + <legend>Title</legend> + <input type="radio" name="radio" id="radio"> <label for="radio">Click me</label> + </fieldset> +</form> +</pre> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col"><label>Especificação</label></th> + <th scope="col"><label>Status</label></th> + <th scope="col"><label>Comment</label></th> + </tr> + </thead> + <tbody> + <tr> + <td><label>{{SpecName('HTML WHATWG', 'forms.html#the-form-element', '<form>')}}</label></td> + <td><label>{{Spec2('HTML WHATWG')}}</label></td> + <td><label> </label></td> + </tr> + <tr> + <td><label>{{SpecName('HTML5 W3C', 'forms.html#the-form-element', '<form>')}}</label></td> + <td><label>{{Spec2('HTML5 W3C')}}</label></td> + <td><label> </label></td> + </tr> + <tr> + <td><label>{{SpecName('HTML4.01', 'interact/forms.html#h-17.3', '<form>')}}</label></td> + <td><label>{{Spec2('HTML4.01')}}</label></td> + <td><label> </label></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade do navegador</h2> + +<p><label>{{CompatibilityTable}}</label></p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th><label>Feature</label></th> + <th><label>Chrome</label></th> + <th><label>Firefox (Gecko)</label></th> + <th><label>Internet Explorer</label></th> + <th><label>Opera</label></th> + <th><label>Safari</label></th> + </tr> + <tr> + <td><label>Basic support</label></td> + <td><label>1.0</label></td> + <td><label>{{CompatGeckoDesktop("1.0")}}</label></td> + <td><label>{{CompatVersionUnknown}}</label></td> + <td><label>{{CompatVersionUnknown}}</label></td> + <td><label>{{CompatVersionUnknown}}</label></td> + </tr> + <tr> + <td><label><code>novalidate</code> attribute</label></td> + <td><label>1.0</label></td> + <td><label>{{CompatGeckoDesktop("2.0")}}</label></td> + <td><label>{{CompatNo}}</label></td> + <td><label>{{CompatUnknown}}</label></td> + <td><label>{{CompatUnknown}}</label></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th><label>Feature</label></th> + <th><label>Android</label></th> + <th><label>Firefox Mobile (Gecko)</label></th> + <th><label>IE Mobile</label></th> + <th><label>Opera Mobile</label></th> + <th><label>Safari Mobile</label></th> + </tr> + <tr> + <td><label>Basic support</label></td> + <td><label>{{CompatVersionUnknown}}</label></td> + <td><label>{{CompatGeckoMobile("1.0")}}</label></td> + <td><label>{{CompatVersionUnknown}}</label></td> + <td><label>{{CompatVersionUnknown}}</label></td> + <td><label>{{CompatVersionUnknown}}</label></td> + </tr> + <tr> + <td><label><code>novalidate</code> attribute</label></td> + <td><label>{{CompatUnknown}}</label></td> + <td><label>{{CompatGeckoMobile("2.0")}}</label></td> + <td><label>{{CompatUnknown}}</label></td> + <td><label>{{CompatUnknown}}</label></td> + <td><label>{{CompatUnknown}}</label></td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Google_Chrome_notes"><label>Google Chrome notes</label></h3> + +<p><label>The Google Chrome UI for auto-complete requests varies, depending on whether <code>autocomplete</code> is set to <code>off</code> on <code>input</code> elements as well as their form. Specifically, when a form has <code>autocomplete</code> set to <code>off</code> and its input element's <code>autocomplete</code> field is <strong>not</strong> set, then if the user asks for autofill suggestions for the input element, Chrome might display a message saying "autocomplete has been disabled for this form." On the other hand, if both the form and the input element have <code>autocomplete</code> set to <code>off</code>, the browser will not display that message. For this reason, you should set <code>autocomplete</code> to <code>off</code> for each input that has custom auto-completion.</label></p> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li><label><a href="/en-US/docs/Web/Guide/HTML/Forms" title="/en-US/docs/Web/Guide/HTML/Forms">HTML forms guide</a></label></li> + <li><label>Other elements that are used for creating forms: {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}},{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}}, {{HTMLElement("meter")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}.</label></li> +</ul> + +<p><label>{{HTMLRef}}</label></p> + +<p> </p> diff --git a/files/pt-br/web/html/element/head/index.html b/files/pt-br/web/html/element/head/index.html new file mode 100644 index 0000000000..a8ad153397 --- /dev/null +++ b/files/pt-br/web/html/element/head/index.html @@ -0,0 +1,153 @@ +--- +title: <head> +slug: Web/HTML/Element/head +tags: + - HTML head + - head +translation_of: Web/HTML/Element/head +--- +<div>{{HTMLRef}}</div> + +<p>The <strong>HTML <code><head></code> elemento providencia informações gerais</strong> (metadados) sobre document, incluindo seu título e links para scripts e folhas de estilos.</p> + +<table class="properties"> + <tbody> + <tr> + <th><a href="/en-US/docs/Web/HTML/Content_categories">Categoria de conteúdo</a></th> + <td>Nenhuma.</td> + </tr> + <tr> + <th>Conteúdo permitido</th> + <td> + <p>Se o elemento é um {{HTMLElement("iframe")}}</p> + + <p>{{htmlattrxref("srcdoc", "iframe")}}, ou se a informação do título está sendo avaliada desde um nivel alto do protocolo, zero ou mais elementos de conteúdo de metadados.</p> + + <p>Por outro lado, um ou mais elementos de conteúdo de metadados onde exatamente um é um {{HTMLElement("title")}} elemento.</p> + </td> + </tr> + <tr> + <th>Omissão de tag</th> + <td> + <p>A tag inicial pode ser omitida se a primeira coisa dentro do head elemento é um elemento.</p> + + <p>A tag final pode ser omitida se a primeira coisa seguindo o elemento head não é um caractere espaço ou um comentário.</p> + </td> + </tr> + <tr> + <th>Elementos parentes permitidos</th> + <td>Um {{HTMLElement("html")}} elemento, como primeiro filho.</td> + </tr> + <tr> + <th>DOM interface</th> + <td>{{domxref("HTMLHeadElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributos">Attributos</h2> + +<p>Estes elementos incluem os <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">atributos</a> globais.</p> + +<dl> + <dt>{{htmlattrdef("profile")}} {{obsolete_inline}}</dt> + <dd>A URIs de um ou mais perfis de metadados , separado por 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>Moderno, HTML5-compatível browsers automaticamente constrói um elemento <code><head></code> se as tags forem omitidas na marcação. <a href="http://www.stevesouders.com/blog/2010/05/12/autohead-my-first-browserscope-user-test/">Este comportamento não pode ser garantido por browsers antigos.</a></p> + +<p>Especificações</p> + +<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>Nenhuma mudança desde o último shapshot</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-head-element', '<head>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Perfil Obsoleto</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_do_Browser">Compatibilidade do Browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Componentes</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Support básico</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Elementos que podem ser usados dentro de um <code><head></code> element: {{HTMLElement("title")}}, {{HTMLElement("base")}}, {{HTMLElement("link")}}, {{HTMLElement("style")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("noscript")}}</li> +</ul> diff --git a/files/pt-br/web/html/element/header/index.html b/files/pt-br/web/html/element/header/index.html new file mode 100644 index 0000000000..e7d0801389 --- /dev/null +++ b/files/pt-br/web/html/element/header/index.html @@ -0,0 +1,119 @@ +--- +title: header (cabeçalho) +slug: Web/HTML/Element/header +translation_of: Web/HTML/Element/header +--- +<h2 id="Sumário">Sumário</h2> + +<p>O <strong>elemento HTML</strong> <strong><code><header></code> </strong>representa um grupo de suporte introdutório ou navegacional. Pode conter alguns elementos de cabeçalho mas também outros elementos como um logo, seções de cabeçalho, formulário de pesquisa, e outros.</p> + +<div class="note"> +<p><strong>Notas de utilização:</strong></p> + +<ul> + <li>O elemento <code><header></code> não é separador de conteúdo (sectioning content), portanto, não introduz uma nova seção no <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">outline</a>.</li> +</ul> +</div> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categoria de conteúdo</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, conteúdo palpável.</li> + <li><dfn>Conteúdo permitido</dfn><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, mas não com descendentes de {{HTMLElement("header")}} ou {{HTMLElement("footer")}} </li> + <li><dfn>Omissão da tag</dfn>Nenhuma, as tags de abertura e fechamento são obrigatórias.</li> + <li><dfn>Elementos-pai permitidos</dfn>Qualquer elemento que aceite <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">flow content</a>. Note que o elemento {{HTMLElement("header")}} não deve ser descendente de {{HTMLElement("address")}}, {{HTMLElement("footer")}} ou outro elemento {{HTMLElement("header")}} .</li> + <li><dfn>Interface DOM</dfn> {{domxref("HTMLElement")}}</li> +</ul> + +<h2 id="Atributos">Atributos</h2> + +<p><span style="line-height: 21px;">Este elemento não possue outros atributos além dos </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">atributos globais</a><span style="line-height: 21px;">, comuns a todos os elementos.</span></p> + +<h2 id="Exemplos">Exemplos</h2> + +<pre><code><header> + <h1>Título da Página Principal</h1> + <img src="mdn-logo-sm.png" alt="MDN logo"> +</header></code></pre> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-header-element', '<header>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-header-element', '<header>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>5</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>9.0</td> + <td>11.10</td> + <td>4.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.2</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>9.0</td> + <td>11.0</td> + <td>5.0 (iOS 4.2)</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>Uma descrição mais detalhada: <a class="external" href="http://html5doctor.com/the-header-element/" title="The header element | HTML5 Doctor">O elemento header | HTML5 Doctor</a></li> + <li>Outros elementos relacionados a seção: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("footer")}}, {{HTMLElement("section")}}, {{HTMLElement("address")}};</li> + <li class="last"><a class="deki-ns current" href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Seções e outlines de um documento HTML5</a>.</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/pt-br/web/html/element/heading_elements/index.html b/files/pt-br/web/html/element/heading_elements/index.html new file mode 100644 index 0000000000..19524c0677 --- /dev/null +++ b/files/pt-br/web/html/element/heading_elements/index.html @@ -0,0 +1,168 @@ +--- +title: '<h1>–<h6>: Os elementos HTML de cabeçalho da seção' +slug: Web/HTML/Element/Heading_Elements +translation_of: Web/HTML/Element/Heading_Elements +--- +<p>{{HTMLRef}}</p> + +<p>Os <strong>elementos HTML</strong> <strong><code><h1></code>–<code><h6></code></strong> representam seis níveis de título de seção. <code><h1></code> é o nível de seção mais alto e <code><h6></code> é o mais baixo.</p> + +<p>{{EmbedInteractiveExample("pages/tabbed/h1-h6.html", "tabbed-standard")}}</p> + +<h2 id="Sumário">Sumário</h2> + +<p>Elementos de<strong> cabeçalho</strong> são implementados em seis níveis, <code><h1></code> é o mais importante e <code><h6></code> é o de menor importância. Um elemento de cabeçalho descreve brevemente o tópico da seção em que ele está. As informações de cabeçalho podem ser usadas por agentes de usuário, por exemplo, para construir uma tabela de conteúdos para um documento automaticamente.</p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/Web/HTML/Content_categories">Categorias do conteúdo</a></dfn> <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Conteúdos de fluxo</a>, conteúdos de cabeçalho, conteúdos palpáveis.</li> + <li><dfn>Conteúdo permitido</dfn> <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Conteúdo com texto</a>.</li> + <li><dfn>Omissão de tag</dfn> Não há, porém, as tags de abertura e fechamento são obrigatórias.</li> + <li><dfn>Elementos pais permitidos</dfn>Qualquer elemento que aceite <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">conteúdos de fluxo</a>; ou como um elemento filho do grupo de elementos de cabeçalho {{HTMLElement("hgroup")}} </li> + <li><dfn>Interface DOM</dfn> {{domxref("HTMLHeadingElement")}}</li> +</ul> + +<h2 id="Atributos">Atributos</h2> + +<p>Esses elementos incluem os <a href="/en-US/docs/Web/HTML/Global_attributes">atributos globais.</a></p> + +<p>O atributo <strong>align</strong> está {{deprecated_inline}} no {{HTMLVersionInline(4.01)}} e {{obsolete_inline}} no {{HTMLVersionInline(5)}}.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Todos_os_cabeçalhos">Todos os cabeçalhos</h3> + +<p>O seguinte código mostra, em uso, todos os níveis de cabeçalho.</p> + +<pre class="brush: html notranslate"><h1>Cabeçalho nível 1</h1> +<h2>Cabeçalho nível 2</h2> +<h3>Cabeçalho nível 3</h3> +<h4>Cabeçalho nível 4</h4> +<h5>Cabeçalho nível 5</h5> +<h6>Cabeçalho nível 6</h6> +</pre> + +<p>Aqui está o resultado deste código:</p> + +<p>{{ EmbedLiveSample('Todos_os_cabeçalhos', '320', '300', '', 'Web/HTML/Element/Heading_Elements') }}</p> + +<h3 id="Página_de_exemplo">Página de exemplo</h3> + +<p>O código seguinte mostra alguns cabeçalhos com um pouco de conteúdo abaixo deles.</p> + +<pre class="brush: html notranslate"><h1>Elementos de cabeçalho</h1> +<h2>Sumário</h2> +<p>Algum texto aqui...</p> + +<h2>Exemplos</h2> +<h3>Exemplo 1</h3> +<p>Algum texto aqui...</p> + +<h3>Exemplo 2</h3> +<p>Algum texto aqui...</p> + +<h2>Veja também</h2> +<p>Algum texto aqui...</p> +</pre> + +<p>Aqui está o resultado deste código:</p> + +<p>{{ EmbedLiveSample('Página_de_exemplo', '360', '480', '', 'Web/HTML/Element/Heading_Elements') }}</p> + +<h2 id="Notas">Notas</h2> + +<p><strong>Não</strong> use níveis menores para diminuir o tamanho da fonte do cabeçalho: use a propriedade <a href="/en-US/docs/Web/CSS">CSS</a> {{cssxref("font-size")}} .</p> + +<p>Evite pular níveis de cabeçalhos: sempre comece com <code><h1></code>, depois <code><h2></code> e assim por diante. Tente, também, ter pelo menos um cabeçalho de primeiro nível em uma página..</p> + +<p>Em {{HTMLVersionInline(5)}}, use o elemento {{HTMLElement("section")}} para definir o outline de um documento. Cabeçalhos fornecem títulos para secções e subsecções. Você também pode agrupar um cabeçalho e seu conteúdo usando o elemento {{HTMLElement("div")}} .</p> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.5', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></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>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte Básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte Básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="sect1"></h2> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{HTMLElement("p")}}</li> + <li>{{HTMLElement("div")}}</li> + <li>{{HTMLElement("section")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/pt-br/web/html/element/hgroup/index.html b/files/pt-br/web/html/element/hgroup/index.html new file mode 100644 index 0000000000..7116604fe4 --- /dev/null +++ b/files/pt-br/web/html/element/hgroup/index.html @@ -0,0 +1,125 @@ +--- +title: <hgroup> +slug: Web/HTML/Element/hgroup +translation_of: Web/HTML/Element/hgroup +--- +<div>{{HTMLRef}}{{seeCompatTable}}</div> + +<p>O <strong>elemento HTML <code><hgroup></code> </strong>destina-se a agrupar cabeçalhos de diferentes níveis para uma seção do documento. Ele agrupa (é um container para) um conjunto de elementos <code><a href="/en-US/docs/Web/HTML/Element/Heading_Elements"><h1>–<h6></a></code>.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Categorias de conteudo</th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, heading content, palpable content.</td> + </tr> + <tr> + <th scope="row">Conteúdo permitido</th> + <td>One or more {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, and/or {{HTMLElement("h6")}}.</td> + </tr> + <tr> + <th scope="row">Omissão de tag</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row"><br> + Elementos-pai permitidos</th> + <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">flow content</a>.</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="atributos">atributos</h2> + +<p>Esse elemento admite apenas os <a href="/en-US/docs/HTML/Global_attributes">global attributes</a> (atributos globais)</p> + +<h2 id="Notas_sobre_o_uso">Notas sobre o uso</h2> + +<div class="note"> +<p>O elemento <code><hgroup></code> foi removido da especificação do W3C para a HTML5, mas ainda se encontra na especificação HTML do WHATWG. Foi parcialmente implementado na maioria dos navegadores, contudo é pouco provável que seja incluído na especificação.<br> + Considerando que a finalidade do elemento <code><hgroup></code> é a de definir a maneira como os títulos serão mostrados pelo <a href="/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#The_HTML5_outline_algorithm">outline algorithm definido na especificação da HTML</a> e considerando ainda que o <strong>outline algorithm da HTML não está implementado em nenhum navegador</strong>, conclui-se que, na prática, a semântica do elemento <code><hgroup></code> é meramente teórica.<br> + A especificação do W3C para a HTML5 fornece algumas sugestões para a marcação de <a href="https://www.w3.org/TR/html52/common-idioms-without-dedicated-elements.html#common-idioms-without-dedicated-elements">Subheadings, subtitles, alternative titles and taglines</a> sem que se use o elemento <code><hgroup></code>.</p> +</div> + +<p><code>O elemento <hgroup> permite que o cabeçalho principal de uma seção de documento seja agrupado com quaisquer cabeçalhos secundarios-como subtitulos ou titulos alternativos-para formatar um cabeçalho de varios niveis.</code></p> + +<p><font face="consolas, Liberation Mono, courier, monospace"><span style="">Em outras palavras o elemento <hgroup> impede que qualquer um dos seus filhos secundarios <h1>-<h6> crie seçoes separadas propias no esboço-como esses elementos <h1>-<h6> normalmene seriam se não fossem filhos de nenhum <hgroup> </span></font></p> + +<p>Então, no esboço abstrato produzida pelo algortimo abstrato do HTML definido na especificação HTML, o <hgroup> como um todo forma uma posição lógica simples, com todo o conjunto de filhos <h1>-<h6> do <hgroup> entrando no esquema como uma unidade multinível, para compreender esse cabeçalho lógico único no resumo abstrato.</p> + +<p>Para produzir alguma (não-abstrato) visualização não renderizada como um esboço, alguma escolhe deve ser feita no design para renderizar ferramentas sobre como renderizar <hgroup> cabeçalhos como um jeito para transmitir sua natureza multi-nível. Há uma varidade de jeitos que <hgroup> pode ser mostrado em um esboço renderizado; por exemplo:</p> + +<ul> + <li>um <hgroup> pode ser mostrado em um esboço renderizado com dois pontos e espaço (": ") ou outra pontuação após o cabeçalho principal e antes do primeiro cabeçalho secundário (e como a mesma pontuaçã, ou parecida, antes de qualquer cabeçalho secundário).</li> + <li>um <hgroup> pode ser mostrado em um esboço renderizado com o primeiro cabeçalho seguido de parênteses ao redor do segundo cabeçalho (s).</li> +</ul> + +<p>Considere o documento HTML a seguir:</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<title>HTML Standard</title> +<body> + <hgroup id="document-title"> + <h1>HTML</h1> + <h2>Living Standard — Last Updated 12 August 2016</h2> + </hgroup> + <p>Some intro to the document.</p> + <h2>Table of contents</h2> + <ol id=toc>...</ol> + <h2>First section</h2> + <p>Some intro to the first section.</p> +</body></pre> + +<p>Um esboço renderizado para esse documento seria como:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14599/outline-colon.png" style="height: 99px; width: 450px;"></p> + +<p>Isso é, o esboço renderizado deve ser o título primário, HTML, seguido por dois pontos e espaço, seguido pelo título secundário, Living Standard - Last Update 12 August 2016.</p> + +<p>Ou, o esboço renderizado para aquele documento poderia ser como:</p> + +<p><img alt="Rendered outline that includes an <hgroup> element, with parens around the secondary heading" src="https://mdn.mozillademos.org/files/14601/outline-paren.png" style="height: 106px; width: 450px;"></p> + +<p>Isso é, o esboço renderizado deve mostrar o título primário, HTML, seguido pelo título secundário mostrado entre parênteses: (Living Standard - Last Updated 12 August 2016).</p> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush: html notranslate"><hgroup id="document-title"> + <h1>HTML</h1> + <h2>Living Standard — Last Updated 12 August 2016</h2> +</hgroup> +</pre> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-hgroup-element', '<hgroup>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibiliade_do_navegador">Compatibiliade do navegador</h2> + +<div class="hidden">A tabela de compatibilidade nessa página é gerada através de dados estruturados. Se você gostaria de contribuir com esses dados, por favor cheque https://github.com/mdn/browser-compat-data e nos mande um pull request.</div> + +<p>{{Compat("html.elements.hgroup")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Others section-related elements: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li> + <li><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-br/web/html/element/hr/index.html b/files/pt-br/web/html/element/hr/index.html new file mode 100644 index 0000000000..ef2da20837 --- /dev/null +++ b/files/pt-br/web/html/element/hr/index.html @@ -0,0 +1,149 @@ +--- +title: <hr> +slug: Web/HTML/Element/hr +translation_of: Web/HTML/Element/hr +--- +<h2 id="Sumário">Sumário</h2> + +<p>O <strong>elemento HTML <code><hr></code></strong> representa uma quebra temática entre elementos de nível de parágrafo (por exemplo , uma mudança da cena de uma história, ou uma mudança de tema com uma seção). Nas versões anteriores do HTML, representava uma linha horizontal. Pode continuar sendo exibida como uma linha horizontal nos navegadores, mas agora está definida em termos semânticos, em vez de termos de apresentação.</p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categorias de conteúdo</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Fluxo de conteúdo</a>.</li> + <li><dfn>Conteúdo permitido</dfn> Nenhum, é um {{Glossary("empty element")}}.</li> + <li><dfn>Omissão de Tag</dfn> Deve conter a tag de início, mas não precisa ter uma tag de encerramento.</li> + <li><dfn>Elementos pai permitidos</dfn> Qualquer elemento que aceite <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">fluxo de conteúdo</a>.</li> + <li><dfn>Interface DOM</dfn> {{domxref("HTMLHRElement")}}</li> +</ul> + +<h2 id="Atributos">Atributos</h2> + +<p><span style="line-height: 21px;">Este elemento inclui os </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">atributos globais</a><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{htmlattrdef("align")}} {{deprecatedGeneric("inline","HTML4.01")}} {{obsoleteGeneric("inline","HTML5")}}</dt> + <dd>Define a regra de alinhamento na página. Se nenhum valor for especificado, o valor padrão é <code>left</code>.</dd> + <dt>{{htmlattrdef("color")}} {{Non-standard_inline}}</dt> + <dd>Denife a regra da cor através do nome da cor ou um valor hexadecimal.</dd> + <dt>{{htmlattrdef("noshade")}} {{deprecatedGeneric("inline","HTML4.01")}} {{obsoleteGeneric("inline","HTML5")}}</dt> + <dd>Deine a regra para não ter sombreamento.</dd> + <dt>{{htmlattrdef("size")}} {{deprecatedGeneric("inline","HTML4.01")}} {{obsoleteGeneric("inline","HTML5")}}</dt> + <dd>Denife a altura, em pixels.</dd> + <dt>{{htmlattrdef("width")}} {{deprecatedGeneric("inline","HTML4.01")}} {{obsoleteGeneric("inline","HTML5")}}</dt> + <dd>Define a regra de comprimento na página através de um valor em pixel ou porcentagem.</dd> +</dl> + +<h2 id="Exemplo">Exemplo</h2> + +<pre class="brush: html"><p>Este é o primeiro parágrafo do texto. Este é o primeiro parágrafo do texto. + Este é o primeiro parágrafo do texto. Este é o primeiro parágrafo do texto.</p> + +<hr> + +<p>Este é o segundo parágrafo do texto. Este é o segundo parágrafo do texto. + Este é o segundo parágrafo do texto. Este é o segundo parágrafo do texto.</p> +</pre> + +<p>O HTML acima irá produzir:</p> + +<p>Este é o primeiro parágrafo do texto. Este é o primeiro parágrafo do texto. Este é o primeiro parágrafo do texto. Este é o primeiro parágrafo do texto.</p> + +<hr> +<p>Este é o segundo parágrafo do texto. Este é o segundo parágrafo do texto. Este é o segundo parágrafo do texto. Este é o segundo parágrafo do texto.</p> + +<h2 id="Notas">Notas</h2> + +<p>Para alterar a aparencia da linha ou as lacunas entre ela e os parágrafos, utilize <a href="/en-US/docs/CSS" title="CSS">folhas de estilo em cascata</a>.</p> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-hr-element', '<hr>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Definição do elemento <code>hr</code></td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'rendering.html#the-hr-element-0')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Sugestão de renderização padrão do elemento <code>hr</code></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-hr-element', '<hr>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.3', '<hr>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade nos Navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracteristica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracteristica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="sect1"> </h2> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/HTML/Element/p" title="HTML/Element/p">Elemento HTML parágrafo</a></li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/pt-br/web/html/element/html/index.html b/files/pt-br/web/html/element/html/index.html new file mode 100644 index 0000000000..da4b93ecea --- /dev/null +++ b/files/pt-br/web/html/element/html/index.html @@ -0,0 +1,139 @@ +--- +title: <html> +slug: Web/HTML/Element/html +tags: + - Elemento + - Elemento raiz HTML + - HTML + - Internet + - Rede + - Referencia + - Web +translation_of: Web/HTML/Element/html +--- +<h2 id="Sumário">Sumário</h2> + +<p>O elemento <strong>HTML <span style="font-family: Courier New;"><html></span> </strong>(ou <em>HTML root element</em>) representa a raiz de um HTML ou XHTML documento. Todos os outros elementos devem ser descendentes desse elemento.</p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categorias de conteúdo</a></dfn> Nenhuma.</li> + <li><dfn>Conteúdo permitido</dfn> Um elemento {{HTMLElement("head")}}, seguido por um elemento {{HTMLElement("body")}}.</li> + <li><dfn>Omissão de tag</dfn>A tag inicial pode ser omitida se a primeira coisa dentro do elemento <code><html></code> não for um comentário.<br> + A tag final pode ser omitida se o elemento <code><html></code> não for imediatamente seguido por um comentário, e conter um elemento {{HTMLElement("body")}} ou que não está vazio, ou cuja tag inicial está presente.</li> + <li><dfn>Elementos pais permitidos</dfn>Como o elemento raiz do documento, ou qualquer fragmento de subdocumento é permitido em um documento composto.</li> + <li><dfn>DOM interface</dfn> {{domxref("HTMLhtmlElement")}}</li> +</ul> + +<h2 id="Atributos">Atributos</h2> + +<p><span style="line-height: 21px;">Esse elemento inclui os </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">atributos globais</a><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{htmlattrdef("manifest")}} {{HTMLVersionInline(5)}} {{Gecko_minversion_inline(1.9)}}</dt> + <dd>Especifica a URI de um recurso manifest indicando os recursos que devem ser carregados na memória local. Veja <a href="/en-US/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">Recursos offline em Firefox</a> para detalhes.</dd> + <dt>{{htmlattrdef("version")}} {{deprecatedGeneric('inline','HTML4.01')}} {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>Especifica a versão da definição de tipo de documento HTML que governa o documento atual. Esse atributo não é necessário, porque é redundante com a informação de versão na declaração de tipo de documento.</dd> +</dl> + +<h2 id="Exemplo">Exemplo</h2> + +<p>O DOCTYPE usado no exemplo seguinte indica HTML5.</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head>...</head> + <body>...</body> +</html> +</pre> + +<h2 id="Notas">Notas</h2> + +<p>Desde que o elemento <code><html></code> seja o primeiro em documento outro que comenta, esse é chamado o elemento raiz. Embora essa tag possa ser implícita, ou não requerida, com <a href="/en-US/docs/HTML" title="HTML">HTML</a>, essa é requerida para ser aberta e fechada em <a href="/en-US/docs/XHTML" title="XHTML">XHTML</a>.</p> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-html-element', '<html>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'the-html-element.html#the-html-element', '<html>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'global.html#h-7.3', '<html>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade dos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>Elemento de alto nível MathML: {{MathMLElement("math")}}</li> + <li>Elemento de alto nível SVG: {{SVGElement("svg")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/pt-br/web/html/element/i/index.html b/files/pt-br/web/html/element/i/index.html new file mode 100644 index 0000000000..75cba69d0a --- /dev/null +++ b/files/pt-br/web/html/element/i/index.html @@ -0,0 +1,158 @@ +--- +title: <i> +slug: Web/HTML/Element/i +tags: + - i +translation_of: Web/HTML/Element/i +--- +<p>O <strong>elemento HTML <code><i></code> </strong> representa uma parte do texto que é destacada do restante por algum motivo, por exemplo, termos técnicos, expressões de outros idiomas ou pensamentos de personagens fictícios. Normalmente, é apresentado com o uso do tipo "itálico".</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Categorias de conteúdo</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Conteúdo de fluxo (flow content)</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">conteúdo com texto (phrasing content)</a>, conteúdo palpável (palpable content).</td> + </tr> + <tr> + <th scope="row">Conteúdo permitido</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Conteúdo com texto (phrasing 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 aceite <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">conteúdo com texto (phrasing content)</a>.</td> + </tr> + <tr> + <th scope="row">ARIA roles permitidos</th> + <td>Qualquer um.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the {{domxref("HTMLSpanElement")}} interface for this element.</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Esse elemento inclui apenas <a href="/en-US/docs/Web/HTML/Global_attributes">atributos globais</a>.</p> + +<h2 id="Exemplo">Exemplo</h2> + +<pre class="brush: html"><p>A expressão em latim <i class="latin">Veni, vidi, vici</i> é frequentemente +mencionada na música, na arte e na literatura.</p> +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>A expressão em latim <em>Veni, vidi, vici</em> é frequentemente mencionada na música, na arte e na literatura.</p> + +<h2 id="Notas">Notas</h2> + +<p>Nas primeiras versões das especificações HTML, a tag <code><i></code> era usada apenas para apresentar textos em itálico, assim como a tag <code><b></code> tag era usada para mostrar textos em negrito. Isso não é mais verdade, já que, atualmente, essas tags definem a semântica, e não mais aparência tipográfica.<code> A tag <i></code> pode representar uma parte do texto com uma diferença semântica, na qual a representação tipográfica padrão é no tipo itálico. Isso significa que os navegadores continuarão a apresentar o conteúdo em itálico, mas, de acordo com o que é definido, isso não é mais requerido.</p> + +<p>Use esse elemento somente quando não existir mais nenhum outro elemento com semântica apropriada. Por exemplo:</p> + +<ul> + <li>Use {{HTMLElement("em")}} para indicar ênfase ou estresse.</li> + <li>Use {{HTMLElement("strong")}} para indicar importância.</li> + <li>Use {{HTMLElement("mark")}} para indicar relevância.</li> + <li>Use {{HTMLElement("cite")}} para citar o nome de um trabalho, tal como um livro, jogo ou música.</li> + <li>Use {{HTMLElement("dfn")}} para m<span class="short_text" id="result_box" lang="pt"><span>arcar a instância de definição de um termo</span></span> .</li> +</ul> + +<p>Uma boa ideia é usar o atributo <strong>class</strong> para identificar porque esse elemento está sendo usado. Com isso, caso a apresentação precise ser alterada com o tempo, isso pode ser feito de forma seletiva utilizando as folhas de estilo.</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-i-element', '<i>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-i-element', '<i>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<b>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>{{HTMLRef}}</p> + +<h2 id="Ver_também">Ver também</h2> + +<ul> + <li>{{HTMLElement("em")}}</li> +</ul> diff --git a/files/pt-br/web/html/element/iframe/index.html b/files/pt-br/web/html/element/iframe/index.html new file mode 100644 index 0000000000..c202629c8e --- /dev/null +++ b/files/pt-br/web/html/element/iframe/index.html @@ -0,0 +1,178 @@ +--- +title: <iframe> +slug: Web/HTML/Element/iframe +translation_of: Web/HTML/Element/iframe +--- +<p><span id="ouHighlight__0_2TO0_0">O <strong>elemento</strong></span><strong><span id="noHighlight_0.6669463853503006"> </span><span id="ouHighlight__4_7TO2_5">HTML</span><span id="noHighlight_0.9190923802093316"> </span></strong><span id="ouHighlight__9_16TO7_14"><strong><iframe></strong> (ou <em>elemento HTML </em></span><em><span id="ouHighlight__35_40TO29_34">inline</span><span id="noHighlight_0.8618476026650426"> </span><span id="ouHighlight__42_46TO36_40">frame</span></em><span id="ouHighlight__48_55TO54_54">)</span><span id="noHighlight_0.7068545802198582"> </span><span id="ouHighlight__57_66TO56_65">representa</span><span id="noHighlight_0.7526791453051795"> </span><span id="ouHighlight__68_68TO67_68">um</span><span id="noHighlight_0.44971730954195105"> </span><span id="ouHighlight__86_92TO70_77">contexto</span><span id="noHighlight_0.09083070847867625"> de </span><span id="ouHighlight__77_84TO82_90">navegação</span><span id="noHighlight_0.37968552813404615"> </span><span id="ouHighlight__70_75TO92_99">aninhado</span><span id="noHighlight_0.5995269340430607">,</span><span id="noHighlight_0.008704451712585215"> </span><span id="ouHighlight__95_105TO102_113">efetivamente</span><span id="noHighlight_0.5931006711248601"> </span><span id="ouHighlight__107_115TO115_124">incorporando</span><span id="noHighlight_0.6374518958720761"> </span><span id="ouHighlight__117_123TO126_130">outra</span><span id="noHighlight_0.8893985313976909"> </span><span id="ouHighlight__130_133TO132_137">página</span><span id="noHighlight_0.8866311110803541"> </span><span id="ouHighlight__125_128TO139_142">HTML</span><span id="noHighlight_0.23447126715327776"> </span><span id="ouHighlight__135_138TO144_147">para</span><span id="noHighlight_0.07307917672825964"> </span><span id="ouHighlight__140_142TO149_149">a</span><span id="noHighlight_0.12950057344301286"> </span><span id="ouHighlight__152_155TO151_156">página</span><span id="noHighlight_0.26467654674888124"> </span><span id="ouHighlight__144_150TO158_162">atual</span><span id="noHighlight_0.13149866746429495">.</span><span id="noHighlight_0.1583040075152209"> </span><span id="ouHighlight__158_159TO165_166">Em</span><span id="noHighlight_0.5442761031849714"> </span><span id="ouHighlight__161_164TO168_171">HTML</span><span id="noHighlight_0.7415189012773161"> </span><span id="ouHighlight__166_169TO173_176">4.01</span><span id="noHighlight_0.18966050608785345">,</span><span id="noHighlight_0.041719693152791726"> </span><span id="ouHighlight__172_172TO179_180">um</span><span id="noHighlight_0.3042841997000498"> </span><span id="ouHighlight__174_181TO182_190">documento</span><span id="noHighlight_0.23497132229022943"> </span><span id="ouHighlight__183_185TO192_195">pode</span><span id="noHighlight_0.4008871450338423"> </span><span id="ouHighlight__187_193TO197_202">conter</span><span id="noHighlight_0.4071292878658189"> </span><span id="ouHighlight__195_195TO204_206">uma</span><span id="noHighlight_0.47457438988490635"> </span><span id="ouHighlight__197_200TO208_213">cabeça</span><span id="noHighlight_0.3373122542468538"> </span><span id="ouHighlight__202_204TO215_215">e</span><span id="noHighlight_0.23651855095925434"> </span><span id="ouHighlight__206_206TO217_218">um</span><span id="noHighlight_0.6411380227090818"> </span><span id="ouHighlight__208_211TO220_224">corpo</span><span id="noHighlight_0.08602879881083225"> </span><span id="ouHighlight__213_214TO226_227">ou</span><span id="noHighlight_0.37958973706042986"> </span><span id="ouHighlight__216_216TO229_231">uma</span><span id="noHighlight_0.45566362837898144"> </span><span id="ouHighlight__218_221TO233_238">cabeça</span><span id="noHighlight_0.048174792122936794"> </span><span id="ouHighlight__223_225TO240_240">e</span><span id="noHighlight_0.6052151772063192"> </span><span id="ouHighlight__227_227TO242_243">um</span><span id="noHighlight_0.527561942369029"> </span><span id="ouHighlight__229_238TO245_252">conjunto</span><span id="noHighlight_0.2241339892956346"> de </span><span id="ouHighlight__229_238TO257_264">quadros,</span><span id="noHighlight_0.7466403298536145"> </span><span id="ouHighlight__240_242TO266_268">mas</span><span id="noHighlight_0.60661452595949"> </span><span id="ouHighlight__244_246TO270_272">não</span><span id="noHighlight_0.2055690028736905"> </span><span id="ouHighlight__248_251TO274_278">tanto</span><span id="noHighlight_0.17056980349635997"> </span><span id="ouHighlight__253_253TO280_281">um</span><span id="noHighlight_0.1816371921642101"> </span><span id="ouHighlight__255_258TO283_287">corpo</span><span id="noHighlight_0.6356568181960188"> </span><span id="ouHighlight__260_262TO289_289">e</span><span id="noHighlight_0.024514355871078586"> </span><span id="ouHighlight__264_264TO291_292">um</span><span id="noHighlight_0.8940702635096576"> </span><span id="ouHighlight__266_275TO294_301">conjunto</span><span id="noHighlight_0.8977448712057324"> de </span><span id="ouHighlight__266_275TO306_313">quadros.</span><span id="noHighlight_0.0918193409065523"> </span><span id="ouHighlight__277_283TO315_324">No entanto</span><span id="noHighlight_0.1762661889772812">,</span><span id="noHighlight_0.48158682580055384"> </span><span id="ouHighlight__286_287TO327_328">um</span><span id="noHighlight_0.3295608382994803"> </span><span id="ouHighlight__289_296TO330_337"><iframe> </span><span id="ouHighlight__298_300TO338_341">pode</span><span id="noHighlight_0.4581118623696281"> </span><span id="ouHighlight__302_303TO343_345">ser</span><span id="noHighlight_0.9491726714358877"> </span><span id="ouHighlight__305_308TO347_351">usado</span><span id="noHighlight_0.7935326599727865"> </span><span id="ouHighlight__310_315TO353_358">dentro</span><span id="noHighlight_0.8882364440599055"> de </span><span id="ouHighlight__317_317TO363_364">um</span><span id="noHighlight_0.35659349587226235"> </span><span id="ouHighlight__335_338TO366_370">corpo</span><span id="noHighlight_0.6180173905423034"> de </span><span id="ouHighlight__326_333TO375_383">documento</span><span id="noHighlight_0.6325067995535371"> </span><span id="ouHighlight__319_324TO385_390">normal</span><span id="noHighlight_0.5489940461070744">.</span><span id="noHighlight_0.719136343959252"> </span><span id="ouHighlight__341_344TO393_396">Cada</span><span id="noHighlight_0.46662421428049483"> </span><span id="ouHighlight__355_361TO398_405">contexto</span><span id="noHighlight_0.42272719072589454"> de </span><span id="ouHighlight__346_353TO410_418">navegação</span><span id="noHighlight_0.4776198962890033"> </span><span id="ouHighlight__363_365TO420_422">tem</span><span id="noHighlight_0.8284713294373617"> </span><span id="ouHighlight__367_369TO424_426">sua</span><span id="noHighlight_0.11245358630162183"> </span><span id="ouHighlight__371_373TO428_434">própria</span><span id="noHighlight_0.6967118603938671"> </span><span id="ouHighlight__383_389TO436_443">história</span><span id="noHighlight_0.9731849685107241"> de </span><span id="ouHighlight__375_381TO448_453">sessão</span><span id="noHighlight_0.10662184845626404"> </span><span id="ouHighlight__391_393TO455_455">e</span><span id="noHighlight_0.6199151545361639"> o </span><span id="ouHighlight__402_409TO459_467">documento</span><span id="noHighlight_0.5109426886358104"> </span><span id="ouHighlight__395_400TO469_473">ativo</span><span id="noHighlight_0.14975366384711874">.</span><span id="noHighlight_0.3061514493180468"> </span><span id="ouHighlight__412_414TO476_476">O</span><span id="noHighlight_0.1127544463071044"> </span><span id="ouHighlight__425_431TO478_485">contexto</span><span id="noHighlight_0.8936920262443369"> de </span><span id="ouHighlight__416_423TO490_498">navegação</span><span id="noHighlight_0.33159829590847844"> </span><span id="ouHighlight__433_436TO500_502">que</span><span id="noHighlight_0.19422162750175248"> </span><span id="ouHighlight__438_445TO504_509">contém</span><span id="noHighlight_0.7257538370863912"> </span><span id="ouHighlight__447_449TO511_511">o</span><span id="noHighlight_0.5658871331962624"> </span><span id="ouHighlight__460_466TO513_520">conteúdo</span><span id="noHighlight_0.09444488508842569"> </span><span id="ouHighlight__451_458TO522_532">incorporado</span><span id="noHighlight_0.9102766420541839"> </span><span id="ouHighlight__468_469TO534_534">é</span><span id="noHighlight_0.7721214942019884"> </span><span id="ouHighlight__471_476TO536_542">chamado</span><span id="noHighlight_0.4698330433441296"> </span><span id="ouHighlight__478_480TO544_544">o</span><span id="noHighlight_0.2495339172689015"> </span><span id="ouHighlight__482_487TO546_548">pai</span><span id="noHighlight_0.9252421234467765"> de </span><span id="ouHighlight__498_504TO553_560">contexto</span><span id="noHighlight_0.9453239564748947"> de </span><span id="ouHighlight__489_496TO565_573">navegação</span><span id="noHighlight_0.09080985933367569">.</span><span id="noHighlight_0.8377870469347468"> </span><span id="ouHighlight__507_509TO576_576">O</span><span id="noHighlight_0.9334447973584516"> </span><span id="ouHighlight__530_536TO578_585">contexto</span><span id="noHighlight_0.2227516502872307"> de </span><span id="ouHighlight__521_528TO590_598">navegação</span><span id="noHighlight_0.16300547091532674"> </span><span id="ouHighlight__511_519TO600_616">de nível superior</span><span id="noHighlight_0.37812902714977636"> </span><span id="ouHighlight__538_543TO618_621">(que</span><span id="noHighlight_0.06803102089807028"> </span><span id="ouHighlight__549_550TO623_625">não</span><span id="noHighlight_0.8934888127100214"> </span><span id="ouHighlight__545_547TO627_629">tem</span><span id="noHighlight_0.11394040192067251"> um </span><span id="ouHighlight__552_558TO634_637">pai)</span><span id="noHighlight_0.19702167113012076"> </span><span id="ouHighlight__563_571TO639_649">normalmente</span><span id="noHighlight_0.5464819057687249"> </span><span id="ouHighlight__560_561TO651_651">é</span><span id="noHighlight_0.7935925262500484"> </span><span id="ouHighlight__573_575TO653_653">a</span><span id="noHighlight_0.5204863466938037"> </span><span id="ouHighlight__585_590TO655_660">janela</span><span id="noHighlight_0.6555245992130596"> do </span><span id="ouHighlight__577_583TO665_673">navegador</span><span id="noHighlight_0.2248931828460552">.</span></p> + +<div> </div> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, embedded content, interactive content, palpable content.</li> + <li><dfn>Permitted content</dfn>Special, see prose</li> + <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li> + <li><dfn>Permitted parent elements</dfn> Any element that accepts embedded content.</li> + <li><dfn>DOM interface</dfn> {{domxref("HTMLIFrameElement")}}</li> +</ul> + +<h2 id="Atributos">Atributos</h2> + +<p><span style="line-height: 21px;">Este elemento inclui os </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">atributos globais</a><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{htmlattrdef("align")}} {{deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd> + <div><span id="ouHighlight__0_2TO0_0">O</span><span id="noHighlight_0.24997786392821197"> </span><span id="ouHighlight__4_12TO2_12">alinhamento</span><span id="noHighlight_0.22656558496550771"> </span><span id="ouHighlight__17_20TO14_18">deste</span><span id="noHighlight_0.7836677945677705"> </span><span id="ouHighlight__22_28TO20_27">elemento</span><span id="noHighlight_0.16174666443448748"> </span><span id="ouHighlight__30_44TO29_41">em relação ao</span><span id="noHighlight_0.14496186706385028"> </span><span id="ouHighlight__62_68TO43_50">contexto</span><span id="noHighlight_0.7543316592254892">.</span></div> + </dd> + <dt>{{htmlattrdef("allowfullscreen")}}</dt> + <dd> + <div><span id="ouHighlight__0_3TO0_3">Esse</span><span id="noHighlight_0.6314338952823772"> </span><span id="ouHighlight__5_13TO5_12">atributo</span><span id="noHighlight_0.7825376612287125"> </span><span id="ouHighlight__15_17TO14_17">pode</span><span id="noHighlight_0.19479025260229565"> </span><span id="ouHighlight__19_20TO19_21">ser</span><span id="noHighlight_0.5839816205367978"> </span><span id="ouHighlight__22_24TO23_30">definido</span><span id="noHighlight_0.5360761086745299"> </span><span id="ouHighlight__26_27TO32_35">como</span><span id="noHighlight_0.10629688398878151"> </span><span id="ouHighlight__29_32TO37_40">true</span><span id="noHighlight_0.8982082398690693"> </span><span id="ouHighlight__34_35TO42_43">se</span><span id="noHighlight_0.555583733569748"> </span><span id="ouHighlight__37_39TO45_45">o</span><span id="noHighlight_0.9959450998202188"> </span><span id="ouHighlight__41_45TO47_52">quadro</span><span id="noHighlight_0.03228124818894018"> </span><span id="ouHighlight__47_48TO54_54">é</span><span id="noHighlight_0.9666103340848506"> </span><span id="ouHighlight__50_56TO56_64">permitido</span><span id="noHighlight_0.47323473457719744"> </span><span id="ouHighlight__58_59TO66_69">para</span><span id="noHighlight_0.6652721099398025"> </span><span id="ouHighlight__61_62TO71_73">ser</span><span id="noHighlight_0.2868850867204916"> </span><span id="ouHighlight__64_69TO75_82">colocado</span><span id="noHighlight_0.5987613350152338"> </span><span id="ouHighlight__71_74TO84_85">em</span><span id="noHighlight_0.7130411807442527"> </span><span id="ouHighlight__88_91TO87_90">modo</span><span id="noHighlight_0.84209501528823"> de </span><span id="ouHighlight__81_86TO95_98">tela</span><span id="noHighlight_0.011103003659679644"> </span><span id="ouHighlight__76_79TO100_104">cheia</span><span id="noHighlight_0.24490984951075978">,</span><span id="noHighlight_0.7441355281198541"> </span><span id="ouHighlight__96_102TO107_114">chamando</span><span id="noHighlight_0.04897604081532975"> </span><span id="ouHighlight__104_106TO116_118">seu</span><span id="noHighlight_0.31073403106888036"> </span><span id="ouHighlight__154_159TO120_125">método</span><span id="noHighlight_0.33844835170911885"> de </span><span id="ouHighlight__108_152TO130_174">{{domxref("element.mozRequestFullScreen()")}}</span><span id="noHighlight_0.9401779656159432">.</span><span id="noHighlight_0.12303971833778898"> </span><span id="ouHighlight__162_163TO177_178">Se</span><span id="noHighlight_0.14507633873940823"> </span><span id="ouHighlight__165_168TO180_183">isto</span><span id="noHighlight_0.10471874886244253"> </span><span id="ouHighlight__170_174TO185_195">não estiver</span><span id="noHighlight_0.9838197014966836"> </span><span id="ouHighlight__176_178TO197_204">definido</span><span id="noHighlight_0.5479055955875245">,</span><span id="noHighlight_0.8650559681603547"> </span><span id="ouHighlight__181_183TO207_207">o</span><span id="noHighlight_0.11166700213781905"> </span><span id="ouHighlight__185_191TO209_216">elemento</span><span id="noHighlight_0.2986061750343061"> </span><span id="ouHighlight__193_197TO218_225">não pode</span><span id="noHighlight_0.91341044207422"> </span><span id="ouHighlight__199_200TO227_229">ser</span><span id="noHighlight_0.3103661185116665"> </span><span id="ouHighlight__202_207TO231_238">colocado</span><span id="noHighlight_0.5834952719850122"> </span><span id="ouHighlight__209_212TO240_241">em</span><span id="noHighlight_0.8695569740954532"> </span><span id="ouHighlight__226_229TO243_246">modo</span><span id="noHighlight_0.19858498593448692"> de </span><span id="ouHighlight__219_224TO251_254">tela</span><span id="noHighlight_0.8800761426805551"> </span><span id="ouHighlight__214_217TO256_260">cheia</span><span id="noHighlight_0.011155730652686601">.</span></div> + </dd> + <dt>{{htmlattrdef("frameborder")}} {{HTMLVersionInline(4)}} only</dt> + <dd> + <div><span id="ouHighlight__0_2TO0_0">O</span><span id="noHighlight_0.8512278081263427"> </span><span id="ouHighlight__4_8TO2_6">valor</span><span id="noHighlight_0.733367858878109"> </span><span id="ouHighlight__10_10TO8_8">1</span><span id="noHighlight_0.16853479544823474"> </span><span id="ouHighlight__12_15TO10_11">(o</span><span id="noHighlight_0.491871002236276"> </span><span id="ouHighlight__17_24TO13_19">padrão) </span><span id="noHighlight_0.6669094153458415">pede </span><span id="ouHighlight__32_34TO29_30">ao</span><span id="noHighlight_0.4320332696441004"> </span><span id="ouHighlight__36_42TO32_40">navegador</span><span id="noHighlight_0.16802561710287067"> </span><span id="ouHighlight__44_45TO42_45">para</span><span id="noHighlight_0.7875067682094121"> </span><span id="ouHighlight__47_50TO47_54">desenhar</span><span id="noHighlight_0.864261459064067"> </span><span id="ouHighlight__52_52TO56_58">uma</span><span id="noHighlight_0.2056052045991542"> </span><span id="ouHighlight__54_59TO60_64">borda</span><span id="noHighlight_0.544041546749916"> </span><span id="ouHighlight__61_67TO66_70">entre</span><span id="noHighlight_0.5758489986996733"> </span><span id="ouHighlight__69_72TO72_75">este</span><span id="noHighlight_0.5905069499949025"> </span><span id="ouHighlight__74_78TO77_82">quadro</span><span id="noHighlight_0.845490504311595"> </span><span id="ouHighlight__80_82TO84_84">e</span><span id="noHighlight_0.8643676865658729"> </span><span id="ouHighlight__84_88TO86_93">todos os</span><span id="noHighlight_0.17515847864621453"> </span><span id="ouHighlight__90_94TO95_100">outros</span><span id="noHighlight_0.2287674149288701"> </span><span id="ouHighlight__96_100TO102_108">quadros</span><span id="noHighlight_0.6074431009211665">.</span><span id="noHighlight_0.27959841709816163"> </span><span id="ouHighlight__103_105TO111_111">O</span><span id="noHighlight_0.2294694830679993"> </span><span id="ouHighlight__107_111TO113_117">valor</span><span id="noHighlight_0.2738371835815065"> </span><span id="ouHighlight__113_113TO119_119">0</span><span id="noHighlight_0.5289409112512771"> </span><span id="ouHighlight__115_119TO121_127">informa</span><span id="noHighlight_0.8734286650339449"> </span><span id="ouHighlight__121_123TO129_130">ao</span><span id="noHighlight_0.1563052178218327"> </span><span id="ouHighlight__125_131TO132_140">navegador</span><span id="noHighlight_0.9260263574232861"> </span><span id="ouHighlight__137_138TO142_145">para</span><span id="noHighlight_0.3763038180916595"> </span><span id="ouHighlight__133_135TO147_149">não</span><span id="noHighlight_0.6695026090692272"> </span><span id="ouHighlight__140_143TO151_156">traçar</span><span id="noHighlight_0.8360238705207243"> </span><span id="ouHighlight__145_145TO158_160">uma</span><span id="noHighlight_0.13571258961256466"> </span><span id="ouHighlight__147_152TO162_170">fronteira</span><span id="noHighlight_0.8126339175134085"> </span><span id="ouHighlight__154_160TO172_176">entre</span><span id="noHighlight_0.12978332759636757"> </span><span id="ouHighlight__162_165TO178_181">este</span><span id="noHighlight_0.20431415927445767"> </span><span id="ouHighlight__167_171TO183_188">quadro</span><span id="noHighlight_0.5415896054190845"> </span><span id="ouHighlight__173_175TO190_190">e</span><span id="noHighlight_0.2676877942243148"> </span><span id="ouHighlight__177_181TO192_197">outros</span><span id="noHighlight_0.30157822837874426"> </span><span id="ouHighlight__183_188TO199_205">quadros</span><span id="noHighlight_0.5126415599703605">.</span></div> + </dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>Indica a altura do quadro {{HTMLVersionInline(5)}} em pixels CSS, ou {{HTMLVersionInline(4.01)}} em pixels ou porcentagem.</dd> + <dt>{{htmlattrdef("longdesc")}} {{HTMLVersionInline(4)}} only</dt> + <dd>Uma URI de uma longa descrição do quadro. <span id="ouHighlight__0_5TO0_7">Devido à</span><span id="noHighlight_0.9946345415679745"> </span><span id="ouHighlight__18_23TO9_21">má utilização</span><span id="noHighlight_0.9820779455486066"> </span><span id="ouHighlight__7_16TO23_34">generalizada</span><span id="noHighlight_0.9973237671575901">,</span><span id="noHighlight_0.0557508791974346"> </span><span id="ouHighlight__26_29TO37_40">isto</span><span id="noHighlight_0.5179997381856471"> </span><span id="ouHighlight__34_36TO42_44">não</span><span id="noHighlight_0.3133448057871634"> </span><span id="ouHighlight__31_32TO46_46">é</span><span id="noHighlight_0.93409520860344"> </span><span id="ouHighlight__38_44TO48_51">útil</span><span id="noHighlight_0.9381802688623686"> </span><span id="ouHighlight__46_48TO53_56">para</span><span id="noHighlight_0.9321174723389496"> </span><span id="ouHighlight__61_68TO58_68">navegadores</span><span id="noHighlight_0.10856251225442087"> </span><span id="ouHighlight__50_59TO70_80">não-visuais</span><span id="noHighlight_0.7173030814410857">.</span></dd> + <dt>{{htmlattrdef("marginheight")}} {{HTMLVersionInline(4)}} only</dt> + <dd> + <div><span id="ouHighlight__0_2TO0_0">A</span><span id="noHighlight_0.716841988006143"> </span><span id="ouHighlight__4_9TO2_11">quantidade</span><span id="noHighlight_0.2198611599567401"> </span><span id="ouHighlight__11_12TO13_14">de</span><span id="noHighlight_0.6800827882059048"> </span><span id="ouHighlight__14_18TO16_21">espaço</span><span id="noHighlight_0.8714907239880782"> </span><span id="ouHighlight__20_21TO23_24">em</span><span id="noHighlight_0.3099771487774271"> </span><span id="ouHighlight__23_28TO26_31">pixels</span><span id="noHighlight_0.23489502053200456"> </span><span id="ouHighlight__30_36TO33_37">entre</span><span id="noHighlight_0.07396371679731578"> o </span><span id="ouHighlight__50_56TO41_48">conteúdo</span><span id="noHighlight_0.03618832978644265"> </span><span id="ouHighlight__42_48TO50_58">do quadro</span><span id="noHighlight_0.7393586125152469"> </span><span id="ouHighlight__58_60TO60_60">e</span><span id="noHighlight_0.976571300065446"> </span><span id="ouHighlight__62_64TO62_65">suas</span><span id="noHighlight_0.03782211942024444"> </span><span id="ouHighlight__81_87TO67_73">margens</span><span id="noHighlight_0.14352454281413507"> </span><span id="ouHighlight__66_68TO75_82">superior</span><span id="noHighlight_0.2757160105863739"> </span><span id="ouHighlight__70_72TO84_84">e</span><span id="noHighlight_0.4392555322014181"> </span><span id="ouHighlight__74_79TO86_93">inferior</span><span id="noHighlight_0.8930821342848153">.</span></div> + </dd> + <dt>{{htmlattrdef("marginwidth")}} {{HTMLVersionInline(4)}} only</dt> + <dd>A quantidade de espaço em pixels entre o conteúdo dos quadros e suas margens direita e esquerda.</dd> + <dt>{{htmlattrdef("mozallowfullscreen")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>Use <code><strong>allowfullscreen</strong></code> ao invés. Em Gecko 9.0 or later, this attribute can be set to <code>true</code> if the frame is allowed to be placed into full screen mode by calling its {{domxref("element.mozRequestFullScreen()")}} method. If this isn't set, the element can't be placed into full screen mode.</dd> + <dt>{{htmlattrdef("webkitallowfullscreen")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>Use <code><strong>allowfullscreen</strong></code> ao invés. No Chrome 17 ou mais novo (e talvez mais antigo), this attribute can be set to <code>true</code> if the frame is allowed to be placed into full screen mode by calling its {{domxref("element.webkitRequestFullScreen()")}} method. If this isn't set, the element can't be placed into full screen mode.</dd> + <dt>{{htmlattrdef("mozapp")}} {{non-standard_inline}}</dt> + <dd>For frames hosting an <a href="/en-US/docs/Apps" title="OpenWebApps">open web app</a>, this specifies the URL of the <a href="/en-US/docs/Apps/Manifest" title="Apps/Manifest">app manifest</a>. This ensures that the app is loaded with the right permissions. See <a href="/en-US/docs/DOM/Using_the_Browser_API" title="DOM/Using_the_Browser_API">Using the Browser API</a> for details. Available in Gecko 13.0 and later.</dd> + <dt>{{htmlattrdef("mozbrowser")}} {{non-standard_inline}}</dt> + <dd>Indicates that the frame is to appear like a top-level browser window to the embedded content. This means that {{domxref("window.top")}}<span id="summary_alias_container"><span id="short_desc_nonedit_display">, </span></span>{{domxref("window.parent")}}<span id="summary_alias_container"><span id="short_desc_nonedit_display">, </span></span>{{domxref("window.frameElement")}},<span id="summary_alias_container"><span id="short_desc_nonedit_display"> etc. will <em>not</em> reflect the frame hierarchy. This allows for a web browser UI to be implemented entirely with web technology, given the right permissions.</span></span> See <a href="/en-US/docs/DOM/Using_the_Browser_API" title="DOM/Using_the_Browser_API">Using the Browser API</a> for details. Available in Gecko 13.0 and later.</dd> + <dt id="name-attribute">{{htmlattrdef("name")}}</dt> + <dd>A name for the embedded browsing context (or frame). This can be used as the value of the <code><strong>target</strong></code> attribute of an {{HTMLElement("a")}} or {{HTMLElement("form")}} element, or the formtarget attribute of an {{HTMLElement("input")}} or {{HTMLElement("button")}} element.</dd> + <dt>{{htmlattrdef("remote")}} {{non-standard_inline}}</dt> + <dd>Carrega a página do <em>frame</em> em um processo separado.</dd> + <dt>{{htmlattrdef("scrolling")}} {{HTMLVersionInline(4)}} only</dt> + <dd>Enumerated attribute indicating when the browser should provide a scroll bar (or other scrolling device) for the frame: + <ul> + <li><code>auto</code>: Só quando necessário.</li> + <li><code>yes</code>: Sempre mostrar uma barra de rolagem.</li> + <li><code>no</code>: Nunca mostrar uma barra de rolagem.</li> + </ul> + </dd> + <dt>{{htmlattrdef("sandbox")}} {{HTMLVersionInline(5)}} only</dt> + <dd>If specified as an empty string, this attribute enables extra restrictions on the content that can appear in the inline frame. The value of the attribute can either be an empty string (all the restrictions are applied), or a space-separated list of tokens that lift particular restrictions. Valid tokens are: + <ul> + <li><code>allow-same-origin</code>: Allows the content to be treated as being from its normal origin. If this keyword is not used, the embedded content is treated as being from a unique origin.</li> + <li><code>allow-top-navigation</code>: Allows the embedded browsing context to navigate (load) content to the top-level browsing context. If this keyword is not used, this operation is not allowed.</li> + <li><code>allow-forms</code>: Allows the embedded browsing context to submit forms. If this keyword is not used, this operation is not allowed.</li> + <li><code>allow-popups</code>: Allows popups (like from window.open).</li> + <li><code>allow-scripts</code>: Allows the embedded browsing context to run scripts (but not create pop-up windows). If this keyword is not used, this operation is not allowed.</li> + <li><code>allow-pointer-lock</code>: Allows the embedded browsing context to use the <a href="/en-US/docs/WebAPI/Pointer_Lock">Pointer Lock API</a>.</li> + </ul> + + <div class="note"> + <p><strong>Note:</strong></p> + + <ul> + <li>When the embedded document has the same origin as the main page, it is strongly discouraged to use both <code>allow-scripts</code> and <code>allow-same-origin</code> at the same time, as that allows the embedded document to programmatically remove the <code>sandbox</code> attribute. Although it is accepted, this case is no more secure than not using the <code>sandbox</code> attribute.</li> + <li>Sandboxing in general is only of minimal help if the attacker can arrange for the potentially hostile content to be displayed in the user's browser outside a sandboxed <code>iframe</code>. It is recommended that such content should be served from a <em>separate dedicated domain</em>, to limit the potential damage.</li> + <li>The <code>sandbox</code> attribute is not supported in Internet Explorer 9 and earlier versions, or in Opera.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("seamless")}} {{HTMLVersionInline(5)}} only</dt> + <dd>This <strong>Boolean attribute</strong> indicates that the browser should render the inline frame in a way that makes it appear to be part of the containing document, for example by applying CSS styles that apply to the <code><iframe></code> to the contained document before styles specified in that document, and by opening links in the contained documents in the parent browsing context (unless another setting prevents this). In XHTML, attribute minimization is forbidden, and the seamless attribute must be defined as <code><iframe seamless="seamless"></code>.</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>The URL of the page to embed.</dd> + <dt>{{htmlattrdef("srcdoc")}} {{HTMLVersionInline(5)}} only</dt> + <dd>The content of the page that the embedded context is to contain. This attribute is expected to be used together with the sandbox and seamless attributes. If a browser supports the <code>srcdoc</code> attribute, it will override the content specified in the <code>src</code> attribute (if present). If a browser does NOT support the <code>srcdoc</code> attribute, it will show the file specified in the <code>src</code> attribute instead (if present).</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>Indicates the width of the frame {{HTMLVersionInline(5)}} in CSS pixels, or {{HTMLVersionInline(4.01)}} in pixels or as a percentage.</dd> +</dl> + +<h2 id="Scripting">Scripting</h2> + +<p>Inline frames, like {{HTMLElement("frame")}} elements, enter the {{domxref("window.frames")}} pseudo-array.</p> + +<p>From the DOM <code>iframe</code> element, scripts can get access to the {{domxref("window")}} object of the included HTML page via the <code>contentWindow</code> property. The <code>contentDocument</code> property refers to the document element inside the <code>iframe</code> (this is equivalent to <code>contentWindow.document</code>), but is not supported by Internet Explorer versions before IE8.</p> + +<p>From the inside of a frame, a script can get a reference to the parent window via {{domxref("window.parent")}}.</p> + +<p>Scripts trying to access a frame's content are subject to the <a href="/en-US/docs/Same_origin_policy_for_JavaScript" title="Same origin policy for JavaScript">same-origin policy</a>, and cannot access most of the properties in the other window object if it was loaded from a different domain. This also applies to a script inside a frame trying to access its parent window. Cross-domain communication can still be achieved with {{domxref("window.postMessage")}}.</p> + +<h2 id="Exemplo_1">Exemplo 1</h2> + +<pre class="brush: html"><script> + var iframe = window.getElementsByTagName( "iframe" )[ 0 ]; + alert( "Frame title: " + iframe.contentWindow.title ); +</script> + + +<iframe src="page.html" width="300" height="300"> + <p>Your browser does not support iframes.</p> +</iframe></pre> + +<h2 id="Exemplo_2_Open_link_inside_iframe_in_another_tab">Exemplo 2: Open link inside iframe in another tab</h2> + +<div> +<pre class="brush: html"><base target="_blank" /> +<iframe width="400" height="215" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" + src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=es-419&amp;geocode=&amp;q=buenos+aires&amp;sll=37.0625,-95.677068&amp;sspn=38.638819,80.859375&amp;t=h&amp;ie=UTF8&amp;hq=&amp;hnear=Buenos+Aires,+Argentina&amp;z=11&amp;ll=-34.603723,-58.381593&amp;output=embed"> +</iframe><br /> +<small> + <a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=es-419&amp;geocode=&amp;q=buenos+aires&amp;sll=37.0625,-95.677068&amp;sspn=38.638819,80.859375&amp;t=h&amp;ie=UTF8&amp;hq=&amp;hnear=Buenos+Aires,+Argentina&amp;z=11&amp;ll=-34.603723,-58.381593" + style="color:#0000FF;text-align:left"> + See bigger map + </a> +</small></pre> +</div> + +<h2 id="Resultado">Resultado</h2> + +<p><a href="http://jsfiddle.net/pablofiumara/mCfAe/">Live example</a></p> + +<h2 id="Notas">Notas</h2> + +<div class="note"> +<p><strong>Note:</strong> Starting in {{Gecko("6.0")}}, rendering of inline frames correctly respects the borders of their containing element when they're rounded using {{cssxref("border-radius")}}.</p> +</div> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-iframe-element.html#the-iframe-element', '<iframe>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-iframe-element', '<iframe>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/frames.html#h-16.5', '<iframe>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade dos navegadores</h2> + + + +<p>{{Compat("html.elements.iframe", 3)}}</p> + +<div>{{HTMLRef}}</div> diff --git a/files/pt-br/web/html/element/img/index.html b/files/pt-br/web/html/element/img/index.html new file mode 100644 index 0000000000..b85988a451 --- /dev/null +++ b/files/pt-br/web/html/element/img/index.html @@ -0,0 +1,307 @@ +--- +title: <img> +slug: Web/HTML/Element/img +translation_of: Web/HTML/Element/img +--- +<h2 id="Resumo">Resumo</h2> + +<p>O <strong>elemento</strong> <strong>HTML <code><img></code> </strong> (or <em>HTML Image Element</em>) representa a inserção de imagem no documento, sendo implementado também pelo HTML5 para uma melhor experiência com o elemento {{HTMLElement("figure")}} e {{HTMLElement("figcaption")}}.</p> + +<h2 id="Exemplo_da_implementação_do_HTML5">Exemplo da implementação do HTML5</h2> + +<pre class="notranslate"><code><figure> + <img src="imagem.jpg" alt="Minha Figura"> + <figcaption>Informações da Figura</figcaption> +</figure></code></pre> + +<div class="note"> +<p><strong>Usage note:</strong><br> + Navegadores nem sempre exibem a imagem referenciada pelo elemento. Este é o caso para navegadores não gráficos (incluindo aqueles usados por pessoas com deficiência de visão), ou se o usuário optar por não exibir imagens ou se o navegador não conseguir exibir a imagem porque é inválido ou um tipo não suportado. Nesses casos, o navegador pode substituir a imagem pelo texto definido no atributo <strong>alt </strong> deste elemento.</p> +</div> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, embedded content, palpable content. If the element has a {{htmlattrxref("usemap", "img")}} attribute, it also is a part of the interactive content category.</li> + <li><dfn>Permitted content</dfn> None, it is an {{Glossary("empty element")}}.</li> + <li><dfn>Tag omission</dfn> Must have a start tag and must not have an end tag.</li> + <li><dfn>Permitted parent elements</dfn> Any element that accepts embedded content.</li> + <li><dfn>DOM interface</dfn> {{domxref("HTMLImageElement")}}</li> +</ul> + +<h2 id="Atributos">Atributos</h2> + +<p><span style="line-height: 21px;">Este Elemeto inlcui o <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">atributo global</a></span><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{htmlattrdef("align")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}} Use the {{cssxref('vertical-align')}} CSS property</dt> + <dd>The alignment of the image with respect to its surrounding context.</dd> + <dt>{{htmlattrdef("alt")}}</dt> + <dd>Este atributo define um texto alternativo que descreve a imagem. Os Usuários irão ver o texto se a URL da imagem estiver errado, a imagem não está em um dos <a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/img$edit#Supported_image_formats">formatos suportados</a> ou até a imagem ser baixada . </dd> + <dd> + <div class="note"> + <p><strong>Usage note: </strong>Omitting this attribute indicates that the image <em>is</em> a key part of the content, but no textual equivalent is available. Setting this attribute to the empty string indicates that this image is <em>not</em> a key part of the content; non-visual browsers may omit it from rendering.</p> + </div> + </dd> + <dt>{{htmlattrdef("border")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>The width of a border around the image.</dd> + <dt>{{htmlattrdef("crossorigin")}} {{HTMLVersionInline(5)}}</dt> + <dd>This enumerated attribute indicates if the fetching of the related image must be done using CORS or not. <a href="/en-US/docs/CORS_Enabled_Image" title="CORS_Enabled_Image">CORS-enabled images</a> can be reused in the {{HTMLElement("canvas")}} element without being <em>tainted</em>. The allowed values are: + <dl> + <dt>anonymous</dt> + <dd>A cross-origin request (i.e. with <code>Origin:</code> HTTP header) is performed. But no credential is sent (i.e. no cookie, no X.509 certificate and no HTTP Basic authentication is sent). If the server does not give credentials to the origin site (by not setting the <code>Access-Control-Allow-Origin:</code> HTTP header), the image will be <em>tainted</em> and its usage restricted..</dd> + <dt>use-credentials</dt> + <dd>A cross-origin request (i.e. with <code>Origin:</code> HTTP header) performed with credential is sent (i.e. a cookie, a certificate and HTTP Basic authentication is performed). If the server does not give credentials to the origin site (through <code>Access-Control-Allow-Credentials:</code> HTTP header), the image will be <em>tainted</em> and its usage restricted.</dd> + </dl> + When not present, the resource is fetched without a CORS request (i.e. without sending the <code>Origin:</code> HTTP header), preventing its non-tainted usage in {{HTMLElement('canvas')}} elements. If invalid, it is handled as if the enumerated keyword <strong>anonymous</strong> was used. See <a href="/en-US/docs/HTML/CORS_settings_attributes" title="CORS settings attributes">CORS settings attributes</a> for additional information.</dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>The height of the image in {{HTMLVersionInline(5)}} CSS pixels, or {{HTMLVersionInline(4)}} in pixels or as a percentage.</dd> + <dt>{{htmlattrdef("hspace")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>The number of pixels of white space to insert to the left and right of the image.</dd> + <dt>{{htmlattrdef("ismap")}}</dt> + <dd>This Boolean attribute indicates that the image is part of a server-side map. If so, the precise coordinates of a click are sent to the server. + <div class="note"> + <p><strong>Usage note: </strong>This attribute is allowed only if the <code><img></code> element is a descendant of an {{htmlelement("a")}} element with a valid {{htmlattrxref("href","a")}} attribute.</p> + </div> + </dd> + <dt>{{htmlattrdef("longdesc")}}{{HTMLVersionInline(4)}} only</dt> + <dd>The URL of a description of the image to be displayed, which supplements the <strong>alt</strong> text. In {{HTMLVersionInline(5)}}, use a regular {{HTMLElement("a")}} element to link to the description.</dd> + <dt>{{htmlattrdef("name")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>A name for the element. It is supported in {{HTMLVersionInline(4)}} only for backward compatibility. Use the <strong>id</strong> attribute instead.</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>Image URL, this attribute is obligatory for the <code><img></code> element. On browsers supporting <strong>srcset</strong>, <strong>src</strong> is ignored if this one is provided.</dd> + <dt>{{htmlattrdef("srcset")}}{{HTMLVersionInline(5)}}</dt> + <dd>A list of one or more strings separated by commas indicating a set of possible images for the user agent to use. Each string is composed of: + <ol> + <li>one URL to an image,</li> + <li>a width descriptor, that is a positive integer directly followed by <code>'w'</code>. The default value, if missing, is the infinity.</li> + <li>a pixel density descriptor, that is a positive floating number directly followed by <code>'x'</code>. The default value, if missing, is <code>1x</code>.</li> + </ol> + + <p>Each string in the list must have at least a width descriptor or a pixel density descriptor to be valid. Among the list, there must be only one string containing the same tuple of width descriptor and pixel density descriptor.<br> + The browser chooses the most adequate image to display at a given point of time.</p> + </dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>The width of the image in pixels or percent.</dd> + <dt>{{htmlattrdef("usemap")}}</dt> + <dd>The partial URL (starting with '#') of an <a href="/en-US/docs/HTML/Element/map" title="HTML/Element/Map">image map</a> associated with the element. + <div class="note"> + <p><strong>Usage note: </strong>You cannot use this attribute if the <code><img></code> element is a descendant of an {{htmlelement("a")}} or {{HTMLElement("button")}} element.</p> + </div> + </dd> + <dt>{{htmlattrdef("vspace")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>The number of pixels of white space to insert above and below the image.</dd> +</dl> + +<h2 id="Formato_de_imagens_suportadas">Formato de imagens suportadas</h2> + +<p>O padrão HTML não fornece uma lista de formatos de imagem que devem ser suportados, portanto, cada agente de usuário oferece suporte a um conjunto diferente de formatos. <a href="/pt-BR/docs/Mozilla/Gecko">Gecko</a> suporta:</p> + +<ul> + <li><a class="external" href="http://en.wikipedia.org/wiki/JPEG" title="http://en.wikipedia.org/wiki/JPEG">JPEG</a></li> + <li><a class="external" href="http://en.wikipedia.org/wiki/Graphics_Interchange_Format" title="http://en.wikipedia.org/wiki/Graphics_Interchange_Format">GIF</a>, incluindo GIFs animados</li> + <li><a class="external" href="http://en.wikipedia.org/wiki/Portable_Network_Graphics" title="http://en.wikipedia.org/wiki/Portable_Network_Graphics">PNG</a></li> + <li><a href="/en-US/docs/Animated_PNG_graphics" title="Animated PNG graphics">APNG</a> {{gecko_minversion_inline("1.9.2")}}</li> + <li><a href="/en-US/docs/SVG" title="SVG">SVG</a> {{gecko_minversion_inline("2.0")}}</li> + <li><a class="external" href="http://en.wikipedia.org/wiki/BMP_file_format" title="http://en.wikipedia.org/wiki/BMP_file_format">BMP</a></li> + <li><a class="external" href="http://en.wikipedia.org/wiki/ICO_%28file_format%29" title="http://en.wikipedia.org/wiki/ICO_%28file_format%29">BMP ICO</a></li> + <li><a class="external" href="http://en.wikipedia.org/wiki/ICO_%28file_format%29" title="http://en.wikipedia.org/wiki/ICO_%28file_format%29">PNG ICO</a> {{gecko_minversion_inline("9.0")}}</li> +</ul> + +<h2 id="Interação_com_CSS">Interação com CSS</h2> + +<p>Em relação ao CSS, uma <code><img></code> é um <a href="/pt-PT/docs/Web/CSS/Replaced_element">elemento substituído</a>. Ele não tem linha de base, ou seja, quando usado em um contexto de formatação em linha (inline) com {{cssxref("vertical-align")}}: baseline, a base inferior da imagem será colocada na linha de base do contêiner.</p> + +<p>Depending of its type, an <em>image</em> may have an intrinsic dimension, but this is not a necessary condition: a SVG image has no intrinsic dimension, a raster image has one.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Usando_o_texto_alternativo">Usando o texto alternativo</h3> + +<p>O exemplo a seguir insere uma imagem na página e inclui o texto alternativo para acessibilidade, de forma que ele possa ser lido por programas leitores de tela ou exibido caso a imagem não carregue.</p> + +<pre class="brush: html notranslate"><img src="https://developer.mozilla.org/static/img/favicon144.png" + alt="MDN logo"> +</pre> + +<p>{{ EmbedLiveSample('Alternative_text', '100%', '160') }}</p> + + + +<h3 id="Link_em_imagem">Link em imagem</h3> + +<p>Esse exemplo mostra como transformar uma imagem em um link. Para isso, insira a tag <code><img></code> dentro da tag do link {{HTMLElement("a")}}. Nesse caso, é interessante fazer o texto alternativo descrever o site para o qual o link aponta, como se fosse o texto usado dentro da tag <code><a></code>.</p> + + + +<pre class="brush: html notranslate"><a href="https://developer.mozilla.org"> + <img src="https://developer.mozilla.org/static/img/favicon144.png" + alt="Visit the MDN site"> +</a></pre> + +<p>{{ EmbedLiveSample('Image_link', '100%', '160') }}</p> + +<h3 id="Specifications" name="Specifications">Usando o atributo <code>srcset</code></h3> + +<p>Nesse exemplo, o atributo <code>srcset</code> inclui uma versão do logotipo com maior resolução, a qual vai ser carregada no lugar de <code>src</code> em aparelhos de alta resolução e cujo navegador tenha suporte à <code>srcset</code>.</p> + +<p>A imagem presente no atributo <code>src</code> conta como um candidato <code>1x</code> em navegadores com suporte à <code>srcset</code>.</p> + +<p>As imagens exibidas dependerão do tipo de tela.</p> + +<p><br> + <strong><code>srcset</code></strong><span> define o conjunto de imagens que nós iremos permitir ao navegador escolher, e qual tamanho cada imagem tem. </span></p> + +<ol> +</ol> + +<pre class="brush: html notranslate"> <img src="mdn-logo-sm.png" + alt="MD Logo" + srcset="mdn-logo-HD.png 2x, mdn-logo-small.png 15w, mdn-banner-HD.png 100w 2x" /></pre> + +<p><span>Antes de cada vírgula nós escrevemos:</span></p> + +<ol> + <li>Um<strong> nome do arquivo da imagem</strong> (<code>mdn-logo-HD.png</code>).</li> + <li>Um espaço.</li> + <li>A <strong>largura da imagem </strong>ou<strong> sua densidade de pixels</strong>.</li> +</ol> + +<h2 id="Acessibilidade">Acessibilidade</h2> + +<h3 id="Utilizando_textos_alternativos_relevantes">Utilizando textos alternativos relevantes</h3> + +<p>O valor do atributo <code>alt</code> deve descrever de maneira clara e concisa o conteúdo da imagem. Evite descrever a própria presença da imagem ou o nome de seu arquivo. Se o atributo <code>alt</code> for propositalmente deixado vazio porque a imagem não possui nenhum equivalente em texto, considere métodos alternativos para indicar o que a imagem deseja comunicar.</p> + +<h4 id="Evite">Evite</h4> + +<pre class="brush: html example-bad notranslate"><img alt="imagem" src="penguin.jpg"> +</pre> + +<h4 id="Prefira">Prefira</h4> + +<pre class="brush: html example-good notranslate"><img alt="Um pinguim-saltador-da-rocha em pé numa praia." src="penguin.jpg"> +</pre> + +<p>Quando o atributo <code>alt</code> não estiver presente em uma imagem, alguns programas leitores de tela vão narrar o nome do arquivo da imagem em seu lugar, o que pode ser confuso caso o nome do arquivo não seja representativo do conteúdo da imagem.</p> + +<ul> + <li><a class="external external-icon" href="https://www.w3.org/WAI/tutorials/images/decision-tree/">An alt Decision Tree • Images • WAI Web Accessibility Tutorials</a></li> + <li><a class="external external-icon" href="https://axesslab.com/alt-texts/">Alt-texts: The Ultimate Guide — Axess Lab</a></li> + <li><a class="external external-icon" href="https://www.deque.com/blog/great-alt-text-introduction/">How to Design Great Alt Text: An Introduction | Deque</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_—_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li> + <li><a class="external external-icon" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h3 id="O_atributo_title">O atributo title</h3> + +<p>O atributo {{htmlattrxref("title")}} não é um substituto aceitável para o atributo <code>alt</code>. Além disso, evite duplicar o valor do atributo <code>alt</code> no atributo <code>title</code> para uma mesma imagem. Isso pode fazer com que alguns programas leitores de tela narrem duas vezes a descrição, o que pode criar uma experiência confusa para usuários.</p> + +<p>Evite usar o atributo <code>title</code> como uma forma suplementar de legenda para a descrição do <code>alt</code>. Caso a imagem precise de uma legenda, prefisa os elementos <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/figure">figure</a></code> e <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption">figcaption</a></code>.</p> + +<p>O valor do atributo <code>title</code> é geralmente mostrado ao usuário como uma dica, que aparece após o usuário parar o cursor sobre a imagem. Apesar de <em>poder</em> <em>prover</em> informações adicionais ao usuário, não se deve assumir todos os usuários vão vê-lo, pois o mesmo pode possuir apenas um teclado ou uma tela de toque (touchscreen). Se você considera a informação particularmente importante para o usuário, prefira o uso de elementos inline.</p> + +<ul> + <li><a class="external external-icon" href="https://developer.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/">Using the HTML title attribute – updated | The Paciello Group</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content-1.html#the-img-element', '<img>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-img-element', '<img>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.2', '<img>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade dos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>srcset attribute</td> + <td>{{CompatChrome(34.0)}}</td> + <td>{{CompatGeckoDesktop("32.0")}} (behind a pref)</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera(21)}}</td> + <td>{{CompatSafari(7.1)}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>srcset attribute</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>iOS 8</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{HTMLElement("object")}} and {{HTMLElement("embed")}} elements</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/pt-br/web/html/element/index.html b/files/pt-br/web/html/element/index.html new file mode 100644 index 0000000000..65a6374fd1 --- /dev/null +++ b/files/pt-br/web/html/element/index.html @@ -0,0 +1,105 @@ +--- +title: Elementos HTML +slug: Web/HTML/Element +tags: + - Basic + - Element + - Elemento + - HTML + - Reference + - Referencia + - Web + - básico +translation_of: Web/HTML/Element +--- +<div>{{HTMLSidebar("Elements")}}</div> + +<p><span class="seoSummary">Esta página lista todos os {{Glossary("Element","elementos")}} {{Glossary("HTML")}}.</span> Eles são agrupados por função para ajuda-lo a achar o que quer fácilmente. Apesar deste guia ser escrito para aqueles mais inexperientes com a programação, nós esperamos que seja útil para todos.</p> + +<h2 id="Elementos_básicos">Elementos básicos</h2> + +<p>Elementos básicos são o que constituem a base de todo documento HTML. Se vê esses elementos no código fonte de todas as páginas da web, logo em seguida da declaração de doctype, que está na primeira linha da página. O doctype específica qual a versão de (X)HTML que a página está usando. Os elementos que formam o conteúdo da página são postos entre a tag de abertura {{HTMLElement("html")}} e a tag de fechamento <code></html></code>. O elemento {{HTMLElement("html")}} é também conhecido como o elemento raiz.</p> + +<p>{{HTMLRefTable("HTML Root Element")}}</p> + +<h2 id="Metadados_do_documento">Metadados do documento</h2> + +<p>Os metadados são onde se guardam várias informações sobre a página, incluindo informações sobre estilos, scripts e dados para auxiliar software ({{Glossary("search engine", "ferramentas de pesquisa")}}, {{Glossary("Browser", "navegadores")}}, etc) usar e renderizar a página. Os metadados de estilos e scripts podem ser definidos dentro da própria página ou escritos em um arquivo externo que é referênciado pela mesma.</p> + +<p>{{HTMLRefTable("HTML Document Metadata")}}</p> + +<h2 id="Separação_de_conteúdo">Separação de conteúdo</h2> + +<p>Elementos de separação de conteúdo permitem organizar o conteúdo do documento em partes lógicas. Use elementos de separação para criar um esboço do conteúdo da página, incluindo navegação por cabeçalho e rodapé, e elementos de cabeçalho para identificar seções de conteúdo.</p> + +<p>{{HTMLRefTable("HTML Sections")}}</p> + +<h2 id="Conteúdo_textual">Conteúdo textual</h2> + +<p>Usam-se elementos HTML de conteúdo textual para se organizar blocos ou seções de conteúdo postos entre as tags de abertura {{HTMLElement("body")}} e fechamento <code></body></code>. Importantes para {{Glossary("accessibility","accessibilidade")}} e {{Glossary("SEO")}}, esses elementos identificam o propósito ou estrutura do conteúdo.</p> + +<p>{{HTMLRefTable("HTML Grouping Content")}}</p> + +<h2 id="Semânticas_textuais_inline">Semânticas textuais inline</h2> + +<p>Usa-se a semântica textual inline para definir o significado, estrutura, ou estilo de uma palavra, linha, ou de qualquer outro tipo de texto.</p> + +<p>{{HTMLRefTable("HTML Text-Level Semantics")}}</p> + +<h2 id="Imagem_e_multimídia">Imagem e multimídia</h2> + +<p>HTML suporta vários recursos multimídia como imagens, audio, e video.</p> + +<p>{{HTMLRefTable("multimedia")}}</p> + +<h2 id="Conteúdo_integrado">Conteúdo integrado</h2> + +<p>Além do conteúdo normal de multimídia, HTML pode incluir uma variedade de outros conteúdos, apesar de nem todos serem possuírem fácilidade de interação.</p> + +<p>{{HTMLRefTable({"include":["HTML embedded content"], "exclude":["multimedia"]})}}</p> + +<h2 id="Scripting">Scripting</h2> + +<p>Com o intuito de permitir a criação de conteúdo dinâmico e aplicações Web, HTML foi projetado com suporte a linguagens de scripting, a mais prominiente sendo JavaScript. Certos elementos suportam essa capacidade.</p> + +<p>{{HTMLRefTable("HTML Scripting")}}</p> + +<h2 id="Demarcando_edições">Demarcando edições</h2> + +<p>Estes elementos permitem prover indicações que partes específicas de um texto foram alteradas.</p> + +<p>{{HTMLRefTable("HTML Edits")}}</p> + +<h2 id="Conteúdo_tabulado">Conteúdo tabulado</h2> + +<p>Estes elementos são usados para se criar e manipular dados em tabelas.</p> + +<p>{{HTMLRefTable("HTML tabular data")}}</p> + +<h2 id="Formulários">Formulários</h2> + +<p>HTML provê de vários elementos que podem ser usados juntos para criar formulários que o usuário pode preencher e mandar para o website ou aplicativo. Há muito mais informação no <a href="/pt-BR/docs/Web/Guide/HTML/Forms">guia de formulários HTML</a>.</p> + +<p>{{HTMLRefTable({"include": ["HTML forms"], "exclude":["Deprecated"]})}}</p> + +<h2 id="Elementos_interativos">Elementos interativos</h2> + +<p>HTML oferece uma seleção de elementos que auxiliam na criação de objetos interativos de interface para usuários.</p> + +<p>{{HTMLRefTable("HTML interactive elements")}}</p> + +<h2 id="Componentes_Web">Componentes Web</h2> + +<p>Componentes Web são uma tecnologia relacionada a HTML que faz possível, essencialmente, a criação e customização de elementos como se fossem parte normal do HTML. Além disso, se pode criar versões customizadas de elementos padrão do HTML.</p> + +<div class="note"><strong>Observação: </strong>Os elementos pertencentes aos Componentes Web são definidos na <a href="https://www.w3.org/TR/components-intro/">coleção de especificações dos Componentes Web</a> da {{Glossary("W3C","World Wide Web Consortium")}} (W3C) em vez da específicação do HTML. Além disso, a especificação dos Componentes Web ainda não foi finalizada e está sujeita a mudanças.</div> + +<p>{{HTMLRefTable({"include":["Web Components"],"elements":["shadow"]})}}</p> + +<h2 id="Elementos_obsoletos">Elementos obsoletos</h2> + +<div class="warning"> +<p><strong>Aviso:</strong> Estes elementos HTML antigos são obsoletos e não devem mais ser usados.<strong> Você deve sempre evitar usa-los em novos projetos, e deve substitui-los assim que possível.</strong> Eles estão listados apenas por motivos educacionais.</p> +</div> + +<p>{{HTMLRefTable({"include":["Deprecated","Obsolete"]})}}</p> diff --git a/files/pt-br/web/html/element/input/button/index.html b/files/pt-br/web/html/element/input/button/index.html new file mode 100644 index 0000000000..c7cf3a10d9 --- /dev/null +++ b/files/pt-br/web/html/element/input/button/index.html @@ -0,0 +1,353 @@ +--- +title: <input type="button"> +slug: Web/HTML/Element/Input/button +tags: + - Documentação + - Element + - Elementos Input + - Formulários HTML + - HTML + - Input + - Referencia + - Tipos de Input + - botões + - button + - formulários +translation_of: Web/HTML/Element/input/button +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">Elementos {{HTMLElement("input")}} do tipo <strong><code>button</code> </strong>são renderizados como um simples botão, que podem ser programados para controlar funcionalidades customizadas em qualquer lugar de uma página web quando for atribuído um evento (tipicamente para um evento {{event("click")}}).</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-button.html", "tabbed-shorter")}}</div> + +<p class="hidden">A fonte para estes exemplos interativos é armazenado em um repositório GitHub. Se você gostaria de contribuir com projetos de exemplos interativos, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e envie-nos uma requisição pull.</p> + +<div class="note"> +<p><strong>Nota</strong>: Enquanto elementos <code><input></code> do tipo <code>button</code> ainda são perfeitamente válidos, os novos elementos {{HTMLElement("button")}} são agora os favoráveis meios para criar botões. Uma etiqueta de texto (label) para um {{HTMLElement("button")}} pode ser inserida entre uma tag de abertura e outra de fechamento, podendo ser incluídas até imagens.</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>Um {{domxref("DOMString")}} usado como uma etiqueta de botão.</td> + </tr> + <tr> + <td><strong>Eventos</strong></td> + <td>{{event("click")}}</td> + </tr> + <tr> + <td><strong>Atributos comuns suportados</strong></td> + <td>{{htmlattrxref("type", "input")}}, e {{htmlattrxref("value", "input")}}</td> + </tr> + <tr> + <td><strong>atributos IDL</strong></td> + <td><code>value</code></td> + </tr> + <tr> + <td><strong>Métodos</strong></td> + <td>Nenhum</td> + </tr> + </tbody> +</table> + +<h2 id="Value">Value</h2> + +<p>Seu atributo {{htmlattrxref("value", "input")}} de um elemento <code><input type="button"></code> contém uma {{domxref("DOMString")}} que é usado como uma etiqueta (label) de um botão</p> + +<div id="summary-example3"> +<pre class="brush: html"><input type="button" value="Click Me"></pre> +</div> + +<p>{{EmbedLiveSample("summary-example3", 650, 30)}}</p> + +<p>Se você não especificar um <code>value</code>, você obtém um botão vazio:</p> + +<div id="summary-example1"> +<pre class="brush: html"><input type="button"></pre> +</div> + +<p>{{EmbedLiveSample("summary-example1", 650, 30)}}</p> + +<h2 id="Usando_buttons">Usando buttons</h2> + +<p>Elementos <code><input type="button"></code> não possuem comportamento padrão (seu primos,<code> <a href="/en-US/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code> e <code><a href="/en-US/docs/Web/HTML/Element/input/reset"><input type="reset"></a></code> são usados para submeter e resetar formulários). Para que botões possam fazer algo, você tem de escrever um código em JavaScript para fazê-lo trabalhar.</p> + +<h3 id="Um_simples_botão">Um simples botão</h3> + +<p>Nós iremos começar criando um simples botão com um evento {{event("click")}} que inicia nossa máquina (bem, ele altera o <code>value</code> do botão e o contéudo texto do seguinte parágrafo):</p> + +<pre class="brush: html"><form> + <input type="button" value="Start machine"> +</form> +<p>The machine is stopped.</p></pre> + +<pre class="brush: js">const button = document.querySelector('input'); +const paragraph = document.querySelector('p'); + +button.addEventListener('click', updateButton); + +function updateButton() { + if (button.value === 'Start machine') { + button.value = 'Stop machine'; + paragraph.textContent = 'The machine has started!'; + } else { + button.value = 'Start machine'; + paragraph.textContent = 'The machine is stopped.'; + } +}</pre> + +<p>O script recebe uma referência para o objeto {{domxref("HTMLInputElement")}} representando o <code><input></code> no DOM, salvando esta referência na variável <code>button</code>. {{domxref("EventTarget.addEventListener", "addEventListener()")}} é então usado para criar uma função que será chamada quando o evento {{event("click")}} for executado no botão.</p> + +<p>{{EmbedLiveSample("A_simple_button", 650, 100)}}</p> + +<h3 id="Adicionando_atalhos_de_teclados_aos_botões">Adicionando atalhos de teclados aos botões</h3> + +<p>Keyboard shortcuts, also known as access keys and keyboard equivalents, let the user trigger a button using a key or combination of keys on the keyboard. To add a keyboard shortcut to a button — just as you would with any {{HTMLElement("input")}} for which it makes sense — you use the {{htmlattrxref("accesskey")}} global attribute.</p> + +<p>In this example, <kbd>s</kbd> is specified as the access key (you'll need to press <kbd>s</kbd> plus the particular modifier keys for your browser/OS combination; see <a href="/en-US/docs/Web/HTML/Global_attributes/accesskey">accesskey</a> for a useful list of those).</p> + +<div id="accesskey-example1"> +<pre class="brush: html"><form> + <input type="button" value="Start machine" accesskey="s"> +</form> +<p>The machine is stopped.</p> +</pre> +</div> + +<div class="hidden"> +<pre class="brush: js">const button = document.querySelector('input'); +const paragraph = document.querySelector('p'); + +button.addEventListener('click', updateButton); + +function updateButton() { + if (button.value === 'Start machine') { + button.value = 'Stop machine'; + paragraph.textContent = 'The machine has started!'; + } else { + button.value = 'Start machine'; + paragraph.textContent = 'The machine is stopped.'; + } +}</pre> +</div> + +<p>{{EmbedLiveSample("Adding_keyboard_shortcuts_to_buttons", 650, 100)}}</p> + +<div class="note"> +<p><strong>Note</strong>: The problem with the above example of course is that the user will not know what the access key is! In a real site, you'd have to provide this information in a way that doesn't intefere with the site design (for example by providing an easily accessible link that points to information on what the site accesskeys are).</p> +</div> + +<h3 id="Desativando_e_ativando_um_botão">Desativando e ativando um botão</h3> + +<p>To disable a button, simply specify the {{htmlattrxref("disabled")}} global attribute on it, like so:</p> + +<div id="disable-example1"> +<pre class="brush: html"><input type="button" value="Disable me" disabled></pre> +</div> + +<p>You can enable and disable buttons at run time by simply setting <code>disabled</code> to <code>true</code> or <code>false</code>. In this example our button starts off enabled, but if you press it, it is disabled using <code>button.disabled = true</code>. A {{domxref("WindowTimers.setTimeout","setTimeout()")}} function is then used to reset the button back to its enabled state after two seconds.</p> + +<div class="hidden"> +<h6 id="Hidden_code_1">Hidden code 1</h6> + +<pre class="brush: html"><input type="button" value="Enabled"></pre> + +<pre class="brush: js">const button = document.querySelector('input'); + +button.addEventListener('click', disableButton); + +function disableButton() { + button.disabled = true; + button.value = 'Disabled'; + window.setTimeout(function() { + button.disabled = false; + button.value = 'Enabled'; + }, 2000); +}</pre> +</div> + +<p>{{EmbedLiveSample("Hidden_code_1", 650, 60)}}</p> + +<p>If the <code>disabled</code> attribute isn't specified, the button inherits its <code>disabled</code> state from its parent element. This makes it possible to enable and disable groups of elements all at once by enclosing them in a container such as a {{HTMLElement("fieldset")}} element, and then setting <code>disabled</code> on the container.</p> + +<p>The example below shows this in action. This is very similar to the previous example, except that the <code>disabled</code> attribute is set on the <code><fieldset></code> when the first button is pressed — this causes all three buttons to be disabled until the two second timeout has passed.</p> + +<div class="hidden"> +<h6 id="Hidden_code_2">Hidden code 2</h6> + +<pre class="brush: html"><fieldset> + <legend>Button group</legend> + <input type="button" value="Button 1"> + <input type="button" value="Button 2"> + <input type="button" value="Button 3"> +</fieldset></pre> + +<pre class="brush: js">const button = document.querySelector('input'); +const fieldset = document.querySelector('fieldset'); + +button.addEventListener('click', disableButton); + +function disableButton() { + fieldset.disabled = true; + window.setTimeout(function() { + fieldset.disabled = false; + }, 2000); +}</pre> +</div> + +<p>{{EmbedLiveSample("Hidden_code_2", 650, 60)}}</p> + +<div class="note"> +<p><strong>Note</strong>: Firefox will, unlike other browsers, by default, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic disabled state</a> of a {{HTMLElement("button")}} across page loads. Use the {{htmlattrxref("autocomplete","button")}} attribute to control this feature.</p> +</div> + +<h2 id="Validação">Validação</h2> + +<p>Buttons não participam na validação; eles não tem um valor real para ser restringido.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<p>The below example shows a very simple drawing app created using a {{htmlelement("canvas")}} element and some simple CSS and JavaScript (we'll hide the CSS for brevity). The top two controls allow you to choose the color and size of the drawing pen. The button, when clicked, invokes a function that clears the canvas.</p> + +<pre class="brush: html"><div class="toolbar"> + <input type="color" aria-label="select pen color"> + <input type="range" min="2" max="50" value="30" aria-label="select pen size"><span class="output">30</span> + <input type="button" value="Clear canvas"> +</div> + +<canvas class="myCanvas"> + <p>Add suitable fallback here.</p> +</canvas></pre> + +<div class="hidden"> +<pre class="brush: css">body { + background: #ccc; + margin: 0; + overflow: hidden; +} + +.toolbar { + background: #ccc; + width: 150px; + height: 75px; + padding: 5px; +} + +input[type="color"], input[type="button"] { + width: 90%; + margin: 0 auto; + display: block; +} + +input[type="range"] { + width: 70%; +} + +span { + position: relative; + bottom: 5px; +}</pre> +</div> + +<pre class="brush: js">var canvas = document.querySelector('.myCanvas'); +var width = canvas.width = window.innerWidth; +var height = canvas.height = window.innerHeight-85; +var ctx = canvas.getContext('2d'); + +ctx.fillStyle = 'rgb(0,0,0)'; +ctx.fillRect(0,0,width,height); + +var colorPicker = document.querySelector('input[type="color"]'); +var sizePicker = document.querySelector('input[type="range"]'); +var output = document.querySelector('.output'); +var clearBtn = document.querySelector('input[type="button"]'); + +// covert degrees to radians +function degToRad(degrees) { + return degrees * Math.PI / 180; +}; + +// update sizepicker output value + +sizePicker.oninput = function() { + output.textContent = sizePicker.value; +} + +// store mouse pointer coordinates, and whether the button is pressed +var curX; +var curY; +var pressed = false; + +// update mouse pointer coordinates +document.onmousemove = function(e) { + curX = (window.Event) ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); + curY = (window.Event) ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); +} + +canvas.onmousedown = function() { + pressed = true; +}; + +canvas.onmouseup = function() { + pressed = false; +} + +clearBtn.onclick = function() { + ctx.fillStyle = 'rgb(0,0,0)'; + ctx.fillRect(0,0,width,height); +} + +function draw() { + if(pressed) { + ctx.fillStyle = colorPicker.value; + ctx.beginPath(); + ctx.arc(curX, curY-85, sizePicker.value, degToRad(0), degToRad(360), false); + ctx.fill(); + } + + requestAnimationFrame(draw); +} + +draw();</pre> + +<p>{{EmbedLiveSample("Examples", '100%', 600)}}</p> + +<h2 id="Específicações">Específicações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comments</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#button-state-(type=button)', '<input type="button">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#button-state-(type=button)', '<input type="button">')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + +<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você gostaria de contribuir, por favor cheque <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos uma requisição pull.</div> + +<p>{{Compat("html.elements.input.input-button")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{HTMLElement("input")}} and the {{domxref("HTMLInputElement")}} interface which implements it.</li> + <li>The more modern {{HTMLElement("button")}} element.</li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Compatibility of CSS properties</a></li> +</ul> diff --git a/files/pt-br/web/html/element/input/checkbox/index.html b/files/pt-br/web/html/element/input/checkbox/index.html new file mode 100644 index 0000000000..42c8c65072 --- /dev/null +++ b/files/pt-br/web/html/element/input/checkbox/index.html @@ -0,0 +1,299 @@ +--- +title: <input type="checkbox"> +slug: Web/HTML/Element/Input/checkbox +translation_of: Web/HTML/Element/input/checkbox +--- +<div>{{HTMLRef}}</div> + +<p>{{htmlelement ("input")}} elementos do tipo <strong><code>checkbox</code></strong>são renderizados por padrão como caixas quadradas que são marcadas (com uma marca de verificação) quando ativadas, como você pode ver em um formulário de papel oficial do governo. A aparência exata depende de da configuração de sistema operacional sobre o qual o navegador está sendo executado. Eles permitem que você selecione valores únicos para envio em um formulário (ou não).</p> + +<div>{{EmbedInteractiveExample ("pages/tabbed/input-checkbox.html", "tabbed-standard")}}</div> + +<p class="hidden">A fonte deste exemplo interativo é armazenada em um repositório GitHub. Se você quiser contribuir com o projeto de exemplos interativos, clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e envie-nos uma solicitação pull.</p> + +<div class="note"> +<p><strong>Nota</strong> : <a href="/en-US/docs/Web/HTML/Element/input/radio">Os botões de opção</a> são semelhantes às caixas de seleção, mas com uma distinção importante: os botões de opção são agrupados em um conjunto no qual apenas um botão pode ser selecionado por vez, enquanto as caixas de seleção permitem ativar e desativar valores únicos. Quando existem vários controles, os botões de opção permitem que um seja selecionado de todos, enquanto as caixas de seleção permitem que vários valores sejam selecionados.</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch ("Valor")}}</strong></td> + <td>Um {{domxref ("DOMString")}} representando o valor da caixa de seleção.</td> + </tr> + <tr> + <td><strong>Eventos</strong></td> + <td>{{event ("change")}} e {{event ("input")}}</td> + </tr> + <tr> + <td><strong>Atributos comuns suportados</strong></td> + <td>{{htmlattrxref ("checked", "input")}}</td> + </tr> + <tr> + <td><strong>Atributos IDL</strong></td> + <td><code>checked</code> e <code>value</code></td> + </tr> + <tr> + <td><strong>Métodos</strong></td> + <td>{{domxref ("HTMLInputElement.select", "select ()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Valor">Valor</h2> + +<p>Um {{domxref ("DOMString")}} representando o valor da caixa de seleção. Isso nunca é visto no lado do cliente, mas no servidor esse é o <code>value</code> atribuído aos dados enviados com o <code>name</code> da caixa de seleção. Tome o seguinte exemplo:</p> + +<pre class="brush: html"><form> + <div> + <input type = "checkbox" id = "subscribeNews" nome = "subscribe" value = "<code>newsletter</code>"> + <label for = "subscribeNews"> Subscreva a newsletter? </ label> + </ div> + <div> + <button type = "submit"> Subscrever </ button> + </ div> +</ form></pre> + +<p>{{EmbedLiveSample ('Value', 600, 60)}}</p> + +<p>Neste exemplo, temos um nome <code>subscribe</code>e um valor de <code>newsletter</code>. Quando o formulário é enviado, o par de nome / valor de dados será <code>subscribe=newsletter</code>.</p> + +<p>Se o atributo <code>value</code> for omitido, o valor padrão da caixa de seleção é <code>on</code> , portanto, os dados enviados nesse caso seriam <code>subscribe=on</code>.</p> + +<div class="note"> +<p><strong>Nota</strong> : Se uma caixa de seleção estiver desmarcada quando seu formulário for enviado, não haverá nenhum valor enviado ao servidor para representar seu estado desmarcado (por exemplo <code>value=unchecked</code>); o valor não é submetido ao servidor.</p> +</div> + +<h2 id="Usando_entradas_da_caixa_de_seleção">Usando entradas da caixa de seleção</h2> + +<p>Já cobrimos o uso mais básico de caixas de seleção acima. Vamos agora olhar para os outros recursos e técnicas relacionados à caixa de seleção que você precisa.</p> + +<h3 id="Lidando_com_várias_caixas_de_seleção">Lidando com várias caixas de seleção</h3> + +<p>O exemplo que vimos acima continha apenas uma caixa de seleção; em situações do mundo real, você provavelmente encontrará várias caixas de seleção. Se eles não estiverem relacionados, você pode lidar com todos eles separadamente, como mostrado acima. No entanto, se todos estiverem relacionados, as coisas não são tão simples.</p> + +<p>Por exemplo, na demonstração a seguir, incluímos várias caixas de seleção para permitir que o usuário selecione seus interesses (veja a versão completa na seção {{anch ("Examples")}}).</p> + +<pre class="brush: html"><fieldset> + <legend> Escolha seus interesses </ legend> + <div> + <input type = "checkbox" id = "codificação" name = "interesse" valor = "codificação"> + <label for = "coding"> Codificação </ label> + </ div> + <div> + <input type = "checkbox" id = "música" name = "interesse" valor = "música"> + <label for = "music"> Música </ label> + </ div> +</ fieldset></pre> + +<p>{{EmbedLiveSample ('Handling_multiple_checkboxes', 600, 100)}}</p> + +<p>Neste exemplo, você verá que atribuímos a cada caixa de seleção o mesmo <code>name</code>. Se ambas as opções são verificados e, em seguida, o formulário é enviado, você terá uma série de pares nome / valor apresentado assim: <code>interest=coding&interest=music</code>. Quando esses dados atingirem o lado do servidor, você poderá capturá-los como uma matriz de valores relacionados e tratá-los adequadamente - consulte <a class="question-hyperlink" href="http://stackoverflow.com/questions/18745456/handle-multiple-checkboxes-with-a-single-serverside-variable">Lidar com várias caixas de seleção com uma única variável de servidor</a> , por exemplo.</p> + +<h3 id="Caixas_de_verificação_por_padrão">Caixas de verificação por padrão</h3> + +<p>Para fazer uma caixa de seleção marcada por padrão, você simplesmente atribui o atributo <code>checked</code>. Veja o exemplo abaixo:</p> + +<pre class="brush: html"><fieldset> + <legend> Escolha seus interesses </ legend> + <div> + <input type = "checkbox" id = "codificação" nome = "interesse" valor = "codificação" checked> + <label for = "coding"> Codificação </ label> + </ div> + <div> + <input type = "checkbox" id = "música" name = "interesse" valor = "música"> + <label for = "music"> Música </ label> + </ div> +</ fieldset></pre> + +<p>{{EmbedLiveSample ('Checking_boxes_by_default', 600, 100)}}</p> + +<h3 id="Fornecendo_uma_área_de_acertos_maior_para_suas_caixas_de_seleção">Fornecendo uma área de acertos maior para suas caixas de seleção</h3> + +<p>Nos exemplos acima, você deve ter notado que pode alternar uma caixa de seleção clicando no elemento {{htmlelement ("label")}} associado e na própria caixa de seleção. Esse é um recurso realmente útil de rótulos de formulários HTML que facilitam o clique na opção desejada, especialmente em dispositivos de tela pequena, como smartphones.</p> + +<p>Além da acessibilidade, esse é outro bom motivo para configurar corretamente os <code><label></code>elementos em seus formulários.</p> + +<h3 id="Caixas_de_seleção_de_estado_indeterminado">Caixas de seleção de estado indeterminado</h3> + +<p>Além dos estados marcado e não marcado, há um terceiro estado em que uma caixa de seleção pode estar: <strong>indeterminada</strong>. Este é um estado em que é impossível dizer se o item está ativado ou desativado. Isso é definido usando a propriedade <code>indeterminate</code> do objeto {{domxref ("HTMLInputElement")}} via JavaScript (não pode ser definido usando um atributo HTML):</p> + +<pre class="brush: js">inputInstance.indeterminate = true;</pre> + +<p>Uma caixa de seleção no estado indeterminado tem uma linha horizontal na caixa (parece um hífen ou sinal de menos) em vez de uma marca de verificação na maioria dos navegadores.</p> + +<p>Não há muitos casos de uso para essa propriedade. O mais comum é quando uma caixa de seleção está disponível e "possui" um número de subopções (que também são caixas de seleção). Se todas as subopções estiverem marcadas, a caixa de seleção proprietária também será marcada e, se todas elas estiverem desmarcadas, a caixa de seleção proprietária será desmarcada. Se uma ou mais das subopções tiverem um estado diferente das outras, a caixa de seleção proprietária está no estado indeterminado.</p> + +<p>Isso pode ser visto no exemplo abaixo (graças aos <a href="https://css-tricks.com/indeterminate-checkboxes/">CSS Tricks</a> para a inspiração). Neste exemplo, acompanhamos os ingredientes que estamos coletando para uma receita. Quando você marca ou desmarca a caixa de seleção de um ingrediente, uma função JavaScript verifica o número total de ingredientes verificados:</p> + +<ul> + <li>Se nenhum deles estiver marcado, a caixa de seleção do nome da receita está definida como desmarcada.</li> + <li>Se um ou dois estiverem marcados, a caixa de seleção do nome da receita está definida como <code>indeterminate</code>.</li> + <li>Se todos os três forem marcados, a caixa de seleção do nome da receita estará definida como <code>checked</code>.</li> +</ul> + +<p>Portanto, neste caso, o <code>indeterminate</code>estado é usado para afirmar que a coleta dos ingredientes foi iniciada, mas a receita ainda não está completa.</p> + +<pre class="brush: js" id="line1"> var overall = document.querySelector ('input[id = "EnchTbl"]'); + var ingredients = document.querySelectorAll ('ul input'); + + overall.addEventListener ('clique', function (e) { + e.preventDefault (); + }); + + for(var i = 0; i <ingredientes.length; i ++) { + ingredientes [i] .addEventListener ('clique', updateDisplay); + } + + função updateDisplay () { + var checkedCount = 1; + for(var i = 0; i <ingredientes.length; i ++) { + if (ingredientes [i] .checked) { + checkedCount ++; + } + } + + if (checkedCount === ingredientes.length + 1) { + overall.checked = true; + overall.indeterminate = false; + } else if (checkedCount <= ingredients.length + 1 && checkedCount> 1) { + overall.checked = false; + <strong>overall.indeterminate = true;</strong> + } else { + overall.checked = false; + <strong>overall.indeterminate = false;</strong> + } + }</pre> + +<p>{{EmbedGHLiveSample ("área de aprendizado / html / forms / indeterminate-example / index.html", '100%', 200)}}</p> + +<div class="note"> +<p><strong>Nota</strong> : Se você enviar um formulário com uma caixa de seleção indeterminada, a mesma coisa acontece como se o formulário estivesse desmarcado - nenhum dado é enviado para representar a caixa de seleção.</p> +</div> + +<h2 id="Validação">Validação</h2> + +<p>As caixas de seleção suportam <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">validação</a> (oferecidas para todos os <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input" title="O elemento HTML <input> é usado para criar controles interativos para formulários baseados na web, a fim de aceitar dados do usuário."><code><input></code></a>s). No entanto, a maioria dos {{domxref ("ValidityState")}} s sempre será <code>false</code>. Se a caixa de seleção tiver o <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-required">required</a></code> atributo, mas não estiver marcada, ela <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/valueMissing" title="The documentation about this has not yet been written; please consider contributing!">ValidityState.valueMissing</a></code> será <code>true</code>.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<p>O exemplo a seguir é uma versão estendida do exemplo "multiple checkboxes" que vimos acima - tem mais opções padrão, além de uma caixa de seleção "other" que quando marcada faz com que um campo de texto apareça para inserir um valor para a opção "other". Isto é conseguido com um simples bloco de JavaScript. O exemplo também inclui alguns CSS para melhorar o estilo.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><form> + <fieldset> + <legend> Escolha seus interesses </ legend> + <div> + <input type = "checkbox" id = "codificação" name = "interesse" valor = "codificação"> + <label for = "coding"> Codificação </ label> + </ div> + <div> + <input type = "checkbox" id = "música" name = "interesse" valor = "música"> + <label for = "music"> Música </ label> + </ div> + <div> + <input type = "checkbox" id = "arte" name = "interesse" valor = "arte"> + <label for = "art"> Art </ label> + </ div> + <div> + <input type = "checkbox" id = "sports" nome = "interesse" valor = "esportes"> + <label for = "sports"> Esportes </ label> + </ div> + <div> + <input type = "checkbox" id = "cozinhar" nome = "interesse" valor = "cozinhar"> + <label for = "cooking"> Cozinhando </ label> + </ div> + <div> + <input type = "checkbox" id = "outro" nome = "interesse" valor = "outro"> + <label for = "other"> Outro </ label> + <input type = "text" id = "otherValue" nome = "outro"> + </ div> + <div> + <button type = "submit"> Enviar formulário </ button> + </ div> + </ fieldset> +</ form></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">html { + font-family: sem serifa; +} + +Formato { + largura: 600px; + margem: 0 auto; +} + +div { + margem inferior: 10px; +} + +fieldset { + fundo: ciano; + borda: 5px azul sólido; +} + +lenda { + preenchimento: 10px; + fundo: azul; + cor: ciano; +} +</pre> + +<h3 id="JavaScript">JavaScript</h3> + + + +<pre class="brush: js">var otherCheckbox = document.querySelector ('entrada [valor = "outro"]'); +var otherText = document.querySelector ('input [id = "otherValue"]'); +otherText.style.visibility = 'oculto'; + +otherCheckbox.onchange = function () { + if (otherCheckbox.checked) { + otherText.style.visibility = 'visível'; + otherText.value = ''; + } outro { + otherText.style.visibility = 'oculto'; + } +};</pre> + +<p>{{EmbedLiveSample ('Examples', '100%', 300)}}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td>Especificação</td> + <td>Status</td> + <td>Comente</td> + </tr> + <tr> + </tr> + <tr> + <td>{{SpecName ('HTML WHATWG', 'forms.html # checkbox-state- (tipo = caixa de seleção)', '<input type = "checkbox">')}}</td> + <td>{{Spec2 ('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName ('HTML5 W3C', 'forms.html # checkbox-state- (tipo = caixa de seleção)', '<input type = "checkbox">')}}</td> + <td>{{Spec2 ('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> + +<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você quiser contribuir com os dados, confira <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos uma solicitação de recebimento.</div> + +<p>{{Compat ("html.elements.input.input-checkbox")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{HTMLElement ("input")}} e a interface {{domxref ("HTMLInputElement")}} que o implementa.</li> + <li>Os seletores CSS {{cssxref (": checked")}} e {{cssxref (": indeterminate")}} permitem que você marque as caixas de seleção com base em seu estado atual</li> +</ul> diff --git a/files/pt-br/web/html/element/input/data/index.html b/files/pt-br/web/html/element/input/data/index.html new file mode 100644 index 0000000000..0bb8fb07f8 --- /dev/null +++ b/files/pt-br/web/html/element/input/data/index.html @@ -0,0 +1,430 @@ +--- +title: <input type="date"> +slug: Web/HTML/Element/Input/data +tags: + - Date picker + - Elemento + - Elemento de entrada + - HTML + - Input + - NeedsCompatTable + - Referencia + - Selecionador de data + - Tipo de Input + - data +translation_of: Web/HTML/Element/input/date +--- +<p>Os elementos {{htmlelement("input")}} do tipo <strong><code>date</code></strong> cria campos de entrada que permite o usuário informar uma data, como também usar uma caixa de texto que valida automaticamente o conteúdo, ou usando uma interface de seleção de data especial. O valor resultante inclui ano, mês e dia, mas não o <code>horário</code>. Os tipos de entrada <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time">time</a> e <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local">datetime-local</a></code> permitem informar horário e data/hora.</p> + +<p>A interface do usuário do controle varia geralmente de navegador para navegador; neste momento o suporte é irregular, veja {{anch("Browser compatibility")}} para maiores detalhes. Nos navegadores sem suporte, o controle é rebaixado graciosamente para um <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text"><input type="text"></a></code> simples.</p> + +<pre class="brush: html"><input id="date" type="date"></pre> + +<p>{{ EmbedLiveSample('Basic_example', 600, 40) }}</p> + +<p>Entre os navegadores que suportam uma interface personalizada para selecionar datas é o controle de data do Chrome/Opera, que se parece com:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14909/date-picker-chrome.png" style="display: block; height: 220px; margin: 0px auto; width: 275px;"></p> + +<p>O controle de data do Edge se parece assim:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14911/date-picker-edge.png" style="display: block; margin: 0 auto;"></p> + +<p>O controle de data do Firefox se parece assim:</p> + +<p><img alt="Datepicker UI in firefox" src="https://mdn.mozillademos.org/files/15644/firefox_datepicker.png" style="display: block; margin: 0 auto;"></p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>Um {{domxref("DOMString")}} que representa uma data no formato AAAA-MM-DD ou vazio</td> + </tr> + <tr> + <td><strong>Eventos</strong></td> + <td>{{event("change")}} e {{event("input")}}</td> + </tr> + <tr> + <td><strong>Atributos Comuns Suportados</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}} e {{htmlattrxref("step", "input")}}</td> + </tr> + <tr> + <td><strong>Atributos IDL</strong></td> + <td><code>list</code>, <code>value</code>, <code>valueAsDate</code>, <code>valueAsNumber</code>.</td> + </tr> + <tr> + <td><strong>Métodos</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Valores">Valores</h2> + +<p>Um {{domxref("DOMString")}} representa o valor data informada na entrada. Você pode definir o valor padrão para a entrada incluindo uma data dentro do atributo {{htmlattrxref("value", "input")}}, como:</p> + +<pre class="brush: html"><input id="date" type="date" value="2017-06-01"></pre> + +<p>{{ EmbedLiveSample('Value', 600, 40) }}</p> + +<p>Uma coisa para perceber é que o formato da data mostrada difere do <code>value</code> atual— o formato da data mostrada será escolhido baseado na localização definida no navegador do usuário, enquanto que a data em <code>value</code> sempre será formatado como <code>yyyy-mm-dd</code>.</p> + +<p>Você pode, além disso, obter e definir o valor da data em JavaScript usando a propriedade {{domxref("HTMLInputElement.value", "value")}} do elemento de entrada, por exemplo:</p> + +<pre class="brush: js ">var dateControl = document.querySelector('input[type="date"]'); +dateControl.value = '2017-06-01';</pre> + +<p>Este código localiza o primeiro elemento {{HTMLElement("input")}} que o <code>type</code> é <code>date</code> e define seu valor para a data 2017-06-01 (1 de junho de 2017).</p> + +<h2 id="Atributos_adicionais">Atributos adicionais</h2> + +<p>Além dos atributos disponíveis para todos os elementos {{HTMLElement("input")}}, as caixas de texto de data oferecem os seguintes atributos:</p> + +<table class="standard-table" dir="ltr"> + <thead> + <tr> + <th scope="col">Atributo</th> + <th scope="col">Descrição</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("max")}}</code></td> + <td>A maior data aceitável</td> + </tr> + <tr> + <td><code>{{anch("min")}}</code></td> + <td>A menor data aceitável</td> + </tr> + <tr> + <td><code>{{anch("readonly")}}</code></td> + <td>Se o conteúdo da caixa de texto é somente leitura</td> + </tr> + <tr> + <td><code>{{anch("step")}}</code></td> + <td>O intervalo a ser usado, quando clicar nos botões de seta para baixo e para cima, e também para validação</td> + </tr> + </tbody> +</table> + +<p> </p> + +<h2 id="Usando_caixas_de_texto_de_data">Usando caixas de texto de data</h2> + +<p>Caixas de texto de data se mostra conveniente à primeira vista — eles fornecem uma interface simples para escolha de datas e normalizam o formato da data enviado para o servidor, independentemente da localização do usuário. Contudo, há problemas com o <code><input type="date"></code> por causa do suporte limitado do navegador.</p> + +<p>Iremos dar uma olhada em usos básicos e mais complexos de <code><input type="date"></code>, então aconselharemos sobre como atenuar os problemas de suporte dos navegadores (veja {{anch("Handling browser support")}}). Claro, esperamos que ao longo do tempo o supore dos navegadores sejam mais universal e este problema desapareça.</p> + +<h3 id="Uso_básico_da_data">Uso básico da data</h3> + +<p>O uso mais simples de <code><input type="date"></code> envolve a combinação de um <code><input></code> básico e o elemento {{htmlelement("label")}}, como pode ser visto abaixo:</p> + +<pre class="brush: html"><form> + <div> + <label for="diaa">Informe a data do seu aniversário:</label> + <input type="date" id="diaa" name="diaa"> + </div> +</form></pre> + +<p>{{ EmbedLiveSample('Basic_uses_of_date', 600, 40) }}</p> + +<h3 id="Definindo_data_mínima_e_máxima">Definindo data mínima e máxima</h3> + +<p>Você pode usar os atributos {{htmlattrxref("min", "input")}} e {{htmlattrxref("max", "input")}} para restringir as datas que podem ser escolhidas pelo usuário. No próximo exemplo nós definimos uma data mínima como <code>2017-04-01</code> e data máxima como <code>2017-04-30</code>:</p> + +<pre class="brush: html"><form> + <div> + <label for="festa">Escolha a sua data preferida da festa:</label> + <input type="date" id="festa" name="festa" min="2017-04-01" max="2017-04-30"> + </div> +</form></pre> + +<p>{{ EmbedLiveSample('Setting_maximum_and_minimum_dates', 600, 40) }}</p> + +<p>O resultado aqui será apenas que as dias de Abril de 2017 serão selecionados — apenas a parte "dias" do texto será editável e datas fora de Abril não serão rolados na ferramenta de seleção de data.</p> + +<div class="note"> +<p><strong>Observação</strong>: Você deve conhecer o uso do atributo {{htmlattrxref("step", "input")}} para variar o número de dias pulados cada vez que a data é incrementada (ex.: talvez você queira deixar que os Sábados sejam selecionáveis). Contudo, isto não parece funcionar eficiente de qualquer implementação em tempo de escrita.</p> +</div> + +<h3 id="Controlando_o_tamanho_da_entrada">Controlando o tamanho da entrada</h3> + +<p><code><input type="date"></code> não suporta atributos de tamanho de formulário como {{htmlattrxref("size", "input")}}. Você poderá recorrer ao <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> para modificar o tamanho.</p> + +<h2 id="Validação">Validação</h2> + +<p>Por padrão <code><input type="date"></code> não aplica nenhuma validação de entrada de valores. As implementações da interface geralmente não deixam você informar nada que não seja uma data — o que é útil — mas você pode continuar deixando o campo vazio ou (em navegadores onde a entrada converte para o tipo <code>text</code>) informar uma data inválida (ex.: o 32 de Abril).</p> + +<p>Se você usa {{htmlattrxref("min", "input")}} e {{htmlattrxref("max", "input")}} para restringir datas disponíveis (ver {{anch("Definindo data mínima e máxima")}}), os navegadores suportados mostrarão um erro se você tentar submeter uma data fora da faixa. Contudo, você terá que verificar os resultados para ter certeza que o valor está entre estas datas, uma vez que são aplicadas apenas se o selecionador de data for totalmente suportado pelo dispositivo do usuário.</p> + +<p>Adicionalmente, você pode usar o atributo {{htmlattrxref("required", "input")}} para tornar o preenchimento da data obrigatório — novamente, um erro será mostrado se você tentar submeter um campo de data vazia. Isto, finalmente, deve funcionar em muitos navegadores.</p> + +<p>Vamos dar uma olhada em um exemplo — aqui nós definimos datas mínima e máxima e deixamos o campo como obrigatório:</p> + +<pre class="brush: html"><form> + <div> + <label for="festa">Escolha sua data preferida da festa (obrigatório, de 1º a 20 de abril):</label> + <input type="date" id="festa" name="festa" min="2017-04-01" max="2017-04-20" required> + <span class="validity"></span> + </div> + <div> + <input type="submit"> + </div> +</form></pre> + +<p>Se você tentar submeter o formulário com uma data imcompleta (ou com uma data fora da faixa), o navegador mostrará um erro. Tente executar o exemplo agora:</p> + +<p>{{ EmbedLiveSample('Validation', 600, 100) }}</p> + +<p>Aqui tem uma captura de tela que mostra o resultado se seu navegador não suporta:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14913/date-picker-chrome-error-message.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<p>Aqui tem o CSS utilizado no exemplo acima. Nós usamos as propriedades CSS {{cssxref(":valid")}} e {{cssxref(":invalid")}} para estilizar a caixa de texto dependendo se o valor atual é válido ou não. Colocamos ícones num {{htmlelement("span")}} próximo a caixa de entrada, não dentro da caixa, porque no Chrome o conteúdo gerado é colocado dentro do controle do formulário, e não seria estilzado ou mostrado eficientemente.</p> + +<pre class="brush: css">div { + margin-bottom: 10px; + display: flex; + align-items: center; +} + +label { + display: inline-block; + width: 300px; +} + +input:invalid+span:after { + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + content: '✓'; + padding-left: 5px; +}</pre> + +<div class="warning"> +<p><strong>Importante</strong>: A validação do formulário HTML não subtitui scripts que validam se a entrada de dados está em um formato apropriado. É muito fácil para alguém fazer ajustes no HTML que permitam sobrepor a validação ou removê-lo inteiramente. Também é possível simplesmente sobrepor seu HTML inteiramente e submeter os dados diretamente ao seu servidor. Se seu código server-side falhar na validação do dado que recebe pode ocorreu um desaste quando os dados forem submetidos inapropriadamente formatado (ou dado pode ser muito grande, ou é do tipo errado e assim por diante).</p> +</div> + +<h2 id="Manipulação_do_suporte_do_navegador">Manipulação do suporte do navegador</h2> + +<p>Como mencionado acima, o maior problema em usar caixas de entrada de data em tempo de escrita é o {{anch("Browser compatibility", "suporte do navegador")}}. Por exemplo, o selecionador de data no Firefox para Android se parece com isso:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14915/date-picker-fxa.png" style="display: block; margin: 0 auto;"></p> + +<p>Navegadores que não suportam graciosamente rebaixa para uma caixa de texto comum, mas criam problemas em termos de consistência da interface do usuário (o controle apresentado será diferente) e a manipulação do dado.</p> + +<p>O segundo problema é mais sério que os anterirores; como mencionamos antes, com um campo de texto de data o valor atual sempre é normalizado pelo formato <code>yyyy-mm-dd</code>. Com a caixa de texto comum, por outro lado, por padrão do navegador não há reconhecimento de qual formato a data deve ter e há muitos modos diferentes em que as pessoas escrevem datas. Por exemplo:</p> + +<ul> + <li><code>ddmmyyyy</code></li> + <li><code>dd/mm/yyyy</code></li> + <li><code>mm/dd/yyyy</code></li> + <li><code>dd-mm-yyyy</code></li> + <li><code>mm-dd-yyyy</code></li> + <li><code>Month dd yyyy</code></li> +</ul> + +<p>Um jeito de contornar isso é colocar um atributo {{htmlattrxref("pattern", "input")}} na caixa de texto de data. Sempre que a caixa de texto de data não usá-lo, a caixa de texto devolverá um erro. Por exemplo, tente ver o que o seguinte exemplo faz num navegador sem suporte:</p> + +<pre class="brush: html"><form> + <div> + <label for="diaa">Informe a data do seu aniversário:</label> + <input type="date" id="bday" name="diaa" required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"> + <span class="validity"></span> + </div> + <div> + <input type="submit"> + </div> +</form></pre> + +<p>{{ EmbedLiveSample('Handling_browser_support', 600, 100) }}</p> + +<p>Se você submetê-lo, verá que o navegador agora mostra uma mensagem de erro (e destaca a caixa de texto como inválido) se o que foi informado não combinam com o padrão <code>nnnn-nn-nn</code>, onde <code>n</code> é um número entre 0 e 9. Claro, isto não parará as pessoas de informar datas inválidas ou datas formatadas incorretamente, como <code>yyyy-dd-mm</code> (onde nós precisamos de <code>yyyy-mm-dd</code>). Então continua sendo um problema.</p> + +<div class="hidden"> +<pre class="brush: css">div { + margin-bottom: 10px; +} + +input:invalid + span { + position: relative; +} + +input:invalid + span:after { + content: '✖'; + position: absolute; + right: -18px; +} + +input:valid + span { + position: relative; +} + +input:valid + span:after { + content: '✓'; + position: absolute; + right: -18px; +}</pre> +</div> + +<p>A melhor maneira de lidar com datas nos formulários de um modo entre navegadores no momento é obter do usuário o dia, mês e ano em controles separados (elementos {{htmlelement("select")}} são bem populares; veja abaixo uma implementação) ou use uma biblioteca JavaScript como o <a href="https://jqueryui.com/datepicker/">selecionador de data do jQuery</a>.</p> + +<h2 id="Atributos">Atributos</h2> + +<p>Beside the attributes listed below, this element can have any of the <a href="/en-US/docs/HTML/Global_attributes">global attributes</a>.</p> + +<dl> + <dt>{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</dt> + <dd>Specifies an "action hint" used to determine how to label the enter key on mobile devices with virtual keyboards. Supported values are <code>go</code>, <code>done</code>, <code>next</code>, <code>search</code>, and <code>send</code>; these automatically get mapped to the appropriate string (and are case-insensitive).</dd> + <dt>{{htmlattrdef("autofocus")}}</dt> + <dd>This Boolean attribute lets you specify that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the <strong>autofocus</strong> attribute, which is a Boolean. It cannot be applied if the <strong>type</strong> attribute is set to <code>hidden</code> (that is, you cannot automatically set focus to a hidden control).</dd> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd> + <p>This Boolean attribute indicates that the form control is not available for interaction. In particular, the <code>click</code> event <a class="external" href="https://html.spec.whatwg.org/multipage/forms.html#enabling-and-disabling-form-controls:-the-disabled-attribute">will not be dispatched</a> on disabled controls. Also, a disabled control's value isn't submitted with the form.</p> + </dd> + <dt>{{htmlattrdef("form")}}</dt> + <dd>The form element that the input element is associated with (its <em>form owner</em>). The value of the attribute must be an <strong>id</strong> of a {{HTMLElement("form")}} element in the same document. If this attribute is not specified, this <code><input></code> element must be a descendant of a {{HTMLElement("form")}} element. This attribute enables you to place <code><input></code> elements anywhere within a document, not just as descendants of their form elements. An input can only be associated with one form.</dd> + <dt>{{htmlattrdef("formaction")}}</dt> + <dd>The URI of a program that processes the information submitted by the input element, if it is a submit button or image. If specified, it overrides the {{htmlattrxref("action","form")}} attribute of the element's form owner.</dd> + <dt>{{htmlattrdef("formenctype")}}</dt> + <dd>If the input element is a submit button or image, this attribute specifies the type of content that is used to submit the form to the server. Possible values are: + <ul> + <li><code>application/x-www-form-urlencoded</code>: The default value if the attribute is not specified.</li> + <li><code>multipart/form-data</code>: Use this value if you are using an {{HTMLElement("input")}} element with the {{htmlattrxref("type","input")}} attribute set to <code>file</code>.</li> + <li><code>text/plain</code></li> + </ul> + + <p>If this attribute is specified, it overrides the {{htmlattrxref("enctype","form")}} attribute of the element's form owner.</p> + </dd> + <dt>{{htmlattrdef("formmethod")}}</dt> + <dd>If the input element is a submit button or image, this attribute specifies the HTTP method that the browser uses to submit the form. Possible values are: + <ul> + <li><code>post</code>: The data from the form is included in the body of the form and is sent to the server.</li> + <li><code>get</code>: The data from the form are appended to the <strong>form</strong> attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.</li> + </ul> + + <p>If specified, this attribute overrides the {{htmlattrxref("method","form")}} attribute of the element's form owner.</p> + </dd> + <dt>{{htmlattrdef("formnovalidate")}}</dt> + <dd>If the input element is a submit button or image, this Boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the {{htmlattrxref("novalidate","form")}} attribute of the element's form owner.</dd> + <dt>{{htmlattrdef("formtarget")}}</dt> + <dd>If the input element is a submit button or image, this attribute is a name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a <em>browsing context</em> (for example, tab, window, or inline frame). If this attribute is specified, it overrides the {{htmlattrxref("target", "form")}} attribute of the elements's form owner. The following keywords have special meanings: + <ul> + <li>_<code>self</code>: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.</li> + <li><code>_blank</code>: Load the response into a new unnamed browsing context.</li> + <li><code>_parent</code>: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as <code>_self</code>.</li> + <li><code>_top</code>: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as <code>_self</code>.</li> + </ul> + </dd> + <dt>{{htmlattrdef("inputmode")}}</dt> + <dd>A hint to the browser for which keyboard to display. This attribute applies when the value of the <strong>type</strong> attribute is text, password, email, or url. Possible values are: + <ul> + <li><code>verbatim</code>: Alphanumeric, non-prose content such as usernames and passwords.</li> + <li><code>latin</code>: Latin-script input in the user's preferred language with typing aids such as text prediction enabled. For human-to-computer communication such as search boxes.</li> + <li><code>latin-name</code>: As <em>latin</em>, but for human names.</li> + <li><code>latin-prose</code>: As <em>latin</em>, but with more aggressive typing aids. For human-to-human communication such as instant messaging for email.</li> + <li><code>full-width-latin</code>: As <em>latin-prose</em>, but for the user's secondary languages.</li> + <li><code>kana</code>: Kana or romaji input, typically hiragana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.</li> + <li><code>katakana</code>: Katakana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.</li> + <li><code>numeric</code>: Numeric input, including keys for the digits 0 to 9, the user's preferred thousands separator character, and the character for indicating negative numbers. Intended for numeric codes, e.g. credit card numbers. For actual numbers, prefer using <input type="number"></li> + <li><code>tel</code>: Telephone input, including asterisk and pound key. Use <input type="tel"> if possible instead.</li> + <li><code>email</code>: Email input. Use <input type="email"> if possible instead.</li> + <li><code>url</code>: URL input. Use <input type="url"> if possible instead.</li> + </ul> + </dd> + <dt>{{htmlattrdef("list")}}</dt> + <dd>Identifies a list of pre-defined options to suggest to the user. The value must be the <strong>id</strong> of a {{HTMLElement("datalist")}} element in the same document. The browser displays only options that are valid values for this input element.</dd> + <dt>{{htmlattrdef("max")}}</dt> + <dd>The maximum value for this item, which must not be less than its minimum (<strong>min</strong> attribute) value.</dd> + <dt>{{htmlattrdef("min")}}</dt> + <dd>The minimum value for this item, which must not be greater than its maximum (<strong>max</strong> attribute) value.</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>The name of the control, which is submitted with the form data.</dd> + <dt>{{htmlattrdef("readonly")}}</dt> + <dd>This Boolean attribute indicates that the user cannot modify the value of the control.</dd> + <dt>{{htmlattrdef("required")}}</dt> + <dd>This attribute specifies that the user must fill in a value before submitting a form. It cannot be used when the <strong>type</strong> attribute is <code>hidden</code>, <code>image</code>, or a button type (<code>submit</code>, <code>reset</code>, or <code>button</code>). The {{cssxref(":optional")}} and {{cssxref(":required")}} CSS pseudo-classes will be applied to the field as appropriate.</dd> + <dt>{{htmlattrdef("selectionDirection")}}</dt> + <dd>The direction in which selection occurred. This is "forward" if the selection was made from left-to-right in an LTR locale or right-to-left in an RTL locale, or "backward" if the selection was made in the opposite direction. This can be "none" if the selection direction is unknown.</dd> + <dt>{{htmlattrdef("spellcheck")}}</dt> + <dd>Setting the value of this attribute to <code>true</code> indicates that the element needs to have its spelling and grammar checked. The value <code>default</code> indicates that the element is to act according to a default behavior, possibly based on the parent element's own <code>spellcheck</code> value. The value <code>false</code> indicates that the element should not be checked.</dd> + <dt>{{htmlattrdef("step")}}</dt> + <dd>Works with the <strong>min</strong> and <strong>max</strong> attributes to limit the increments at which a numeric or date-time value can be set. It can be the string <code>any</code> or a positive floating point number. If this attribute is not set to <code>any</code>, the control accepts only values at multiples of the step value greater than the minimum.</dd> + <dt>{{htmlattrdef("value")}}</dt> + <dd>The initial value of the control. This attribute is optional.<br> + Note that when reloading the page, Gecko and IE <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=46845#c186">will ignore the value specified in the HTML source</a>, if the value was changed before the reload.</dd> + <dt>{{htmlattrdef("x-moz-errormessage")}} {{non-standard_inline}}</dt> + <dd>This Mozilla extension allows you to specify the error message to display when a field doesn't successfully validate.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<p>To create a widget to display a date, use:</p> + +<pre class="brush: html"><input type="date"></pre> + +<h2 id="Navegadores_compatíveis">Navegadores compatíveis</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>20</td> + <td>12</td> + <td>{{CompatGeckoDesktop(57)}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatNo}}<sup>[1]</sup></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>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(57)}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>5</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>The generic {{HTMLElement("input")}} element and the interface used to manipulate it, {{domxref("HTMLInputElement")}}</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/The_native_form_widgets#Date_and_time_picker">Date and Time picker tutorial</a></li> + <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1283381">Bug 1283381 - Firefox bug to implement</a></li> +</ul> diff --git a/files/pt-br/web/html/element/input/index.html b/files/pt-br/web/html/element/input/index.html new file mode 100644 index 0000000000..6a96393bb3 --- /dev/null +++ b/files/pt-br/web/html/element/input/index.html @@ -0,0 +1,1360 @@ +--- +title: <input> +slug: Web/HTML/Element/Input +translation_of: Web/HTML/Element/input +--- +<div class="summary"> +<p>O <strong>elemento HTML <code><input></code></strong> é usado para criar controles interativos para formulários baseados na web para receber dados do usuário. A semântica de um <code><input></code> varia consideravelmente dependendo do valor de seu atributo <code>type</code>.</p> +</div> + +<ul class="htmlelt"> + <li><dfn><a href="/pt-BR/docs/HTML/Categorias_de_conteúdo">Categorias de conteúdo</a></dfn> <a href="/pt-BR/docs/HTML/Categorias_de_conteúdo#Conteúdo_de_fluxo">Conteúdo de fluxo</a>, listado, enviável, resetável, elemento associado a formulário, <a href="/pt-BR/docs/HTML/Categorias_de_conteúdo#Conteúdo_fraseado">conteúdo fraseado</a>.<br> + Se o atributo {{htmlattrxref("type", "input")}} não tiver o valor <code>hidden</code>, elemento rotulável, conteúdo palpável.</li> + <li><dfn>Conteúdo permitido</dfn> Nenhum, este é um {{Glossary("elemento vazio")}}.</li> + <li><dfn>Omissão de tags</dfn> Deve ter uma tag de abertura e não deve ter uma tag de fechamento.</li> + <li><dfn>Elementos pais permitidos</dfn> Qualquer elemento que aceite <a href="/pt-BR/docs/HTML/Categorias_de_conteúdo#Conteúdo_fraseado">conteúdo fraseado</a>.</li> + <li><dfn>Interface do DOM</dfn> {{domxref("HTMLInputElement")}}</li> +</ul> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento inclui os <a href="/pt-BR/docs/HTML/Atributos_globais">atributos globais</a>.</p> + +<dl> + <dt>{{htmlattrdef("type")}}</dt> + <dd>O tipo de controle a ser exibido. O tipo padrão é <strong>text</strong>, se este atributo não for especificado. Os valores possíveis são: + <ul> + <li><code>button</code>: Um botão sem comportamento padrão.</li> + <li><code>checkbox</code>: Uma caixa de marcação. Você deve usar o atributo <strong>value</strong> para definir o valor enviado por este item. Use o atributo <strong>checked</strong> para indicar se o item está selecionado por padrão. Você também pode usar o atributo <strong>indeterminate</strong> para indicar que a caixa de marcação está em um estado indeterminado (na maioria das plataformas, isso desenha uma linha horizontal cortando a caixa).</li> + <li><code>color</code>: {{HTMLVersionInline("5")}} Um controle para especificar cores. A interface de um seletor de cores não tem nenhuma funcionalidade obrigatória a não ser aceitar cores simples em texto (<a href="http://www.w3.org/TR/html5/forms.html#color-state-(type=color)">mais informações — em inglês</a>).</li> + <li><code>date</code>: {{HTMLVersionInline("5")}} Um controle para inserir uma data (ano, mês e dia, sem horário).</li> + <li><code>datetime</code>: {{HTMLVersionInline("5")}} Um controle para inserir data e horário (hora, minuto, segundo e fração de segundo) baseado no fuso horário UTC.</li> + <li><code>datetime-local</code>: {{HTMLVersionInline("5")}} Um controle para inserir data e horário, sem fuso horário.</li> + <li><code>email</code>: {{HTMLVersionInline("5")}} Um campo para editar um endereço de e-mail. O valor do campo é validado para estar vazio ou ter um único endereço de e-mail válido antes de ser enviado. As pseudoclasses CSS {{cssxref(":valid")}} e {{cssxref(":invalid")}} são aplicadas apropriadamente.</li> + <li><code>file</code>: Um controle que permite ao usuário selecionar um arquivo. Use o atributo<strong>accept</strong> para definir os tipos de arquivo que o controle pode selecionar.</li> + <li><code>hidden</code>: Um controle que não é exibido mas cujo valor é enviado ao servidor.</li> + <li><code>image</code>: Um botão gráfico para enviar o formulário. Você deve usar o atributo <strong>src</strong> para definir a fonte da imagem e o atributo <strong>alt</strong> para definir um texto alternativo. Você pode usar os atributos <strong>height</strong> e <strong>width</strong> para definir o tamanho da imagem em pixels.</li> + <li><code>month</code>: {{HTMLVersionInline("5")}} Um controle para inserir mês e ano, sem fuso horário.</li> + <li><code>number</code>: {{HTMLVersionInline("5")}} Um controle para inserir um número de ponto flutuante.</li> + <li><code>password</code>: Um campo de texto com uma só linha cujo valor é obscurecido. Use o atributo <strong>maxlength</strong> para especificar o comprimento máximo do valor que pode ser inserido.</li> + <li><code>radio</code>: Um botão de escolha. Você deve usar o atributo <strong>value</strong> para definir o valor a ser enviado por este item. Use o atributo <strong>checked</strong> para indicar se este item deve estar selecionado por padrão. Botões de escolha que têm o mesmo valor para o atributo <strong>name</strong> estão no mesmo "grupo de botões de escolha"; apenas um botão de escolha no grupo pode estar selecionado de cada vez..</li> + <li><code>range</code>: {{HTMLVersionInline("5")}} Um controle para inserir um número cujo valor exato não é importante. Este tipo de controle usa os seguintes valores padrão se os atributos correspondentes não forem especificados: + <ul> + <li><code>min</code>: 0</li> + <li><code>max</code>: 100</li> + <li><code>value</code>: <code>min</code> + (<code>max</code>-<code>min</code>)/2, ou <code>min</code> se <code>max</code> for menos que <code>min</code></li> + <li><code>step</code>: 1</li> + </ul> + </li> + <li><code>reset</code>: Um botão que faz o conteúdo do formulário voltar a ter seus valores padrão.</li> + <li><code>search</code>: {{HTMLVersionInline("5")}} Um campo de texto com uma só linha para digitar termos de busca; quebras de linha são automaticamente removidas do valor entrado.</li> + <li><code>submit</code>: Um botão que envia o formulário.</li> + <li><code>tel</code>: {{HTMLVersionInline("5")}} Um controle para inserir um número de telefone; quebras de linha são automaticamente removidas do valor entrado, mas nenhuma outra sintaxe é imposta. Você pode usar atributos como <strong>pattern</strong> e <strong>maxlength</strong> para restringir os valores inseridos no controle. As pseudoclasses CSS {{cssxref(":valid")}} e {{cssxref(":invalid")}} são aplicadas apropriadamente.</li> + <li><code>text</code>: Um campo de texto com uma só linha; quebras de linha são automaticamente removidas do valor entrado.</li> + <li><code>time</code>: {{HTMLVersionInline("5")}} Um controle para inserir um horário sem fuso horário.</li> + <li><code>url</code>: {{HTMLVersionInline("5")}} Um campo para editar uma URL. O valor inserido é validado para ser vazio ou uma URL absoluta válida antes de ser enviado. Quebras de linha e espaços em branco antes e após o valor inserido são automaticamente removidos. Você pode usar atributos como <strong>pattern</strong> e <strong>maxlength</strong> para restringir os valores inseridos no controle. As pseudoclasses CSS {{cssxref(":valid")}} e {{cssxref(":invalid")}} são aplicadas apropriadamente.</li> + <li><code>week</code>: {{HTMLVersionInline("5")}} Um controle para inserir uma data consistindo de ano da semana e número da semana sem fuso horário.</li> + </ul> + </dd> + <dt>{{htmlattrdef("accept")}}</dt> + <dd>Se o valor do atributo <strong>type</strong> for <code>file</code>, este atributo indica quais tipos de arquivo o servidor aceita; caso contrário, este atributo é ignorado. O valor deve ser uma lista de especificadores de tipo únicos separados por vírgula: + <ul> + <li>Uma extensão de arquivo começando com o caractere STOP (U+002E). (Exemplo: ".jpg,.png,.doc")</li> + <li>Um tipo MIME válido sem extensões</li> + <li><code>audio/*</code> representando arquivos de som {{HTMLVersionInline("5")}}</li> + <li><code>video/*</code> representando arquivos de vídeo {{HTMLVersionInline("5")}}</li> + <li><code>image/*</code> representando arquivos de imagem {{HTMLVersionInline("5")}}</li> + </ul> + </dd> + <dt>{{htmlattrdef("accesskey")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline", "HTML5")}}</dt> + <dd>Um único caractere que o usuário pode pressionar para mudar o foco de entrada de dados para este controle. Este atributo é global no HTML5.</dd> + <dt>{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</dt> + <dd>Especifica uma "dica de ação" usada para determinar como rotular a tecla Enter em dispositivos móveis com teclados virtuais. Os valores suportados são <code>go</code>, <code>done</code>, <code>next</code>, <code>search</code> e <code>send</code>; estes valores são automaticamente mapeados para o texto apropriado (maiúsculas e minúsculas não são diferenciadas).</dd> + <dt>{{htmlattrdef("autocapitalize")}} {{non-standard_inline}}</dt> + <dd>Este é um atributo não padronizado usado pelo iOS Safari Mobile que controla se e como o texto deveria ser automaticamente capitalizado conforme o usuário insere/edita. Os valores não obsoletos estão disponíveis no iOS 5 e posteriores. Os valores possíveis são: + <ul> + <li><code>none</code>: Desabilitar completamente a capitalização automática.</li> + <li><code>sentences</code>: Capitalizar automaticamente a primeira letra das frases.</li> + <li><code>words</code>: Capitalizar automaticamente a primeira letra das palavras.</li> + <li><code>characters</code>: Capitalizar automaticamente todas as letras.</li> + <li><code>on</code>: {{deprecated_inline()}} Obsoleto desde o iOS 5.</li> + <li><code>off</code>: {{deprecated_inline()}} Obsoleto desde o iOS 5.</li> + </ul> + </dd> + <dt>{{htmlattrdef("autocomplete")}} {{HTMLVersionInline("5")}}</dt> + <dd>Este atributo indica se o valor do controle pode ser completado automaticamente pelo navegador. Este atributo é ignorado se o valor do atributo <strong>type</strong> é <code>hidden</code>, <code>password</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code> ou um tipo de botão (<code>button</code>, <code>submit</code>, <code>reset</code>, <code>image</code>). Os valores possíveis são: + <ul> + <li><code>off</code>: O usuário deve inserir explicitamente um valor neste campo a cada uso, ou o documento implementa seu próprio método de autocompletar; o navegador não completa a entrada automaticamente.</li> + <li><code>on</code>: O navegador pode completar automaticamente o valor baseado em valores que o usuário inseriu no passado.</li> + </ul> + + <p>Se o atributo <strong>autocomplete</strong> não está especificado num elemento <code><input></code>, o navegador usa o valor do atributo <strong>autocomplete</strong> do formulário dono do <code><input></code>. O formulário dono deste <code><input></code> é o elemento <code><form></code> que contém este <code><input></code> ou o elemento <code><form></code> cujo <strong>id</strong> é referenciado pelo atributo <strong>form</strong> do elemento <code><input></code>. Para mais informações, veja o atributo {{htmlattrxref("autocomplete", "form")}} no elemento {{HTMLElement("form")}}.</p> + + <p>O atributo <strong>autocomplete</strong> também controla se o Firefox vai, ao contrário de outros navegadores, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persistir o estado dinâmico de desabilitado e marcado (se aplicável)</a> de um {{HTMLElement("input")}} entre carregamentos de página. A funcionalidade de persistir é habilitada por padrão. Definir o valor do atributo <strong>autocomplete</strong> para <code>off</code> desabilita esta funcionalidade; isto funciona mesmo quando o atributo <strong>autocomplete</strong> não se aplica ao {{HTMLElement("input")}} por causa de seu <strong>type</strong>. Veja {{bug(654072)}}.</p> + </dd> + <dt>{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</dt> + <dd>Este é um atributo não padronizado suportado pelo Safari que é usado para controle se a correção automática deveria ser habilitada quando o usuário entra/edita o texto do {{HTMLElement("input")}}. Os valores possíveis são: + <ul> + <li><code>on</code>: Habilita correção automática</li> + <li><code>off</code>: Desabilita correção automática</li> + </ul> + </dd> + <dt>{{htmlattrdef("autofocus")}} {{HTMLVersionInline("5")}}</dt> + <dd>Este atributo booleano permite que você especifique que um controle de formulário deve ter o foco de entrada de dados assim que a página carrega, a não ser que o usuário sobrescreva este comportamento digitando em um controle diferente, por exemplo. Apenas um elemento de formulário em um documento pode ter o atributo <strong>autofocus</strong>, que é booleano. Este atributo não pode ser aplicado se o atributo <strong>type</strong> estiver definido como <code>hidden</code> (isto é, você não pode colocar automaticamente o foco em um controle escondido).</dd> + <dt>{{htmlattrdef("autosave")}} {{HTMLVersionInline("5")}}</dt> + <dd>Este atributo deve ser definido com um valor único. Se o valor do atributo <strong>type</strong> for <code>search</code>, termos de busca anteriores serão persistidos no menu entre carregamentos de página.</dd> + <dt>{{htmlattrdef("checked")}}</dt> + <dd> + <p>Quando o valor do atributo <strong>type</strong> é <code>radio</code> ou <code>checkbox</code>, a presença deste atributo booleano indica que o controle é selecionado por padrão; caso contrário, este atributo é ignorado.</p> + + <p>O Firefox vai, por padrão, ao contrário de outros navegadores, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persistir o estado dinâmico de marcado</a> de um {{HTMLElement("input")}} entre carregamentos de página. Use o atributo {{htmlattrxref("autocomplete","input")}} para controlar esta funcionalidade.</p> + </dd> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd> + <p>Este atributo booleano indica que o controle de formulário não está disponível para interação. Em particular o evento <code>click</code> <a class="external" href="https://html.spec.whatwg.org/multipage/forms.html#enabling-and-disabling-form-controls:-the-disabled-attribute">não será disparado</a> em controles desabilitados. Além disso, o valor de um controle desabilitado não é enviado com o formulário.</p> + + <p>O Firefox vai, por padrão, ao contrário de outros navegadores, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persistir o estado dinâmico de desabilitado</a> de um {{HTMLElement("input")}} entre carregamentos de página. Use o atributo {{htmlattrxref("autocomplete","input")}} para controlar esta funcionalidade.</p> + </dd> + <dt>{{htmlattrdef("form")}} {{HTMLVersionInline("5")}}</dt> + <dd>O elemento <code><form></code> ao qual o elemento <code><input></code> está associado (seu <em>formulário dono</em>). O valor do atributo deve ser um <strong>id</strong> de um elemento {{HTMLElement("form")}}. Este atributo permite que você coloque elementos <code><input></code> em qualquer lugar num documento, não apenas como descendentes de seus elementos <code><form></code>. Um <code><input></code> só pode estar associado a um único formulário.</dd> + <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline("5")}}</dt> + <dd>A URI de um programa que processa a informação enviada pelo elemento, se ele for um botão ou uma imagem de envio de formulário. Se especificado, ele sobrescreve o atributo {{htmlattrxref("action","form")}} do formulário dono do elemento.</dd> + <dt>{{htmlattrdef("formenctype")}} {{HTMLVersionInline("5")}}</dt> + <dd>Se o elemento for um botão ou uma imagem de envio de formulário, este atributo especifica o tipo de conteúdo que deve ser usado para enviar o formulário para o servidor. Os valores possíveis são: + <ul> + <li><code>application/x-www-form-urlencoded</code>: O valor padrão se o atributo não for especificado.</li> + <li><code>multipart/form-data</code>: Use este valor se você estiver usando um elemento {{HTMLElement("input")}} com o atributo {{htmlattrxref("type","input")}} definido como <code>file</code>.</li> + <li><code>text/plain</code></li> + </ul> + + <p>Se este atributo for especificado, ele sobrescreve o atributo {{htmlattrxref("enctype","form")}} do formulário dono do elemento.</p> + </dd> + <dt>{{htmlattrdef("formmethod")}} {{HTMLVersionInline("5")}}</dt> + <dd>Se o elemento for um botão ou uma imagem de envio de formulário, este atributo especifica o método HTTP que o navegador deve usar para enviar o formulário. Os valores possíveis são: + <ul> + <li><code>post</code>: Os dados do formulário são incluídos no corpo do formulário e enviados para o servidor.</li> + <li><code>get</code>: Os dados do formulário são acrescentados ao URI do atributo <strong>form</strong>, com um '?' como separador, e o URI resultante é enviado ao servidor. Use este método quando o formulário não tem efeitos colaterais e contém somente caracteres ASCII.</li> + </ul> + + <p>Se especificado, este atributo sobrescreve o atributo {{htmlattrxref("method","form")}} do formulário dono do elemento.</p> + </dd> + <dt>{{htmlattrdef("formnovalidate")}} {{HTMLVersionInline("5")}}</dt> + <dd>Se o elemento for um botão ou uma imagem de envio de formulário, este atributo booleano especifica que o formulário não deve ser validado quando enviado. Se especificado, este atributo sobrescreve o atributo {{htmlattrxref("novalidate","form")}} do formulário dono do elemento.</dd> + <dt>{{htmlattrdef("formtarget")}} {{HTMLVersionInline("5")}}</dt> + <dd>Se o elemento for um botão ou uma imagem de envio de formulário, este atributo é um nome ou palavra-chave indicando onde mostrar a resposta recebida após a submissão do formulário. Este é o nome de, ou palavra-chave para, um <em>contexto de navegação</em> (por exemplo aba, janela ou frame inline). Se especificado, este atributo sobrescreve o atributo {{htmlattrxref("target", "form")}} do formulário dono do elemento. As seguintes palavras-chave têm significado especial: + <ul> + <li>_<code>self</code>: Carrega a resposta nom mesmo contexto de navegação que o atual. Este é o valor padrão se o atributo não for especificado.</li> + <li><code>_blank</code>: Carrega a resposta num novo contexto de navegação anônimo.</li> + <li><code>_parent</code>: Carrega a resposta no contexto de navegação pai do atual. Se não houver pai, esta opção tem o mesmo comportamento de <code>_self</code>.</li> + <li><code>_top</code>: Carrega a resposta no contexto de navegação raiz (isto é, o contexto de navegação que é ancestral do atual e não tem pai). Se não houver pai, esta opção tem o mesmo comportamento de <code>_self</code>.</li> + </ul> + </dd> + <dt>{{htmlattrdef("height")}} {{HTMLVersionInline("5")}}</dt> + <dd>Se o valor do atributo <strong>type</strong> for <code>image</code>, este atributo define a altura da imagem mostrada para o botão.</dd> + <dt>{{htmlattrdef("incremental")}} {{non-standard_inline}}</dt> + <dd>Este é um atributo não padronizado suportado pelo Safari que é aplicado somente quando o <strong>type</strong> é <code>search</code>. Se o atributo estiver presente, independentemente do valor que ele tiver, o {{HTMLElement("input")}} dispara eventos <a href="/pt-BR/docs/Web/Events/search"><code>search</code></a> conforme o usuário edita o texto do campo. Este evento somente é disparado um tempo após a última tecla ter sido pressionada; este tempo é definido pela implementação e novas digitações zeram o contador de tempo. Em outras palavras, o disparo do evento é filtrado (<em>debounced</em>). Se o atributo não estiver presente, o evento <a href="/pt-BR/docs/Web/Events/search"><code>search</code></a> só é disparado quando o usuário iniciar explicitamente uma busca (por exemplo, pressionando a tecla Enter enquanto estiver no campo).</dd> + <dt>{{htmlattrdef("inputmode")}} {{HTMLVersionInline("5")}}</dt> + <dd>Uma dica para o navegador de qual teclado deve ser mostrado. Este atributo se aplica quando o valor do atributo <strong>type</strong> é <code>text</code>, <code>password</code>, <code>email</code> ou <code>url</code>. Os valores possíveis são: + <ul> + <li><code>verbatim</code>: Conteúdo alfanumérico que não seja prosa, como nomes de usuário e senhas.</li> + <li><code>latin</code>: Conteúdo no alfabeto latino na língua preferida do usuário, com auxílios de entrada como predição de texto habilitados. Para interações humano-computador como caixas de busca.</li> + <li><code>latin-name</code>: Como <em>latin</em>, mas para nomes humanos.</li> + <li><code>latin-prose</code>: Como <em>latin</em>, mas com auxílios de entrada mais agressivos. Para comunicações entre humanos como mensagens instantâneas ou email.</li> + <li><code>full-width-latin</code>: Como <em>latin-prose</em>, mas para as línguas secundárias do usuário.</li> + <li><code>kana</code>: Entrada em kana ou romaji, tipicamente hiragana, usando caracteres de largura total, com suporte à conversão para kanji. Para entrada de texto em língua japonesa.</li> + <li><code>katakana</code>: Entrada em katakana, usando caracteres de largura total, com suporte à conversão para kanji. Para entrada de texto em língua japonesa.</li> + <li><code>numeric</code>: Entrada numérica, incluindo teclas para os dígitos de 0 a 9, o caractere separador de milhar preferido pelo usuário e o caractere para indicar números negativos. Para códigos numéricos como números de cartão de crédito. Para números de verdade, prefira usar <code><input type="number"></code></li> + <li><code>tel</code>: Entrada de números de telefone, incluindo as teclas asterisco e cerquilha. Use <code><input type="tel"></code> se possível em vez disso.</li> + <li><code>email</code>: Entrada de email. Use <code><input type="email"></code> se possível em vez disso.</li> + <li><code>url</code>: Entrada de URLs. Use <code><input type="url"></code> se possível em vez disso.</li> + </ul> + </dd> + <dt>{{htmlattrdef("list")}} {{HTMLVersionInline("5")}}</dt> + <dd>Identifica uma lista de opções pré-definidas de sugestões para o usuário. O valor deve ser o <strong>id</strong> de um elemento {{HTMLElement("datalist")}} no mesmo documento. O navegador mostrará apenas opções que são valores válidos para este elemento. Este atributo é ignorado quando o valor do atributo <strong>type</strong> é <code>hidden</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code> ou um tipo de botão.</dd> + <dt>{{htmlattrdef("max")}} {{HTMLVersionInline("5")}}</dt> + <dd>O valor máximo (numérico ou data) para este item, que não deve ser menor que seu valor mínimo (atributo <strong>min</strong>).</dd> + <dt>{{htmlattrdef("maxlength")}}</dt> + <dd>Se o valor do atributo <strong>type</strong> for <code>text</code>, <code>email</code>,<code> search</code>, <code>password</code>, <code>tel</code> ou <code>url</code>, este atributo especifica o número máximo de caracteres (em pontos de código Unicode) que o usuário pode inserir; para outros tipos de controle, este atributo é ignorado. Seu valor pode exceder o do atributo <strong>size</strong>. Se não for especificado, o usuário pode inserir uma quantidade ilimitada de caracteres. Especificar um valor negativo resulta no comportamento padrão, isto é, o usuário vai poder inserir um número ilimitado de caracteres. Esta regra só é validada quando o valor do atributo é modificado.</dd> + <dt>{{htmlattrdef("min")}} {{HTMLVersionInline("5")}}</dt> + <dd>O valor mínimo (númerico ou data) para este item, que não deve ser maior do que seu máximo (atributo <strong>max</strong>).</dd> + <dt>{{htmlattrdef("minlength")}} {{HTMLVersionInline("5")}}</dt> + <dd>Se o valor do atributo <strong>type</strong> for <code>text</code>, <code>email</code>,<code> search</code>, <code>password</code>, <code>tel</code> ou <code>url</code>, este atributo especifica o número mínimo de caracteres (em pontos de código Unicode) que o usuário pode inserir; para outros tipos de controle, este atributo é ignorado.</dd> + <dt>{{htmlattrdef("multiple")}} {{HTMLVersionInline("5")}}</dt> + <dd>Este atributo booleano indica se o usuário pode inserir mais de um valor. Ele é aplicado quando o atributo <strong>type</strong> está definido como <code>email</code> ou <code>file</code>; em outros casos, é ignorado.</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>O nome do controle, que é enviado junto com os dados do formulário.</dd> + <dt>{{htmlattrdef("pattern")}} {{HTMLVersionInline("5")}}</dt> + <dd>Uma expressão regular usada para validar o valor do controle. O padrão deve casar com o valor completo da entrada, não apenas uma parte. Use o atributo <strong>title</strong> para descrever o padrão para ajudar o usuário. Este atributo é aplicado quando o valor do atributo <strong>type</strong> é <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code> ou <code>email</code>; caso contrário ele é ignorado. A linguagem da expressão regular é a mesma do JavaScript. O padrão não deve estar entre barras.</dd> + <dt>{{htmlattrdef("placeholder")}} {{HTMLVersionInline("5")}}</dt> + <dd>Uma dica para o usuário do que ele pode inserir no controle. O texto do atributo não deve conter quebras de linha. Este atributo é aplicado quando o valor do atributo <strong>type</strong> é <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code> ou <code>email</code>; caso contrário, ele é ignorado. + <div class="note"><strong>Nota:</strong> Não use o atributo <code>placeholder</code> no lugar de um elemento {{HTMLElement("label")}}. Os propósitos de cada um são diferentes: o atributo {{HTMLElement("label")}} descreve o papel o elemento do formulário, isto é, ele indica que tipo de informação é esperada. Já o atributo <code>placeholder</code> é uma dica sobre o formato que o conteúdo deveria ter. Há casos em que o atributo <code>placeholder</code> nunca é exibido para o usuário, portanto o formulário deve ser inteligível sem ele.</div> + </dd> + <dt>{{htmlattrdef("readonly")}}</dt> + <dd>Este atributo booleano indica que o usuário não pode modificar o valor do controle. + <p>{{HTMLVersionInline("5")}} Este atributo é ignorado se o valor do atributo <strong>type</strong> for <code>hidden</code>, <code>range</code>, <code>color</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code> ou um tipo de botão.</p> + </dd> + <dt>{{htmlattrdef("required")}} {{HTMLVersionInline("5")}}</dt> + <dd>Este atributo especifica que o usuário deve preencher o campo com um valor antes de enviar o formulário. Ele não pode ser usado quando o atributo <strong>type</strong> está definido como <code>hidden</code>, <code>image</code> ou um tipo de botão (<code>submit</code>, <code>reset</code> ou <code>button</code>). As pseudoclasses CSS {{cssxref(":optional")}} e {{cssxref(":required")}} serão aplicadas ao campo como for apropriado.</dd> + <dt>{{htmlattrdef("selectionDirection")}} {{HTMLVersionInline("5")}}</dt> + <dd>A direção na qual a seleção ocorreu. Vale <code>forward</code> se a seleção foi feita no mesmo sentido da escrita do idioma usado ou <code>backward</code> se a seleção foi feita na direção oposta. Pode ainda ser <code>none</code> se a direção da seleção não for conhecida.</dd> + <dt>{{htmlattrdef("size")}}</dt> + <dd>O tamanho inicial do controle. Este valor é em pixels a não ser que o valor do atributo <strong>type</strong> seja <code>text</code> ou <code>password</code>. Neste caso, este valor é um número inteiro de caracteres. A partir do HTML5, este atributo é aplicado apenas quando o atributo <strong>type</strong> está definido como <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code>, <code>email</code> ou <code>password</code>; caso contrário, ele é ignorado. Além disso, o tamanho deve ser maior que zero. Se você não especificar um tamanho, o valor padrão 20 é usado.</dd> + <dt>{{htmlattrdef("spellcheck")}} {{HTMLVersionInline("5")}}</dt> + <dd>Definir o valor deste atributo como <code>true</code> indica que o elemento deve passar por um corretor ortográfico e gramatical. O valor <code>default</code> indica que o elemento deve agir de acordo com seu comportamento padrão, possivelmente baseado no valor do atributo <code>spellcheck</code> de seu elemento pai. O valor <code>false</code> indica que o elemento não deve ser verificado.</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>Se o valor do atributo <strong>type</strong> for <code>image</code>, este atributo especifica uma URI para a localização de uma imagem a ser exibida no botão gráfico; caso contrário, este atributo é ignorado.</dd> + <dt>{{htmlattrdef("step")}} {{HTMLVersionInline("5")}}</dt> + <dd>Trabalha junto com os atributos <strong>min</strong> e <strong>max</strong> para limitar os incrementos em que valores numéricos ou datas podem ser alterados. Seu valor pode ser <code>any</code> ou um número de ponto flutuante positivo. Se o valor não for <code>any</code>, o controle aceita somente valores múltiplos valor do incremento maiores que o mínimo.</dd> + <dt>{{htmlattrdef("tabindex")}} element-specific in {{HTMLVersionInline(4)}}, global in {{HTMLVersionInline("5")}}</dt> + <dd>A posição do elemento na ordem de navegação pela tecla Tab no documento atual.</dd> + <dt>{{htmlattrdef("usemap")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline", "HTML5")}}</dt> + <dd>O nome de um elemento {{HTMLElement("map")}} para ser usado como um mapa de imagem.</dd> + <dt>{{htmlattrdef("value")}}</dt> + <dd>O valor inicial do controle. Este atributo é opcional exceto quando o valor do atributo <strong>type</strong> for <code>radio</code> ou <code>checkbox</code>.<br> + Note que, quando a página é recarregada, Gecko and IE <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=46845#c186">ignorarão o valor especificado no código HTML</a> se o valor tiver sido alterado antes do recarregamento.</dd> + <dt>{{htmlattrdef("width")}} {{HTMLVersionInline("5")}}</dt> + <dd>Se o valor do atributo <strong>type</strong> for <code>image</code>, este atributo define a largura da imagem exibida para o botão.</dd> + <dt>{{htmlattrdef("x-moz-errormessage")}} {{non-standard_inline}}</dt> + <dd>Essa extensão da Mozilla permite que você especifique a mensagem de erro a ser exibida quando um campo não valida com sucesso.</dd> +</dl> + +<h2 id="Notas">Notas</h2> + +<h3 id="Entradas_de_arquivo">Entradas de arquivo</h3> + +<div class="note"> +<p><strong>Nota:</strong> a partir do {{Gecko("2.0")}}, chamar o método <code>click()</code> num elemento {{HTMLElement("input")}} do tipo <code>file</code> abre o seletor de arquivos e permite que o usuário selecione arquivos. Veja <a href="/pt-BR/docs/Usando_arquivos_a_partir_de_aplicações_web">Usando arquivos a partir de aplicações web</a> para um exemplo e mais detalhes.</p> +</div> + +<p>Você não pode definir o valor de um seletor de arquivos a partir de um script; fazer algo como o seguinte não tem efeito:</p> + +<pre class="brush: js">var e = getElementById("algumaEntradaDeArquivo"); +e.value = "foo"; +</pre> + +<h3 id="Mensagens_de_erro">Mensagens de erro</h3> + +<p>Se você quiser que o Firefox mostre uma mensagem de erro personalizada quando a validação de um campo falha, você pode usar o atributo <code>x-moz-errormessage</code> para isso:</p> + +<pre class="brush: html"><input type="email" x-moz-errormessage="Por favor, especifique um endereço de e-mail."> +</pre> + +<p>Note, no entanto, que isso não é padronizado e não terá efeito em outros navegadores.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Uma_caixa_de_entrada_simples">Uma caixa de entrada simples</h3> + +<pre class="brush: html"><!-- Um campo básico --> +<input type="text" name="input" value="Digite aqui"> +</pre> + +<p><input><img alt="" class="ife_marker" id="input_ife_marker_0" style="border: 0pt none; cursor: pointer; display: inline; height: 19px; width: 14px;" title="O tamanho máximo do campo é desconhecido"></p> + +<h3 id="Um_caso_de_uso_comum">Um caso de uso comum</h3> + +<pre class="brush: html"><!-- Um formulário comum que inclui tags input --> +<form action="getform.php" method="get"> + Nome: <input type="text" name="nome" /><br /> + Sobrenome: <input type="text" name="sobrenome" /><br /> + E-mail: <input type="email" name="email_usuario" /><br /> +<input type="submit" value="Enviar" /> +</form> +</pre> + +<h3 id="Usando_o_mozactionhint_no_Firefox_mobile">Usando o mozactionhint no Firefox mobile</h3> + +<p>Você pode usar o atributo {{htmlattrxref("mozactionhint", "input")}} para especificar o texto para o rótulo da tecla Enter no teclado virtual quando seu formulário é exibido no Firefox mobile. Por exemplo, para ter um rótulo "Próximo", você pode fazer o seguinte:</p> + +<pre class="brush: html"><input type="text" mozactionhint="next" name="sometext" /> +</pre> + +<p>O resultado é:</p> + +<p><a href="/@api/deki/files/4970/=mozactionhint.png"><img alt="mozactionhint.png" class="default internal" src="/@api/deki/files/4970/=mozactionhint.png?size=webview" style="border: 1px solid black; height: 350px; width: 210px;"></a></p> + +<h2 id="Specifications" name="Specifications">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', 'the-input-element.html#the-input-element', '<input>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-input-element', '<input>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.4', '<form>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</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>Suporte básico</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2 ou anterior</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=button</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>3</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=checkbox</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}<br> + {{CompatGeckoDesktop("1.9.2")}} para o valor <code>indeterminate</code></td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=color</td> + <td>21.0</td> + <td> + <p>{{CompatGeckoDesktop("29.0")}} (ainda não suportado no Windows Touch)</p> + </td> + <td>{{CompatNo}}</td> + <td>11.01</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>type=date</td> + <td>5.0</td> + <td>{{CompatNo}}<br> + {{unimplemented_inline("825294")}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}} (reconhecido mas sem interface)</td> + </tr> + <tr> + <td>type=datetime</td> + <td> + <p>{{CompatNo}}<br> + (reconhecido mas sem interface)</p> + </td> + <td>{{CompatNo}}<br> + {{unimplemented_inline("825294")}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}} (reconhecido mas sem interface)</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=datetime-local</td> + <td>5.0</td> + <td>{{CompatNo}}<br> + {{unimplemented_inline("825294")}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}} (reconhecido mas sem interface)</td> + </tr> + <tr> + <td>type=email</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>type=file</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>3.02</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=hidden</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=image</td> + <td>1.0</td> + <td>Gecko 2.0 envia apenas as coordenadas x e y quando clicado, não mais o nome/valor do elemento</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=month</td> + <td>5.0</td> + <td>{{CompatNo}}<br> + {{unimplemented_inline("446510")}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}} (reconhecido mas sem interface)</td> + </tr> + <tr> + <td>type=number</td> + <td>6.0 (Localização no Chrome 11)</td> + <td>{{CompatGeckoDesktop("29.0")}}</td> + <td>10<br> + (reconhecido mas sem interface)</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=password</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=radio</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}<br> + {{CompatGeckoDesktop("1.9.2")}} para o valor <code>indeterminate</code></td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=range</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("23.0")}}</td> + <td>10</td> + <td>10.62 (11.01 adicionou suporte a um valor padrão)</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=reset</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=search</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>11.01</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=submit</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=tel</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>11.01</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>type=text</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=time</td> + <td>5.0</td> + <td>{{CompatNo}}<br> + {{unimplemented_inline("825294")}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}} (reconhecido mas sem interface)</td> + </tr> + <tr> + <td>type=url</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>type=week</td> + <td>5.0</td> + <td>{{CompatNo}}<br> + {{unimplemented_inline("825294")}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}} (reconhecido mas sem interface)</td> + </tr> + <tr> + <td> + <p>accept=[extensão de arquivo]</p> + </td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>10</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td> + <p>accept=[tipo MIME]</p> + </td> + <td>8.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>10</td> + <td>10</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>accept=audio/*</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}<br> + Filtros para as seguintes extensões de arquivos de áudio: .aac, .aif, .flac, .iff, .m4a, .m4b, .mid, .midi, .mp3, .mpa, .mpc, .oga, .ogg, .ra, .ram, .snd, .wav, .wma</td> + <td>10</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>accept=video/*</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}<br> + Filtros para as seguintes extensões de arquivos de vídeo: .avi, .divx, .flv, .m4v, .mkv, .mov, .mp4, .mpeg, .mpg, .ogm, .ogv, .ogx, .rm, .rmvb, .smil, .webm, .wmv, .xvid</td> + <td>10</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>accept=image/*</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}<br> + Filtros para as seguintes extensões de arquivos de imagem: .jpe, .jpg, .jpeg, .gif, .png, .bmp, .ico, .svg, .svgz, .tif, .tiff, .ai, .drw, .pct, .psp, .xcf, .psd, .raw</td> + <td>10</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>accesskey</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>6</td> + <td>1.0</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>mozactionhint</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>autocomplete</td> + <td>17.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>5</td> + <td>9.6</td> + <td>5.2</td> + </tr> + <tr> + <td>autofocus</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>9.6</td> + <td>5.0</td> + </tr> + <tr> + <td>checked</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>disabled</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>6</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>form</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formaction</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>5.2</td> + </tr> + <tr> + <td>formenctype</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formmethod</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>5.2</td> + </tr> + <tr> + <td>formnovalidate</td> + <td>5.0 (na versão 6.0 só funcionava com o DOCTYPE HTML5, suporte a validação foi desabilitado na versão 7.0 e reabilitado na versão 10.0)</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formtarget</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>5.2</td> + </tr> + <tr> + <td>height</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>1.0</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>incremental</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>inputmode</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>list</td> + <td>20.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>9.6</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>max</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>maxlength</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>min</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>minlength</td> + <td>40.0</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>multiple</td> + <td>1.0 (suportado para os tipos file e email a partir de 5.0)</td> + <td>{{CompatGeckoDesktop("1.9.2")}} para <strong>type</strong>=file<br> + {{CompatVersionUnknown}} para <strong>type</strong>=email</td> + <td>10</td> + <td>1.0 (10.62 com suporte para type=file e a partir de 11.01 type=email)</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>name</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>pattern</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>9.6</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>placeholder</td> + <td>10.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>11.00</td> + <td>5.0</td> + </tr> + <tr> + <td>readonly</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>6 (ausente para <strong>type</strong> <code>checkbox</code>, <code>radio</code>)</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>required</td> + <td>5.0 (suporte ao elemento select a partir da versão 10)</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>9.6</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>size</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>spellcheck</td> + <td>10.0</td> + <td>{{CompatGeckoDesktop("1.9.2")}}</td> + <td>10</td> + <td>11.0</td> + <td>4.0</td> + </tr> + <tr> + <td>src</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>step</td> + <td>6.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>5.0</td> + </tr> + <tr> + <td>tabindex</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>6 (elementos com tabindex > 0 não são navegados)</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>width</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>1.0</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidade</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=button</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=checkbox</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=color</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("27.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>type=date</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>5.0</td> + </tr> + <tr> + <td>type=datetime</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=datetime-local</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=email</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>3.1 (sem validação mas com teclado específico)</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=file</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}} [1]</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=hidden</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=image</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=month</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=number</td> + <td>2.3 (sem validação mas com teclado específico)</td> + <td>{{CompatGeckoMobile("29.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>4.0 (sem validação mas com teclado específico)</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=password</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=radio</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=range</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>5.0</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=reset</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=search</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>4.0</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=submit</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=tel</td> + <td>2.3</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>3.1</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=text</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=time</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=url</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>3.1 (sem validação mas com teclado específico)</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=week</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>accept=[tipo MIME]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>accept=audio/*</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>accept=image/*</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>accept=video/*</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>accesskey</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>autocomplete</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>autofocus</td> + <td>3.2</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>checked</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>disabled</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>form</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formaction</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>5.0</td> + </tr> + <tr> + <td>formenctype</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formmethod</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>5.0</td> + </tr> + <tr> + <td>formnovalidate</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formtarget</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>5.0</td> + </tr> + <tr> + <td>height</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>list</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>max</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("16.0")}} (interface pode ficar não implementada)</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>maxlength</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>min</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("16.0")}} (interface pode ficar não implementada)</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>minlength</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>multiple</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>name</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0</td> + </tr> + <tr> + <td>pattern</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>placeholder</td> + <td>2.3</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>11.10</td> + <td>4</td> + </tr> + <tr> + <td>readonly</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>required</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>size</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>spellcheck</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>11.0</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>src</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>step</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("16.0")}} (interface pode ficar não implementada)</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>tabindex</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>width</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1]: <a href="http://blog.uploadcare.com/post/97884147203/you-cannot-upload-files-to-a-server-using-mobile-safari">Envio de arquivos não funcionava</a> no Safari Mobile para iOS 8.0 e 8.0.1. O bug foi corrigido no iOs 8.0.2.</p> + +<p>Safari Mobile para iOS aplica um estilo padrão de <code>{{cssxref("opacity")}}: 0.4</code> para elementos textuais desabilitados. Outros navegadores principais não usam esse estilo padrão específico atualmente.</p> + +<p>No Safari Mobile para iOS, definir <code>{{cssxref("display")}}: block</code> num {{HTMLElement("input")}} com <code>type="date"</code>, <code>type="time"</code>, <code>type="datetime-local"</code> ou <code>type="month"</code> faz com que o texto dentro do {{HTMLElement("input")}} fique verticalmente desalinhado.</p> + +<p>A partir do Chrome v39, um <code><input type="date"></code> estilizado com <code>{{cssxref("display")}}: table-cell; {{cssxref("width")}}: 100%;</code> terá um {{cssxref("min-width")}} imposto pelo Chrome e não poderá ficar mais estreito do que essa largura mínima. <a href="https://code.google.com/p/chromium/issues/detail?id=346051">Veja o bug do Chromium #346051.</a></p> + +<h3 id="Notas_do_Gecko">Notas do Gecko</h3> + +<p>O Firefox vai, por padrão, ao contrário de outros navegadores, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persistir o estado dinâmico de desabilitado e (se aplicável) checado</a> de um {{HTMLElement("input")}} entre carregamentos de página. Definir o valor do atributo {{htmlattrxref("autocomplete","input")}} como <code>off</code> desabilita essa funcionalidade; isso funciona mesmo quando o atributo {{htmlattrxref("autocomplete","input")}} não seria aplicado normalmente ao {{HTMLElement("input")}} por causa de seu {{htmlattrxref("type","input")}}. Veja {{bug(654072)}}.</p> + +<p>A partir do Gecko 9.0 {{geckoRelease("9.0")}}, o Firefox para Android permite aos usuários capturar imagens usando suas câmeras e enviá-las, sem a necessidade de sair do navegador. Desenvolvedores web podem implementar essa funcionalidade simplesmente especificando o valor do atributo <code>accept</code> para "image/*" nos seus campos <code>file</code> desta forma:</p> + +<p><code><input type="file" accept="image/*"></code></p> + +<p>Firefox para Android define uma {{ cssxref("background-image") }} padrão gradiente em todos os campos com <code>type="text"</code>, <code>type="file"</code>, <code>type="button"</code> e <code>type="submit"</code>. Isso pode ser desabilitado usando <code>background-image: none</code>.</p> + +<p>Firefox para Android também define uma {{ cssxref("border") }} padrão em todos os elementos <code><input type="file"></code>.</p> + +<h4 id="Localização">Localização</h4> + +<p>Os valores permitidos para certos tipos de <code><input></code> dependem do locale. Em alguns locales, 1,000.00 é um número válido, enquanto que em outros a maneira correta de inserir este número é 1.000,00.</p> + +<p>Firefox usa as seguintes heurísticas para determinar o locale para validar a entrada do usuário (pelo menos para type="number"):</p> + +<ul> + <li>Tentar a língua especificada por um atributo 'lang'/'xml:lang' no elemento ou qualquer um de seus ancestrais;</li> + <li>Tentar a língua especificada por qualquer cabeçalho HTTP Content-Language ou</li> + <li>Se nenhum for especificado, usar o locale do navegador.</li> +</ul> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>Outros elementos relacionados a formulários: {{HTMLElement("form")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} e {{HTMLElement("meter")}}.</li> + <li><a class="external" href="http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text">Cross-browser HTML5 placeholder text</a></li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/pt-br/web/html/element/input/password/index.html b/files/pt-br/web/html/element/input/password/index.html new file mode 100644 index 0000000000..7c19c04c22 --- /dev/null +++ b/files/pt-br/web/html/element/input/password/index.html @@ -0,0 +1,232 @@ +--- +title: <input type="password"> +slug: Web/HTML/Element/Input/password +tags: + - Formulário + - campo + - senha +translation_of: Web/HTML/Element/input/password +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">Elementos <code><input></code> do tipo <strong><code>"password"</code></strong> são uma maneira do usuário digitar senhas com segurança.</span> O elemento é mostrado como um controle de edição de texto de uma linha, no qual o texto é omitido para que não possa ser lido, geralmente substituindo cada caractere por um símbolo como o astesrisco ("*") ou um ponto ("•"). Esse caracter varia dependendo do {{Glossary("agente de usuário")}} e do {{Glossary("OS")}}.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-password.html", "tabbed-standard")}}</div> + +<p class="hidden">O código fonte desse exemplo interativo está armazenado em um repositóriodo GitHub. Se deseja contribuir com o projeto de exemplos interativos, faça um clone de <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e nos mande uma pull request.</p> + +<p>Os detalhes de como o processo de inserção do texto funciona podem variar dependendo do navegador. Dispositivos móveis, por exemplo, frequentemente mostram o caractere digitado por um breve momento antes de ser ocultado, de forma que o usuário possa verificar se realmente digitou o caractere pretendido. Isso é útil devido ao tamanho reduzido das teclas e a facilidade de se pressionar a tecla errada, principalmente em teclados virtuais.</p> + +<div class="note"> +<p>Todo formulário que envolve informações sensíveis tais como senhas (ex.: formulários de login) deve ser servido usando HTTPS. Vários navegadores implementam mecanismos que avisam sobre formulários não protegidos - veja <a href="/pt-BR/docs/Security/SenhasNãoProtegidas">Senhas não Protegidas</a>.</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>Uma {{domxref("DOMString")}} representando uma senha, ou vazia</td> + </tr> + <tr> + <td><strong>Eventos</strong></td> + <td>{{event("change")}} e {{event("input")}}</td> + </tr> + <tr> + <td><strong>Atributos comuns suportados</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("inputmode", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}}, e {{htmlattrxref("size", "input")}}</td> + </tr> + <tr> + <td><strong>Atributos IDL </strong></td> + <td><code>selectionStart</code>, <code>selectionEnd</code>, <code>selectionDirection</code>, e <code>value</code></td> + </tr> + <tr> + <td><strong>Métodos</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}, e {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Valor">Valor</h2> + +<p>O atributo {{htmlattrxref("value", "input")}} contém uma {{domxref("DOMString")}} cujo valor é o conteúdo atual do controle de edição de texto usado para a inserção da senha. Se o usuário ainda não digitou nada, esse valor é uma string vazia (<code>""</code>). Se a propriedade {{htmlattrxref("required")}} for especificada, então a caixa de edição de senha precisa conter um valor que não seja uma string vazia para ser válida.</p> + +<p>Se o atributo {{htmlattrxref("pattern", "input")}} for especificado, o conteúdo de um controle <code>"password"</code> só é considerado válido se o valor passar na validação; veja {{anch("Validação")}} para mais informações.</p> + +<div class="note"> +<p>Os caracteres de quebra de linha <em>line feed</em> (U+000A) e <em>carriage return</em> (U+000D) não são permitidos em valores de <code>"password"</code>. Quando o valor de um campo de senha é definido, os caracteres acima são removidos do valor. </p> +</div> + +<h2 id="Usando_campos_de_senha">Usando campos de senha</h2> + +<p>Caixas de inserção de senha funcionam assim como outras caixas de inserção de texto; a principal diferença é que o conteúdo é ocultado para impedir que pessoas que estejam próximas ao usuário leiam a senha.</p> + +<h3 id="Um_campo_de_senha_simples">Um campo de senha simples</h3> + +<p>Aqui vemos o mais básico dos campos de senha, juntamente com um rótulo para ele usando o elemento {{HTMLElement("label")}}.</p> + +<pre class="brush: html"><label for="senhaUsuario">Senha: </label> +<input id="senhaUsuario" type="password"></pre> + +<p>{{EmbedLiveSample("A_simple_password_input", 600, 40)}}</p> + +<h3 id="Permitindo_preenchimento_automático">Permitindo preenchimento automático</h3> + +<p>Para permitir que o gerenciador de senhas do usuário digite a senha automaticamente, especifique o atributo {{htmlattrxref("autocomplete", "input")}}. Para senhas, o valor dele deve ser geralmente um dos seguintes:</p> + +<dl> + <dt><code>"on"</code></dt> + <dd>Permite que o navegador ou um gerenciador de senhas preencha automaticamente o campo de senha. Esse valor não é tão informativo quanto <code>"current-password"</code> ou <code>"new-password"</code>.</dd> + <dt><code>"off"</code></dt> + <dd>Não permite que o navegador ou gerenciador de senhas preencha automaticamente o campo de senha. Vale observar que alguns softwares ignoram esse valor, já que ele costuma ser prejudicial para a capacidade dos usuários de manter senhas seguras.</dd> + <dt><code>"current-password"</code></dt> + <dd>Permite que o navegador ou gerenciador de senhas preencha automaticamente o campo de senha. Esse valor fornece mais informações do que <code>"on"</code>, já que ele permite que o navegador ou gerenciador de senhas digite automaticamente a senha atualmente conhecida do site no campo, mas não que sugira uma nova.</dd> + <dt><code>"new-password"</code></dt> + <dd>Permite que o navegador ou gerenciador de senhas digite automaticamente uma nova senha para o site. Esse valor é usado em formulários de "mudar senha" e de "novo usuário", no campo que pede por uma nova senha. A nova senha pode ser gerada de várias maneiras, dependendo do gerenciador de senhas usado. Ele pode simplificar o preenchimento de uma sugestão de nova senha, ou mesmo pode mostrar ao usuário uma interface para criar uma.</dd> +</dl> + +<div id="Autocomplete_sample1"> +<pre class="brush: html"><label for="senhaUsuario">Senha:</label> +<input id="senhaUsuario" type="password" autocomplete="current-password"></pre> +</div> + +<p>{{EmbedLiveSample("Autocomplete_sample1", 600, 40)}}</p> + +<h3 id="Tornando_a_senha_obrigatória">Tornando a senha obrigatória</h3> + +<p>Para dizer ao navegador do usuário que o campo de senha precisa ter um valor válido antes do formulário ser enviado, basta adicionar o atributo booleano {{htmlattrxref("required", "input")}}.</p> + +<pre class="brush: html"><label for="senhaUsuario">Senha: </label> +<input id="senhaUsuario" type="password" required> +<input type="submit" value="Enviar"></pre> + +<p>{{EmbedLiveSample("Making_the_password_mandatory", 600, 40)}}</p> + +<h3 id="Especificando_um_modo_de_inserção">Especificando um modo de inserção</h3> + +<p>Se as suas regras de sintaxe recomendadas (ou obrigatórias) para a senha poderiam obter vantagem de uma interface de digitação diferente da de um teclado padrão, você pode usar o atributo {{htmlattrxref("inputmode", "input")}} para pedir por uma interface específica. O caso de uso mais óbvio para isso é o de a senha precisar ser numérica (como um PIN). Dispositivos móveis com teclados virtuais, por exemplo, podem optar por mostrar um teclado numérico ao invés de um teclado completo, facilitando a digitação da senha.</p> + +<pre class="brush: html"><label for="pin">PIN: </label> +<input id="pin" type="password" inputmode="numeric"></pre> + +<p>{{EmbedLiveSample("Specifying_an_input_mode", 600, 40)}}</p> + +<h3 id="Definindo_restrições_de_tamanho">Definindo restrições de tamanho</h3> + +<p>Como de praxe, você pode usar os atributos {{htmlattrxref("minlength", "input")}} e {{htmlattrxref("maxlength", "input")}} para estabelecer os tamanhos mínimo e máximo aceitáveis para a senha. Este exemplo continua o anterior, agora especificando que o PIN do usuário deva ter pelo menos quatro dígitos e não passe de oito dígitos. O atributo {{htmlattrxref("size", "input")}} é usado para garantir que o campo de senha aceite no máximo oito caracteres.</p> + +<pre class="brush: html"><label for="pin">PIN:</label> +<input id="pin" type="password" inputmode="numeric" minlength="4" + maxlength="8" size="8"></pre> + +<p>{{EmbedLiveSample("Setting_length_requirements", 600, 40)}}</p> + +<h3 id="Selecionando_o_texto">Selecionando o texto</h3> + +<p>Assim como em outros tipos de campos de texto, você pode usar o método {{domxref("HTMLInputElement.select", "select()")}} para selecionar todo o texto no campo de senha.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><label for="senhaUsuario">Senha: </label> +<input id="senhaUsuario" type="password" size="12"> +<button id="selecionarTudo">Selecionar tudo</button> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">document.getElementById("selecionarTudo").onclick = function() { + document.getElementById("senhaUsuario").select(); +}</pre> + +<h4 id="Resultado">Resultado</h4> + +<p>{{EmbedLiveSample("Selecting_text", 600, 40)}}</p> + +<p>Você também pode usar {{domxref("HTMLInputElement.selectionStart", "selectionStart")}} e {{domxref("HTMLInputElement.selectionEnd", "selectionEnd")}} para obter (ou definir) o intervalo dos caracteres no campo que estão selecionados no momento, e {{domxref("HTMLInputElement.selectionDirection", "selectionDirection")}} para saber em qual direção a seleção ocorreu (ou será estendida, dependendo da sua plataforma; veja a documentação dela para saber mais). Porém, como o texto está oculto, a utilidade desses métodos fica reduzida.</p> + +<h2 id="Validação">Validação</h2> + +<p>Se seu aplicativo tiver restrições de conjuntos de caracteres ou qualquer outro requisito para o conteúdo da senha digitada, você pode usar o atributo {{htmlattrxref("pattern", "input")}} para estabelecer que uma expressão regular seja usada para garantir automaticamente que as senhas cumpram com esses requisitos.</p> + +<p>Neste exemplo, são válidos apenas valores consistindo de no mínimo quatro e no máximo oito dígitos hexadecimais.</p> + +<div id="Validation_sample1"> +<pre class="brush: html"><label for="hexId">Hex ID: </label> +<input id="hexId" type="password" pattern="[0-9a-fA-F]{4,8}" + title="Digite um ID consistindo de 4-8 dígitos hexadecimais"></pre> +</div> + +<p>{{EmbedLiveSample("Validation_sample1", 600, 40)}}</p> + +<dl> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd> + <p>Esse atributo booleano indica que o campo de senha não está disponível para interação. Além disso, os valores dos campos marcados com ele não são enviados com o formulário.</p> + </dd> +</dl> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Pedindo_por_um_CPF">Pedindo por um CPF</h3> + +<p>Este exemplo aceita apenas valores que correspondam ao formato de um <a href="https://pt.wikipedia.org/wiki/Cadastro_de_pessoas_f%C3%ADsicas#N%C3%BAmero_de_inscri%C3%A7%C3%A3o_no_CPF">Cadastro de Pessoa Física</a>. Este número, usado para fins de cobrança e identificação, segue o formato "123.456.789-09". </p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><label for="cpf">CPF:</label> +<input type="password" id="cpf" inputmode="number" minlength="11" maxlength="11" + pattern="^[0-9]{3}.?[0-9]{3}.?[0-9]{3}-?[0-9]{2}" + required autocomplete="off"> +<br> +<label for="cpf">Valor:</label> +<span id="atual"></span></pre> + +<p>Ele usa um padrão {{htmlattrxref("pattern", "input")}} que limita o valor digitado a strings que representem números de CPF no formato válido. O padrão aceita tanto valores separados por pontos (".") e hífen ("-") como apenas os números. </p> + +<p>O modo de inserção em {{htmlattrxref("inputmode", "input")}} está definido como <code>"number"</code> para indicar a dispositivos com teclados virtuais que eles devem mostrar um teclado numérico para uma digitação mais fácil. Os atributos {{htmlattrxref("minlength", "input")}} e {{htmlattrxref("maxlength", "input")}} foram definidos como 11 e 14, respectivamente, de forma a aceitar valores com no mínimo 11 e no máximo 14 caracteres (o primeiro para valores sem os caracteres separadores e o último para valores com esses caracteres). O atributo {{htmlattrxref("required", "input")}} é usado para indicar que este campo precisa ter um valor válido. Por fim, {{htmlattrxref("autocomplete", "input")}} foi definido como <code>"off"</code> para evitar que gerenciadores de senhas tentem usar ou definir o valor dele, já que ele não é nem mesmo uma senha.</p> + +<p>Obviamente, apenas essa expressão regular não garante um CPF realmente válido, já que a validação deste tipo de número exige cálculos adicionais. <a href="https://www.devmedia.com.br/validar-cpf-com-javascript/23916">Confira este artigo</a> para ver exatamente como garantir um número de CPF válido.</p> + +<h4 id="JavaScript_2">JavaScript</h4> + +<p>A seguir temos um código simples para mostrar o CPF digitado na tela para que você possa vê-lo. É claro que isso vai contra o propósito de um campo de senha, mas ajuda na hora de experimentar o padrão <code>pattern</code>. </p> + +<pre class="brush: js">var cpf = document.getElementById("cpf"); +var atual = document.getElementById("atual"); + +cpf.oninput = function(event) { + atual.innerHTML = cpf.value; +}</pre> + +<h4 id="Resultado_2">Resultado</h4> + +<p>{{EmbedLiveSample("Requesting_a_Social_Security_number", 600, 60)}}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#password-state-(type=password)', '<input type="password">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Definição inicial</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'forms.html#password-state-(type=password)', '<input type="password">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Definição inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + + + +<p>{{Compat("html.elements.input.input-password")}}</p> diff --git a/files/pt-br/web/html/element/input/range/index.html b/files/pt-br/web/html/element/input/range/index.html new file mode 100644 index 0000000000..659550ba6f --- /dev/null +++ b/files/pt-br/web/html/element/input/range/index.html @@ -0,0 +1,390 @@ +--- +title: <input type="range"> +slug: Web/HTML/Element/Input/range +translation_of: Web/HTML/Element/input/range +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">{{HTMLElement("input")}} elementos do tipo <code><strong>"range"</strong></code> deixam o usuário especificar um valor numérico que não deve ser inferior a um determinado valor, e não mais do que um valor máximo especificado. O valor preciso, no entanto, não é considerado importante. Este geralmente é representado por um controle deslizante ou o mesmo tipo de controle de "number" input. </span>Como este tipo de elemento é impreciso, não deve ser usado a menos que o valor exato do controle não seja importante.</p> + +<div id="summary_sample1"> +<pre class="brush: html"><input type="range"></pre> +</div> + +<p>{{EmbedLiveSample("summary_sample1", 600, 40)}}</p> + +<p>Se o navegador do usuário não suportar o tipo <code>"range"</code>, este será tratado como um input do tipo <code><a href="/en-US/docs/Web/HTML/Element/input/text">"text"</a></code>.</p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>Uma {{domxref("DOMString")}} contendo a a string que representa o valor numérico escolhido; use {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} para pegar o valor como um {{jsxref("Number")}}.</td> + </tr> + <tr> + <td><strong>Events</strong></td> + <td>{{event("change")}} e {{event("input")}}</td> + </tr> + <tr> + <td><strong>Supported Common Attributes</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("max", "input")}}, {{htmlattrxref("min", "input")}}, e {{htmlattrxref("step", "input")}}</td> + </tr> + <tr> + <td><strong>IDL attributes</strong></td> + <td><code>list</code>, <code>value</code>, e <code>valueAsNumber</code></td> + </tr> + <tr> + <td><strong>Methods</strong></td> + <td>{{domxref("HTMLInputElement.stepDown", "stepDown()")}} e {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Value">Value</h2> + +<p>O atributo {{htmlattrxref("value", "input")}} contém uma {{domxref("DOMString")}} que conte uma representação dos números selecionados em string. O valor nunca é uma string vazia (<code>""</code>). O valor padrão está entre o mínimo e o máximo especificados, a menos que o valor máximo seja menor que o mínimo, caso em que o padrão é definido como o atributo de valor mínimo. O algoritmo que determina o valor padrão é:</p> + +<pre class="brush: js">defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min + : rangeElem.min + (rangeElem.max - rangeElem.min)/2;</pre> + +<p>Se for feito uma tentativa para definir como máximo um valor inferior ao mínimo, então este é definido como mínimo. Da mesma forma, <span id="result_box" lang="pt"><span>uma tentativa de definir um valor maior do que o máximo sendo configurado então para o máximo.</span></span></p> + +<h2 id="Usando_range_inputs">Usando range inputs</h2> + +<p>Equanto o tipo <code>"number"</code> permite aos usuários inserir um número com restrições opcionais forçando-o a digitar um valor entre o valor mínimo e máximo, ele requer que digitem um valor específico. A input de tipo permite ao usuário que coloque um valor sem que preocupe ou precise saber o valor numério específico.</p> + +<p>Alguns exemplos de situações que este tipo são comumente usados são:</p> + +<ul> + <li>Controle de audio como volume, equilíbrio e ou controle de filtros.</li> + <li>Controle de configuração de cores como canais de cores, transparência, brilho, etc.</li> + <li>Controle de configuração de jogos, como dificuldade, distância de visibilidade, tamanho do mundo, entre outros.</li> + <li>Comprimento de senha gerada por gerenciadores de senha.</li> +</ul> + +<p>Como regra geral, se o usuário tiver maior probabilidade de se interessar por porcentagens entre distâncias mínimas e máximas do que por um número real, este tipo de input é um forte candidato. Por exemplo, no caso de um controle de volume estéreo, "colocar o controlador no meio" em vez de "definir o volume como 0.5".</p> + +<h3 id="Especificando_o_mínimo_e_o_máximo">Especificando o mínimo e o máximo</h3> + +<p>Por padrão, o mínimo é 0 e o máximo é 100. Se não é o que você precisa, voce pode facilmente especificar limites diferentes alterando os valores dos atributos {{htmlattrxref("min", "input")}} e/ou {{htmlattrxref("max", "input")}}. Este pode ser um valor inteiro.</p> + +<p>Por exemplo, para pedir ao usuário um valor entre -10 e 10, você pode usar:</p> + +<pre class="brush: html"><input type="range" min="-10" max="10"></pre> + +<p>{{EmbedLiveSample("Specifying_the_minimum_and_maximum", 600, 40)}}</p> + +<h3 id="Definindo_a_escala_entre_valores">Definindo a escala entre valores</h3> + +<p>Por padrão, a escala entre o mínimo e o máximo é 1, significando que este sempre é um valor inteiro. você pode alterar o atributo {{htmlattrxref("step")}} para controlar esta escala. Por exemplo, se você precisa de um valor de duas casas decimais entre os valores 5 e 10, voce deve definir o valor de <code>step</code> para 0.01:</p> + +<div id="Granularity_sample1"> +<pre class="brush: html"><input type="range" min="5" max="10" step="0.01"></pre> + +<p>{{EmbedLiveSample("Granularity_sample1", 600, 40)}}</p> +</div> + +<p>Se você deseja aceitar um valor independente das casas decimais, voce pode especificar o valor <code>"any"</code> para o atributo {{htmlattrxref("step", "input")}}:</p> + +<div id="Granularity_sample2"> +<pre class="brush: html"><input type="range" min="0" max="3.14" step="any"></pre> + +<p>{{EmbedLiveSample("Granularity_sample2", 600, 40)}}</p> + +<p><span id="result_box" lang="pt"><span>Este exemplo permite ao usuário selecionar qualquer valor entre 0 e π sem qualquer restrição na parte fracionada do valor selecionado.</span></span></p> +</div> + +<h3 id="Adicionando_marcas_de_mapeamento_e_etiquetas">Adicionando marcas de mapeamento e etiquetas</h3> + +<p>As especificações do HTML oferece aos navegadores uma certa flexibilidade sobre como apresentar o controle deslizante. Em parte alguma esta flexibilidade é mais aparente do que no mapeamento de marcas e, menos ainda, na etiqueta. <span id="result_box" lang="pt"><span>A especificação descreve como adicionar pontos personalizados ao controle</span></span> usando o atributo {{htmlattrxref("list", "input")}} e o elemento {{HTMLElement("datalist")}} , mas não tem requisitos nem padronizações para marcações ou mesmo pontos ao longo do controle deslizante.</p> + +<h4 id="Modelo_de_controle_do_range">Modelo<span class="short_text" id="result_box" lang="pt"><span> de controle</span></span> do range</h4> + +<p><span id="result_box" lang="pt"><span>Uma vez que os navegadores têm essa flexibilidade e, até à data, nenhum suporte a todos os recursos que o HTML define para controles de alcance, aqui estão alguns modelos para mostrar o que você pode obter no MacOS em um navegador que os suporta.</span></span></p> + +<h5 id="Um_controle_sem_o_atributo">Um controle sem o atributo</h5> + +<p>Isto é o que você obtem se não especificar o atributo {{htmlattrxref("list", "input")}} , ou se o navegador não oferece suporte.</p> + +<table class="fullwidth standard-table"> + <tbody> + <tr> + <th>HTML</th> + <th>Screenshot</th> + </tr> + <tr> + <td> + <pre class="brush: html"> +<input type="range"></pre> + </td> + <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14989/macslider-plain.png" style="height: 28px; width: 184px;"></td> + </tr> + </tbody> +</table> + +<h5 id="Um_controle_com_o_Atributo">Um controle com o Atributo</h5> + +<p>Este controle está usando um atributo <code>list</code> <span class="short_text" id="result_box" lang="pt"><span>especificando o ID de um</span></span>a {{HTMLElement("datalist")}} que define uma serie de marcações no controle. Há 11 deles, de modo que há um 0% bem como a adição de 10% em cada próximo. Cada ponto representa usando um elemento {{HTMLElement("option")}} com propriedade {{htmlattrxref("value", "option")}} <span id="result_box" lang="pt"><span> definido para o valor do intervalo no qual uma marca deve ser desenhada.</span></span></p> + +<table class="fullwidth standard-table"> + <tbody> + <tr> + <th>HTML</th> + <th>Screenshot</th> + </tr> + <tr> + <td> + <pre class="brush: html"> +<input type="range" list="tickmarks"> + +<datalist id="tickmarks"> + <option value="0"> + <option value="10"> + <option value="20"> + <option value="30"> + <option value="40"> + <option value="50"> + <option value="60"> + <option value="70"> + <option value="80"> + <option value="90"> + <option value="100"> +</datalist> +</pre> + </td> + <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14991/macslider-ticks.png" style="height: 28px; width: 184px;"></td> + </tr> + </tbody> +</table> + +<h5 id="Um_controle_deslizante_com_marcas_e_rótulos">Um controle deslizante com marcas e rótulos</h5> + +<p>Você pode adicionar rótulos para seu controle usando o atributo {{htmlattrxref("label", "option")}} para o elemento {{HTMLElement("option")}} <span id="result_box" lang="pt"><span>correspondente às marcas de marcação para as quais você deseja ter rótulos.</span></span></p> + +<table class="fullwidth standard-table"> + <tbody> + <tr> + <th>HTML</th> + <th>Screenshot</th> + </tr> + <tr> + <td> + <pre class="brush: html"> +<input type="range" list="tickmarks"> + +<datalist id="tickmarks"> + <option value="0" label="0%"> + <option value="10"> + <option value="20"> + <option value="30"> + <option value="40"> + <option value="50" label="50%"> + <option value="60"> + <option value="70"> + <option value="80"> + <option value="90"> + <option value="100" label="100%"> +</datalist> +</pre> + </td> + <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14993/macslider-labels.png" style="height: 44px; width: 184px;"></td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Nota</strong>: Atualmente nenhum navegador suporta estes recursos totalmente. Firefox não suporta pontos e rótulos, por exemplo, enquanto o Chrome suporta as marcações de pontos, porém não suporta as etiquetas.</p> +</div> + +<h3 id="Change_the_orientation">Change the orientation</h3> + +<div class="hidden"> +<p>Por padrão se um navegador renderiza um controle deslizante de intervalos, este renderizará para que o controlador seja movimento da esquerda pra direita e o contrário também. No entanto isto pode ser facilmente mudado de cima para baixo e vice-versa utilizando CSS.</p> + +<div class="note"> +<p><strong>Nota</strong>: <span id="result_box" lang="pt"><span>Isso ainda não foi implementado por nenhum dos principais navegadores.</span> <span>Veja o Firefox</span></span> {{bug(981916)}}, <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=341071">Chrome bug 341071</a>.</p> +</div> + +<p>Considerando este controle:</p> + +<div id="Orientation_sample1"> +<pre class="brush: html"><input type="range" id="volume" min="0" max="11" value="7" step="1"></pre> +</div> + +<p>{{EmbedLiveSample("Orientation_sample1", 200, 200, "https://mdn.mozillademos.org/files/14983/Orientation_sample1.png")}}</p> + +<p><span id="result_box" lang="pt"><span>Esse controle é horizontal (pelo menos na maioria, senão em todos os principais navegadores, outros podem variar).</span> <span>Fazê-lo vertical é tão simples como adicionar CSS para alterar as dimensões do controle para que ele seja mais alto que o largo, como este:</span></span> </p> + +<div id="Orientation_sample2"> +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">#volume { + height: 150px; + width: 50px; +}</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><input type="range" id="volume" min="0" max="11" value="7" step="1"></pre> + +<h4 id="Resultado">Resultado</h4> + +<p>{{EmbedLiveSample("Orientation_sample2", 200, 200, "https://mdn.mozillademos.org/files/14985/Orientation_sample2.png")}}</p> + +<p><strong><span id="result_box" lang="pt"><span>Atualmente, nenhum dos principais navegadores suporta a criação de entradas de alcance vertical usando o CSS desta maneira, mesmo que seja a maneira como a especificação recomenda que eles o façam.</span></span> </strong></p> +</div> +</div> + +<p>As especificações HTML recomenda que os navegadores mudem automaticamente para um controle vertical quando a largura for menor que à altura. Infortuniamente nenhum dos principais navegadores atualmente oferece tal suporte. No entanto você pode cria-lo pelo seu lado. A maneira mais fácil para isto é usar o CSS: aplicando um: {{cssxref("transform")}} para rotacionar o elemento tornando-o vertical. Vamos dar uma olhada:</p> + +<div id="Orientation_sample3"> +<h4 id="HTML_2">HTML</h4> + +<p>No HTML o elemento {{HTMLElement("input")}} precisa ser envolto em uma {{HTMLElement("div")}} para nos permitir corrigir o layout após a transformação ser executada, <span id="result_box" lang="pt"><span>(uma vez que as transformações não afetam automaticamente o layout da página):</span></span></p> + +<pre class="brush: html"><div class="slider-wrapper"> + <input type="range" min="0" max="11" value="7" step="1"> +</div></pre> + +<h4 id="CSS_2">CSS</h4> + +<p><span id="result_box" lang="pt"><span>Agora precisamos de algum CSS.</span> <span>Primeiro é o CSS para o próprio wrapper;</span> <span>isso especifica o modo de exibição e o tamanho que queremos para que a página seja definida corretamente;</span> <span>em essência, está reservando uma área da página para que o controle deslizante gire e se encaixe no espaço reservado sem bagunçar outros elementos.</span></span></p> + +<pre class="brush: css">.slider-wrapper { + display: inline-block; + width: 20px; + height: 150px; + padding: 0; +} +</pre> +<span id="result_box" lang="pt"><span>Em seguida, vem a informação de estilo para o elemento </span></span><code><input></code> <span id="result_box" lang="pt"><span>dentro do espaço reservado:</span></span> + +<pre class="brush: css">.slider-wrapper input { + width: 150px; + height: 20px; + margin: 0; + transform-origin: 75px 75px; + transform: rotate(-90deg); +}</pre> + +<p><span id="result_box" lang="pt"><span>O tamanho do controle está configurado para ter 150 pixels de comprimento por 20 pixels de altura</span></span> . As margins estão configuradas como 0 e a {{cssxref("transform-origin")}} é deslocada para o centro do espaço de giro do controle deslizante;<span id="result_box" lang="pt"><span> uma vez que o controle deslizante está configurado para ter 150 pixels de largura, gira através de uma caixa que é de 150 pixels em cada lado.</span> <span>Compensando a origem por 75px em cada eixo significa que vamos girar em torno do centro desse espaço.</span> <span>Finalmente, giramos no sentido anti-horário em 90 °.</span> <span>O resultado: uma entrada de intervalo que é girada para que o valor máximo esteja na parte superior e o valor mínimo esteja na parte inferior.</span></span></p> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample("Orientation_sample3", 200, 200, "https://mdn.mozillademos.org/files/14987/Orientation_sample3.png")}}</p> +</div> + +<h2 id="Validação">Validação</h2> + +<p>Não há padrões de validação disponível, no entanto, as seguintes formas de validações são realizadas automaticamente:</p> + +<ul> + <li>Se {{htmlattrxref("value", "input")}} estiver definido para algo que não possa ser convertido em um número flutuante válido, <span id="result_box" lang="pt"><span>a validação falhará porque a entrada está sofrendo de uma entrada incorreta.</span></span></li> + <li>O valor não será inferior há {{htmlattrxref("min", "input")}}. O valor padrão é 0.</li> + <li>O valor não pode ser maior que {{htmlattrxref("max", "input")}}. O valor padrão é 100.</li> + <li>O valor será um multiplo de {{htmlattrxref("step", "input")}}. O valor padrão é 1.</li> +</ul> + +<h2 id="Exemplos">Exemplos</h2> + +<p><span id="result_box" lang="pt"><span>Além dos exemplos variados acima, você encontrará as entradas de alcance demonstradas nestes artigos:</span></span></p> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Controlling_multiple_parameters_with_ConstantSourceNode">Controlling multiple parameters with ConstantSourceNode</a></li> +</ul> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#range-state-(type=range)', '<input type="range">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#range-state-typerange', '<input type="range">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.0<sup>[2]</sup></td> + <td>12</td> + <td>{{CompatGeckoDesktop(23)}}<sup>[1][4]</sup></td> + <td>10</td> + <td>10.1</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.1<sup>[3]</sup></td> + <td>57<sup>[2]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(52)}}<sup>[1]</sup></td> + <td>10</td> + <td>{{CompatVersionUnknown}}</td> + <td>5.1</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] While the specification says that the range input should be drawn vertically if the height is greater than the width, this behavior is not currently implemented. See these Firefox bugs for more information: {{bug(840820)}} and {{bug(981916)}}.</p> + +<p>[2] Chrome implements the <code>slider-vertical</code> value for the non-standard {{cssxref("-webkit-appearance")}} property. <em>You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers</em>.</p> + +<p>[3] The Android browser recognizes the <code>"range"</code> type starting with version 2.1, but doesn't fully implement it until version 4.3.</p> + +<p>[4] Drawing of hash/tick marks is not yet implemented. See {{bug(841942)}} for more information.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Forms">HTML Forms</a></li> + <li>{{HTMLElement("input")}} and the {{domxref("HTMLInputElement")}} interface it's based upon</li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/number"><input type="number"></a></code></li> +</ul> diff --git a/files/pt-br/web/html/element/input/time/index.html b/files/pt-br/web/html/element/input/time/index.html new file mode 100644 index 0000000000..917eea9d39 --- /dev/null +++ b/files/pt-br/web/html/element/input/time/index.html @@ -0,0 +1,458 @@ +--- +title: <input type="time"> +slug: Web/HTML/Element/Input/time +tags: + - Formulário + - Hora + - tipo +translation_of: Web/HTML/Element/input/time +--- +<div>{{HTMLRef("Input_types")}}</div> + +<p><span class="seoSummary">Elementos <code><input></code> do tipo <strong><code>time</code></strong> (hora) criam campos de inserção que permitem que o usuário digite horários facilmente (horas e minutos e, opcionalmente, segundos).</span></p> + +<p>A interface de usuário deste tipo de campo varia de navegador para navegador. A maioria dos navegadores modernos é compatível com ele exceto pelo Safari, o único grande navegador que ainda não o implementou; no Safari (e em qualquer outro navegador que ainda não suporte <code><time></code>), ele regride para <code><a href="/en-US/docs/Web/HTML/Element/input/text"><input type="text"></a></code>.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-time.html", "tabbed-standard")}}</div> + + + +<h2 id="Aparência">Aparência</h2> + +<h3 id="Chrome_e_Opera">Chrome e Opera</h3> + +<p>No Chrome/Opera, o campo de <code>time</code> é simples, com espaços onde o usuário pode inserir horas e minutos (no formato 24 horas), além de setas para cima e para baixo que servem para, respectivamente, incrementar e decrementar o componente atualmente selecionado. Um botão "X" também é apresentado para limpar o conteúdo do campo.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15399/chrome-time.png" style="display: block; height: 31px; margin: 0px auto; width: 82px;"></p> + +<h3 id="Firefox">Firefox</h3> + +<p>O campo de <code>time</code> do Firefox é bem parecido com o do Chrome, exceto pela ausência das setas para cima e para baixo e por estar no formato 12 horas (com um espaço adicional para inserir AM ou PM).</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15403/firefox-time.png" style="display: block; height: 29px; margin: 0px auto; width: 106px;"></p> + +<h3 id="Edge">Edge</h3> + +<p>O campo de <code>time</code> do Edge é melhor elaborado, abrindo um seletor de hora e minuto com rolagem infinita. Assim como o Chrome, ele também adota o formato 24 horas:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15401/edge-time.png" style="display: block; margin: 0 auto;"></p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>Uma {{domxref("DOMString")}} representando um horário, ou vazia.</td> + </tr> + <tr> + <td><strong>Eventos</strong></td> + <td>{{event("change")}} e {{event("input")}}.</td> + </tr> + <tr> + <td><strong>Atributos comuns suportados</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}} e {{htmlattrxref("step", "input")}}.</td> + </tr> + <tr> + <td><strong>Atributos IDL</strong></td> + <td><code>value</code>, <code>valueAsDate</code>, <code>valueAsNumber</code> e <code>list</code>.</td> + </tr> + <tr> + <td><strong>Métodos</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}} e {{domxref("HTMLInputElement.stepUp", "stepUp()")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Valor">Valor</h2> + +<div id="value-sample1"> +<p>Uma {{domxref("DOMString")}} contendo o valor do horário inserido no campo. Você pode definir um valor padrão para o campo incluindo um horário válido no atributo {{htmlattrxref("value", "input")}} ao criar o elemento <code><input></code>, tipo assim:</p> + +<pre class="brush: html"><label for="hora-cons">Escolha o horário da consulta: </label> +<input id="hora-cons" type="time" name="hora-cons" value="13:30"></pre> +</div> + +<p>{{ EmbedLiveSample('value-sample1', 600, 60) }}</p> + +<p>Você também pode obter e definir o valor do campo via JavaScript usando a propriedade {{domxref("HTMLInputElement.value")}}, por exemplo:</p> + +<pre class="brush: js">var campoHora = document.querySelector('input[type="time"]'); +campoHora.value = '15:30';</pre> + +<h3 id="Formato_do_valor_do_horário">Formato do valor do horário</h3> + +<p>O <code>value</code> do campo de <code>time</code> está sempre no formato 24 horas: <code>"hh:mm"</code>, não importa o formato usado na inserção. Esse formato muitas vezes é escolhido baseado no idioma/local do usuário (ou mesmo pelo agente de usuário). Se o horário incluir segundos (veja {{anch("Usando o atributo step")}}), o formato sempre é <code>"hh:mm:ss"</code>.</p> + +<p>No próximo exemplo, você pode ver o modo como o valor do campo de horário varia entre o que foi digitado e o que ele retorna.</p> + +<p>Mas antes, vamos dar uma conferida no HTML. Ele é bem simpless, contando com label (rótulo) e input (campo) do jeito que já vimos antes, com a adição de um elemento {{HTMLElement("p")}} com um {{HTMLElement("span")}} que mostra o valor do campo de <code>time</code>:</p> + +<pre class="brush: html"><form> + <label for="horaInicio">Hora de início: </label> + <input type="time" id="horaInicio"> + <p> + Valor do campo <code>time</code>: <code> + "<span id="value">n/a</span>"</code>. + </p> +</form></pre> + +<p>No código JavaScript, chamamos um método que monitora o evento {{event("input")}}, que é disparado sempre que o conteúdo de um elemento <code><input></code> muda. Toda vez que ele dispara, o conteúdo do <code><span></code> é substituído pelo novo valor do campo de horário.</p> + +<pre class="brush: js">var horaInicio = document.getElementById("horaInicio"); +var valueSpan = document.getElementById("value"); + +startTime.addEventListener("input", function() { + valueSpan.innerText = startTime.value; +}, false);</pre> + +<p>{{EmbedLiveSample("Time_value_format", 600, 80)}}</p> + +<p>Quando um formulário que inclui um campo de <code>time</code> é enviado, o valor é codificado antes de ser incluído nos dados do formulário. Nesse caso, o valor correspondente ao campo de horário sempre estará no formato <code>"name=hh%3Amm"</code>, ou <code>"name=hh%3Amm%3ass"</code> caso ele conte com segundos (veja {{anch("Usando o atributo step")}}).</p> + +<h2 id="Usando_campos_de_horário">Usando campos de horário</h2> + +<p>Apesar de que, entre os campos dos tipos data e horário, o de horário tenha a maior presença entre os navegadores, ele ainda não tem presença universal. Logo, é provável que você vá precisar fornecer uma maneira alternativa de se inserir data e hora, para que os usuários do Safari (e de outros navegadores sem suporte) ainda consigam inserir horários facilmente.</p> + +<p>A seguir, vamos conferir casos de uso básicos e complexos do <code><input type="time"></code>, além de dar conselhos sobre como contornar a questão dos navegadores na seção (see {{anch("Lidando com navegadores sem suporte")}}).</p> + +<h3 id="Usos_básicos_de_horário">Usos básicos de horário</h3> + +<p>O caso de uso mais simples do <code><input type="time"></code> envolve uma combinação básica dos elementos <code><input></code> e {{htmlelement("label")}} como vemos abaixo:</p> + +<pre class="brush: html"><form> + <label for="hora-cons">Escolha o horário da consulta: </label> + <input id="hora-cons" type="time" name="hora-cons"> +</form></pre> + +<p>{{ EmbedLiveSample('Basic_uses_of_time', 600, 40) }}</p> + +<h3 id="Controlando_o_tamanho_do_campo">Controlando o tamanho do campo</h3> + +<p>O elemento <code><input type="time"></code> não é compatível com atributos de dimensionamento de formulários tais como {{htmlattrxref("size", "input")}}, já que horários quase sempre tem o mesmo número de caracteres. Você terá que recorrer ao <a href="/en-US/docs/Web/CSS">CSS</a> para ajustar tamanhos.</p> + +<h3 id="Usando_o_atributo_step">Usando o atributo step</h3> + +<p>Você pode usar o atributo {{htmlattrxref("step", "input")}} para variar a quantidade de tempo pulada sempre que o horário for incrementado/decrementado (por exemplo, para fazer com que o horário avançe ou volte em 10 minutos ao clicar nas setinhas ao lado do campo).</p> + +<div class="note"> +<p>Esta propriedade pode se comportar de maneira inesperada em alguns navegadores. Por isso, ela não é 100% confiável.</p> +</div> + +<p>O atributo recebe um valor igual ao número de segundos que você quer que o valor seja incrementado - o valor padrão é 60 segundos, ou 1 minuto. Se você especificar um valor menor que 60 segundos (1 minuto), o campo <code>time</code> vai mostrar uma área de inserção de segundos junto com as de hora e minuto:</p> + +<pre class="brush: html"><form> + <label for="hora-cons">Escolha o horário da consulta: </label> + <input id="hora-cons" type="time" name="hora-cons" step="2"> +</form></pre> + +<p>{{ EmbedLiveSample('Using_the_step_attribute', 600, 40) }}</p> + +<p>No Chrome e no Opera, que são os únicos navegadores que mostram botões de setas para aumentar/diminuir o valor, clicar nas setinhas muda o valor em dois segundos, mas não afeta as horas e minutos. Para poder usar essa funcionalidade com minutos e horas, você precisa especificar o número de minutos (ou horas) em segundos (por exemplo, 120 para 2 minutos, ou 7200 para 2 horas).</p> + +<p>No Firefox, não são mostrados botões de setas; logo, o valor de <code>step</code> não é usado. No entanto, adicionar esse atributo <em>por si só</em> já adiciona a área de inserção de segundos ao lado da de minutos.</p> + +<p>O valor de <code>step</code> parece não ter efeito no Edge.</p> + +<div class="note"> +<p>Ao que parece, usar o atributo <code>step</code> faz com que a validação não funcione adequadamente (como podemos ver na seção seguinte).</p> +</div> + +<h2 id="Validação">Validação</h2> + +<p>Por padrão, <code><input type="time"></code> não aplica nenhum tipo de validação nos valores inseridos (fora o próprio agente de usuário impedir que sejam inseridos valores diferentes de horários). Isso é útil (considerando que o agente de usuário seja completamente compatível com campos do tipo <code>time</code>), mas nem sempre devemos esperar que o valor desse campo seja realmente um horário, já que ele pode ser uma string vazia (<code>""</code>), o que é permitido. Também é possível que o valor se pareça com um horário válido, mas que esteja incorreto, como <code>"25:05"</code>.</p> + +<h3 id="Definindo_horários_mínimo_e_máximo">Definindo horários mínimo e máximo</h3> + +<p>Você pode usar os atributos {{htmlattrxref("min", "input")}} e {{htmlattrxref("max", "input")}} para restringir a faixa de horário válida que o usuário pode escolher. No seguinte exemplo, definimos <code>12:00</code> como o horário mínimo e <code>18:00</code> como o horário máximo:</p> + +<pre class="brush: html"><form> + <label for="hora-cons">Escolha o horário da consulta (aberto das 12:00 às 18:00): </label> + <input id="hora-cons" type="time" name="hora-cons" + min="12:00" max="18:00"> + <span class="validacao"></span> +</form></pre> + +<p>{{ EmbedLiveSample('Setting_maximum_and_minimum_times', 600, 40) }}</p> + +<p>Aqui está o CSS usado no exemplo acima. Nele, fazemos uso das propriedades CSS {{cssxref(":valid")}} e {{cssxref(":invalid")}} para estilizar o campo com base na validade ou não do conteúdo atual dele. Tivemos que colocar os ícones em um {{htmlelement("span")}} ao lado do campo, e não no campo em si, porque no Chrome o conteúdo gerado é colocado denteo do campo do formulário e não pode ser efetivamente mostrado ou estilizado.</p> + +<pre class="brush: css">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> + +<p>O resultado disso é que:</p> + +<ul> + <li>Apenas horários entre 12:00 e 18:00 serão vistos como válidos; horários fora dessa faixa serão tratados como inválidos.</li> + <li>Dependendo do navegador usado, você pode perceber que os horários fora da faixa especificada não podem nem mesmo ser selecionados pelo seletor de hora (ex.: Edge).</li> +</ul> + +<h3 id="Tornando_campos_de_horário_obrigatórios">Tornando campos de horário obrigatórios</h3> + +<p>Além do mais, você pode usar o atributo {{htmlattrxref("required", "input")}} para tornar obrigatória a inserção de um horário. Como resultado, os navegadores compatíves irão mostrar um erro se você tentar enviar um horário fora da proporção adequada ou que esteja em branco.</p> + +<p>Vamos ver um exemplo. Nele, colocamos um horário mínimo e um máximo, além de tornarmos o campo obrigatório.</p> + +<pre class="brush: html"><form> + <div> + <label for="hora-cons">Escolha o horário da consulta (aberto das 12:00 às 18:00): </label> + <input id="hora-cons" type="time" name="hora-cons" + min="12:00" max="18:00" required> + <span class="validacao"></span> + </div> + <div> + <input type="submit" value="Enviar formulário"> + </div> +</form></pre> + +<p>Se você tentar enviar o formulário com um horário incompleto (ou com um horário fora da faixa válida), o navegador vai mostrar um erro. Experimente brincar com esse exemplo agora:</p> + +<p>{{ EmbedLiveSample('Making_times_required', 600, 120) }}</p> + +<p>Here's a screenshot for those of you who aren't using a browser that supports <code>time</code> inputs:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15405/firefox-validation-message.png" style="display: block; margin: 0 auto;"></p> + +<div class="warning"> +<p><strong>Important</strong>: HTML form validation is <em>not</em> a substitute for scripts that ensure that the entered data is in the proper format. It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to simply bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, of the wrong type, and so forth).</p> +</div> + +<h2 id="Handling_browser_support">Handling browser support</h2> + +<p>As mentioned above, Safari and a few other, less common, browsers don't yet support time inputs natively. In general, otherwise, support is good — especially on mobile platforms, which tend to have very nice user interfaces for specifying a time value. For example, the <code>time</code> picker on Chrome for Android looks like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15407/chrome-android-time.png" style="display: block; margin: 0 auto;"></p> + +<p>Browsers that don't support time inputs gracefully degrade to a text input, but this creates problems both in terms of consistency of user interface (the presented control will be different), and data handling.</p> + +<p>The second problem is the more serious; as mentioned previously, <code>time</code> inputs' values are always normalized to the format <code>hh:mm</code> or <code>hh:mm:ss</code>. With a text input, on the other hand, by default the browser has no idea of what format the time should be in, and there multiple ways in which people write times, such as:</p> + +<ul> + <li><code>3.00 pm</code></li> + <li><code>3:00pm</code></li> + <li><code>15:00</code></li> + <li><code>3 o'clock in the afternoon</code></li> + <li>etc.</li> +</ul> + +<p>One way around this is to put a {{htmlattrxref("pattern", "input")}} attribute on your <code>time</code> input. Even though the <code>time</code> input doesn't use it, the <code>text</code> input fallback will. For example, try viewing the following demo in a browser that doesn't support time inputs:</p> + +<pre class="brush: html"><form> + <div> + <label for="appt-time">Choose an appointment time (opening hours 12:00 to 18:00): </label> + <input id="appt-time" type="time" name="appt-time" + min="12:00" max="18:00" required + pattern="[0-9]{2}:[0-9]{2}"> + <span class="validity"></span> + </div> + <div> + <input type="submit" value="Submit form"> + </div> +</form></pre> + +<p>{{ EmbedLiveSample('Handling_browser_support', 600, 100) }}</p> + +<p>If you try submitting it, you'll see that non-supporting browsers now display an error message (and highlight the input as invalid) if your entry doesn't match the pattern <code>nn:nn</code>, where <code>n</code> is a number from 0 to 9. Of course, this doesn't stop people from entering invalid dates, or incorrectly formatted dates that follow the pattern.</p> + +<p>Then there's the problem of the user having no idea exactly what format the time is expected to be in.</p> + +<div class="hidden"> +<pre class="brush: css">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> +</div> + +<p>The best way to deal with times in forms in a cross-browser way, for the time being, is to get the user to enter the hours and minutes (and seconds if required) in separate controls ({{htmlelement("select")}} elements are popular; see below for an example), or use JavaScript libraries such as the <a href="http://timepicker.co/">jQuery timepicker plugin</a>.</p> + +<h2 id="Examples">Examples</h2> + +<p>In this example, we create two sets of interface elements for choosing times: a native picker created with <code><input type="time"></code>, and a set of two {{htmlelement("select")}} elements for choosing hours/minutes in older browsers that don't support the native input.</p> + +<p>{{ EmbedLiveSample('Examples', 600, 140) }}</p> + +<p>The HTML looks like so:</p> + +<pre class="brush: html"><form> + <div class="nativeTimePicker"> + <label for="appt-time">Choose an appointment time (opening hours 12:00 to 18:00): </label> + <input id="appt-time" type="time" name="appt-time" + min="12:00" max="18:00" required> + <span class="validity"></span> + </div> + <p class="fallbackLabel">Choose an appointment time (opening hours 12:00 to 18:00):</p> + <div class="fallbackTimePicker"> + <div> + <span> + <label for="hour">Hour:</label> + <select id="hour" name="hour"> + </select> + </span> + <span> + <label for="minute">Minute:</label> + <select id="minute" name="minute"> + </select> + </span> + </div> + </div> +</form></pre> + +<p>The hour and minutes values for their <code><select></code> elements are dynamically generated.</p> + +<div class="hidden"> +<pre class="brush: css">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> +</div> + +<p>The other part of the code that may be of interest is the feature detection code — to detect whether the browser supports <code><input type="time"></code>, we create a new {{htmlelement("input")}} element, set its <code>type</code> to <code>time</code>, then immediately check what its type is set to — non-supporting browsers will return <code>text</code>, because the <code>time</code> type falls back to type <code>text</code>. If <code><input type="time"></code> is not supported, we hide the native picker and show the fallback picker UI ({{htmlelement("select")}}s) instead.</p> + +<pre class="brush: js">// define variables +var nativePicker = document.querySelector('.nativeTimePicker'); +var fallbackPicker = document.querySelector('.fallbackTimePicker'); +var fallbackLabel = document.querySelector('.fallbackLabel'); + +var hourSelect = document.querySelector('#hour'); +var minuteSelect = document.querySelector('#minute'); + +// hide fallback initially +fallbackPicker.style.display = 'none'; +fallbackLabel.style.display = 'none'; + +// test whether a new date input falls back to a text input or not +var test = document.createElement('input'); +test.type = 'time'; +// if it does, run the code inside the if() {} block +if(test.type === 'text') { + // hide the native picker and show the fallback + nativePicker.style.display = 'none'; + fallbackPicker.style.display = 'block'; + fallbackLabel.style.display = 'block'; + + // populate the hours and minutes dynamically + populateHours(); + populateMinutes(); +} + +function populateHours() { + // populate the hours <select> with the 6 open hours of the day + for(var i = 12; i <= 18; i++) { + var option = document.createElement('option'); + option.textContent = i; + hourSelect.appendChild(option); + } +} + +function populateMinutes() { + // populate the minutes <select> with the 60 hours of each minute + for(var i = 0; i <= 59; i++) { + var option = document.createElement('option'); + option.textContent = (i < 10) ? ("0" + i) : i; + minuteSelect.appendChild(option); + } +} + +// make it so that if the hour is 18, the minutes value is set to 00 +// — you can't select times past 18:00 + function setMinutesToZero() { + if(hourSelect.value === '18') { + minuteSelect.value = '00'; + } + } + + hourSelect.onchange = setMinutesToZero; + minuteSelect.onchange = setMinutesToZero;</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comments</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#time-state-(type=time)', '<input type="time">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.input.input-time")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The generic {{HTMLElement("input")}} element and the interface used to manipulate it, {{domxref("HTMLInputElement")}}</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/The_native_form_widgets#Date_and_time_picker">Date and Time picker tutorial</a></li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/datetime-local"><input type="datetime-local"></a></code>, <code><a href="/en-US/docs/Web/HTML/Element/input/date"><input type="date"></a></code>, <code><a href="/en-US/docs/Web/HTML/Element/input/week"><input type="week"></a></code>, and <code><a href="/en-US/docs/Web/HTML/Element/input/month"><input type="month"></a></code></li> +</ul> diff --git a/files/pt-br/web/html/element/ins/index.html b/files/pt-br/web/html/element/ins/index.html new file mode 100644 index 0000000000..f8c86a04e2 --- /dev/null +++ b/files/pt-br/web/html/element/ins/index.html @@ -0,0 +1,87 @@ +--- +title: <ins> +slug: Web/HTML/Element/ins +translation_of: Web/HTML/Element/ins +--- +<h2 id="Summary">Summary</h2> +<p>The <strong>HTML <code><ins></code> Element</strong> (or <em>HTML Inserted Text</em>) HTML represents a range of text that has been added to a document.</p> +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">Phrasing content</a> or <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">flow content</a>.</li> + <li><dfn>Permitted content</dfn> <a href="/en-US/docs/HTML/Content_categories#Transparent" title="HTML/Content categories#Transparent">Transparent</a>.</li> + <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li> + <li><dfn>Permitted parent elements</dfn> Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>.</li> + <li><dfn>DOM interface</dfn> {{domxref("HTMLModElement")}}</li> +</ul> +<h2 id="Attributes">Attributes</h2> +<p><span style="line-height: 21px;">This element includes the </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p> +<dl> + <dt> + {{htmlattrdef("cite")}}</dt> + <dd> + This attribute defines the URI of a resource that explains the change, like a link to some meeting minutes or a ticket in a troubleshooting sytem.</dd> + <dt> + {{htmlattrdef("datetime")}}</dt> + <dd> + This attribute indicates the time and date of the change and must be a <a class="external" href="http://www.w3.org/TR/2011/WD-html5-20110525/common-microsyntaxes.html#valid-date-string-with-optional-time" title="http://www.w3.org/TR/html5/common-microsyntaxes.html#valid-date-string-with-optional-time">valid date with an optional time string</a>. If the value cannot be parsed as a date with an optional time string, the element does not have an associated time stamp.</dd> +</dl> +<h2 id="Examples">Examples</h2> +<pre class="brush: html"><ins>This text has been inserted</ins></pre> +<h3 id="Result">Result</h3> +<p><ins>This text has been inserted</ins></p> +<h2 id="Specifications" name="Specifications">Specifications</h2> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'edits.html#the-ins-element', '<ins>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'edits.html#the-ins-element', '<ins>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.4', '<ins>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> +<h2 id="Browser_compatibility">Browser compatibility</h2> +<p>{{CompatibilityTable}}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> + </table> +</div> +<h2 id="See_also">See also</h2> +<ul> + <li>{{HTMLElement("del")}} element for marking deletion into a document</li> +</ul> +<div> + {{HTMLRef}}</div> diff --git a/files/pt-br/web/html/element/label/index.html b/files/pt-br/web/html/element/label/index.html new file mode 100644 index 0000000000..f92c0001f1 --- /dev/null +++ b/files/pt-br/web/html/element/label/index.html @@ -0,0 +1,143 @@ +--- +title: <label> +slug: Web/HTML/Element/label +translation_of: Web/HTML/Element/label +--- +<h2 id="Resumo">Resumo</h2> + +<p>Um <strong>elemento</strong> <strong>HTML <code><label></code> </strong>representa uma legenda para um item em uma interface de usuário. Ele pode estar associado com um elemento de controle, colocando este dentro do elemento <code>label</code>, ou usando o atributo <code>for</code>. Tal controle é chamado o <em>controle etiquetado</em> do elemento etiqueta. Um input pode ser associado a diversas etiquetas (<label>s).</p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/Web/HTML/Content_categories">As categorias de conteúdo</a></dfn> <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Interactive_content">interactive content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Form-associated_content">form-associated element</a>, palpable content.</li> + <li><dfn>conteúdo permitido</dfn> <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Phrasing content</a>, mas há elementos do rótulo descendente. Nenhum outro do que o controle rotulado elementos labelable são permitidos.</li> + <li><dfn>Tag omissão</dfn> {{no_tag_omission}}</li> + <li><dfn><span class="short_text" id="result_box" lang="pt">Elementos pai permitidas</span></dfn> Qualquer elemento que aceita <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</li> + <li><dfn>DOM interface</dfn> {{domxref("HTMLLabelElement")}}</li> +</ul> + +<h2 id="Atributos">Atributos</h2> + +<p>A tecla de atalho para acessar este elemento a partir do teclado.</p> + +<dl> + <dt>{{htmlattrdef("accesskey")}} {{HTMLVersionInline("4")}} {{HTMLVersionInline("5")}}</dt> + <dd>A tecla de atalho para acessar este elemento a partir do teclado.</dd> + <dt>{{htmlattrdef("for")}}</dt> + <dd>O ID de um elemento de formulário relacionados com labelable no mesmo documento como o elemento label. O primeiro elemento tal no documento com uma ID correspondente ao valor do atributo é o controle marcado for este elemento etiqueta. + <div class="note"><span id="result_box" lang="pt"><strong>Nota: </strong>Um elemento etiqueta pode ter tanto um for o atributo e um elemento de controlo continham, enquanto os pontos de atributo para o elemento de controlo contido.</span></div> + </dd> + <dt>{{htmlattrdef("form")}} {{HTMLVersionInline("5")}}</dt> + <dd> + <div class="almost_half_cell" id="gt-res-content"> + <div dir="ltr" style="zoom: 1;"><span id="result_box" lang="pt">O elemento de forma que o elemento label está associado a (seu proprietário formulário). O valor do atributo deve ser uma identificação de um {{HTMLElement ("form")}} elemento no mesmo documento. Se este atributo não for especificado, este elemento <label> deve ser um descendente de uma {{HTMLElement ("form")}} elemento. Este atributo permite que você coloque elementos do rótulo em qualquer lugar dentro de um documento, e não apenas como descendentes de seus elementos de formulário.</span></div> + </div> + </dd> +</dl> + +<h2 id="Exemplo">Exemplo</h2> + +<h3 id="Exemplo_simples_de_label">Exemplo simples de label</h3> + +<pre class="brush: html" style="font-family: 'Open Sans',sans-serif; line-height: 23.3333px;"><label>Click me <input type="text" id="User" name="Name" /></label></pre> + +<p>{{ EmbedLiveSample('Simple_label_example', '200', '50', '') }}</p> + +<h3 id="Usando_o_atributo_for">Usando o atributo "for"</h3> + +<pre class="brush: html" style="font-family: 'Open Sans',sans-serif; line-height: 23.3333px;"><label for="User">Click me</label> +<input type="text" id="User" name="Name" /></pre> + +<p>{{EmbedLiveSample('Using_the_.22for.22_attribute', '200', '50', '')}}</p> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-label-element', '<label>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-label-element', '<label>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.9.1', '<label>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{compatversionunknown}}</td> + <td>{{compatversionunknown}}</td> + <td>{{compatversionunknown}}</td> + <td>{{compatversionunknown}}</td> + <td>{{compatversionunknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{compatversionunknown}}</td> + <td>{{compatversionunknown}}</td> + <td>{{compatversionunknown}}</td> + <td>{{compatversionunknown}}</td> + <td>{{compatversionunknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Notes">Notes</h3> + +<h4 id="Click_events_in_nested_<label>_elements">Click events in nested <code><label></code> elements</h4> + +<p>Starting with Gecko 8.0 {{geckoRelease("8.0")}}, a bubbling click event triggers at most one <code><label></code>, and the synthetic click event cannot trigger additional <code><label></code>s. In Gecko, a click event will still bubble up past a <code><label></code>, while in WebKit or Internet Explorer the click event will stop at the <code><label></code>. The behavior prior to Gecko 8.0 (triggering multiple <code><label></code>s) caused Firefox to stop responding (see {{bug(646157)}}).</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Other form-related elements: {{HTMLElement("form")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/pt-br/web/html/element/legend/index.html b/files/pt-br/web/html/element/legend/index.html new file mode 100644 index 0000000000..42875d288d --- /dev/null +++ b/files/pt-br/web/html/element/legend/index.html @@ -0,0 +1,126 @@ +--- +title: <legend> +slug: Web/HTML/Element/legend +tags: + - Element + - Elemento + - Forms + - HTML + - Web + - campos + - conjunto de campos + - formulários + - rótulo +translation_of: Web/HTML/Element/legend +--- +<h2 id="Resumo">Resumo</h2> + +<p>O <strong>Elemento HTML <span style="font-family: Courier New;"><legend></span> </strong>(ou <em>Elemento </em><em>HTML Campo "Legend"</em>) representa um rótulo para o conteúdo do seu ancestral {{HTMLElement("fieldset")}}.</p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categorias de Conteúdo</a></dfn> Nenhuma.</li> + <li><dfn>Conteúdo permitido</dfn> <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Conteúdo Textual</a>.</li> + <li><dfn>Omissão de Tag</dfn> {{no_tag_omission}}</li> + <li><dfn>Elementos ancestrais permitidos</dfn> Um {{HTMLElement("fieldset")}} cujo primeiro filho seja esse elemento <span style="font-family: Courier New;"><legend></span></li> + <li><dfn>Interface DOM</dfn> {{domxref("HTMLLegendElement")}}</li> +</ul> + +<h2 id="Atributos">Atributos</h2> + +<p><span style="line-height: 21px;">Esse elemento apenas inclui os </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">atributos globais</a><span style="line-height: 21px;">.</span></p> + +<h2 id="Exemplos">Exemplos</h2> + +<p>Veja {{HTMLElement("form")}} para exemplos sobre <code><legend></code>.</p> + +<h2 id="Specifications" name="Specifications">Especificação</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-legend-element', '<legend>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Definição do elemento <strong>legend</strong></td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'rendering.html#the-fieldset-and-legend-elements')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Sugestão da exibição pradrão dos elementos <code>fieldset</code> e <code>legend</code></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-legend-element', '<legend>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'forms.html#h-17.10', '<legend>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td><a href="http://www.w3.org/TR/html401/interact/forms.html#h-17.10" title="http://www.w3.org/TR/html401/interact/forms.html#h-17.10">(link)</a></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_Navegadores">Compatibilidade de Navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_Também">Veja Também</h2> + +<ul> + <li>Outros elementos relacionados a formulários: {{HTMLElement("form")}}, {{HTMLElement("option")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/pt-br/web/html/element/li/index.html b/files/pt-br/web/html/element/li/index.html new file mode 100644 index 0000000000..b7f5b36150 --- /dev/null +++ b/files/pt-br/web/html/element/li/index.html @@ -0,0 +1,177 @@ +--- +title: <li> +slug: Web/HTML/Element/li +tags: + - Elementos + - Guía + - HTML + - Indentação + - Referencia + - listagem <li> + - menu+HTML +translation_of: Web/HTML/Element/li +--- +<h2 id="Resumo"><span style="font-size: 1.628em;">Resumo</span></h2> + +<p>O <strong><em>elemento</em></strong> <strong><em>HTML</em> <code style="font-style: normal;"><li></code></strong> (ou a Lista dos Itens de um elemento HTML) é usado para representar um item que faz parte de uma lista. Este item deve estar contido em um elemento pai: uma lista ordenada<code> </code>({{HTMLElement("ol")}}),<code> </code>uma lista desordenada<code> </code>({{HTMLElement("ul")}})<code>, </code>ou um menu<code> </code>({{HTMLElement("menu")}})<code> </code>e representa uma única entidade dessa lista. Em menus e listas desordenadas a relação de itens é exibida, normalmente, usando pontos de marcação (as bolinhas). Em listas ordenadas eles são, comumente, mostrados com algum <span class="short_text" id="result_box" lang="pt"><span>contador</span> <span>ascendente - como um número, ou letra - à sua esquerda.</span></span></p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/Web/HTML/Content_categories">Categorias de conteúdo </a></dfn><span class="short_text" id="result_box" lang="pt"><span>Nenhuma</span></span>.</li> + <li><dfn>Conteúdo permitido</dfn> <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flutuantes</a>.</li> + <li><dfn>Omissão de etiquetas (<em>tags</em>)</dfn> <span id="result_box" lang="pt"><span>A</span> <span>etiqueta de fim</span> <span>pode</span> <span>ser</span> <span>omitida se esta for </span><span>imediatamente</span></span><span lang="pt"> <span>seguida</span> <span>por um outro</span> <span>elemento</span></span><code> </code>{{HTMLElement("li")}}<code>, </code>ou se <span class="short_text" id="result_box" lang="pt"><span>não houver</span> <span>mais conteúdo</span> <span>no seu</span> <span>elemento pai.</span></span></li> + <li><dfn>Elementos pai permitidos</dfn> Um elemento<code> </code>{{HTMLElement("ul")}},<code> </code>{{HTMLElement("ol")}}<code>, </code>ou<code> </code>{{HTMLElement("menu")}}. Embora seja um uso incomum, o obsoleto<code> </code>{{HTMLElement("dir")}}<code> pode</code> <code>ser</code> <code>pai, </code>também.</li> + <li><dfn>Interface DOM</dfn> {{domxref("HTMLLIElement")}}</li> +</ul> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento inclui os <a href="/en-US/docs/Web/HTML/Global_attributes">atributos globais</a>.</p> + +<dl> + <dt>{{htmlattrdef("value")}}</dt> + <dd><span id="result_box" lang="pt"><span>Este atributo de</span></span><span lang="pt"><span> número inteiro</span> <span>indica o valor</span> <span>ordinal</span> <span>atual</span></span> do item na lista, definido pelo elemento<code> </code>{{HTMLElement("ol")}}.<code> </code>O único valor possível para este atributo é um número, ainda que a lista seja exibida com algarismos romanos, ou letras. A lista de itens que virá em seguida continuará a ser numerada a partir desta posição. O atributo <strong>value</strong> não tem significado para listas desordenadas<code> </code>({{HTMLElement("ul")}}),<code> </code>nem para menus<code> </code>({{HTMLElement("menu")}}). + <div class="note"><strong>Nota</strong>: Este atributo, abandonado na HTML4, foi reintroduzido na HTML5.</div> + + <div class="note"> + <p><strong>Nota:</strong> Antes de<code> </code>{{Gecko("9.0")}},<code> </code>os valores negativos eram, incorretamente, convertidos a 0. A partir de<code> </code>{{Gecko("9.0")}}<code> </code>todos os valores inteiros são analisados corretamente.</p> + </div> + </dd> + <dt>{{htmlattrdef("type")}} {{Deprecated_inline}}</dt> + <dd><span id="result_box" lang="pt"><span>A característica deste</span> <span>atributo é</span> <span>indicar o tipo</span> <span>de numeração</span></span>: + <ul> + <li><code>a</code>: letras minúsculas</li> + <li><code>A</code>: letras maiúsculas</li> + <li><code>i</code>: algarismos romanos minúsculos</li> + <li><code>I</code>: algarismos romanos maiúsculos</li> + <li><code>1</code>: números</li> + </ul> + <span id="result_box" lang="pt"><span>Este tipo</span> <span>substitui</span> <span>o utilizado pelo</span> <span>seu elemento pai</span></span><code> </code>{{HTMLElement("ol")}},<code> </code>qualquer que seja. + + <div class="note"><strong>Nota de utilização:</strong> Este atributo <span class="short_text" id="result_box" lang="pt"><span>foi preterido. Em seu lugar</span></span><span class="short_text" lang="pt"><span> use a propriedade </span></span>CSS<code> </code>{{cssxref("list-style-type")}}.</div> + </dd> +</dl> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush: html"><ol> + <li>primeiro item</li> + <li>segundo item</li> + <li>terceiro item</li> +</ol> +</pre> + +<p>A saída HTML acima será:</p> + +<ol> + <li>primeiro item</li> + <li>segundo item</li> + <li>terceiro item</li> +</ol> + +<pre class="brush: html"><ul> + <li>primeiro item</li> + <li>segundo item</li> + <li>terceiro item</li> +</ul></pre> + +<ul> + <li>primeiro item</li> + <li>segundo item</li> + <li>terceiro item</li> +</ul> + +<p>Para exemplos mais detalhados veja as páginas<code> </code><a href="/en-US/docs/Web/HTML/Element/ol#Examples"><ol></a><code> </code>e<code> </code><a href="/en-US/docs/Web/HTML/Element/ul#Examples"><ul></a>.</p> + +<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">Observação</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-li-element', '<li>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'the-li-element.html#the-li-element', '<li>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'lists.html#h-10.2', '<li>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_em_navegadores">Compatibilidade em navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th><span class="short_text" id="result_box" lang="pt"><span>Recurso</span></span></th> + <th> Chrome</th> + <th> Firefox (Gecko)</th> + <th> Internet Explorer</th> + <th> Opera</th> + <th> Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th><span class="short_text" id="result_box" lang="pt"><span>Recurso</span></span></th> + <th> Android</th> + <th>Firefox Móvel (Gecko)</th> + <th>IE Móvel</th> + <th>Opera Móvel</th> + <th>Safari Móvel</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também:</h2> + +<ul> + <li>Outros elementos HTML parentes:<code> </code>{{HTMLElement("ul")}},<code> </code>{{HTMLElement("li")}},<code> </code>{{HTMLElement("menu")}}<code> </code>e o obsoleto<code> </code>{{HTMLElement("dir")}};</li> + <li>Propriedades CSS que podem ser úteis, especialmente para dar um charme ao elemento<code> <li></code>: + <ul> + <li>a propriedade<code> </code>{{cssxref("list-style")}},<code> </code><span class="short_text" id="result_box" lang="pt"><span>para escolher</span> <span>a maneira como os</span> posicionamentos <span>serão exibidos</span></span>,</li> + <li><a href="/Web/Guide/CSS/Counters">contadores CSS</a> <span class="short_text" id="result_box" lang="pt"><span>para controlar</span> <span>listas aninhadas</span> <span>complexas</span></span>,</li> + <li>a propriedade<code> </code>{{cssxref("margin")}},<code> </code>para controlar a indentação dos itens da lista.</li> + </ul> + </li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/pt-br/web/html/element/link/index.html b/files/pt-br/web/html/element/link/index.html new file mode 100644 index 0000000000..49d8faa3d2 --- /dev/null +++ b/files/pt-br/web/html/element/link/index.html @@ -0,0 +1,330 @@ +--- +title: <link> +slug: Web/HTML/Element/link +translation_of: Web/HTML/Element/link +--- +<h2 id="Resumo">Resumo</h2> + +<p>O <strong>Elemento HTML <em><link></em></strong> especifica as relações entre o documento atual e um recurso externo. Possíveis usos para este elemento incluem a definição de uma estrutura relacional para navegação. Este elemento é mais usado para vincular as folhas de estilo.</p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/Web/HTML/Content_categories">Categorias de conteúdo</a></dfn> Metadata content. If {{htmlattrxref("itemprop", "link")}} is present: <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content"> phrasing content</a></li> + <li><dfn>Conteúdo permitido</dfn> None, it is an {{Glossary("empty element")}}.</li> + <li><dfn>Omissão de tag</dfn> As it is a void element, the <span title="syntax-start-tag">start tag</span> must be present and the <span title="syntax-end-tag">end tag</span> must not be present</li> + <li><dfn>Elementos pai permitidos</dfn> Any element that accepts metadata elements. If {{htmlattrxref("itemprop", "link")}} is present: any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</li> + <li><dfn>Interface de DOM</dfn> {{domxref("HTMLLinkElement")}}</li> +</ul> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento inclui os <a href="/en-US/docs/Web/HTML/Global_attributes">atributos globais</a>.</p> + +<dl> + <dt>{{htmlattrdef("as")}}</dt> + <dd>Esse atributo é usado apenas quando <code>rel="preload"</code> foi enviado no elemento <code><link></code>. Especifica o tipo de conteúdo carregado pelo <code><link></code>, que é necessário para a priorização do conteúdo, solicitação de correspondência, aplicação de <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP">política de segurança de conteúdo</a> correta, e configuração do cabeçalho de pedido {{httpheader("Accept")}} correta.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("charset")}}{{obsolete_inline}}</dt> + <dd>Este atributo define a codificação de caracteres do recurso vinculado. O valor é umespaço e/ou lista delimitada por vírgulas de conjuntos de caracteres, conformedefinido na RFC 2045. O valor padrão é ISO-8859-1. + <div class="note"><strong>Nota:</strong> Este atributo é obsoleto em HTML5 e <strong>não deve ser usada por autores</strong>. Para atingir seu efeito, use o cabeçalho HTTP <span style="font-family: courier new;">Content-Type</span> sobre o recurso vinculado.</div> + </dd> + <dt>{{htmlattrdef("crossorigin")}} {{HTMLVersionInline(5)}}</dt> + <dd>Este atributo enumerado indica se a busca da imagem relacionada deve ser feita usando CORS ou não. I-magens de CORS habilitado podem ser reutilizadas no elemento {{HTMLElement("canvas")}} sem ser conta-minado. Os valores permitidos são: + <dl> + <dt>"anonymous"</dt> + <dd>A cross-origin request (i.e. with <code>Origin:</code> HTTP header) is performed. But no credential is sent (i.e. no cookie, no X.509 certificate and no HTTP Basic authentication is sent). If the server does not give credentials to the origin site (by not setting the <code>Access-Control-Allow-Origin:</code> HTTP header), the image will be <em>tainted</em> and its usage restricted.</dd> + <dt>use-credentials</dt> + <dd>A cross-origin request (i.e. with <code>Origin:</code> HTTP header) is performed with credential is sent (i.e. a cookie, a certificate and HTTP Basic authentication is performed). If the server does not give credentials to the origin site (through <code>Access-Control-Allow-Credentials:</code> HTTP header), the image will be <em>tainted</em> and its usage restricted.</dd> + </dl> + When not present, the resource is fetched without a CORS request (i.e. without sending the <code>Origin:</code> HTTP header), preventing its non-tainted used in {{HTMLElement('canvas')}} elements. If invalid, it is handled as if the enumerated keyword <strong>anonymous</strong> was used. See <a href="/en-US/docs/Web/HTML/CORS_settings_attributes">CORS settings attributes</a> for additional information.</dd> + <dt>{{htmlattrdef("disabled")}} {{Non-standard_inline}}</dt> + <dd>Este atributo é usado para desativa uma relação com o link. Em conjunto com o script, esse atributo poderia ser usado para ligar e desligar várias relações com stylesheets. + <div class="note"> + <p><strong>Nota: </strong>Embora, não haja nenhum atributo desativado no padrão HTML, há um atributo desabilitado no <code>HTMLLinkElement</code> DOM object.</p> + + <p>The use of <code>disabled</code> as an HTML attribute is non-standard and only used by some browsers (<a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=27677">W3 #27677</a>). <strong style="font-weight: bold;">Do not use it</strong>. To achieve a similar effect, use one of the following techniques:</p> + + <ul> + <li>If the <code>disabled</code> attribute has been added directly to the element on the page, do not include the {{HTMLElement("link")}} element instead;</li> + <li>Set the <code>disabled</code> <strong>property</strong> of the <code>StyleSheet</code> DOM object via scripting.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("href")}}</dt> + <dd>Esse atributo especifica a <a href="/en-US/docs/URIs_and_URLs">URL</a> do recurso vinculado. Uma URL pode ser absolute or relative.</dd> + <dt>{{htmlattrdef("hreflang")}}</dt> + <dd>Esse atributo indica o idioma do recurso vinculado. É meramente consultivo. Os valores permitidos são determindaos por <a href="http://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a> para HTML5 e por <a href="http://www.ietf.org/rfc/rfc1766.txt">RFC1766</a> para HTML 4. Use esse atributo se apenas os atributos {{htmlattrxref("href", "a")}} estiverem presentes.</dd> + <dt>{{htmlattrdef("media")}}</dt> + <dd>This attribute specifies the media which the linked resource applies to. Its value must be a <a href="/en-US/docs/CSS/Media_queries">media query</a>. This attribute is mainly useful when linking to external stylesheets by allowing the user agent to pick the best adapted one for the device it runs on. + <div class="note"><strong>Usage note: </strong> + <ul> + <li>In HTML 4, this can only be a simple white-space-separated list of media description literals, i.e., <a href="/en-US/docs/CSS/@media">media types and groups</a>, where defined and allowed as values for this attribute, such as <code>print</code>, <code>screen</code>, <code>aural</code>, <code>braille</code>. HTML5 extended this to any kind of <a href="/en-US/docs/CSS/Media_queries">media queries</a>, which are a superset of the allowed values of HTML 4.</li> + <li>Browsers not supporting the <a href="/en-US/docs/CSS/Media_queries">CSS3 Media Queries</a> won't necessarily recognize the adequate link; do not forget to set fallback links, the restricted set of media queries defined in HTML 4.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("methods")}} {{Non-standard_inline}}</dt> + <dd>The value of this attribute provides information about the functions that might be performed on an object. The values generally are given by the HTTP protocol when it is used, but it might (for similar reasons as for the <strong>title</strong> attribute) be useful to include advisory information in advance in the link. For example, the browser might choose a different rendering of a link as a function of the methods specified; something that is searchable might get a different icon, or an outside link might render with an indication of leaving the current site. This attribute is not well understood nor supported, even by the defining browser, Internet Explorer 4. See <a href="http://msdn.microsoft.com/en-us/library/ms534168%28VS.85%29.aspx" rel="external nofollow">Methods Property (MSDN)</a>.</dd> + <dt>{{htmlattrdef("rel")}}</dt> + <dd>This attribute names a relationship of the linked document to the current document. The attribute must be a space-separated list of the <a href="/en-US/docs/Web/HTML/Link_types">link types values</a>. The most common use of this attribute is to specify a link to an external style sheet: the <strong>rel</strong> attribute is set to <code>stylesheet</code>, and the <strong>href</strong> attribute is set to the URL of an external style sheet to format the page. WebTV also supports the use of the value <code>next</code> for <strong>rel</strong> to preload the next page in a document series.</dd> + <dt>{{htmlattrdef("rev")}}{{obsolete_inline}}</dt> + <dd>The value of this attribute shows the relationship of the current document to the linked document, as defined by the {{htmlattrxref("href", "link")}} attribute. The attribute thus defines the reverse relationship compared to the value of the <strong>rel</strong> attribute. <a href="/en-US/docs/Web/HTML/Link_types">Link types values</a> for the attribute are similar to the possible values for {{htmlattrxref("rel", "link")}}. + <div class="note"><strong>Usage note: </strong>This attribute is obsolete in HTML5. <strong>Do not use it</strong>. To achieve its effect, use the {{htmlattrxref("rel", "link")}} attribute with the opposite <a href="/en-US/docs/Web/HTML/Link_types">link types values</a>, e.g. <span style="font-family: courier new;">made</span> should be replaced by <span style="font-family: courier new;">author</span>. Also this attribute doesn't mean <em>revision</em> and must not be used with a version number, which is unfortunately the case on numerous sites.</div> + </dd> + <dt>{{htmlattrdef("sizes")}} {{HTMLVersionInline(5)}}</dt> + <dd>This attribute defines the sizes of the icons for visual media contained in the resource. It must be present only if the {{htmlattrxref("rel","link")}} contains the <span style="font-family: courier new;">icon</span> <a href="/en-US/docs/Web/HTML/Link_types">link types value</a>. It may have the following values: + <ul> + <li><code>any</code>, meaning that the icon can be scaled to any size as it is in a vectorial format, like <code>image/svg+xml</code>.</li> + <li>a white-space separated list of sizes, each in the format <span style="font-family: courier new;"><em><width in pixels></em>x<em><height in pixels></em></span> or <span style="font-family: courier new;"><em><width in pixels></em>X<em><height in pixels></em></span>. Each of these sizes must be contained in the resource.</li> + </ul> + + <div class="note"><strong>Usage note: </strong> + + <ul> + <li>Most icon format are only able to store one single icon; therefore most of the time the {{htmlattrxref("sizes")}} contains only one entry. Among the major browsers, only the Apple's ICNS format allows the storage of multiple icons, and this format is only supported in WebKit.</li> + <li>Apple's iOS does not support this attribute, hence Apple's iPhone and iPad use special, non-standard <a href="/en-US/docs/Web/HTML/Link_types">link types values</a> to define icon to be used as Web Clip or start-up placeholder: <span style="font-family: courier new;">apple-touch-icon</span> and <span style="font-family: courier new;">apple-touch-startup-icon</span>.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("target")}}{{Non-standard_inline}}</dt> + <dd>Defines the frame or window name that has the defined linking relationship or that will show the rendering of any linked resource.</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>This attribute is used to define the type of the content linked to. The value of the attribute should be a MIME type such as <strong>text/html</strong>, <strong>text/css</strong>, and so on. The common use of this attribute is to define the type of style sheet linked and the most common current value is <strong>text/css</strong>, which indicates a Cascading Style Sheet format.</dd> +</dl> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Incluindo_um_stylesheet">Incluindo um stylesheet</h3> + +<p>Para incluir um stylesheet em uma página, use a seguinte syntax:</p> + +<pre class="brush: html"><link href="style.css" rel="stylesheet"> +</pre> + +<h3 id="Fornecimento_de_stylesheets_alternativas">Fornecimento de stylesheets alternativas</h3> + +<p>Você também pode especificar <a href="/en-US/docs/Web/CSS/Alternative_style_sheets">stylesheet alternativas</a>.</p> + +<p>O usuário pode escolher qual stylesheet usar, escolhendo no View>Page Style menu. Isso fornece uma maneira para os usuários verem várias versões de uma página.</p> + +<pre class="brush: html"><link href="default.css" rel="stylesheet" title="Default Style"> +<link href="fancy.css" rel="alternate stylesheet" title="Fancy"> +<link href="basic.css" rel="alternate stylesheet" title="Basic"> +</pre> + +<h3 id="Stylesheet_eventos_carregados">Stylesheet eventos carregados</h3> + +<p>Você pode determinar quando um stylesheet foi carregado observando um <code>load</code> event em ação; Da mesma forma, você pode detectar se ocorreu algum erro ao processar uma stylesheet, observando um <code>error</code> event:</p> + +<pre class="brush: html"><script> +function sheetLoaded() { + // Do something interesting; the sheet has been loaded +} + +function sheetError() { + alert("An error occurred loading the stylesheet!"); +} +</script> + +<link rel="stylesheet" href="mystylesheet.css" onload="sheetLoaded()" onerror="sheetError()"> +</pre> + +<div class="note"><strong>Nota:</strong> O <code>load</code> event é carregado quando a stylesheet e quando todo o conteúdo importado foi carregado e analisado, e imediatamente antes que styles comecem a ser aplicados ao conteúdo.</div> + +<h2 id="Notas">Notas</h2> + +<ul> + <li>Uma tag <code><link></code> pode ocorrer apenas no elemento head; No entanto, pode haver várias ocorrências de <code><link></code>.</li> + <li>HTML 3.2 define apenas os atributos <strong>href</strong>, <strong>rel</strong>, <strong>rev</strong>, e <strong>title</strong> para o elemento link.</li> + <li>HTML 2 define os atributos <strong>href</strong>, <strong>methods</strong>, <strong>rel</strong>, <strong>rev</strong>, <strong>title</strong>, e <strong>urn</strong> para o elemento <code><link></code>. O <strong>methods</strong> e <strong>urn</strong> foram atributos posteriormente removidos das especificações.</li> + <li>As especificações HTML e XHTML definem manipulações de eventos para o elemento <code><link></code>, mas não está claro como eles seriam usados.</li> + <li>Sob XHTML 1.0, elementos vazios como <code><link></code> requerem uma barra diagonal: <code><link /></code>.</li> +</ul> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-link-element', '<link>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-link-element', '<link>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.3', '<link>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_Navegadores">Compatibilidade de Navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Alternative stylesheets</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>disabled</code> attribute {{Non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>methods</code> attribute {{Non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>4.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>sizes</code> attribute</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}} {{bug("441770")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>load</code> and <code>error</code> events</td> + <td> + <p>19 (Webkit: 535.23)</p> + + <p>({{webkitbug(38995)}})</p> + </td> + <td>{{CompatGeckoDesktop("9.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>11.60</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>crossorigin</code> attribute</td> + <td>{{CompatChrome("25")}}</td> + <td>{{CompatGeckoDesktop("18.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera("15")}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Alternative stylesheets</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>disabled</code> attribute {{Non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>methods</code> attribute {{Non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>4.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>sizes</code> attribute</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}} {{bug("441770")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>load</code> and <code>error</code> events</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("9.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>crossorigin</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("18.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="http://pieisgood.org/test/script-link-events/">Ryan Grove's <script> and <link> node event compatibility chart</a></li> +</ul> + +<p id=".7B.7BHTMLRef.7D.7D">{{HTMLRef}}</p> diff --git a/files/pt-br/web/html/element/main/index.html b/files/pt-br/web/html/element/main/index.html new file mode 100644 index 0000000000..6a1e4b0042 --- /dev/null +++ b/files/pt-br/web/html/element/main/index.html @@ -0,0 +1,152 @@ +--- +title: <main> +slug: Web/HTML/Element/main +tags: + - Elemento + - HTML + - Referencia + - Web +translation_of: Web/HTML/Element/main +--- +<h2 id="Resumo">Resumo</h2> + +<p>O elemento <strong><code><main></code></strong><code> define o conteúdo principal dentro do </code>{{HTMLElement("body")}} em seu documento ou aplicação. Entende-se como conteúdo principal aquele relacionado diretamente com o tópico central da página ou com a funcionalidade central da aplicação. O mesmo deverá ser único na página, ou seja, dentro do elemento <main> não deverão ser incluidas seções da página que sejam comuns a todo o site ou aplicação, tais como mecanismos de navegação, informações de copyright, logotipo e campos de busca<code> </code><span id="result_box" lang="pt"><span class="hps">(a não ser</span><span>, é claro,</span> caso <span class="hps">a função principal do</span> <span class="hps">documento</span> <span class="hps">seja</span><span class="hps"> fazer algum tipo de busca</span><span class="hps">).</span></span></p> + +<div class="note"> +<p><strong>Nota:</strong> <code><main></code> <strong>não pode </strong>ser filho dos elementos {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, ou {{HTMLElement("nav")}}.</p> + +<p><span id="result_box" lang="pt"><span class="hps">Autores</span> <strong><span class="hps">não devem</span></strong> <span class="hps">incluir mais de um</span> <span class="hps">elemento main no mesmo </span><span class="hps">documento<strong>.</strong></span></span></p> +</div> + +<ul class="htmlelt"> + <li><dfn><a class="new" href="https://developer.mozilla.org/pt-BR/docs/HTML/Content_categories" title="HTML/Content_categories">Categorias de conteúdo</a></dfn><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">Conteúdo de fluxo</a>, conteúdo palpável.</li> + <li><dfn>Conteúdo permitido</dfn> <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">Conteúdo de fluxo</a>.</li> + <li><dfn>Omissão de tag</dfn> Nenhuma; <span id="result_box" lang="pt"><span class="hps">ambas</span> <span class="hps">as tags de início</span> <span class="hps">e fim</span> <span class="hps">são obrigatórios</span></span>.</li> + <li><dfn>Elementos pais permitidos</dfn> Qualquer elemento que aceite <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">conteúdo de fluxo</a>, mas não pode ser filho dos elementos {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, ou {{HTMLElement("nav")}}.</li> + <li><dfn>DOM interface</dfn> {{domxref("HTMLElement")}}</li> +</ul> + +<h2 id="Atributos">Atributos</h2> + +<p><span style="line-height: 21px;">Este elemento admite apenas os </span><a href="/en-US/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">atributos globais</a><span style="line-height: 21px;">.</span></p> + +<h2 id="Exemplo">Exemplo</h2> + +<pre class="brush: html"><!-- outro conteúdo --> + +<main> + <h1>Maçãs</h1> + <p>A maçã é a fruta pomácea da macieira.</p> + + <article> + <h2>Vermelho delicioso</h2> + <p>Estas maçãs vermelhas brilhantes são as mais comumente encontradas em muitos supermercados.</p> + <p>... </p> + <p>... </p> + </article> + + <article> + <h2>Granny Smith</h2> + <p>Essas suculentas maçãs verdes, são um ótimo recheio para torta de maçã.</p> + <p>... </p> + <p>... </p> + </article> + +</main> + +<!-- outro conteúdo --></pre> + +<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('HTML WHATWG', '#the-main-element', '<main>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td><span id="result_box" lang="pt"><span class="hps">Removida</span> <span class="hps">a restrição</span> <span class="hps">sobre não usar</span> <span class="hps atn"><</span><span>main</span><span>></span> <span class="hps">como um filho</span> <span class="hps">dos elementos</span></span> {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, ou {{HTMLElement("nav")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'grouping-content.html#the-main-element', '<main>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Não há mudança na {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-main-element', '<main>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Navegadores compatíveis</h2> + +<p><span id="result_box" lang="pt"><span class="hps atn">O </span><span>elemento</span> <span class="hps atn"><</span><span>main</span><span>> </span></span><span lang="pt"><span class="hps">é amplamente suportado</span> <span class="hps">(exceto pelo</span> <span class="hps">Internet</span> <span class="hps">Explorer).</span> <span class="hps">Sugere-se</span> <span class="hps">que, até</span> que o elemento <span class="hps atn"><main</span><span>> seja</span><span class="hps"> suportado pelo</span> <span class="hps">Internet</span> <span class="hps">Explorer, adicione a ele o atributo role com o valor "main"</span></span>:</p> + +<pre class="brush: html"><main role="main"> + ... +</main> +</pre> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>Chrome 26</td> + <td>{{ CompatGeckoDesktop("21.0") }}</td> + <td>{{CompatNo()}}</td> + <td>Opera 16</td> + <td>Safari 7</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatNo()}}</td> + <td>{{ CompatGeckoMobile("21.0") }}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><span class="short_text" id="result_box" lang="pt"><span class="hps">Elementos estruturais básicos</span></span>: {{HTMLElement("html")}}, {{HTMLElement("head")}}, {{HTMLElement("body")}}</li> + <li>Elementos relacionados a seções: {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, or {{HTMLElement("nav")}}</li> +</ul> + +<p> </p> diff --git a/files/pt-br/web/html/element/map/index.html b/files/pt-br/web/html/element/map/index.html new file mode 100644 index 0000000000..496c9cc7f3 --- /dev/null +++ b/files/pt-br/web/html/element/map/index.html @@ -0,0 +1,136 @@ +--- +title: <map> +slug: Web/HTML/Element/map +translation_of: Web/HTML/Element/map +--- +<h2 id="Resumo">Resumo</h2> + +<p>O <strong>elemento HTML <code><map></code></strong> é usado com os elementos {{HTMLElement ("area")}} para definir um mapa de imagem (a área clicável do link).</p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML / Content_categories">Categorias de conteúdo</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="Categorias HTML / conteúdo # content Fluxo">Conteúdo de fluxo</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="Categorias HTML / conteúdo # content Phrasing">conteúdo fraseado</a>, conteúdo palpável.</li> + <li><dfn>Conteúdo permitido</dfn>Qualquer elemento <a href="/en-US/docs/HTML/Content_categories#Transparent_content_model" title="https://developer.mozilla.org/en/HTML/Content_categories # Transparent_content_model">transparente</a>.</li> + <li><dfn>Omissão da marcação</dfn>{{no_tag_omission}}</li> + <li><dfn>Elementos pai permitidos</dfn> Qualquer elemento que aceita <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML / Content_categories # Phrasing_content">conteúdo fraseado</a>.</li> + <li><dfn>Interface DOM</dfn> {{domxref ("HTMLMapElement")}}</li> +</ul> + +<h2 id="Atributos">Atributos</h2> + +<p><span style="line-height: 21px;">Este elemento inclui os </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML / atributos globais">atributos globais</a><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{Htmlattrdef ("name")}}</dt> + <dd>O atributo name dá ao mapa de um nome, de modo que ela possa ser referenciada. O atributo deve estar presente e ter um valor não vazio, sem caracteres de espaço. O valor do atributo name não deve corresponder (independente da caixa) a um valor do atributo name de outro elemento no mesmo documento. Se o id de atributo também for especificado, ambos os atributos devem ter o mesmo valor.</dd> +</dl> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush: html"><map> + <area shape="circle" coords="200,250,25" href="another.htm" /> + <area shape="default" /> +</map> +</pre> + +<h2 id="Specifications" name="Specifications">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', 'a-map-element.html # the-map-elemento', '<map>')}}</td> + <td>{{Spec2 ('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName ('HTML5 W3C', 'incorporado-content-0.html # the-map-elemento', '<map>')}}</td> + <td>{{Spec2 ('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName ('HTML4.01', 'struct / objects.html # h-13.6.1', '<map>')}}</td> + <td>{{Spec2 ('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop (1,0)}} [1] [2]</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.0</td> + <td>{{CompatGeckoMobile (1,0)}} [1] [2]</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Notas_Gecko">Notas Gecko</h3> + +<p>[1] A partir do Gecko 5.0 {{geckoRelease ("5.0")}}, mapas vazios já não são ignorados para favorecer outros preenchidos quando há correspondência no modo quirk. Por exemplo, consideremos o seguinte HTML:</p> + +<pre class="brush: html"><map></ map> +<map> + <area shape="rect" coords="25,25,75,75" href="#fail"> +</map> +<img usemap="#a" src="image.png"> +</pre> + +<p>[2] Antes do Gecko 5.0, o elemento {{HTMLElement ("img")}} devia corresponder ao segundo mapa preenchido. Agora correspode apenas ao primeiro, mesmo que ele esteja vazio.</p> + +<p>[3] A partir do Firefox 17 o estilo padrão do elemento HTML <code><map></code> é <code>display: inline;</code> e não mais <code>display: block;</code> . Isso coincide com o comportamento dos outros navegadores e já foi resolvido no modo quirk.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{HTMLElement ("a")}}</li> + <li>{{HTMLElement ("area")}}</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/pt-br/web/html/element/mark/index.html b/files/pt-br/web/html/element/mark/index.html new file mode 100644 index 0000000000..ee277c421b --- /dev/null +++ b/files/pt-br/web/html/element/mark/index.html @@ -0,0 +1,137 @@ +--- +title: <mark> +slug: Web/HTML/Element/mark +tags: + - Destaque + - Elemento HTML + - HTML + - HTML5 + - 'HTML:Elemento' + - Internet + - Marcação + - Rede + - Referencia + - Referência HTML + - Semántica HTML a nivel de texto + - Web +translation_of: Web/HTML/Element/mark +--- +<h2 id="Sumário">Sumário</h2> + +<p>O <strong>Elemento HMTL <code><mark></code> </strong> representa um trecho de destaque em um texto, por exemplo, uma sequência de texto marcado como referência, devido à sua relevância em um contexto particular. Por Exemplo, pode ser utilizado em uma página que mostra os resultados de uma busca onde todas as instâncias da palavra pesquisadas receberam destaque.</p> + +<div class="note"> +<p><em>Notas de Uso: </em></p> + +<ul> + <li>Em uma citação ou outro tipo de bloco, O texto destacado normalmente marca o texto que é referenciado fora da citação, ou marcado para um analise específica, mesmo que o autor original não considerou importante.</li> + <li>No texto principal, o trecho destacado normalmente marca um conteúdo que pode ser de especial relevância para usuário corrente, como resultado de pesquisa.</li> + <li>Não use o o elemento <code><mark></code> para destaque de sintaxe; uso o elemento {{HTMLElement("span")}} para essa finalidade.</li> + <li>Não confunda o elemento <code><mark></code> com o elemento {{HTMLElement("strong")}} . O elemento {{HTMLElement("strong")}} é usado para denotar trechos de importância especial, quando o elemento <code><mark></code> é utilizado para denotar trechos de relevância especial.</li> +</ul> +</div> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categorias de conteúdo</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Conteúdo de Fluxo</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, palpable content.</li> + <li><dfn>Conteúdo Permitido</dfn> <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Phrasing content</a>.</li> + <li><dfn>Omissão de Tag</dfn> {{no_tag_omission}}</li> + <li><dfn>Elementos parent permitidos</dfn>Qualquer elemento que aceite <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>.</li> + <li><dfn>DOM interface</dfn> {{domxref("HTMLElement")}}</li> +</ul> + +<h2 id="Atributos">Atributos</h2> + +<p><span style="line-height: 21px;">Este elemento inclue apenas </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">atributos Globais</a><span style="line-height: 21px;">.</span></p> + +<h2 id="Exemplo">Exemplo</h2> + +<pre class="brush: html"><p>O elemento &lt;mark&gt; é usado para <mark>destacar</mark> partes do texto</p> +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>O elemento <mark> é usado para <mark>destacar</mark> partes do texto.</p> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificações</th> + <th scope="col">Status</th> + <th scope="col">Comentários</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-mark-element', '<mark>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'the-mark-element.html#the-mark-element', '<mark>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade">Compatibilidade</h2> + +<p>{{CompatibilityTable}}</p> + +<p>{{Compat("html.elements.mark")}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>9.0</td> + <td>11.0</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_Também">Veja Também</h2> + +<ul> + <li>Outros <a href="/en-US/docs/HTML/Text-level_semantics_elements" title="HTML/Text-level semantics elements">text-level semantics elements</a>: {{HTMLElement("a")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("abbr")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("i")}}, {{HTMLElement("b")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/pt-br/web/html/element/marquee/index.html b/files/pt-br/web/html/element/marquee/index.html new file mode 100644 index 0000000000..4fc41baabc --- /dev/null +++ b/files/pt-br/web/html/element/marquee/index.html @@ -0,0 +1,102 @@ +--- +title: <marquee> +slug: Web/HTML/Element/marquee +translation_of: Web/HTML/Element/marquee +--- +<p> </p> + +<p>{{HTMLRef}}</p> + +<p>{{obsolete_header}}</p> + +<p> </p> + +<p>O elemento html <marquee> é usado para inserir uma área de rolagem de texto"scrolling" , similar a um letreiro. Você pode controlar o comportamento do conteúdo fornecendo alguns atributos extras.</p> + +<h2 id="Atributos">Atributos</h2> + +<dl> + <dt>{{htmlattrdef("behavior")}}</dt> + <dd>Define como o texto é rolado dentro da área do letreiro. Os valores possíveis são scroll, slide e alternate. Se nenhum valor for especificado, o valor padrão será scroll.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("bgcolor")}}</dt> + <dd>Define a cor do plano de fundo do letreiro através do nome da cor (ex: red, blue) ou de um valor hexadecimal. </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("direction")}}</dt> + <dd>Define a direção da rolagem do texto dentro do letreiro, os possíveis valores são: left, right, up & down. Se nenhum valor for especificado, o valor padrão será "left".</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("height")}}</dt> + <dd>Define a altura do letreiro em pixeis ou em um valor percentual.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("hspace")}}</dt> + <dd>Aplica a margem horizontal. </dd> + <dt>{{htmlattrdef("loop")}}</dt> + <dd>Define o número de repetições da animação do letreiro. Se nenhum valor for especificado assumirá o valor padrão de -1, que significa que a animação será repetida infinitamente.</dd> + <dt>{{htmlattrdef("scrollamount")}}</dt> + <dd>Define em pixeis o tamanho de rolagem em cada intervalo, o valor padrão é 6.</dd> + <dt>{{htmlattrdef("scrolldelay")}}</dt> + <dd>Define o intervalo de tempo entre cada animação de rolagem em milissegundos. O valor padrão é 85. Qualquer valor menor que 60 será ignorado e o valor 60 será usado, a menos que seja especificado como truespeed. </dd> + <dt>{{htmlattrdef("truespeed")}}</dt> + <dd>Por padrão, valores abaixo de 60 milissegundos são ignorados, a menos que o valor truespeed esteja presente, caso esteja estes valores são aceitos. </dd> + <dt>{{htmlattrdef("vspace")}}</dt> + <dd>Aplica uma margem vertical em pixeis ou em valor percentual.</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>Define a largura em pixeis ou em um valor percentual.</dd> +</dl> + +<h2 id="Event_Handlers">Event Handlers</h2> + +<dl> + <dt> + <p>{{htmlattrdef("onbounce")}}</p> + </dt> + <dd>Dispara quando o letreiro alcança o final da sua posição de rolagem. Ele apenas dispara quando o comportamento está configurado como <code>alternate.</code></dd> +</dl> + +<dl> + <dt>{{htmlattrdef("onfinish")}}</dt> + <dd>Dispara quando o letreiro terminar a quantidade de repetições definida pelo atributo loop. Só pode disparar quando o atributo loop estiver definido para algum número maior que 0, obviamente.</dd> + <dt>{{htmlattrdef("onstart")}}</dt> + <dd>Dispara quando o letreiro começa a se mover.</dd> +</dl> + +<h2 id="Métodos">Métodos</h2> + +<dl> + <dt> + <p><code>start()</code></p> + </dt> + <dd>Começa a mover o letreiro.</dd> + <dt><code>stop()</code></dt> + <dd>Para de mover o letreiro.</dd> +</dl> + +<h2 id="Exemplos">Exemplos</h2> + +<pre><code><marquee>Este texto vai "rolar" da direita para esquerda</marquee> + +<marquee direction="up">Este texto vai rolar de baixo para cima.</marquee> + +<marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid"> + <marquee behavior="alternate"> + Este texto vai pular + </marquee> +</marquee></code></pre> + +<p> </p> + +<p> </p> + +<p> </p> + +<p> </p> + +<p> </p> diff --git a/files/pt-br/web/html/element/meta/index.html b/files/pt-br/web/html/element/meta/index.html new file mode 100644 index 0000000000..9d61c32f40 --- /dev/null +++ b/files/pt-br/web/html/element/meta/index.html @@ -0,0 +1,538 @@ +--- +title: <meta> +slug: Web/HTML/Element/meta +translation_of: Web/HTML/Element/meta +--- +<div>{{HTMLRef}}</div> + +<p>O elemento <strong>HTML <code><meta></code> </strong>define qualquer informação de metadados que não podem ser definidos por outros elementos <strong>HTML.</strong> ({{HTMLElement("base")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} ou {{HTMLElement("title")}}).</p> + +<table class="properties"> + <tbody> + <tr> + <th><a href="/en-US/docs/Web/HTML/Content_categories">C</a>ategoria de conteúdo</th> + <td>Conteúdo de metadado. Se o {{htmlattrxref("itemprop", "meta")}} atributo estiver presente: <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th>Conteúdo permitido</th> + <td>Nenhum, é um {{Glossary("elemento vazio")}}.</td> + </tr> + <tr> + <th>Omissão de tag</th> + <td>Como é um elemento vazio, a marcação inicial deve estar presente e a de fechamento não.</td> + </tr> + <tr> + <th>Elementos pai permitidos</th> + <td><code><meta charset></code>, <code><meta http-equiv></code>: um elemento {{HTMLElement("head")}}. Se o {{htmlattrxref("http-equiv", "meta")}} não for uma declaração de codificação, ele pode estar dentro de um elemento {{HTMLElement("noscript")}}, dentro de um elemento {{HTMLElement("head")}}.</td> + </tr> + <tr> + <th scope="row">Papéis ARIA permitid</th> + <td>Nenhum</td> + </tr> + <tr> + <th>Interface DOM</th> + <td>{{domxref("HTMLMetaElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Esse elemento inclui os <a href="/en-US/docs/Web/HTML/Global_attributes">atributos globais</a>.</p> + +<div class="note"> +<p><strong>Nota:</strong> o atributo global {{htmlattrxref("name", "meta")}} tem um significado específico para o elemento {{HTMLElement("meta")}}, e o atributo {{htmlattrxref("itemprop", "meta")}} não deve ser definido no mesmo elemento<code><meta></code> que tem algum desses atributos existentes: {{htmlattrxref("name", "meta")}}, {{htmlattrxref("http-equiv", "meta")}} ou {{htmlattrxref("charset", "meta")}}.</p> +</div> + +<dl> + <dt>{{htmlattrdef("charset")}}</dt> + <dd><br> + Este atributo define a codificação de caracteres usada na página. Pode ser substituído localmente usando o atributo <em>lang </em>em qualquer elemento. Esse atributo é literalmente uma amarra e deve ser um dos <em>MIME names </em>preferidos para uma codificação de caracteres como definido pela IANA (<a class="external" href="https://www.iana.org/assignments/character-sets">defined by the IANA</a>). Embora o padrão não solicite uma codificação específica, ele dá algumas sugestões: + <ul> + <li>Autores são encorajados a usar UTF-8.</li> + <li>Autores não devem usar codificações incompatíveis com ASCII (<br> + isto é, aqueles que não mapeiam os pontos de código de 8 bits 0x20 a 0x7E para os pontos de código Unicode 0x0020 a 0x007E), pois representam um risco de segurança: navegadores que não os suportam podem interpretar conteúdo benigno como Elementos HTML. Esse é o caso de pelo menos os seguintes caracteres: JIS_C6226-1983, JIS_X0212-1990, HZ-GB-2312, JOHAB, a família ISO-2022 e a família EBCDIC.</li> + <li>Autores não devem usar CESU-8, UTF-7, BOCU-1 e SCSU, also falling in that category and not intended to be used on the web. Cross-scripting attacks with some of these encodings have been documented.</li> + <li>Autores não devem usar UTF-32 pois nem todos algorítimos de codificção HTML5 conseguem distingui-lo do UTF-16.</li> + </ul> + + <div class="note"><strong>Notas:</strong> + + <ul> + <li>O conjunto de caracteres declarado deve corresponder ao da página. Não há motivo válido para declarar um conjunto de caracteres imprecisos.</li> + <li>Esse elemento {{HTMLElement ("meta")}} deve estar dentro do elemento {{HTMLElement ("head")}} e dentro dos primeiros 1024 bytes da página, pois alguns navegadores só olham para esses primeiros bytes antes de escolher um caractere definido para a página.</li> + <li>Esse elemento {{HTMLElement ("meta")}} é apenas uma parte do algoritmo para determinar o conjunto de caracteres de uma página que os navegadores aplicam. O cabeçalho HTTP Content-Type e quaisquer elementos da BOM têm precedência sobre esse elemento.</li> + <li>É uma boa prática, e altamente recomendável, definir o conjunto de caracteres usando este atributo. Se nenhum conjunto de caracteres estiver definido para uma página, várias técnicas de scripts cruzados poderão prejudicar o usuário da página, como a técnica de cross-scripting de fallback UTF-7. Sempre definindo esta meta irá proteger contra esses riscos.</li> + <li>Esse elemento {{HTMLElement("meta")}} é um sinonimo para o pre-HTML5 <code><meta http-equiv="Content-Type" content="text/html; charset=<em>IANAcharset</em>"> </code>onde o atributo <em><code>IANAcharset</code> </em>corresponde ao valor equivalente de {{htmlattrxref("charset", "meta")}}. Essa sintaxe ainda é permitida, embora obsoleta e não mais recomendada.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("content")}}</dt> + <dd>Esse atributo fornece o valor associado ao atributo {{htmlattrxref("http-equiv", "meta")}} ou {{htmlattrxref("name", "meta")}}, dependendo do contexto.</dd> + <dt>{{htmlattrdef("http-equiv")}}</dt> + <dd>Este enumerado atributo define a pragma isso pode alterar o comportamento de servers e user-agents. o valor do pragma é definido usnado {{htmlattrxref("content", "meta")}} e pode ser um dos seguintes: + <dl> + <dt><code>"content-language"</code> {{obsolete_inline}}</dt> + <dd>este pragma define a linguagem defaul da pagina + <div class="note">não use este pragma, ele esta absoleto. use o global atributo <code>lang</code> no {{HTMLElement("html")}} inves deste.</div> + </dd> + <dt><code>"Content-Security-Policy"</code></dt> + <dd>Este valor permite os administradores do web site a definir o <a href="/en-US/docs/Web/Security/CSP/CSP_policy_directives">c</a>onteudo politico para servido recursos. com algumas exeçoes, politicas involvem especificos origins de servers e escripts endpoints. isso ajuda na defesa de cross-server scripting attacks.</dd> + <dt><code>"content-type"</code> {{obsolete_inline}}</dt> + <dd>Esse atributo define o <a href="/en-US/docs/MIME">MIME type</a> do documento, eventualmente seguido por estes caracteres. isso segue a mesma syntax como o HTTP <code>content-type</code> entity-header field, mas isto esta dentro de um elemento HTML, a maioria dos valores não é possivel. sendo assim a syntax valida para este conteudo é a literal string '<code>text/html</code>' eventualmente seguido por estes caracteres com a seguinte syntax:'<code>; charset=</code><em><code>IANAcharset</code></em>' onde <code>IANAcharset</code> é o<em> MIME preferido nome para um conjunto de caracteres como </em> <a class="external" href="https://www.iana.org/assignments/character-sets">definido pela IANA.</a> + <div class="note"><strong>nota de uso:</strong> + <ul> + <li>Nao use esta pragma ela esta absoleta. use {{htmlattrxref("charset", "meta")}} atributo {{HTMLElement("meta")}} element instead.</li> + <li>como o {{HTMLElement("meta")}} pode nao ser usado para mudar o tipo de documento no XHTML, ou em um documento de HTML5 seguindo uma syntax de XHTML, nunca marque MIME type para um XHTML MIME type desta forma. isso sera incoerente.</li> + <li>somente um documento HTML pode usar o content-type, entao a maioria disto é redundante: isso porque esta absoleto e trocado pelo atributo {{htmlattrxref("charset", "meta")}}.</li> + </ul> + </div> + </dd> + <dt><code>"default-style"</code></dt> + <dd>Este pragma preferencia de stylesheet a ser usado na pagina. o atributo {{htmlattrxref("content", "meta")}} deve conter o <strong>title</strong> de um {{HTMLElement("link")}} elemento de quem {{htmlattrxref("href", "link")}} atributo link um CSS stylesheet, ou um <strong>title</strong> de um elemento {{HTMLElement("style")}} do qual contem um <a href="/en-US/docs/Web/CSS">CSS</a> stylesheet.</dd> + <dt><code>"refresh"</code></dt> + <dd>este pragma especifica: + <ul> + <li>o numero de segundos ate a pagina ser re carregada, se o atributo {{htmlattrxref("content", "meta")}} contem apenas um numero inteiro positivo;</li> + <li>o numero de segundos ate a pagina ser redirecionada para outro lugar, se o atributo {{htmlattrxref("content", "meta")}} contem um inteiro positivo seguido de uma string '<code>;url=</code>' e uma URL valida.</li> + </ul> + </dd> + <dt><code>"set-cookie"</code> {{obsolete_inline}}</dt> + <dd>este pragma define um <a href="/en-US/docs/cookie">cookie</a> para a pagina. este conteudo deve seguir a syntax definida em <a class="external" href="https://tools.ietf.org/html/draft-ietf-httpstate-cookie-14">IETF HTTP Cookie Specification</a>. + <div class="note"><strong>Note:</strong> não use este pragma esta absoleto. Use HTTP header set-cookie instead.</div> + </dd> + </dl> + </dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>Este atributo define o nome do document-level metadata. isso nao deve ser marcado se um dos atributos {{htmlattrxref("itemprop", "meta")}}, {{htmlattrxref("http-equiv", "meta")}} ou {{htmlattrxref("charset", "meta")}} ja estao preparados.<br> + este document-level metadata name é asociado a um valor, contido pelo atributo {{htmlattrxref("content", "meta")}}. os possiveis valores para o elemento name sao, com seu valor asociado, guardado via {{htmlattrxref("content", "meta")}} attribute: + <ul> + <li><code>application-name</code>, define o nome da aplicação que esta rodando na pagina; + <div class="note"><strong>Note:</strong> + <ul> + <li>Browsers podem usar isso para indentificar a aplicaçao. isso é diferente do elemento {{HTMLElement("title")}}, que geralemnte constitui no nome da aplicaçao, mas tambem contem informaçoes especificas como o nome do documento ou status;</li> + <li>Simple webpages nao deveriam definir application-name meta.</li> + </ul> + </div> + </li> + <li><code>author</code>, definindo, em formato livre, o nome do author do documento;</li> + <li><code>description</code>, contem uma curta e precisa descriçao do conteudo da pagina. varios browsers, como o Firefox e o Opera, usam este meta como descriçao padrao da pagina quando é marcada.</li> + <li><code>generator</code>, contendo, em um formato livre, o indentificador do software que gerou a pagina;</li> + <li><code>keywords</code>, contendo, como strings separadas por virgula, palavras relevantes asociadas ao conteudo da pagina;</li> + <li><code>referrer</code> {{experimental_inline}} controlando o conteudo de um HTTP <code>Referer</code> HTTP header anexado a qualquer pedido enviado deste documento: + <table class="standard-table"> + <caption>valores para content attribute de <meta name="referrer"></caption> + <tbody> + <tr> + <td><code>no-referrer</code></td> + <td>não envia um HTTP <code>Referer</code> header.</td> + </tr> + <tr> + <td><code>origin</code></td> + <td>envia a <a href="/en-US/docs/Glossary/Origin">origin</a> de um documento.</td> + </tr> + <tr> + <td><code>no-referrer-when-downgrade</code></td> + <td>Envia a origem como referenciador para um destino prioritariamente tão seguro (https-> https), mas não envie um referenciador para um destino menos seguro (https-> http). Este é o comportamento padrão.</td> + </tr> + <tr> + <td><code>origin-when-crossorigin</code></td> + <td> + <p dir="ltr" id="tw-target-text">Envia uma URL completa (sem parâmetros)<br> + ao executar uma solicitação de mesma origem,<br> + mas envie apenas a origem do documento para outros casos.</p> + </td> + </tr> + <tr> + <td><code>unsafe-URL</code></td> + <td> + <p dir="ltr" id="tw-target-text">Envia um URL completo (sem parâmetros) ao executar uma solicitação de mesma origem ou origem cruzada.</p> + </td> + </tr> + </tbody> + </table> + + <div class="note"> + <p><strong>Note: </strong>algun browsers suportam keywords <code>always</code>, <code>default</code>, e <code>never</code> para referenciar. estes valores estao descontinuados. </p> + </div> + + <div class="note"> + <div class="notes"><strong>Note:</strong> dinamicamente inseridos <code><meta name="referrer"></code> (por document.write ou appendChild) cria um nao-determinismo qunado isso vem para enviar referencias ou nao. note tambem qunado muitas politicas conflitantes sao definidas, o No-referrer politia é aplicada.</div> + </div> + </li> + </ul> + + <p>o atributo tambem pode ter um valor retirado de uma extensa lista definida em <a class="external" href="https://wiki.whatwg.org/wiki/MetaExtensions">WHATWG Wiki MetaExtensions page</a>. Embora nenhum tenha sido formalmente aceito ainda, alguns nomes comumente usados estão entre as propostas:</p> + + <ul> + <li><code>creator</code>, definindo, em um formato livre, o nome do criador do documento. note que tambem pode ser o nome de uma instituiçao. se ha mais de uma, muitas elemntos {{HTMLElement("meta")}} podem ser usados;</li> + <li><code>googlebot</code>, é um sinonimo de <code>robots</code>, mas so é seguido por Googlebot, o indexador crawler do Google;</li> + <li><code>publisher</code>, definido, en um formato livre, o nome do editor do documento. note tambem pode ser o nome de uma instituição;</li> + <li><code>robots</code>, definindo o comportamento que crawlers devem ter com a pagina. é separado por virgula a lista de valores seguintes: + <table class="standard-table"> + <caption>Valores para content de <meta name="robots"></caption> + <thead> + <tr> + <th scope="col">Value</th> + <th scope="col">Description</th> + <th scope="col">Used by</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>index</code></td> + <td>permite o robo indexar uma pagina</td> + <td>All</td> + </tr> + <tr> + <td><code>noindex</code></td> + <td>previne o robo de indexar uma pagina</td> + <td>All</td> + </tr> + <tr> + <td><code>follow</code></td> + <td>permite o robo a seguir os links da pagina</td> + <td>All</td> + </tr> + <tr> + <td><code>nofollow</code></td> + <td>previne o robo a seguir os links da pagina</td> + <td>All</td> + </tr> + <tr> + <td><code>noodp</code></td> + <td>previne o uso de descriçao <a class="external" href="https://www.dmoz.org/">Open Directory Project</a>, caso existam, como descriçao da pagina o resultado na ferramenta de busca.</td> + <td> + <p><a class="external" href="https://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=79812">Google</a>, <a class="external" href="https://help.yahoo.com/l/us/yahoo/search/indexing/indexing-11.html;_ylt=Arh3LHnisvRMPJKzQqmJ97JYqCN4">Yahoo</a>, <a class="external" href="https://www.bing.com/toolbox/blogs/webmaster/archive/2008/06/03/robots-exclusion-protocol-joining-together-to-provide-better-documentation.aspx">Bing</a></p> + </td> + </tr> + <tr> + <td><code>noarchive</code></td> + <td>previne a ferramenta de busca pecar o conteudo da pagina</td> + <td><a class="external" href="https://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=79812">Google</a>, <a class="external" href="https://help.yahoo.com/l/us/yahoo/search/indexing/basics-10.html;_ylt=Aszma_Ly8TfhL7mn_LGWn5RYqCN4">Yahoo</a></td> + </tr> + <tr> + <td><code>nosnippet</code></td> + <td> + <p dir="ltr" id="tw-target-text">Impede a exibição de qualquer descrição da página na página de resultados do mecanismo de pesquisa</p> + + <p> </p> + </td> + <td><a class="external" href="https://www.google.com/support/webmasters/bin/answer.py?answer=35304">Google</a></td> + </tr> + <tr> + <td><code>noimageindex</code></td> + <td>previne esta pagina de aparecer como referencia de alguma imagem indexada</td> + <td><a class="external" href="https://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=79812">Google</a></td> + </tr> + <tr> + <td><code>nocache</code></td> + <td>sinonimo de <code>noarchive</code></td> + <td><a class="external" href="https://www.bing.com/toolbox/blogs/webmaster/archive/2008/06/03/robots-exclusion-protocol-joining-together-to-provide-better-documentation.aspx">Bing</a></td> + </tr> + </tbody> + </table> + + <div class="note"><strong>Notes:</strong> + + <ul> + <li> + <p dir="ltr" id="tw-target-text">Somente robôs cooperativos seguirão as regras definidas pelo nome do robô. Não espere manter as colheitadeiras de e-mail à distância com isso.</p> + + <p> </p> + </li> + <li> + <p dir="ltr" id="tw-target-text">O robô ainda precisa acessar a página para ler o valor meta. Se você quiser mantê-los sob controle, por exemplo, para evitar o consumo de largura de banda, use um arquivo robots.txt (ou em complemento).</p> + + <p> </p> + </li> + <li> + <p dir="ltr" id="tw-target-text">Se você quiser remover a página de um índice, a alteração do meta para <code>noindex</code> funcionará, mas somente quando o robô visitar a página novamente. Verifique se o arquivo robots.txt não está impedindo essas visitas. Alguns mecanismos de busca possuem ferramentas para desenvolvedores, permitindo uma remoção rápida de algumas páginas.</p> + + <p> </p> + </li> + <li> + <p dir="ltr" id="tw-target-text">Alguns valores possíveis são mutuamente exclusivos, como usar <code>index </code>e <code>noindex</code>, ou <code>follow </code>e <code>nofollow</code>, ao mesmo tempo. Nestes casos, o comportamento do robô é indefinido e pode variar de um para o outro. Então evite esses casos.</p> + + <p> </p> + </li> + <li><br> + Alguns robôs rastreadores de mecanismos de pesquisa, como os do Google, Yahoo Search ou Bing, suportam os mesmos valores em uma diretiva <code>HTTP, X-Robot-Tags</code>: isso permite que eles usem esses pragma em documentos não HTML, como imagens</li> + </ul> + </div> + </li> + <li><code>slurp</code>, qual é um sinonimo de <code>robots</code>, mas somente seguido por Slurp, o indexador crawler para Yahoo Search;</li> + </ul> + + <p> </p> + + <p dir="ltr" id="tw-target-text">Finalmente, alguns nomes estão em uso comum, embora não estejam sendo padronizados:</p> + + <p> </p> + + <ul> + <li><code>viewport</code>, que dá dicas sobre o tamanho inicial do {{glossary ("viewport")}}. Este pragma é usado apenas por vários dispositivos móveis. + + <table class="fullwidth-table"> + <caption>Valores para content de <code><meta name="viewport"></code></caption> + <thead> + <tr> + <th scope="col">Value</th> + <th scope="col">Possible values</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>width</code></td> + <td>um numero inteiro positivo ou o literal <code>device-width</code></td> + <td>define a largura em pixel de um viewport</td> + </tr> + <tr> + <td><code>height</code></td> + <td>um numero inteiro positivo ou o literal <code>device-height</code></td> + <td>define a altura em pixel de um viewport</td> + </tr> + <tr> + <td><code>initial-scale</code></td> + <td>um numero positivo entre <code>0.0</code> e <code>10.0</code></td> + <td> + <p dir="ltr" id="tw-target-text">define a relação entre a largura do dispositivo (largura do dispositivo no modo retrato ou altura do dispositivo no modo paisagem) e o tamanho da janela de visualização</p> + .</td> + </tr> + <tr> + <td><code>maximum-scale</code></td> + <td>um numero positivo entre <code>0.0</code> e <code>10.0</code></td> + <td>define o valor maximo de zoom; deve ser maior ou igual ao <code>minimum-scale</code> ou o comportamento sera indeterminado.</td> + </tr> + <tr> + <td><code>minimum-scale</code></td> + <td>um numero positivo entre <code>0.0</code> e <code>10.0</code></td> + <td>define o valor minimo do zoom; deve ser menor ou igual ao <code>maximum-scale</code> ou o comportamento sera indeterminado</td> + </tr> + <tr> + <td><code>user-scalable</code></td> + <td>um valor booleano (<code>yes</code> or <code>no</code>)</td> + <td>se setado <code>no</code>, o usuario nao podera usar zoom na pagina. o valor padrao é <code>yes</code>.</td> + </tr> + </tbody> + </table> + + <table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Device', '#viewport-meta', '<meta name="viewport">')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>Non-normatively describes the Viewport META element</td> + </tr> + </tbody> + </table> + + <div>See also: {{cssxref("@viewport")}}</div> + + <div class="note"><strong>Notes:</strong> + + <ul> + <li> + <p dir="ltr" id="tw-target-text">Embora não seja padronizado, esse atributo é usado por diferentes navegadores móveis, como o Safari Mobile, o Firefox para celular ou o Opera Mobile<span style="font-size: 1rem; letter-spacing: -0.00278rem;">.</span></p> + </li> + <li> + <p dir="ltr" id="tw-target-text">Os valores padrão podem mudar de um dispositivo e navegador para outro.</p> + + <p> </p> + </li> + <li> + <p dir="ltr" id="tw-target-text">Para aprender sobre esse pragma no Firefox para celular<span style="font-size: 1rem; letter-spacing: -0.00278rem;">, veja </span><a href="/en-US/docs/Mobile/Viewport_meta_tag" style="font-size: 1rem; letter-spacing: -0.00278rem;" title="Mobile/Viewport meta tag"> este artigo</a><span style="font-size: 1rem; letter-spacing: -0.00278rem;">.</span></p> + </li> + </ul> + </div> + </li> + </ul> + </dd> + <dt>{{htmlattrdef("scheme")}} {{obsolete_inline}}</dt> + <dd> + <p dir="ltr" id="tw-target-text">Este atributo define o esquema no qual os metadados são descritos<span style="font-size: 1rem; letter-spacing: -0.00278rem;">. </span>Um esquema é um contexto que leva às interpretações corretas dos <span style="font-size: 1rem; letter-spacing: -0.00278rem;">{{htmlattrxref("content", "meta")}} valores, como um formato.</span></p> + + <div class="note"><strong>Notes:</strong> Não use este atributo pois esta absoleto. + + <p dir="ltr" id="tw-target-text">Não há substituto para isso, pois não houve uso real para isso. Omitir completamente<span style="font-size: 1rem; letter-spacing: -0.00278rem;">.</span></p> + </div> + </dd> +</dl> + +<h2 id="Notes">Notes</h2> + +<p>Dependendo do conjunto escolhido, o tipo de matadata pode ser uma das seguntes:</p> + +<ul> + <li>se {{htmlattrxref("name", "meta")}} é definido, isto é <em>document-level</em> <em>metadata</em>, aplicando para a pagina inteira.</li> + <li>se {{htmlattrxref("http-equiv", "meta")}} é definido, isto é um <em>pragma diretiva</em>, i.e. normalmente informação dada pelo web server sobre como a pagina web deve ser entregue.</li> + <li>se {{htmlattrxref("charset", "meta")}} é definido, isto é uma declaração de <em>charset</em>, i.e. o charset usado para o formulário serializado da página da Web + <p> </p> + </li> + <li>se {{htmlattrxref("itemprop", "meta")}} é definido, isto é <em>user-defined metadata</em>, transparente para o user-agent, pois a semântica dos metadados é específica do usuário. {{experimental_inline}}</li> +</ul> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush: html"><!-- In HTML5 --> +<meta charset="utf-8"> + +<!-- redireciona a pagina depois de 3 seconds --> +<meta http-equiv="refresh" content="3;url=https://www.mozilla.org"> + +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-meta', '<meta name="referrer">')}}</td> + <td>{{Spec2('Referrer Policy')}}</td> + <td>Define valores e semantica <code><meta name="referrer"></code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-meta-element', '<meta>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Adiciona o atributo <code>itemprop</code></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-meta-element', '<meta>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Adiciona o atributo <code>charset</code> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.4.2', '<meta>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>name="referrer"</code></td> + <td>{{CompatChrome("17")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("36.0")}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td> + <p dir="ltr" id="tw-target-text">Constrangido aos valores listados no referenciador (conforme especificado na especificação)</p> + + <p> </p> + </td> + <td>{{CompatChrome("46.0")}}</td> + <td>{{CompatNo}}</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>Edge</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>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>name="referrer"</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("36.0")}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><br> + Constrangido aos valores listados no referenciador (conforme especificado na especificação)</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome("46.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome("46.0")}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] O valor <code>referrer</code> não foi levado em conta quando a navegação estava acontecendo através do menu de contexto ou clique do meio até o Firefox 39.</p> + +<p> </p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The other elements containing metadata: {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("link")}}, {{HTMLElement("style")}},{{HTMLElement("title")}}.</li> +</ul> diff --git a/files/pt-br/web/html/element/meter/index.html b/files/pt-br/web/html/element/meter/index.html new file mode 100644 index 0000000000..3b1769d2dc --- /dev/null +++ b/files/pt-br/web/html/element/meter/index.html @@ -0,0 +1,92 @@ +--- +title: meter +slug: Web/HTML/Element/meter +translation_of: Web/HTML/Element/meter +--- +<h2 id="Sumário">Sumário</h2> + +<p>O elemento HTML <em>meter</em> (<code><meter></code>) pode representar um valor escalar dentro de um intervalo conhecido ou um valor fracionário.</p> + +<div class="note"><strong>Nota de uso: </strong>A não ser que o atributo <strong>value</strong> esteja entre 0 e 1(inclusive), o atributo <strong>min</strong> e o atributo <strong>max</strong> devem definir o intervalo de modo que o valor do atributo<strong> value</strong> esteja dentro dele.</div> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td><a href="/en/HTML/Content_categories" title="en/HTML/Content categories">Content categories</a></td> + <td><a href="/en/HTML/Content_categories#flow_content" title="en/HTML/Content categories#flow content">flow content</a>, <a href="/en/HTML/Content_categories#phrasing_content" title="en/HTML/Content categories#phrasing content">phrasing content</a>, <a href="/en/HTML/Content_categories#form-labelable" title="en/HTML/Content categories#form labelable">Labelable</a> <a href="/en/HTML/Content_categories#form-associated" title="en/HTML/Content categories#form associated">Form-associated content</a></td> + </tr> + <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>, mas nenhum elemento <code>meter</code> descendente.</td> + </tr> + <tr> + <td>Tag omission</td> + <td>Nenhuma, ambas as tags iniciais e finais são obrigatórias.</td> + </tr> + <tr> + <td>Elementos pais permitidos</td> + <td>Qualquer elemento que aceite phrasing content.</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-meter-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-meter-element">HTML5, section 4.10.8</a></td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Como todos os elementos HTML, esse elemento suporta<a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes"> attributes</a>.</p> + +<dl> + <dt>{{ htmlattrdef("value") }}</dt> + <dd>O valor numérico atual. Ele deve estar entre os valores mínimos e máximo (o atributo<strong> min</strong> e o atributo <strong>max</strong>) se eles estiverem especificados. Se não especificado ou mal formatado, o valor é 0. Se especificado, mas fora do intervalo dado pelos atributos <strong>min</strong> e <strong>max</strong>, o valor é igual ao extremo do intervalo mais próximo.</dd> + <dt>{{ htmlattrdef("min") }}</dt> + <dd>O limite numérico mínimo do intervalo medido. Deve ser menor que o valor máximo (o atributo <strong>max</strong>), se especificado. Se não especificado, o valor mínimo é 0.</dd> + <dt>{{ htmlattrdef("max") }}</dt> + <dd>O limite numérico máximo do intervalo medido. Deve ser maior que o valor mínimo (o atributo <strong>min</strong>), se especificado. Se não especificado, o valor máximo é 1.</dd> + <dt>{{ htmlattrdef("low") }}</dt> + <dd>O limite numérico máximo da parte inferior do intervalo medido. Deve ser maior que o valor mínimo (o atibuto <strong>min</strong>), e também ser menor que o valor alto e o valor máximo (os atributos <strong>high</strong> e <strong>max</strong>, respectivamente), se estiver especificado. Se não especificado, ou se for menor que o valor mínimo, o valor de <strong>low</strong> é igual ao valor mínimo.</dd> + <dt>{{ htmlattrdef("high") }}</dt> + <dd>O limite numérico mínimo da parte superior do intervalo medido. Deve ser menor que o valor máximo (o atibuto <strong>max</strong>), e também ser maior que o valor baixo e o valor mínimo (os atributos <strong>low</strong> e <strong>min</strong>, respectivamente), se estiver especificado. Se não especificado, ou se for maior que o valor máximo, o valor de <strong>high</strong> é igual ao valor máximo.</dd> + <dt>{{ htmlattrdef("optimum") }}</dt> + <dd>Esse atributo indica o valor numérico ótimo. Deve estar dentro do intervalo (definido pelos atributos <strong>min</strong> e <strong>max</strong>). Quando com os atributos <strong>low</strong> e <strong>high</strong>, ele indica a região do intervalo qu é considerada preferível. Por exemplo, se estiver entre os atributos <strong>min</strong> e <strong>low</strong>, então a parte inferior do intervalo é considerada como ótima.</dd> + <dt>{{ htmlattrdef("form") }}</dt> + <dd>Esse atributo associa o elemento com um elemento<code> form</code> que é dono de um elemento <code>meter</code>. Por exemplo, um elemento <code>meter</code> pode estar mostrando um intervalo correspondente a um elemento <code>input</code> do <strong>type</strong>(tipo) <em>number</em>. Esse atributo só é utilizado se o elemento <code>meter</code> está sendo utilizado como um elemento associado a um formulário; mesmo assim, ele pode se romitido se o elemento for um descendente de um elemento <code>form</code>.</dd> +</dl> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Simple_example" name="Simple_example">Exemplo simples</h3> + +<pre class="brush: html"><p>Aqueça o forno para <meter min="200" max="500" value="350">350 graus</meter>.</p> +</pre> + +<p>No Google Chrome, o medidor aparece como:</p> + +<p><img alt="meter1.png" class="default internal" src="/@api/deki/files/4940/=meter1.png"></p> + +<h3 id="Hilo_Range_example" name="Hilo_Range_example">Exemplos de intervalos com High e Low</h3> + +<p>Note que nesse exemplo o atributo <strong>min</strong> foi omitido; isso é permitido, pois ele irá ser, por padrão, 0.</p> + +<pre class="brush: html"><p>Ele recebeu <meter low="69" high="80" max="100" value="84">B</meter> no exame.</p> +</pre> + +<p>No Google Chrome, o medidor aparece como:</p> + +<p><img alt="meter2.png" class="default internal" src="/@api/deki/files/4941/=meter2.png"></p> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + + + +<p>{{Compat("html.elements.meter")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{ HTMLElement("progress") }}</li> +</ul> diff --git a/files/pt-br/web/html/element/nav/index.html b/files/pt-br/web/html/element/nav/index.html new file mode 100644 index 0000000000..20a2e4e77c --- /dev/null +++ b/files/pt-br/web/html/element/nav/index.html @@ -0,0 +1,133 @@ +--- +title: nav +slug: Web/HTML/Element/nav +tags: + - Elemento + - HTML + - Internet + - Links + - Navegação + - Rede + - Referencia + - Seções + - Seções HTML + - Web + - nav +translation_of: Web/HTML/Element/nav +--- +<h2 id="Sumário">Sumário</h2> + +<p>O <em>Elemento </em><em>HTML </em><em>de Navegação</em> (<code><nav></code>) representa uma seção de uma página que aponta para outras páginas ou para outras áreas da página, ou seja, uma seção com links de navegação.</p> + +<div class="note"> +<p><em>Notas de utilização:</em></p> + +<ul> + <li>Nem todos os links de um documento devem estar dentro de um elemento <code><nav></code>, o qual é destinado apenas para grupos importantes de links de navegação; tipicamente o elemento {{ HTMLElement("footer") }} contém uma lista de links que não precisam estar em um elemento {{ HTMLElement("nav") }}.</li> + <li>Um documento pode ter vários elementos {{ HTMLElement("nav") }}, por exemplo, um para navegação no site e outro para navegação dentro da página.</li> + <li>Agentes de usuário, como leitores de tela para usuários deficientes, podem utilizar este elemento para determinar se a renderização inicial do conteúdo do mesmo deve ser omitida.</li> +</ul> +</div> + +<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#flow_content" title="en/HTML/Content categories#flow content">Conteúdo de fluxo</a></td> + </tr> + <tr> + <td>Omissão de tag</td> + <td>Nenhuma, tanto a tag de início quanto a de fim são obrigatórias</td> + </tr> + <tr> + <td>Elementos-pai permitidos</td> + <td>Quaisquer elementos que permitam conteúdo de fluxo. Note que um elemento <code><nav></code> não deve descender de um elemento {{ HTMLElement("address") }}.</td> + </tr> + <tr> + <td>Documento normativo</td> + <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-nav-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-nav-element">HTML5, seção 4.4.3</a></td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento não possui outros atributos além dos <a href="/en/HTML/Global_attributes" rel="internal">atributos globais</a>, comuns a todos os elementos.</p> + +<h2 class="editable" id="Interface_DOM">Interface DOM</h2> + +<p>Este elemento implementa a interface <code><a href="/en/DOM/element" title="en/DOM/element">HTMLElement</a></code>.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush: html"><nav> + <ul> + <li><a href="#">Página inicial</a></li> + <li><a href="#">Sobre</a></li> + <li><a href="#">Contato</a></li> + </ul> +</nav> +</pre> + +<h2 id="Compatibilidade">Compatibilidade</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>5</td> + <td>{{ CompatGeckoDesktop("2.0") }}</td> + <td>9.0</td> + <td>11.10</td> + <td>4.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>2.2</td> + <td>{{ CompatGeckoMobile("2.0") }}</td> + <td>9.0</td> + <td>11.0</td> + <td>5.0 (iOS 4.2)</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>Outros elementos relacionados à seções: {{ 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 href="/pt-BR/docs/Seções_e_estrutura_HTML5" title="/pt-BR/docs/Seções_e_estrutura_HTML5">Seções e esboços de um documento HTML5</a></li> +</ul> + +<div>{{HTMLRef}}</div> + +<div>{{languages({ "ja": "ja/HTML/Element/nav" })}}</div> diff --git a/files/pt-br/web/html/element/nobr/index.html b/files/pt-br/web/html/element/nobr/index.html new file mode 100644 index 0000000000..87d37a0de3 --- /dev/null +++ b/files/pt-br/web/html/element/nobr/index.html @@ -0,0 +1,26 @@ +--- +title: <nobr> +slug: Web/HTML/Element/nobr +tags: + - Elemento + - HTML + - Não-padrão + - Referencia +translation_of: Web/HTML/Element/nobr +--- +<div>{{non-standard_header}}</div> + +<h2 id="Summary" name="Summary">Sumário</h2> + +<p><span class="seoSummary"><code><font face="Open Sans, sans-serif">O elemento HTML </font><nobr></code> previne que um texto quebre em uma nova linha automaticamente, de forma que ele seja exibido em uma única grande linha, podendo tornar o <em>scroll</em> (horizontal) necessário. Esta tag não é padrão HTML e não deve ser usada.</span> Como alternativa, use a propriedade CSS {{Cssxref("white-space")}} como segue:</p> + +<pre class="brush:css"><span style="white-space: nowrap">Texto longo sem quebras de linha</span></pre> + +<h2 id="See_also" name="See_also">Ver também</h2> + +<ul> + <li>{{Cssxref("white-space")}}</li> + <li>{{Cssxref("overflow")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/pt-br/web/html/element/noscript/index.html b/files/pt-br/web/html/element/noscript/index.html new file mode 100644 index 0000000000..fb3fc34c0b --- /dev/null +++ b/files/pt-br/web/html/element/noscript/index.html @@ -0,0 +1,128 @@ +--- +title: <noscript> +slug: Web/HTML/Element/noscript +tags: + - Elemento + - HTML + - Referencia + - Web + - script HTML +translation_of: Web/HTML/Element/noscript +--- +<div>{{HTMLRef}}</div> + +<h2 id="Resumo">Resumo</h2> + +<p>O <strong>Elemento HTML <code><noscript></code></strong> define uma seção de html a ser inserida se um tipo de script não é suportado pela página ou se o script está desativado no navegador.</p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categorias de conteúdo</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Metadata_content" title="HTML/Content_categories#Metadata_content">Metadata content</a>, <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>.</li> + <li><dfn>Conteúdo permitido</dfn> Quando scripting está desabilitado e quando este é um descendente do elemento {{HTMLElement("head")}} : em qualquer ordem, de zero ou mais elementos {{HTMLElement("link")}}, zero ou mais elementos {{HTMLElement("style")}}, e zero ou mais elementos {{HTMLElement("meta")}}.<br> + Quando o script está desativado e quando não é descendente do elemento {{HTMLElement("head")}} : qualquer conteúdo transparente, mas nenhum elemento <code><noscript></code> entre seus descendentes.<br> + Nos outros casos: conteúdo de fluxo ou conteúdo de texto.</li> + <li><dfn>Omissão da tag</dfn>Tags inicial e final obrigatórias.</li> + <li><dfn>Elemento pai permitidos</dfn> Qualquer elemento que aceite '<a href="/en-US/docs/HTML/Content_categories#Phrasing_content">contúdo de texto</a>' (<a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>), se não há um elemento <code><noscript></code> anterior ou em um elemento {{HTMLElement("head")}} (mas somente em um documento HTML), e também se não existe elemento <code><noscript></code> anterior.</li> + <li><dfn>Interface DOM</dfn> {{domxref("HTMLElement")}}</li> +</ul> + +<h2 id="Atributos">Atributos</h2> + +<p><span style="line-height: 21px;">Este elemento só inclui os </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">atributos globais</a><span style="line-height: 21px;">.</span></p> + +<h2 id="Exemplo">Exemplo</h2> + +<pre class="brush: html"><noscript> + <!-- referência a arquivo externo --> + <a href="http://www.mozilla.com/">Link Externo</a> +</noscript> +<p>Rocks!</p> +</pre> + +<h3 id="Resultado_com_o_script_ativado">Resultado com o script ativado</h3> + +<p>Rocks!</p> + +<h3 id="Resultado_com_o_script_desativado">Resultado com o script desativado</h3> + +<p><a class="external" href="http://www.mozilla.com/">Link Externo</a></p> + +<p>Rocks!</p> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'scripting-1.html#the-noscript-element', '<noscript>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'scripting-1.html#the-noscript-element', '<noscript>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/scripts.html#h-18.3.1', '<noscript>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/pt-br/web/html/element/ol/index.html b/files/pt-br/web/html/element/ol/index.html new file mode 100644 index 0000000000..4d69a5fe7c --- /dev/null +++ b/files/pt-br/web/html/element/ol/index.html @@ -0,0 +1,261 @@ +--- +title: <ol> +slug: Web/HTML/Element/ol +tags: + - Agrupamento de conteúdo HTML + - Elemento + - Guía + - 'HTML:Conteúdo flutuante' + - Listagem <ol> + - Referencia +translation_of: Web/HTML/Element/ol +--- +<h2 id="Sumário">Sumário</h2> + +<p>O <strong>Elemento HTML <ol></strong> (ou<em> Elemento HTML de lista ordenada</em>) representa uma lista de itens ordenados. De forma característica esses itens ordenados em uma lista são mostrados com uma contagem que os precede, que pode ser de qualquer tipo, como numerais, letras, algarismos romanos, ou simples símbolos. Esse modelo numerado não é definido na descrição html da página, mas na folha de estilos CSS associada, pela propriedade<code> </code>{{cssxref("list-style-type")}}. </p> + +<p>Não há limitação para a profundidade e a imbricação das listas definidas com os elementos<code> </code>{{HTMLElement("ol")}}<code> </code>e<code> </code>{{HTMLElement("ul")}}.</p> + +<div class="note"><strong>Nota de uso: </strong>Ambos os elementos<code> </code>{{HTMLElement("ol")}}<code> </code>e<code> </code>{{HTMLElement("ul")}}, representam uma lista de itens. Diferem porque, com o elemento<code> </code>{{HTMLElement("ol")}},<code> </code>a ordem é significativa. Como regra de ouro para determinar qual deles usar, tente mudar a ordem dos itens da lista; se a significação for alterada, o elemento<code> </code>{{HTMLElement("ol")}}<code> </code>deve ser utilizado, senão o elemento<code> </code>{{HTMLElement("ul")}}<code> </code>é adequado.</div> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categorias de conteúdo</a></dfn><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Phrasing_content">Flutuante</a> e no caso dos elementos filhos de<code> <ol> </code>incluirem pelo menos um elemento de conteúdo {{HTMLElement("li")}} evidente.</li> + <li><dfn>Conteúdo permitido</dfn> Zero ou mais elementos {{HTMLElement("li")}}</li> + <li><dfn>Omissão de etiqueta (<em>Tag</em>)</dfn> {{no_tag_omission}}</li> + <li><dfn>Elementos pai permitidos </dfn> Qualquer elemento que aceite <a href="/en-US/docs/HTML/Content_categories#flow_content" title="HTML/Content categories#flow content">conteúdo flutuante</a>.</li> + <li><dfn>Interface DOM</dfn> {{domxref("HTMLOListElement")}}</li> +</ul> + +<h2 id="Atributos">Atributos</h2> + +<p><span style="line-height: 21px;">Este elemento inclui os </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">atributos globais</a>.</p> + +<dl> + <dt>{{htmlattrdef("compact")}} {{Deprecated_inline}}</dt> + <dd>Este atributo boleano sugere que a lista deve ser renderizada em um estilo compacto. A interpretação deste atributo depende do perfil de navegação (<em>user agent</em>) e não funciona em todos os navegadores. {{noteStart}} Não utilize este atributo, pois ele se tornou obsoleto. O elemento<code> </code>{{HTMLElement("ol")}}<code> </code>deve ser estilizado usando <a href="/en-US/docs/CSS" title="CSS">CSS</a>. Para dar um efeito semelhante ao do atributo compacto, a propriedade <a href="/en-US/docs/CSS" title="CSS">CSS</a><code> </code>{{cssxref("line-height")}}<code> </code>pode ser utilizada com o valor de 80%.{{noteEnd}}</dd> + <dt>{{htmlattrdef("reversed")}} {{HTMLVersionInline(5)}}</dt> + <dd>Este atributo boleano especifica que as partes desta lista serão especificadas em ordem reversa, isto é, a menos importante será listada primeiro.</dd> + <dt>{{htmlattrdef("start")}}{{HTMLVersionInline(5)}}</dt> + <dd>Este atributo inteiro especifica o valor inicial para a numeração dos itens da lista. Embora o tipo de ordenação dos elementos possa ser com algarismos romanos, tal como XXXI, ou letras, o valor inicial sempre é representado como um inteiro. Para iniciar a contagem a partir da letra "C", utilize<code> </code><ol start="3">. + <div class="note"><strong>Nota</strong>: Este atributo, obsoleto na HTML4, foi reintroduzido na HTML5.</div> + </dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>Indica o tipo de numeração: + <ul> + <li><code>'a'</code> indica letras minúsculas,</li> + <li><code>'A'</code> indica letras maiúsculas,</li> + <li><code>'i'</code> indica algarismos romanos minúsculos,</li> + <li><code>'I'</code> indica algarismos romanos maiúsculos,</li> + <li>e <code>'1'</code> indica números (padrão).</li> + </ul> + + <p>O tipo de marcação é usado na lista inteira, a menos que um atributo<code> </code>{{htmlattrxref("type", "li")}}<code> </code>diferente seja utilizado dentro do elemento <code> </code>{{HTMLElement("li")}}.</p> + + <div class="note"><strong>Nota: </strong>Este atributo, obsoleto na HTML4, foi reintroduzido na HTML5. A menos que o valor do número na lista seja importante, a propriedade CSS<code> </code>{{cssxref("list-style-type")}}<code> </code>deve ser usada em seu lugar.</div> + </dd> +</dl> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Simple_example" name="Simple_example">Exemplo simples</h3> + +<pre class="brush: html"><ol> + <li>primeiro item</li> + <li>segundo item</li> + <li>terceiro item</li> +</ol> +</pre> + +<p>A saída HTML acima será:</p> + +<ol> + <li>primeiro item</li> + <li>segundo item</li> + <li>terceiro item</li> +</ol> + +<h3 id="Usando_o_atributo_start">Usando o atributo <em>start</em></h3> + +<pre class="brush: html"><ol start="7"> + <li>primeiro item</li> + <li>segundo item</li> + <li>terceiro item</li> +</ol> +</pre> + +<p>A saída HTML acima será:</p> + +<ol start="7"> + <li>primeiro item</li> + <li>segundo item</li> + <li>terceiro item</li> +</ol> + +<h3 id="Listas_aninhadas">Listas aninhadas</h3> + +<pre class="brush: html"><ol> + <li>primeiro item</li> + <li>segundo item <!-- Veja que a <em>tag</em> de fechamento </li> não é colocada aqui! --> + <ol> + <li>segundo item primeiro subitem</li> + <li>segundo item segundo subitem</li> + <li>segundo item terceiro subitem</li> + </ol> + </li> <!-- Aqui está a <em>tag</em> de fechamento </li> --> + <li>terceiro item</li> +</ol> +</pre> + +<p>A saída HTML acima será:</p> + +<ol> + <li>primeiro item</li> + <li>segundo item + <ol> + <li>segundo item primeiro subitem</li> + <li>segundo item segundo subitem</li> + <li>segundo item terceiro subitem</li> + </ol> + </li> + <li>terceiro item</li> +</ol> + +<h3 id="<ol>_e_<ul>_aninhados"><ol> e <ul> aninhados</h3> + +<pre class="brush: html"><ol> + <li>primeiro item</li> + <li>segundo item <!-- Observe que a <em>tag</em> de fechamento </li> não é colocada aqui! --> + <ul> + <li>segundo item primeiro subitem</li> + <li>segundo item segundo subitem</li> + <li>segundo item terceiro subitem</li> + </ul> + </li> <!-- Aqui está a <em>tag</em> de fechamento </li> --> + <li>terceiro item</li> +</ol> +</pre> + +<p>A saída HTML acima será:</p> + +<ol> + <li>primeiro item</li> + <li>segundo item + <ul> + <li style="list-style-type: square;">segundo item primeiro subitem</li> + <li style="list-style-type: square;">segundo item segundo subitem</li> + <li style="list-style-type: square;">segundo item terceiro subitem</li> + </ul> + </li> + <li>terceiro item</li> +</ol> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Situação</th> + <th scope="col">Observação</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-ol-element', '<ol>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "grouping-content.html#the-ol-element", "HTMLOListElement")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.2', '<ol>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidede_em_navegadores">Compatibilidede em navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th><span class="short_text" id="result_box" lang="pt"><span>Característica</span></span></th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>1.0</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>atributo revertido</td> + <td>18</td> + <td>{{CompatGeckoDesktop("18.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>5.2</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th><span class="short_text" id="result_box" lang="pt"><span>Característica</span></span></th> + <th>Android</th> + <th>Firefox Móvel (Gecko)</th> + <th>IE Móvel</th> + <th>Opera Móvel</th> + <th>Safari Móvel</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>atributo revertido</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("18.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>Outros elementos HTML relacionados à lista:<code> </code>{{HTMLElement("ul")}}, {{HTMLElement("li")}},<code> </code>{{HTMLElement("menu")}}<code> </code>e o obsoleto<code> </code>{{HTMLElement("dir")}};</li> + <li>Propriedades CSS que podem ser especialmente úteis para determinar o modelo do elemento<code> <ol></code>: + <ul> + <li>a propriedade<code> </code>{{cssxref("list-style")}},<code> </code><span class="st">conveniente</span> para escolher a forma como os ordinais são exibidos,</li> + <li><a href="/en-US/docs/CSS_Counters" title="CSS_Counters">contadores CSS</a>, útil para gerenciar listas complexas aninhadas,</li> + <li>a propriedade<code> </code>{{cssxref("line-height")}},<code> </code><span class="st">proficiente</span> para simular o atributo obsoleto<code> </code>{{htmlattrxref("compact", "ol")}},</li> + <li>a propriedade<code> </code>{{cssxref("margin")}},<code> </code><span class="st">aplicável</span> para controlar a indentação da lista.</li> + </ul> + </li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/pt-br/web/html/element/optgroup/index.html b/files/pt-br/web/html/element/optgroup/index.html new file mode 100644 index 0000000000..d202ff732b --- /dev/null +++ b/files/pt-br/web/html/element/optgroup/index.html @@ -0,0 +1,131 @@ +--- +title: <optgroup> +slug: Web/HTML/Element/optgroup +tags: + - Element + - Elemento + - Forms + - HTML + - HTML forms + - Reference + - Web +translation_of: Web/HTML/Element/optgroup +--- +<h2 id="Sumário">Sumário</h2> +<p>Em um Formulário Web, o elemento HTML <code><optgroup></code> cria um agrupamento de opções dentro do elemento {{HTMLElement("select")}}.</p> +<ul class="htmlelt"> + <li><dfn><a href="/pt-BR/docs/HTML/Content_categories" title="HTML/Content_categories">Categorias de conteúdo</a></dfn> Nenhuma.</li> + <li><dfn>Conteúdo permitido</dfn>Nenhum ou mais elementos do tipo {{HTMLElement("option")}}.</li> + <li><dfn>Omissão da tag</dfn>A abertura da tag é obrigatória. O fechamento da tag é opcional se o elemento é imediatamente seguido de de outro elemento <span style="font-family: Courier New;"><optgroup></span>, ou se o elemento pai não tiver nenhum conteúdo.</li> + <li><dfn>Elemento pai permitido</dfn>Um elemento {{HTMLElement("select")}}.</li> + <li><dfn>Interface DOM</dfn> {{domxref("HTMLOptGroupElement")}}</li> +</ul> +<p>{{Note("Elementos do tipo <strong>optgroup</strong> não podem ser aninhados.")}}</p> +<h2 id="Atributos">Atributos</h2> +<p><span style="line-height: 21px;"><span class="short_text" id="result_box" lang="pt"><span class="hps">Este</span> <span class="hps">elemento</span> <span class="hps">inclui</span> <span class="hps">os</span><a href="/pt-BR/docs/HTML/Global_attributes"> <span class="hps">atributos</span> <span class="hps">globais</span></a><span class="hps">.</span></span></span></p> +<dl> + <dt> + {{htmlattrdef("disabled")}}</dt> + <dd> + <span id="result_box" lang="pt"><span class="hps">Se este</span> <span class="hps">atributo booleano</span> <span class="hps">for definido,</span> nenhum dos itens neste <strong>optgroup</strong> poderá ser selecionado</span>. Muitos navegadores marcam como cinza e não permitem que o elemento receba nenhum evento de navegação, como cliques do mouse ou foco.</dd> + <dt> + {{htmlattrdef("label")}}</dt> + <dd> + É o nome do optgroup, é o que os navegadores irão exibir como rótulo. Este atributo é obrigatório se o elemento for usado.</dd> +</dl> +<h2 id="Exemplo">Exemplo</h2> +<pre class="brush: html"><select> + <optgroup label="Grupo 1"> + <option>Opção 1.1</option> + </optgroup> + <optgroup label="Grupo 2"> + <option>Opção 2.1</option> + <option>Opção 2.2</option> + </optgroup> + <optgroup label="Grupo 3" disabled> + <option>Opção 3.1</option> + <option>Opção 3.2</option> + <option>Opção 3.3</option> + </optgroup> +</select> +</pre> +<h3 id="Resultado">Resultado</h3> +<p>{{EmbedLiveSample("Exemplo")}}</p> +<h2 id="Especificações">Especificações</h2> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-optgroup-element', '<optgroup>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-optgroup-element', '<optgroup>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '<optgroup>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade com navegadores</h2> +<p>{{CompatibilityTable}}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> + </table> +</div> +<h2 id="Veja_também">Veja também</h2> +<ul> + <li>Outros elementos de formularios relacionados: {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("option")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} e {{HTMLElement("meter")}}.</li> +</ul> +<p>{{HTMLRef}}</p> diff --git a/files/pt-br/web/html/element/option/index.html b/files/pt-br/web/html/element/option/index.html new file mode 100644 index 0000000000..887a8f8272 --- /dev/null +++ b/files/pt-br/web/html/element/option/index.html @@ -0,0 +1,122 @@ +--- +title: <option> +slug: Web/HTML/Element/option +translation_of: Web/HTML/Element/option +--- +<h2 id="Sumário">Sumário</h2> +<p>Em um formulário Web, o <strong>elemento HTML</strong> <code><option></code> é usado para criar um controle que representa um item dentro de um elemento HTML5 {{HTMLElement("select")}}, {{HTMLElement("optgroup")}} ou {{HTMLElement("datalist")}}.</p> +<ul class="htmlelt"> + <li><dfn><a href="/pt-BR/docs/Web/HTML/Categorias_de_conteúdo" title="HTML/Categorias_de_conteúdo">Categorias de conteúdo</a></dfn> Nenhuma.</li> + <li><dfn>Conteúdo permitido</dfn> Texto com caracteres escapados (como <code>&eacute;</code>) ocasionalmente.</li> + <li><dfn>Omissão de tags</dfn> A tag de abertura é obrigatória. A tag de fechamento é opcional se este elemento é imediatamente seguido por um outro elemento <code><option></code> ou um {{HTMLElement("optgroup")}}, ou se o elemento pai não tem mais nenhum conteúdo.</li> + <li><dfn>Elementos pai permitidos</dfn> {{HTMLElement("select")}}, {{HTMLElement("optgroup")}} ou {{HTMLElement("datalist")}}.</li> + <li><dfn>Interface DOM</dfn> {{domxref("HTMLOptionElement")}}</li> +</ul> +<h2 id="Atributos">Atributos</h2> +<p>Este elemento inclui os <a href="/pt-BR/docs/Web/HTML/Atributos_globais" title="HTML/Atributos globais">atributos globais</a>.</p> +<dl> + <dt> + {{htmlattrdef("disabled")}}</dt> + <dd> + Se este atributo booleano estiver definido, esta opção não é selecionável. Frequentemente navegadores acinzentam este tipo de controle, e ele deixa de receber quaisquer eventos de navegação, como cliques do mouse ou eventos relacionados a foco. Se este atributo não estiver definido, o elemento ainda pode ser desabilitado se um de seus ancestrais é um elemento {{HTMLElement("optgroup")}} desabilitado.</dd> + <dt> + {{htmlattrdef("label")}}</dt> + <dd> + Este atributo é o texto para o rótulo indicando o significado da opção. Se o atributo <strong>label</strong> não estiver definido, seu valor é o conteúdo de texto do elemento.<br> + <div class="note"> + <em>Nota de uso: </em>o atributo <strong>label</strong> é projetado para conter um rótulo curto tipicamente usado num menu hierárquico. O atributo <strong>value</strong> descreve descreve um rótulo maior, designado para ser usado perto de um botão de escolha, por exemplo.</div> + </dd> + <dt> + {{htmlattrdef("selected")}}</dt> + <dd> + Se presente, este atributo booleano indica que a opção está selecionada inicialmente. Se o elemento <code><option></code> for descendente de um elemento {{HTMLElement("select")}} cujo atributo {{htmlattrxref("multiple", "select")}} não está definido, apenas um único <code><option></code> deste elemento {{HTMLElement("select")}} pode ter o atributo <strong>selected</strong>.</dd> + <dt> + {{htmlattrdef("value")}}</dt> + <dd> + O conteúdo textual deste atributo representa o rótulo que explica a opção. Se ele não estiver definido, seu valor padrão é o texto contido no elemento. + <div class="note"> + <em>Nota de uso:</em> o atributo <strong>label</strong> é projetado para conter um rótulo curto tipicamente usado num menu hierárquico. O atributo <strong>value</strong> descreve descreve um rótulo maior, designado para ser usado perto de um botão de escolha, por exemplo.</div> + </dd> +</dl> +<h2 id="Exemplos">Exemplos</h2> +<p>Veja os exemplos do elemento {{HTMLElement("select")}}.</p> +<h2 id="Especificações" name="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', 'the-button-element.html#the-option-element', '<option>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-option-element', '<option>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '<option>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> +<h2 id="Compatibilidade_de_navegadores" name="Compatibilidade_de_navegadores">Compatibilidade de navegadores</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 (WebKit)</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1.0")}} [1]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidade</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}} [1]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> + </table> +</div> +<h3 id="Notas_do_Gecko">Notas do Gecko</h3> +<p>[1] Antes do Gecko 7.0, {{geckoRelease("7.0")}}, o atributo label devolvia incorretamente uma string vazia, se não definido, em vez de devolver o texto contido no elemento.</p> +<h2 id="Veja_também">Veja também</h2> +<ul> + <li>Outros elementos relacionados a formulários: {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} e {{HTMLElement("meter")}}.</li> +</ul> +<p>{{HTMLRef}}</p> diff --git a/files/pt-br/web/html/element/output/index.html b/files/pt-br/web/html/element/output/index.html new file mode 100644 index 0000000000..333a6dd671 --- /dev/null +++ b/files/pt-br/web/html/element/output/index.html @@ -0,0 +1,123 @@ +--- +title: Output +slug: Web/HTML/Element/Output +tags: + - Elemento + - Formulário HTML + - HTML + - HTML5 + - Internet + - Rede + - Referencia + - Web +translation_of: Web/HTML/Element/output +--- +<h2 id="Sumário">Sumário</h2> + +<p>O elemento de saída (<output>) é um elemento no qual um site ou aplicativo pode injetar os resultados de um cálculo ou o resultado de uma ação do usuário.</p> + +<table class="standard-table"> + <tbody> + <tr> + <td>Categorias de conteúdo</td> + <td><a href="/en/HTML/Content_categories#Flow_content" title="en/HTML/Content categories#Flow content">Flow content</a>, <a href="/en/HTML/Content_categories#Phrasing_content" title="en/HTML/Content categories#Phrasing content">phrasing content</a>, <a href="/en/HTML/Content_categories#form_listed" title="en/HTML/Content categories#form listed">listed</a>, <a href="/en/HTML/Content_categories#form_labelable" title="en/HTML/Content categories#form labelable">labelable</a>, <a href="/en/HTML/Content_categories#form_resettable" title="en/HTML/Content categories#form resettable">resettable</a> <a href="/en/HTML/Content_categories#Form-associated_content" title="en/HTML/Content categories#Form-associated content">form-associated element</a>.</td> + </tr> + <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>Omissão de tag</td> + <td>Precisa ter ambas as tags de início e fim.</td> + </tr> + <tr> + <td>Documento normativo</td> + <td><a class="external" href="http://www.w3.org/TR/html5/the-button-element.html#the-output-element" title="http://www.w3.org/TR/html5/the-button-element.html#the-output-element">HTML5, section 4.10.15</a></td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Como qualquer elemento HTML, este elemento suporta os <a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">global attributes</a>.</p> + +<dl> + <dt>{{ htmlattrdef("for") }}</dt> + <dd>Uma lista de IDs de outros elementos, indicando que estes elementos contribuiram com valores de entrada (input) para o cálculo (ou outros afetados).</dd> + <dt>{{ htmlattrdef("form") }}</dt> + <dd>O elemento form ao qual este elemento está associado (seu "proprietário do formulário"). O valor do atributo deve ser um ID de um elemento form no mesmo documento. Se este atributo não está especificado, o elemento output deve ser descendente de um elemento form. Este atributo permite que você coloque elementos output em qualquer lugar em um documento, não apenas como descendentes de seus elementos form.</dd> + <dt>{{ htmlattrdef("name") }}</dt> + <dd>O nome do elemento.</dd> +</dl> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>O elemento implementa a interface <a href="/en/DOM/HTMLOutputElement" title="en/DOM/HTMLOutputElement">HTMLOutputElement</a> .</p> + +<h2 id="Exemplo">Exemplo</h2> + +<pre><form oninput="result.value=parseInt(a.value)+parseInt(b.value)"> +0<input type="range" name="b" value="50" />100 +<input type="number" name="a" value="10" /> = +<output name="result"></output> +</form> +</pre> + +<h2 id="Compatibilidade">Compatibilidade</h2> + +<p>{{CompatibilityTable}}</p> + +<p>{{Compat("html.elements.output")}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>10</td> + <td>{{ CompatGeckoDesktop("2.0") }}</td> + <td>10</td> + <td>11</td> + <td>nightly</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoDesktop("2.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<p>Outros elementos relacionados ao form: {{ HTMLElement("form") }}, {{ HTMLElement("input") }}, {{ HTMLElement("button") }}, {{ HTMLElement("datalist") }}, {{ HTMLElement("legend") }}, {{ HTMLElement("label") }}, {{ HTMLElement("select") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("progress") }} and {{ HTMLElement("meter") }}.</p> + +<div>{{ HTMLRef }}</div> + +<div>{{ languages({"en":"en/HTML/Element/output", "fr":"fr/HTML/Element/output", "ja":"ja/HTML/Element/output" }) }}</div> diff --git a/files/pt-br/web/html/element/p/index.html b/files/pt-br/web/html/element/p/index.html new file mode 100644 index 0000000000..df723b9d01 --- /dev/null +++ b/files/pt-br/web/html/element/p/index.html @@ -0,0 +1,152 @@ +--- +title: <p> O elemento Parágrafo +slug: Web/HTML/Element/p +translation_of: Web/HTML/Element/p +--- +<p><span class="seoSummary">O <strong>elemento HTML</strong> <strong> <code><p></code></strong> representa um parágrafo. Em mídias visuais, parágrafos são representados como blocos indentados de texto com a primeira letra avançada e separados por linhas em branco. Já em HTML, parágrafos são usados para agrupar conteúdos relacionados de qualquer tipo, como imagens e campos de um formulário.<br> + <br> + Parágrafos são <a href="/pt-BR/docs/Web/HTML/Elementos_block-level">Elementos block-level</a>, e fecharão automaticamente caso outro <a href="/pt-BR/docs/Web/HTML/Elementos_block-level">Elemento block-level</a> inicie antes da tag de fechamento <code></p></code>. Veja "Omissão de tag" abaixo.</span></p> + +<ul class="htmlelt"> + <li><dfn><a href="/pt-BR/docs/Web/Guide/HTML/Categorias_de_conteudo">Categorias de conteúdo</a></dfn><br> + <a href="/pt-BR/docs/Web/Guide/HTML/Categorias_de_conteudo#Conteúdo_de_fluxo">Conteúdos de fluxo</a>, conteúdos palpáveis.</li> + <li><dfn>Conteúdo permitido</dfn><a href="https://developer.mozilla.org/pt-BR/docs/Web/Guide/HTML/Categorias_de_conteudo#Conte%C3%BAdo_fraseado">Conteúdo frasal</a>.</li> + <li><dfn>Omissão de tag</dfn> A tag de abertura é obrigatória. A tag de fechamento pode ser omitida caso o elemento {{HTMLElement("p")}} seja imediatamente sucedido pelos elementos {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hr")}}, {{HTMLElement("menu")}}, {{HTMLElement("nav")}}, {{HTMLElement("ol")}}, {{HTMLElement("pre")}}, {{HTMLElement("section")}}, {{HTMLElement("table")}}, {{HTMLElement("ul")}}, ou por outro elemento {{HTMLElement("p")}}, ou, caso não haja mais conteúdo no elemento pai e o elemento pai não for um elemento {{HTMLElement("a")}}.</li> + <li><dfn>Elementos pai permitidos</dfn> Qualquer elemento que aceite <a href="https://developer.mozilla.org/pt-BR/docs/Web/Guide/HTML/Categorias_de_conteudo#Conte%C3%BAdo_de_fluxo">conteúdo de fluxo</a>.</li> + <li><dfn>Interface DOM</dfn> {{domxref("HTMLParagraphElement")}}</li> +</ul> + +<h2 id="Atributos" name="Atributos">Atributos</h2> + +<p>Este elemento inclui <a href="/pt-BR/docs/Web/HTML/Global_attributes">atributos globais</a>.</p> + +<div class="note"> +<p><strong>Obs.:</strong> O atributo <code>align</code> nas tags <code><p></code> está obsoleto e não deve ser usado.</p> +</div> + +<h2 id="Exemplo" name="Exemplo">Exemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>Este é o primeiro parágrafo do texto. Este é o primeiro parágrafo do texto. + Este é o primeiro parágrafo do texto. Este é o primeiro parágrafo do texto.</p> + +<p>Este é o segundo parágrafo do texto. Este é o segundo parágrafo do texto. + Este é o segundo parágrafo do texto. Este é o segundo parágrafo do texto.</p></pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample('Exemplo')}}</p> + +<h2 id="Estilizando_Parágrafos" name="Estilizando_Parágrafos">Estilizando Parágrafos</h2> + +<h3 id="HTML_2">HTML</h3> + +<pre class="brush: html"><p>Parágrafos separados por linhas em branco são mais legíveis. Porém, +também podemos distinguir parágrafos indentando suas primeiras linhas. +Uma abordagem que ocupa menos espaço e é usada para economizar +papel quando impresso.</p> + +<p>Em textos que serão editados, como trabalhos escolares e rascunhos, +usamos tanto as linhas em branco quanto a indentação para +distinguirmos cada parágrafo. Já em publicações, usar ambas +é considerado redundante e amadoresco.</p> + +<p>Em textos arcaicos usava-se o caractere especial: ¶, +o <i><strong>caldeirão</strong></i>, para separar parágrafos. Atualmente, esta abordagem +é considerada claustrofóbica e ilegível.</p> + +<p>Será mesmo que é ilegível? Clique para visualizar: + <button data-toggle-text="Que horrível! Mudar de volta!">Usar caldeirão nos parágrafos</button> +</p> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">p { + margin: 0; + text-indent: 3ch; +} + +p.caldeirao { + text-indent: 0; + display: inline; +} +p.caldeirao + p.caldeirao::before { + content: " ¶ "; +}</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">document.querySelector('button').addEventListener('click', function (event) { + document.querySelectorAll('p').forEach(function (paragraph) { + paragraph.classList.toggle('caldeirao'); + }); + var newButtonText = event.target.dataset.toggleText; + var oldText = event.target.innerText; + event.target.innerText = newButtonText; + event.target.dataset.toggleText = oldText; +});</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample('Estilizando_Parágrafos')}}</p> + +<h2 id="Considerações_acerca_da_Acessibilidade" name="Considerações_acerca_da_Acessibilidade">Considerações acerca da Acessibilidade</h2> + +<p>Subdividir um conteúdo em parágrafos torna um texto mais acessível. Leitores de tela e outras tecnologias assistivas providenciam atalhos que permitem a navegação entre parágrafos. Possibilitando, então, uma leitura rápida do texto.<br> + <br> + Utilizar elementos <code><p></code> vazios para adicionar linhas em branco entre parágrafos é uma abordagem problemática para os que dependem das tecnologias leitoras de tela. O leitor anunciará a existência de um parágrafo, mas não lerá nenhum conteúdo, pois não há. Isso confunde e frustra os que dependem dos leitures de tela.</p> + +<p>Se desejas mais espaço, use {{glossary("CSS")}} propriedades como {{cssxref("margin")}} para recriar o efeito:</p> + +<pre class="brush: css">p { + margin-bottom: 2em; // aumenta o espaço em branco após um parágrafo +} +</pre> + +<h2 id="Especificações" name="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-p-element', '<p>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Nenhuma alteração desde a última w3c {{SpecName("HTML5 W3C")}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-p-element', '<p>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Atributo <code>align</code> está obsoleto</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.1', '<p>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Definição inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_dos_navegadores" name="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</h2> + +<div class="hidden"> +<p>A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você quiser contribuir com os dados confira <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> +</div> + +<div></div> + +<div>{{Compat("html.elements.p")}}</div> + +<h2 id="Veja_também" name="Veja_também">Veja também</h2> + +<ul> + <li>{{HTMLElement("hr")}}</li> + <li>{{HTMLElement("br")}}</li> +</ul> diff --git a/files/pt-br/web/html/element/picture/index.html b/files/pt-br/web/html/element/picture/index.html new file mode 100644 index 0000000000..580c7ec216 --- /dev/null +++ b/files/pt-br/web/html/element/picture/index.html @@ -0,0 +1,148 @@ +--- +title: <picture> +slug: Web/HTML/Element/picture +tags: + - Elemento + - HTML + - Imagens + - Referencia + - Web + - picture +translation_of: Web/HTML/Element/picture +--- +<p>O <strong> elemento HTML <code><picture></code></strong> é um container usado para especificar múltiplos elementos {{HTMLElement("source")}} para um elemento específico {{HTMLElement("img")}} contido nele. O navegador irá escolher a imagem mais adequada de acordo com o layout atual da página, <span id="result_box" lang="pt"><span>caracteristicas do dispositivo em que será exibido (p.e. um dispositivo normal ou um hiDPI), e a habilidade do navegador de renderizar um certo tipo de imagem (p.e., envie uma imagem WebP para os navegadores baseados no Chromium ou PNG para navegadores não-Chromium); se não houver correspondência entre os elementos </span></span>{{HTMLElement("source")}}, o arquivo especificado pelo elemento <code><img></code> será selecionado. A imagem selecionada é então exibida no espaço ocupado pelo elemento <code><img></code>.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/pt-BR/docs/Web/Guide/HTML/Categorias_de_conteudo">Categorias de conteúdo</a></th> + <td><a href="/pt-BR/docs/Web/Guide/HTML/Categorias_de_conteudo#Conteúdo_de_fluxo">Conteúdo de fluxo</a>, <a href="/pt-BR/docs/Web/Guide/HTML/Categorias_de_conteudo#Conteúdo_fraseado">conteúdo fraseado</a>, <a href="/pt-BR/docs/Web/Guide/HTML/Categorias_de_conteudo#Conteúdo_embutido">conteúdo embutido</a></td> + </tr> + <tr> + <th scope="row">Conteúdo permitido</th> + <td>Zero ou mais elementos {{HTMLElement("source")}}, seguidos de um elemento {{HTMLElement("img")}}, opcionalmente mesclado com elementos de suporte para scripts (por exemplo, {{HTMLElement("script")}} e {{HTMLElement("template")}}).</td> + </tr> + <tr> + <th scope="row">Omissão de tag</th> + <td>Nenhuma, as tags de abertura e fechamento são mandatórias</td> + </tr> + <tr> + <th scope="row">Parentes permitidos</th> + <td>Qualquer elemento que permita conteúdo embutido (embedded).</td> + </tr> + <tr> + <th scope="row">Papéis ARIA permitidos</th> + <td>Nenhum</td> + </tr> + <tr> + <th scope="row">Interface do DOM</th> + <td>{{domxref("HTMLPictureElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Esse elemento só inclui <a href="/pt-BR/docs/Web/HTML/Global_attributes">elementos globais</a>.</p> + +<h2 id="Exemplo_1_Uso_com_atributo_media">Exemplo 1: Uso com atributo <code>media</code> </h2> + +<p>O atributo <code>media</code> permite você especificar uma media query que o navegador irá avaliar para selecionar um elemento {{HTMLElement("source")}} . Se a media query retornar <code>falso</code>, o elemento {{HTMLElement("source")}} é ignorado.</p> + +<pre class="brush: html"><picture> + <source srcset="mdn-logo-wide.png" media="(min-width: 600px)"> + <img src="mdn-logo-narrow.png" alt="MDN"> +</picture> +</pre> + +<h2 id="Exemplo_2_Uso_com_atributo_type">Exemplo 2: Uso com atributo type</h2> + +<p>O atributo <code>type</code> lhe permite especificar um tipo MIME para o(s) recurso(s) fornecido(s) no atributo srcset do elemento {{HTMLElement("source")}}. Se o navegador não suporta o tipo especificado, o elemento {{HTMLElement("source")}} é ignorado.</p> + +<pre class="brush: html"><picture> + <source srcset="mdn-logo.svg" type="image/svg+xml"> + <img src="mdn-logo.png" alt="MDN"> +</picture> +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-picture-element','<picture>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_entre_navegadores">Compatibilidade entre navegadores</h2> + +<p><span id="result_box" lang="pt"><span>A tabela de compatibilidade nesta página é gerada a partir de dados estruturados.</span> <span>Se você quiser contribuir com os dados, acesse <a href="/pt-BR/docs/">https://github.com/mdn/browser-compat-data</a> e envie-nos um <em>pull request</em>.</span></span></p> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>38</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("38")}}</td> + <td>Edge 13</td> + <td>25</td> + <td>9.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>38</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("38")}}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>iOS 9.3</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{HTMLElement("img")}} element</li> + <li>{{HTMLElement("source")}} element</li> +</ul> diff --git a/files/pt-br/web/html/element/pre/index.html b/files/pt-br/web/html/element/pre/index.html new file mode 100644 index 0000000000..80ef9883b7 --- /dev/null +++ b/files/pt-br/web/html/element/pre/index.html @@ -0,0 +1,191 @@ +--- +title: <pre> +slug: Web/HTML/Element/pre +translation_of: Web/HTML/Element/pre +--- +<h2 id="Resumo">Resumo</h2> + +<p><em>HTML texto preformatado</em> (<strong><pre></strong>) é a tag utilizada para representar texto pré-formatado. Um texto dentro desse elemento é tipicamente exibido em uma fonte não proporcional da mesma maneira em que o texto original foi disposto no arquivo. Espaços em branco são mantidos no texto da mesma forma em que este foi digitado. </p> + +<p><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Phrasing_content">Flow content</a>, palpable content.</p> + +<ul class="htmlelt"> + <li><dfn>Conteúdo permitido</dfn> <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="/en-US/docs/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</li> + <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li> + <li><dfn>Elementos pai permitidos</dfn> Any element that accepts <a href="/en-US/docs/HTML/Content_categories#flow_content" title="HTML/Content categories#flow content">flow content</a>.</li> + <li><dfn>interface DOM</dfn> {{domxref("HTMLPreElement")}}</li> +</ul> + +<h2 id="Atributos">Atributos</h2> + +<p>Esse elemento apenas inclui atributos globais.</p> + +<p>This element only includes the <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">global attributes</a>.</p> + +<dl> + <dt>{{htmlattrdef("cols")}} {{non-standard_inline}}{{obsolete_inline}}</dt> + <dd>Contains the <em>preferred</em> count of characters that a line should have. It was a non-standard synonym of {{htmlattrxref("width", "pre")}}. To achieve such an effect, use CSS styling instead.</dd> + <dt>{{htmlattrdef("width")}} {{obsolete_inline}}</dt> + <dd>Contains the <em>preferred</em> count of characters that a line should have. Though technically still implemented, this attribute has no visual effect; to achieve such an effect, use CSS styling instead.</dd> + <dt>{{htmlattrdef("wrap")}} {{non-standard_inline}}</dt> + <dd>Is a <em>hint</em> indicating how the overflow must happen. In modern browser this hint is ignored and no visual effect results in its present; to achieve such an effect, use CSS styling instead.</dd> +</dl> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush: html"><!-- Um exemplo de código css --> +<pre> +body { + color:red; +} +</pre> +</pre> + +<h3 id="Resultado">Resultado</h3> + +<pre>body { + color:red; +} +</pre> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-pre-element', '<pre>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Nenhuma mudança significante na {{SpecName("HTML WHATWG")}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-pre-element', '<pre>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Nenhuma mudança significante na {{SpecName("HTML4.01")}}</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.4', '<dl>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td><code>Atributto cols</code> obsoleto</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade de navegador</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>width</code></td> + <td>{{CompatVersionUnknown}}<br> + No layout effect</td> + <td>{{CompatGeckoDesktop("1.0")}}<br> + Layout effect removed in {{CompatGeckoDesktop("29.0")}}</td> + <td>{{CompatVersionUnknown}}<br> + No layout effect</td> + <td>{{CompatVersionUnknown}}<br> + No layout effect</td> + <td>{{CompatVersionUnknown}}<br> + No layout effect</td> + </tr> + <tr> + <td><code>cols</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("1.0")}}<br> + Removed in {{CompatGeckoDesktop("29.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>wrap</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>width</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}<br> + Layout effect removed in {{CompatGeckoMobile("29.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>cols</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>wrap</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_mais">Veja mais</h2> + +<ul> + <li>CSS: {{ Cssxref('white-space') }}, {{ Cssxref('word-break') }}</li> +</ul> + +<div>{{ HTMLRef }}</div> diff --git a/files/pt-br/web/html/element/progress/index.html b/files/pt-br/web/html/element/progress/index.html new file mode 100644 index 0000000000..7fb60e4198 --- /dev/null +++ b/files/pt-br/web/html/element/progress/index.html @@ -0,0 +1,83 @@ +--- +title: progress +slug: Web/HTML/Element/progress +translation_of: Web/HTML/Element/progress +--- +<p>o elemento HTML progress (<progress>) é usado para visualizar o progresso de uma tarefa. Embora as especifidades de como é mostrado ficam a cargo do desenvolvedor, tipicamente, é mostrado 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">Conteúdo de texto</a></td> + </tr> + <tr> + <td>Omissão de Tag</td> + <td>Nenhum, ambas as tags (abertura e encerramento) são obrigatórias</td> + </tr> + <tr> + <td>Elemento pai permitido</td> + <td>Conteúdo fraseado (phrasing content), mas não deve haver descendentes do 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, seção 4.10.16</a></td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Como todos os outros elementos HTML, este elemento tem os atributos globais <a href="https://developer-new.mozilla.org/en/HTML/Global_attributes" title="https://developer-new.mozilla.org/en/HTML/Global_attributes">(global attributes</a>)</p> + +<dl> + <dt>{{ htmlattrdef("max") }}</dt> + <dd>Este atributo descreve quanto trabalho é demandado pela tarefa indicada pelo elemento progress.</dd> + <dt>{{ htmlattrdef("value") }}</dt> + <dd>Este atributo especifica quanto da tarefa foi concluído. Se este não existir, a barra de progresso é indeterminada; isso indica que uma atividade está em progresso sem previsão de quanto tempo é esperado para que seja concluída.</dd> +</dl> + +<p>Você pode usar a propriedade {{ cssxref("orient") }} para especificar se a barra de progresso deve ser renderizada horizontalmente (padrão) ou verticalmente. A pseudo-classe {{ cssxref(":indeterminate") }} pode ser associada a barras de progresso indeterminadas.</p> + +<dl> +</dl> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Este elemento implementa a interface HTMLProgressElement.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush: html"><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 Mac OS X, o progresso resultante deve aparecer assim:</p> + +<p><img alt="progress-1.png" class="default internal" src="/@api/deki/files/4946/=progress-1.png"></p> + +<p>No Windows, o progresso resultante deve aparecer assim:</p> + +<p><img alt="progress-firefox.JPG" class="default internal" src="/@api/deki/files/6031/=progress-firefox.JPG"></p> + +<h3 id="Exemplos_adicionais">Exemplos adicionais</h3> + +<p>Veja {{ cssxref("orient") }}.</p> + +<h2 id="Compatibilidade_de_Browsers">Compatibilidade de Browsers</h2> + + + +<p>{{Compat("html.elements.progress")}}</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-br/web/html/element/q/index.html b/files/pt-br/web/html/element/q/index.html new file mode 100644 index 0000000000..a4d0bfe4da --- /dev/null +++ b/files/pt-br/web/html/element/q/index.html @@ -0,0 +1,116 @@ +--- +title: <q> +slug: Web/HTML/Element/q +tags: + - Elemento + - HTML + - Referência(2) + - Semântica(2) + - Web +translation_of: Web/HTML/Element/q +--- +<div>{{HTMLRef}}</div> + +<div>O elemento HTML <q> indica que o texto dentro da tag é uma pequena citação. Este elemento destina-se a citações curtas que não requerem marcações de parágrafo; para citações maiores use o elemento {{HTMLElement("blockquote")}}.</div> + +<div> </div> + +<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">Fluxo de conteúdo</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">conteúdo textual</a>, conteúdo palpável.</td> + </tr> + <tr> + <th scope="row">Conteúdo permitido</th> + <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content">Conteúdo textual</a>.</td> + </tr> + <tr> + <th scope="row">Omissão de tag</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Parents permitidos</th> + <td>Qualquer elemento que aceite <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">conteúdo textual</a>.</td> + </tr> + <tr> + <th scope="row">Atributos ARIA permitidos</th> + <td>Qualquer</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLQuoteElement")}}</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Nota:</strong> A maioria dos browsers modernos adicionará automaticamente marcas de citação em volta do texto dentro de um elemento <code><q></code>. Talvez seja necessário criar uma regra de estilo para adicionar marcas de citação em browsers antigos.</p> +</div> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento inclui os <a href="/en-US/docs/HTML/Global_attributes">atributos globais</a>.</p> + +<dl> + <dt>{{htmlattrdef("cite")}}</dt> + <dd>O valor deste atributo é uma URL que designa uma fonte ou mensagem para a informação citada. A intenção deste atributo é indicar a informação e explicar o contexto ou referência para a citação.</dd> +</dl> + +<h2 id="Exemplo">Exemplo</h2> + +<h3 id="Conteúdo_HTML">Conteúdo HTML</h3> + +<pre class="brush: html"><p>According to Mozilla's website, + <q + cite="https://www.mozilla.org/en-US/about/history/details/">Firefox 1.0 + was released in 2004 and became a big success.</q></p> +</pre> + +<p>{{ EmbedLiveSample('Example') }}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-q-element', '<q>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-q-element', '<q>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.2', '<q>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Definição inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h2> + +<div> + + +<p>{{Compat("html.elements.q")}}</p> +</div> + +<p> </p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>O elemento {{HTMLElement("blockquote")}} para longas citações.</li> + <li>O elemento {{HTMLElement("cite")}} para citar fontes.</li> +</ul> diff --git a/files/pt-br/web/html/element/rt/index.html b/files/pt-br/web/html/element/rt/index.html new file mode 100644 index 0000000000..7907865825 --- /dev/null +++ b/files/pt-br/web/html/element/rt/index.html @@ -0,0 +1,96 @@ +--- +title: <rt> +slug: Web/HTML/Element/rt +translation_of: Web/HTML/Element/rt +--- +<h2 id="Summary" name="Summary">Summary</h2> +<p>The <strong>HTML <code><rt></code> Element</strong> embraces pronunciation of character presented in a ruby annotations, which are for showing pronunciation of East Asian characters and the <code><rt></code> element is used inside of {{ HTMLElement("ruby") }} element.</p> +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn> None.</li> + <li><dfn>Permitted content</dfn> <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Phrasing content</a>.</li> + <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li> + <li><dfn>Permitted parent elements</dfn> A {{HTMLElement("ruby")}} element.</li> + <li><dfn>DOM interface</dfn> {{domxref("HTMLElement")}}</li> +</ul> +<h2 id="Attributes" name="Attributes">Attributes</h2> +<p><span style="line-height: 21px;">This element only includes the </span><a href="/en-US/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p> +<h2 id="Example" name="Example">Example</h2> +<pre class="brush: html"><ruby> + 漢 <rt>Kan</rt> + 字 <rt>ji</rt> +</ruby> +</pre> +<h2 id="Specifications" name="Specifications">Specifications</h2> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-rt-element', '<rt>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'the-rt-element.html#the-rt-element', '<rt>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> +<h2 id="Browser_compatibility">Browser compatibility</h2> +<p>{{CompatibilityTable}}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>5.0</td> + <td>{{CompatNo}}</td> + <td>5.0</td> + <td>{{CompatNo}}</td> + <td>5.0</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> + </table> +</div> +<h2 id="See_also" name="See_also">See also</h2> +<ul> + <li>{{HTMLElement("ruby")}}</li> + <li>{{HTMLElement("rp")}}</li> +</ul> +<p>{{ HTMLRef }}</p> diff --git a/files/pt-br/web/html/element/ruby/index.html b/files/pt-br/web/html/element/ruby/index.html new file mode 100644 index 0000000000..4e055666cc --- /dev/null +++ b/files/pt-br/web/html/element/ruby/index.html @@ -0,0 +1,124 @@ +--- +title: <ruby> +slug: Web/HTML/Element/ruby +tags: + - Elemento + - HTML + - Referencia + - Semântica HTML + - Web +translation_of: Web/HTML/Element/ruby +--- +<h2 id="Summary" name="Summary">Resumo</h2> + +<p>O <strong>elemento</strong> <strong>HTML <code><ruby></code> </strong> representa uma anotação ruby. Anotações ruby são para mostrar a pronúncia de caracteres do Leste Asiático</p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Categorias de conteúdo</a></dfn> <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Phrasing_content">Conteúdo de fluxo</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">conteúdo fraseado</a>, conteúdo palpável.</li> + <li><dfn>Conteúdo permitido</dfn> <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Conteúdo fraseado</a>.</li> + <li><dfn>Omissão de tag</dfn> {{no_tag_omission}}</li> + <li><dfn>Elementos pais permitidos</dfn>Ver prosa</li> + <li><dfn>Interface DOM</dfn> {{domxref("HTMLElement")}}</li> +</ul> + +<h2 id="Attributes" name="Attributes">Atributos</h2> + +<p>Esse elemento somente inclui os <a href="/en-US/docs/Web/HTML/Global_attributes" title="HTML/Global attributes">atributos globais</a>.</p> + +<h2 id="Examples" name="Examples">Exemplos</h2> + +<h3 id="Exemplo_1_Caracter">Exemplo 1: Caracter</h3> + +<pre class="brush:html"><ruby> + 漢 <rp>(</rp><rt>Kan</rt><rp>)</rp> + 字 <rp>(</rp><rt>ji</rt><rp>)</rp> +</ruby></pre> + +<h3 id="Exemplo_2_Palavra">Exemplo 2: Palavra</h3> + +<pre class="brush:html"><ruby> + 明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp> +</ruby></pre> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-ruby-element', '<ruby>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-ruby-element', '<ruby>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </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>Aspecto</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>5.0</td> + <td>{{CompatNo}}</td> + <td>5.0</td> + <td>{{CompatNo}}</td> + <td>5.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Aspecto</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li>{{HTMLElement("rt")}}</li> + <li>{{HTMLElement("rp")}}</li> +</ul> + +<p>{{ HTMLRef }}</p> diff --git a/files/pt-br/web/html/element/s/index.html b/files/pt-br/web/html/element/s/index.html new file mode 100644 index 0000000000..b87d88bc08 --- /dev/null +++ b/files/pt-br/web/html/element/s/index.html @@ -0,0 +1,127 @@ +--- +title: <s> +slug: Web/HTML/Element/s +translation_of: Web/HTML/Element/s +--- +<div>{{HTMLRef}}</div> + +<p>O <strong>elemento HTML <code><s></code></strong> renderiza um texto tachado ou uma linha cortando o texto. Use o elemento <code><s></code> para representar texto que não sejam relevante ou que não estam corretos. Não é apropriado o uso do <code><s></code> indicar edições no texto; para indicar edições no texto utilize {{HTMLElement("del")}} e {{HTMLElement("ins")}}, que são elementos mais apropriados.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/s.html", "tabbed-shorter")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Categorias de conteúdo</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Conteúdo fraseado</a> ou <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">conteúdo de fluxo</a>.</td> + </tr> + <tr> + <th scope="row">Conteúdo permitido</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Conteúdo freaseado</a>.</td> + </tr> + <tr> + <th scope="row">Omissão de Tag</th> + <td>Nenhuma, as tags de abertura e de fechamento são obrigatórias.</td> + </tr> + <tr> + <th scope="row">Pais permitidos</th> + <td>Qualquer elemento que aceite <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">conteúdo fraseado</a>.</td> + </tr> + <tr> + <th scope="row">Funções ARIA permitidas</th> + <td>Todas</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Esse atributo incluí <a href="/en-US/docs/Web/HTML/Global_attributes">atributos globais</a>.</p> + +<div class="note"><strong>Notas de implementação:</strong> Até Gecko 1.9.2 inclusive, Firefox implementa <a href="/en-US/docs/DOM/span"><code>HTMLSpanElement</code></a> para a interface deste elemento.</div> + +<h2 id="Exemplo">Exemplo</h2> + +<pre class="brush:xml"><s>Hoje é um dia especial: Salmon</s> ESGOTADO<br> +<span style="text-decoration:line-through;">Hoje é um dia especial: + Salmon</span> ESGOTADO</pre> + +<h3 id="Resultado">Resultado</h3> + +<p><s>Hoje é um dia especial: Salmão</s> ESGOTADO<br> + <s>Hoje é um dia especial: Salmão</s> ESGOTADO</p> + +<h2 id="Preocupações_com_acessibilidade">Preocupações com acessibilidade</h2> + +<p>A presença do elemento s não é anunciada pela maioria das tecnologias de leitura de tela em sua configuração padrão. Isso pode ser anunciado usando a propriedade CSS {{cssxref("content")}}, junto com os pseudoelementos {{cssxref("::before")}} and {{cssxref("::after")}}.</p> + +<pre>s::before, +s::after { + clip-path: inset(100%); + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +s::before { + content: " [início do texto utilizado] "; +} + +s::after { + content: " [fim do texto utilizado] "; +} +</pre> + +<p>Algumas pessoas que usam leitores de tela que desativam deliberadamente o anúncio de conteúdo que criados com muita verbosidade. Por esse motivo, é importante não abusar dessa técnica e aplicá-la apenas nas situações em que o desconhecimento do conteúdo foi eliminado e que afetaria negativamente a compreensão.</p> + +<ul> + <li><a href="https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/">Nota curta sobre como deixar sua marca (mais acessível) | O Grupo Paciello </a></li> + <li><a href="http://adrianroselli.com/2017/12/tweaking-text-level-styles.html">Ajustando estilos de texto | Adrian Roselli</a></li> +</ul> + +<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-s-element','s element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','text-level-semantics.html#the-s-element','s element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h2> + + + +<p>{{Compat("html.elements.s")}}</p> + +<h2 id="Veja_mais">Veja mais</h2> + +<ul> + <li>O elemento {{HTMLElement("strike")}}, é o alter ego de {{HTMLElement("s")}} é obsoleto e não deve mais ser usado em sites.</li> + <li>Elemento {{HTMLElement("del")}} deve ser usado quando o conteúdo for <em>deletado</em>.</li> + <li>O CSS {{cssxref("text-decoration-line")}} propriedade deve ser usada para alcançar o antigo aspecto visual do elemento {{HTMLElement("s")}}.</li> +</ul> diff --git a/files/pt-br/web/html/element/script/index.html b/files/pt-br/web/html/element/script/index.html new file mode 100644 index 0000000000..3dbf84b0c4 --- /dev/null +++ b/files/pt-br/web/html/element/script/index.html @@ -0,0 +1,297 @@ +--- +title: <script> +slug: Web/HTML/Element/script +translation_of: Web/HTML/Element/script +--- +<p>O <strong>elemento HTML <code><script></code></strong> é usado para incluir ou referenciar um script executável.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Categorias de conteúdo</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Metadata_content">Conteúdo de metadados</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Fluxo de conteúdo</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Conteúdo fraseado</a>.</td> + </tr> + <tr> + <th scope="row">Conteúdo Permitido</th> + <td>Script dinâmico, como <code>text/javascript</code>.</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 aceite <a href="/en-US/docs/Web/HTML/Content_categories#Metadata_content">conteúdo de metadados</a>, ou qualquer elemento que aceite <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">conteúdo fraseado</a>.</td> + </tr> + <tr> + <th scope="row">Regras ARIA permitidas</th> + <td>Nenhuma</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLScriptElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Esse elemento inclui os <a href="/pt-BR/docs/Web/HTML/Global_attributes">atributos globais</a>.</p> + +<dl> + <dt>{{htmlattrdef("async")}} {{HTMLVersionInline(5)}}</dt> + <dd>Um atributo booleano indicando que o navegador deve, se possível, executar o script assíncronamente.</dd> + <dd> + <div class="blockIndicator warning"> + <p>Esse atributo não deve ser utilizado se o atributo <code>src</code> estiver ausente (ex. scripts embutidos). Se incluído, nesse caso, ele não terá nenhum efeito.</p> + </div> + </dd> + <dd> + <p>Scripts inseridos dinamicamente (usando <code>document.createElement</code>) são executados assincronamente por padrão, então para turna-lo uma execução síncrona (ex. executar scripts na ordem que eles foram carregados) atribua <code>async=false</code>.</p> + </dd> + <dd>Veja {{anch("Browser compatibility")}} para notas no suporte do navegador. Veja também <a href="/en-US/docs/Games/Techniques/Async_scripts">Scripts assíncronos para asm.js</a>.</dd> + <dt>{{htmlattrdef("crossorigin")}}</dt> + <dd>Elementos <code>script</code> passam o mínimo de informação para {{domxref('GlobalEventHandlers.onerror', 'window.onerror')}} em scripts que não passem na checagem do <a href="https://developer.mozilla.org/en-US/docs/HTTP_access_control">CORS</a>. Para permitir logs de erro para sites que usem domínimos diferentes para arquivos estáticos, use esse atributo. Veja <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes">CORS settings attributes</a> par uma explicação mais detalhada dos argumentos válidos.</dd> + <dt>{{htmlattrdef("defer")}}</dt> + <dd>Esse atributo Boleano é usado para indicar ao navegador que o script deve ser executado depois que o documento tenha sido parseado, mas antes de disparar o evento {{event("DOMContentLoaded")}}</dd> + <dd>Scripts com o atributo <code>defer</code> vão impedir que o evento DOMContentLoaded seja disparado até que o script seja carregado e tenha terminado de ser <em>avaliado</em>.</dd> + <dd> + <div class="blockIndicator warning"> + <p>Esse atributo não deve ser usado se o atibuto <code>src</code> estiver ausente (ex. scripts inline), nesse caso ele não vai ter efeito.</p> + </div> + </dd> + <dd> + <p>Para conseguir um efeito similar para scripts inseridos dinamicamente use <code>async=false</code>. Scripts com o atributo <code>defer</code> vão ser executados na ordem em que aparecem no <code>document</code>.</p> + </dd> + <dt>{{htmlattrdef("integrity")}}</dt> + <dd>Contains inline metadata that a user agent can use to verify that a fetched resource has been delivered free of unexpected manipulation. See <a href="/en-US/docs/Web/Security/Subresource_Integrity">Subresource Integrity</a>.</dd> + <dt>{{htmlattrdef("nomodule")}} {{experimental_inline}}</dt> + <dd>This Boolean attribute is set to indicate that the script should not be executed in browsers that support<a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/"> ES6 modules</a> — in effect, this can be used to serve fallback scripts to older browsers that do not support modular JavaScript code.</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>This attribute specifies the <abbr>URI</abbr> of an external script; this can be used as an alternative to embedding a script directly within a document. If a <code>script</code> element has a <code>src</code> attribute specified, it should not have a script embedded inside its tags.</dd> + <dt>{{htmlattrdef("text")}}</dt> + <dd>Like the <code>textContent </code>attribute, this attribute sets the text content of the element. Unlike the <code>textContent </code>attribute, however, this attribute is evaluated as executable code after the node is inserted into the DOM.</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd> + <p>Indicates the type of script represented. The value of this attribute will be in one of the following categories:</p> + + <ul> + <li><strong>Omitted or a JavaScript MIME type:</strong> For HTML5-complient browsers this indicates the script is JavaScript. HTML5 spec urges authors to omit the attribute rather than provided a redundant MIME type. In earlier browsers, this identified the scripting language of the embedded or imported (via the <code>src</code> attribute) code. JavaScript MIME types are <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">listed in the specification</a>.</li> + <li><strong><code>module</code>:</strong> {{HTMLVersionInline(5)}} For HTML5-complient browsers the code is treated as a JavaScript module. Processing of the script contents are not affected by the <code>charset</code> and <code>defer</code> attributes. For information on using <code>module</code>, see <a class="external external-icon" href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>. {{experimental_inline}}</li> + <li><strong>Any other value or MIME type:</strong> Embedded content is treated as a data block which won't be processed by the browser. The <code>src</code> attribute will be ignored.</li> + </ul> + + <p>Note that in Firefox you can use advanced features such as let statements and other features in later JS versions, by using <code>type=application/javascript;version=1.8</code> {{Non-standard_inline}}. Beware, however, that as this is a non-standard feature, this will most likely break support for other browsers, in particular Chromium-based browsers.</p> + + <p>For how to include <em>exotic programming languages</em>, read about <a href="https://developer.mozilla.org/en-US/Add-ons/Code_snippets/Rosetta">Rosetta</a>.</p> + </dd> + <dt> + <h3 id="Atributos_obsoletos">Atributos obsoletos</h3> + </dt> + <dt>{{htmlattrdef("charset")}} {{Deprecated_inline}}</dt> + <dd>If present, its value must be an ASCII case-insensitive match for "<code>utf-8</code>". Both it’s unnecessary to specify the <code>charset</code> attribute, because documents must use UTF-8, and the <code>script</code> element inherits its character encoding from the document.</dd> + <dt>{{htmlattrdef("language")}} {{Deprecated_inline}}</dt> + <dd>Like the <code>type</code> attribute, this attribute identifies the scripting language in use. Unlike the <code>type</code> attribute, however, this attribute’s possible values were never standardized. The <code>type</code> attribute should be used instead.</dd> +</dl> + +<h2 id="Notas">Notas</h2> + +<p>Scripts without <code>async</code> or <code>defer</code> attributes, as well as inline scripts, are fetched and executed immediately, before the browser continues to parse the page.</p> + +<p>The script should be served with the <code>text/javascript</code> MIME type, but browsers are lenient and only block them if the script is served with an image type (<code>image/*</code>), a video type (<code>video/*</code>), an audio (<code>audio/*</code>) type, or <code>text/csv</code>. If the script is blocked, an {{event("error")}} is sent to the element, if not a {{event("success")}} event is sent.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush: html notranslate"><!-- HTML4 and (x)HTML --> +<script type="text/javascript" src="javascript.js"></script> + +<!-- HTML5 --> +<script src="javascript.js"></script> +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comments</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#the-script-element", "<script>")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Adds the module type</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'scripting-1.html#script', '<script>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/scripts.html#h-18.2.1', '<script>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('Subresource Integrity', '#htmlscriptelement', '<script>')}}</td> + <td>{{Spec2('Subresource Integrity')}}</td> + <td>Adds the integrity attribute.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(1.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}<sup>[2]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>async attribute</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[1]</sup></td> + <td>10<sup>[1]</sup></td> + <td>15<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + </tr> + <tr> + <td>defer attribute</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}<sup>[6]</sup></td> + <td> + <p>4<sup>[3]</sup><br> + 10</p> + </td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>crossorigin attribute</td> + <td>{{CompatChrome(30.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("13")}}</td> + <td>{{CompatNo}}</td> + <td>12.50</td> + <td>{{CompatVersionUnknown}}<sup>[4]</sup></td> + </tr> + <tr> + <td>integrity attribute</td> + <td>{{CompatChrome(45.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("43")}}</td> + <td></td> + <td></td> + <td>{{CompatNo}}<sup>[5]</sup></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>Edge</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>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}<sup>[2]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>async attribute</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}<sup>[1]</sup></td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + </tr> + <tr> + <td>defer attribute</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>integrity attribute</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(45.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("43")}}</td> + <td></td> + <td></td> + <td></td> + <td>{{CompatChrome(45.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] In older browsers that don't support the <code>async</code> attribute, parser-inserted scripts block the parser; script-inserted scripts execute asynchronously in IE and WebKit, but synchronously in Opera and pre-4.0 Firefox. In Firefox 4.0, the <code>async</code> DOM property defaults to <code>true</code> for script-created scripts, so the default behavior matches the behavior of IE and WebKit. To request script-inserted external scripts be executed in the insertion order in browsers where the <code>document.createElement("script").async</code> evaluates to <code>true</code> (such as Firefox 4.0), set <code>.async=false</code> on the scripts you want to maintain order. Never call <code>document.write()</code> from an <code>async</code> script. In Gecko 1.9.2, calling <code>document.write()</code> has an unpredictable effect. In Gecko 2.0, calling <code>document.write()</code> from an <code>async</code> script has no effect (other than printing a warning to the error console).</p> + +<p>[2] Starting in Gecko 2.0 {{geckoRelease("2.0")}}, inserting script elements that have been created by calling <code>document.createElement("script")</code> into the DOM no longer enforces execution in insertion order. This change lets Gecko properly abide by the HTML5 specification. To make script-inserted external scripts execute in their insertion order, set <code>.async=false</code> on them.</p> + +<p>Also, {{HTMLElement("script")}} elements inside {{HTMLElement("iframe")}}, {{HTMLElement("noembed")}} and {{HTMLElement("noframes")}} elements are now executed, for the same reasons.</p> + +<p>[3] In versions prior to Internet Explorer 10 Trident implemented <code><script></code> by a proprietary specification. Since version 10 it conforms to the W3C specification.</p> + +<p>[4] The <code>crossorigin</code> attribute was implemented in WebKit in {{WebKitBug(81438)}}.</p> + +<p>[5] {{WebKitBug(148363)}} tracks WebKit implementation of Subresource Integrity (which includes the <code>integrity</code> attribute).</p> + +<p>[6] Desde Gecko 1.9.2 {{geckoRelease("1.9.2")}}, o atributo <code>defer</code> is ignorado nos scripts que nao tenham o atributo <code>src</code>. However, in Gecko 1.9.1 {{geckoRelease("1.9.1")}} even inline scripts are deferred if the <code>defer</code> attribute is set.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("document.currentScript")}}</li> + <li><a href="https://pie.gd/test/script-link-events/">Ryan Grove's <script> and <link> node event compatibility chart</a></li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/pt-br/web/html/element/section/index.html b/files/pt-br/web/html/element/section/index.html new file mode 100644 index 0000000000..3277e7313f --- /dev/null +++ b/files/pt-br/web/html/element/section/index.html @@ -0,0 +1,168 @@ +--- +title: <section> +slug: Web/HTML/Element/section +translation_of: Web/HTML/Element/section +--- +<p>O <strong>elemento HTML <code><section></code></strong> representa uma seção genérica contida em um documento HTML, geralmente com um título, quando não existir um elemento semântico mais específico para representá-lo.</p> + +<p>Por exemplo, um menu de navegação deve estar dentro um elemento {{htmlelement ("nav")}}, mas uma lista de resultados de pesquisa ou a exibição de um mapa e seus controles não possuem elementos específicos, e podem ser colocados dentro de uma <section>.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Categorias de conteúdo</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Conteúdo de fluxo</a> , <a href="/en-US/docs/Web/HTML/Content_categories#Sectioning_content">conteúdo de seção</a>, conteúdo palpável.</td> + </tr> + <tr> + <th scope="row">Conteúdo permitido</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Conteúdo de fluxo</a>.</td> + </tr> + <tr> + <th scope="row">Omissão de tags</th> + <td>Sem omissão de tags</td> + </tr> + <tr> + <th scope="row">Tags-pai permitidas</th> + <td>Qualquer elemento que aceite <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">conteúdo de fluxo</a>. Note que um elemento {{HTMLElement("section")}} não deve ser um descendente de um elemento {{HTMLElement("address")}}.</td> + </tr> + <tr> + <th scope="row">Regras ARIA permitidas</th> + <td>{{ARIARole("alert")}}, {{ARIARole("alertdialog")}}, {{ARIARole("application")}}, {{ARIARole("banner")}}, {{ARIARole("complementary")}}, {{ARIARole("contentinfo")}}, {{ARIARole("dialog")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("log")}}, {{ARIARole("main")}}, {{ARIARole("marquee")}}, {{ARIARole("navigation")}}, {{ARIARole("search")}}, {{ARIARole("status")}}, {{ARIARole("tabpanel")}}</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento inclui apenas os <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">atributos globais</a>.</p> + +<h2 id="Notas_de_uso">Notas de uso</h2> + +<ul> + <li>Cada <code><section></code> deve ser identificado, geralmente incluindo um cabeçalho (elemento {{HTMLElement('h1')}}-{{HTMLElement('h6')}}) como um filho do elemento <code><section></code>.</li> + <li>Se faz sentido distribuir separadamente o conteúdo de um elemento {{HTMLElement("section")}}, use um elemento {{HTMLElement("article")}} em seu lugar.</li> + <li>Não use o elemento {{HTMLElement("section")}} como um container genérico; para isso que a {{HTMLElement("div")}} serve, especialmente quando a seção é apenas com propósito de estilização. Uma regra de ouro é ,"usar quando uma seção deve aparecer logicamente na estrutura de um documento".</li> +</ul> + +<h2 id="Exemplo_1">Exemplo 1</h2> + +<h3 id="Antes">Antes</h3> + +<pre class="brush: html"><code><div> + <h1>Cabeçalho</h1> + <p>Um monte de conteúdo incrível</p> +</div></code></pre> + +<h3 id="Depois">Depois</h3> + +<pre class="brush: html"><code><section> + <h1>Cabeçalho</h1> + <p>Um monte de conteúdo incrível</p> +</section></code></pre> + +<h2 id="Exemplo_2">Exemplo 2</h2> + +<h3 id="Antes_2">Antes</h3> + +<pre class="brush: html"><code><div> + <h2>Cabeçalho</h2> + <img src="passaro.jpg" alt="pássaro"> +</div></code></pre> + +<h3 id="Depois_2">Depois</h3> + +<pre class="brush: html"><code><section> + <h2>Cabeçalho</h2> + <img src="passaro.jpg" alt="pássaro"> +</section></code> +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentários</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-section-element', '<section>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sections.html#the-section-element', '<section>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-section-element', '<section>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>5</td> + <td>{{ CompatGeckoDesktop("2.0") }}</td> + <td>9.0</td> + <td>11.10</td> + <td>4.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>2.2</td> + <td>{{ CompatGeckoMobile("2.0") }}</td> + <td>9.0</td> + <td>11.0</td> + <td>5.0 (iOS 4.2)</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também"><span class="short_text" id="result_box" lang="pt"><span class="hps">Veja também</span></span></h2> + +<ul> + <li><span class="short_text" id="result_box" lang="pt">Outros elemtnos relacionados</span>: {{ HTMLElement("body") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("article") }}, {{ HTMLElement("aside") }}, {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}, {{ HTMLElement("hgroup") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("address") }};</li> + <li class="last"><a class="deki-ns current" href="/en/Sections_and_Outlines_of_an_HTML5_document" title="en/Sections and Outlines of an HTML5 document">Seções e estrurura do um documento HTML5</a>.</li> +</ul> diff --git a/files/pt-br/web/html/element/select/index.html b/files/pt-br/web/html/element/select/index.html new file mode 100644 index 0000000000..38f1b4b2b0 --- /dev/null +++ b/files/pt-br/web/html/element/select/index.html @@ -0,0 +1,180 @@ +--- +title: <select> +slug: Web/HTML/Element/select +translation_of: Web/HTML/Element/select +--- +<h2 id="Sumário">Sumário</h2> +<p>O elemento HTML <em>select</em> (<select>) representa um controle que apresenta um menu de opções. As opções dentro do menu são representadas pelo elemento <span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: 1.5;">{{HTMLElement("option")}}</span>, que podem ser agrupados por elementos<span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">{{HTMLElement("optgroup")}}</code><span style="line-height: 1.5;">. As opções podem ser pré-selecionadas para o usuário.</span></p> +<h2 id="Contexto_de_uso">Contexto de uso</h2> +<table class="standard-table"> + <tbody> + <tr> + <td><a href="/pt-BR/docs/HTML/Categorias_de_conteúdo" title="HTML/Categorias de conteúdo">Categorias de conteúdo</a></td> + <td><a href="/pt-BR/docs/HTML/Categorias_de_conteúdo#Conteúdo_fluido" title="HTML/Categorias de conteúdo#Conteúdo fluido">conteúdo fluido</a>, <a href="/pt-BR/docs/HTML/Categorias_de_conteúdo#Conteúdo_fraseado" title="HTML/Categorias de conteúdo#Conteúdo fraseado">conteúdo fraseado</a>, <a href="/pt-BR/docs/HTML/Categorias_de_conteúdo#Conteúdo_interativo" title="HTML/Categorias de conteúdo#Conteúdo interativo">conteúdo interativo</a>, <a href="/pt-BR/docs/HTML/Categorias_de_conteúdo#Listado_em_formulários" title="HTML/Categorias de conteúdo#Listado em formulários">listado</a>, <a href="/pt-BR/docs/HTML/Categorias_de_conteúdo#Rotulável_em_formulários" title="HTML/Categorias de conteúdo#Rotulável em formulários">rotulável</a>, <a href="/pt-BR/docs/HTML/Categorias_de_conteúdo#Resetável_em_formulários" title="HTML/Categorias de conteúdo#Resetável em formulários">resetável</a>, e <a href="/pt-BR/docs/HTML/Categorias_de_conteúdo#Enviável_em_formulários" title="HTML/Categorias de conteudo#Enviável em formulários">enviável</a> <a href="/pt-BR/docs/HTML/Categorias_de_conteúdo#Associado_a_formulários" title="HTML/Categorias de conteúdo#Associado a formulários">associado a formulários</a></td> + </tr> + <tr> + <td>Conteúdo permitido</td> + <td>Zero ou mais elementos {{HTMLElement("option")}} ou {{HTMLElement("optgroup")}}.</td> + </tr> + <tr> + <td>Omissão de tag</td> + <td>Nenhuma, tanto tag de início quanto de fim são obrigatórias</td> + </tr> + <tr> + <td>Elementos pai permitidos</td> + <td>qualquer elemento que aceite conteúdo fraseado</td> + </tr> + </tbody> +</table> +<h2 id="Atributos">Atributos</h2> +<p><span style="line-height: 21px;">Este elemento inclui os </span><a href="/pt-BR/docs/Web/HTML/Atributos_globais" style="line-height: 21px;" title="HTML/Atributos globais">atributos globais</a><span style="line-height: 21px;">.</span></p> +<dl> + <dt> + {{htmlattrdef("autofocus")}} {{HTMLVersionInline("5")}}</dt> + <dd> + Este atributo permite especificar que um controle de formulário deve ter foco de entrada quando a página é carregada, a não ser que o usuário o substitua, por exemplo digitando em um controle diferente. Somente um elemento de formulário em um documento pode ter o atributo <code style="font-style: normal; line-height: 1.5;">autofocus</code><span style="line-height: 1.5;">, que é booleano.</span></dd> + <dt> + {{htmlattrdef("disabled")}}</dt> + <dd> + Este atributo booleano indica que o usuário não pode interagir com o controle. Caso esse atributo não seja especificado, o controle herda a configuração do elemento que o contém, por exemplo o elemento <code style="font-style: normal;">fieldset</code>; se não há nenhum elemento que o contém com o atributo <code style="font-style: normal; line-height: 1.5;">disabled,</code><span style="line-height: 1.5;"> então o controle está habilitado.</span></dd> + <dt> + {{htmlattrdef("form")}} {{HTMLVersionInline("5")}}</dt> + <dd> + O elemento form ao qual o elemento select é associado (algo como "formulário dono" do select). Se este atributo for especificado, seu valor deve ser o ID de um elemento form no mesmo documento. Isso permite que você coloque elementos select em qualquer lugar dentro do documento, e não apenas como descendentes de elementos form.</dd> + <dt> + {{htmlattrdef("multiple")}}</dt> + <dd> + Este atributo booleano indica que várias opções podem ser selecionadas na lista. Se não for especificado, apenas uma opção poderá ser selecionada de cada vez.</dd> + <dt> + {{htmlattrdef("name")}}</dt> + <dd> + O nome do controle</dd> + <dt> + {{htmlattrdef("required")}} {{HTMLVersionInline("5")}}</dt> + <dd> + Um atributo booleano que indica que uma opção com um valor de string que não esteja vazia deve ser selecionada.</dd> + <dt> + {{htmlattrdef("size")}}</dt> + <dd> + Se o controle é apresentado como uma list box com scroll, este atributo representa o número de linhas na list box que devem estar visíveis num determinado momento. Os navegadores não são obrigados a apresentar elementos select com uma list box scroll. O valor padrão é 0.</dd> +</dl> +<div class="note"> + <strong>Nota sobre o Firefox:</strong> De acordo com a especificação HTML5, o valor padrão para o size deveria ser 1; no entanto, na prática, notou-se que isso quebrava alguns sites, e nenhum outro navegador faz isso no momento, então a Mozilla escolheu por continuar devolvendo 0 por enquanto no Firefox.</div> +<dl> +</dl> +<h2 id="Interface_DOM">Interface DOM</h2> +<p>Este elemento implementa a interface <code><a href="/pt-BR/docs/DOM/HTMLSelectElement" title="DOM/select">HTMLSelectElement</a></code>.</p> +<h2 id="Exemplos">Exemplos</h2> +<pre class="brush: html"><!-- O segundo valor estará selecionado inicialmente --> +<select name="select"> + <option value="valor1">Valor 1</option> + <option value="valor2" selected>Valor 2</option> + <option value="valor3">Valor 3</option> +</select> +</pre> +<h4 id="Resultado">Resultado</h4> +<p><select name="select"><option value="valor1">Valor 1</option><option selected value="valor2">Valor 2</option><option value="valor3">Valor 3</option></select></p> +<h3 id="Notas">Notas</h3> +<p>O conteúdo deste elemento é estático e não <a href="/pt-BR/docs/HTML/Content_Editable" title="HTML/Content_Editable">editável</a>.</p> +<p>A seguir um exemplo de como simular uma lista de seleção com opções editáveis, <strong>mas esteja ciente </strong>de que leitores de tela e dispositivos de acessibilidade <em>não </em>interpretarão o formulário corretamente; este exemplo seria HTML inválido se os elementos corretos fossem usados:</p> +<p><a href="/files/4563/editable_select.html" style="line-height: 1.5;" title="Simulando um select editável com um fieldset de botões de escolha e caixas de texto">Este é um exemplo</a> de um select editável usando um<span style="line-height: 1.5;"> {{HTMLElement("fieldset")}} de </span><a href="/pt-BR/docs/HTML/Element/Input" style="line-height: 1.5;" title="HTML/Element/Input">botões de opção</a><span style="line-height: 1.5;"> e </span><a href="/en-US/docs/HTML/Element/Input" style="line-height: 1.5;" title="HTML/Element/Input">caixas de texto</a><span style="line-height: 1.5;"> (</span><strong style="line-height: 1.5;">escrito somente com CSS</strong><span style="line-height: 1.5;">, sem JavaScript), </span></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('HTML5 W3C', 'forms.html#the-select-element', '<select>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '<select>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + <tr> + <th scope="col"> </th> + <th scope="col"> </th> + <th scope="col"> </th> + </tr> + </tbody> +</table> +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</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>Suporte básico</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Atributo <code>required</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidade</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatVersionUnknown}} [1]</td> + <td>{{CompatGeckoMobile("1.0")}} [2]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Atributo <code>required</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> + </table> +</div> +<p> </p> +<p>[1] No aplicativo Browser para Android 4.1 (e possivelmente versões posteriores), há um bug em que o triângulo indicador de menu ao lado de um {{HTMLElement("select")}} não será exibido se {{ cssxref("background") }}, {{ cssxref("border") }} ou {{ cssxref("border-radius") }} forem aplicados ao {{HTMLElement("select")}}.</p> +<p>[2] Firefox para Android, por padrão, define uma {{ cssxref("background-image") }} gradiente em todos os elementos <code><select multiple></code>. Isso pode ser desabilitado usando <code>background-image: none</code>.</p> +<p> </p> +<h2 id="Veja_também">Veja também</h2> +<ul> + <li>Outros elementos relacionados a formulários: {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("option")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} e {{HTMLElement("meter")}}.</li> +</ul> +<div> + {{HTMLRef}}</div> diff --git a/files/pt-br/web/html/element/source/index.html b/files/pt-br/web/html/element/source/index.html new file mode 100644 index 0000000000..d40dca4e7b --- /dev/null +++ b/files/pt-br/web/html/element/source/index.html @@ -0,0 +1,135 @@ +--- +title: source +slug: Web/HTML/Element/Source +translation_of: Web/HTML/Element/source +--- +<h2 id="Sumário">Sumário</h2> + +<p>O elemento <code>source</code> é utilizado para especificar múltiplos recursos de mídia de elementos {{HTMLElement("picture")}}, {{HTMLElement("audio")}} ou {{HTMLElement("video")}} em HTML5. É um elemento vazio. É normalmente usado para disponibilizar <a href="/En/Media_formats_supported_by_the_audio_and_video_elements" title="En/Media formats supported by the audio and video elements">multiple formats supported by different browsers</a>.</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td>Conteúdo permitido</td> + <td>Nenhum; isso é um elemento vazio.</td> + </tr> + <tr> + <td>Omissão de tag</td> + <td>Deve ter uma tag de início, mas não deve ter uma tag de fim.</td> + </tr> + <tr> + <td>Elementos pais permitidos</td> + <td>{{HTMLElement("picture")}}, {{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> + </tr> + <tr> + <td>Documento normativo</td> + <td><a class="external" href="http://www.w3.org/TR/html5/video.html#the-source-element" title="http://www.w3.org/TR/html5/video.html#the-source-element">HTML5, section 4.8.8</a></td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Como todos os outros elementos de HTML, esse elemento suporta os <a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">global attributes</a>.</p> + +<dl> + <dt>{{ htmlattrdef("src") }}</dt> + <dd>Requerido, endereço do arquivo de mídia.</dd> + <dt>{{ htmlattrdef("type") }}</dt> + <dd>O tipo MIME do arquivo, opcionalmente com um parametro de <code>codecs</code>. Veja o <a class="external" href="http://www.rfc-editor.org/rfc/rfc4281.txt" title="http://www.rfc-editor.org/rfc/rfc4281.txt">RFC 4281</a> para informações sobre como especificar codec.</dd> + <dt>{{ htmlattrdef("media") }}</dt> + <dd>Definição do tipo de mídia (<a class="internal" href="/en/CSS/Media_queries" title="En/CSS/Media queries">Media query</a>) pretendido.</dd> +</dl> + +<p>Se o atributo <strong>type</strong> não está especificado, o tipo da mídia é obtido no servidor e é verificado se o Gecko consegue reproduzi-lo; se não for possível reproduzi-lo, o próximo <strong>source</strong> é verificado. Se o atributo <strong>type</strong> está definido, ele é comparado aos tipos que o Gecko consegue reproduzir, e se não for reconhecido, o servido não é solicitado; ao invés disso, o próximo elemento <strong>source</strong> é verificado.</p> + +<h2 id="Interface_do_DOM">Interface do DOM</h2> + +<p>Esse elemento implementa a interface <code><a href="/en/DOM/HTMLSourceElement" title="en/DOM/HTMLSourceElement">HTMLSourceElement</a></code>.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<p>Esse exemplo demonstra como oferecer um vídeo no formato Ogg para usuários em que os navegadores suporta o formato Ogg, e um formato QuickTime para os usuários que o suporta. Se os elementos <code> audio</code> ou <code>video</code> não forem suportados pelo navegador, um aviso será mostrado. Se o navegador suportar o elemento, mas não suportar nenhum dos formatos especificados, um evento de <code>error</code> será lançado e os controles padrões de mídia (se ativados) indicarão o erro. Veja também a lista de <a 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> em vários navegadores.</p> + +<pre class="brush: html"><video controls> + <source src="foo.ogg" type="video/ogg"> <!-- Escolhido pelo Firefox --> + <source src="foo.mov" type="video/quicktime"> <!-- Escolhido pelo Safari --> + Desculpa; seu navegador não é compatível com vídeo em HTML5. +</video> +</pre> + +<p>Para mais exemplos, veja <a class="internal" href="/en/Using_HTML5_audio_and_video" title="En/Using audio and video in Firefox">Using audio and video in Firefox</a>.</p> + +<h2 id="Compatibilidade_dos_Navegadores">Compatibilidade dos Navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte Básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>9.0</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>Atributo <code>media</code></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("15.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoMobile("1.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Atributo <code>media</code></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoMobile("15.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Notas_específicas_do_Gecko">Notas específicas do Gecko</h3> + +<p>Atualmente, apenas um pequeno conjunto de funcionalidades está implementado — o Gecko escolhe o primeiro elemento source que tem um tipo correspondente <a href="/En/Media_formats_supported_by_the_audio_and_video_elements" title="En/Media formats supported by the audio and video elements">the MIME-type of a supported media format</a>; veja o {{ bug(449363) }} para detalhes.</p> + +<div class="noinclude">{{ languages({ "en":"en/HTML/Element/source", "ja":"ja/HTML/Element/source" }) }}</div> diff --git a/files/pt-br/web/html/element/span/index.html b/files/pt-br/web/html/element/span/index.html new file mode 100644 index 0000000000..ce8c706f6c --- /dev/null +++ b/files/pt-br/web/html/element/span/index.html @@ -0,0 +1,106 @@ +--- +title: <span> +slug: Web/HTML/Element/span +tags: + - Elemento + - HTML + - Internet + - Rede + - Referencia + - Web +translation_of: Web/HTML/Element/span +--- +<h2 id="Summary" name="Summary">Resumo</h2> + +<p>O elemento <strong>HTML <code><span></code> é um conteiner generico em linha para conteúdo fraseado </strong>, que não representa nada por natureza. Ele pode ser usado para agrupar elementos para fins de estilo (usando os atributos <code>class</code> ou <code>id</code> ), ou para compartilhar valores de atributos como <code>lang</code>. Ele deve ser usado somente quando nenhum outro elemento semântico for apropriado. <code><span></code> é muito parecido com o elemento {{HTMLElement("div")}} , entretando {{HTMLElement("div")}} é um elemento de nível de bloco enquanto <code><span></code> é um elemento em linha.</p> + +<h2 id="Usage_context" name="Usage_context">Contexto de Uso</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td>Categorias de conteúdo</td> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a></td> + </tr> + <tr> + <td>Conteúdo permitido</td> + <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">Phrasing content</a></td> + </tr> + <tr> + <td>Omissão de Tag </td> + <td>Nenhum, deve ter tanto tag de início quanto tag final.</td> + </tr> + <tr> + <td>Elementos pai permitidos</td> + <td>Qualquer elemento que aceite <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, ou <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content">flow content</a>.</td> + </tr> + <tr> + <td>Padrões de documento</td> + <td><a class="external" href="http://www.w3.org/TR/html5/text-level-semantics.html#the-span-element" title='http://www.w3.org/TR/html5/text-level-semantics.html#the-span-element"'>HTML5, section 4.6.24</a>; <a class="external" href="http://www.w3.org/TR/html401/struct/global.html#edef-SPAN" title="http://www.w3.org/TR/html401/struct/global.html#edef-SPAN">HTML 4.01, section 7.5.4</a></td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">Atributos</h2> + +<p><span style="line-height: 21px;">Esse elemento inclui apenas os </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">a</a><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">tributos globais</a><span style="line-height: 21px;">.</span></p> + +<h2 id="DOM_interface" name="DOM_interface">DOM interface</h2> + +<p>Este elemento implementa a interface <code><a href="/en-US/docs/HTMLSpanElement" title="HTMLSpanElement">HTMLSpanElement</a></code>.</p> + +<h2 id="Examples" name="Examples">Exemplos</h2> + +<pre class="brush:html;gutter:false"><p><span>Some text</span></p></pre> + +<h3 id="Result" name="Result">Resultado</h3> + +<p><span>Some text</span></p> + +<h2 id="Especificações">Especificações</h2> + +<table> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-span-element', '<span>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-span-element', '<span>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>A interface com o DOM agora é {{domxref("HTMLSpanElement")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#edef-SPAN', '<span>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_entre_os_navegadores">Compatibilidade entre os navegadores</h2> + +<div class="hidden"> +<p>A tabela de compatibilidade nesta página é gerada a partir de dados estruturados.<br> + Se você quiser contribuir para com os dados, por favor veja <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos mande um <em>pull request</em>.</p> +</div> + +<p>{{CompatibilityTable}}</p> + +<p>{{Compat("html.elements.span")}}</p> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li>Elemento HTML {{HTMLElement("div")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/pt-br/web/html/element/strong/index.html b/files/pt-br/web/html/element/strong/index.html new file mode 100644 index 0000000000..f215df2072 --- /dev/null +++ b/files/pt-br/web/html/element/strong/index.html @@ -0,0 +1,170 @@ +--- +title: <strong> +slug: Web/HTML/Element/strong +tags: + - Elemento + - HTML + - Referência(2) + - Semântica HTML a nível de texto(2) + - Web +translation_of: Web/HTML/Element/strong +--- +<pre id="Summary">O elemento <strong>HTML </strong><code><strong><strong></strong></code> dá ao texto uma forte importância, e é tipicamente mostrado em negrito.</pre> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Categorias do conteúdo</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flux content</a>,<a href="/en-US/docs/HTML/Content_categories#Phrasing_content"> Phrasing content</a>, conteúdo palpável.</td> + </tr> + <tr> + <th scope="row">Conteúdo permitido</th> + <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Omissão de tag</th> + <td>Nenhuma, deve ter uma tag de início e uma tag de encerramento.</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Qualquer elemento que aceite <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, ou qualquer elemento que aceite <a href="/en-US/docs/HTML/Content_categories#Flow_content">flow content</a>.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>Qualquer um</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLElement")}} Até Gecko 1.9.2 (Firefox 4) inclusive, Firefox implementa a interface <a href="/en-US/docs/DOM/span"><code>HTMLSpanElement</code></a> para este elemento.</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento inclui apenas os <a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/Global_attributes">atributos globais</a>.</p> + +<h2 id="Notas_de_uso">Notas de uso</h2> + +<p>O elemento <code><strong> </code>é utilizado em conteúdos que são de "grande importância", incluindo coisas de urgentes (como alertas). Podem ser sentenças que são de grande importância para toda a página, ou, você pode meramente tentar pontuar que algumas palavras são de grande importância, comparado ao conteúdo próximo.</p> + +<p>Tipicamente, estes elementos são renderizados por padrão, usando fontes em negrito. Contudo, ele não deve ser usado para simplesmente aplicar o estilo negrito; use o CSS {{cssxref("font-weight")}} para este propósito. Use o elemento {{HTMLElement("b")}} para chamar a atenção para certos textos sem a indicação de grande nível de importância. Use o elemento {{HTMLElement("em")}} para marcar textos que tem necessitam de ênfase.</p> + +<p>Outro uso aceitavel para <code><strong></code> é denotado com o rótulo (label) de parágrafos, que representa notas ou avisos, dentro do texto da página.</p> + +<h3 id="Bold_vs._Strong">Bold vs. Strong</h3> + +<p>Muitas vezes é confuso para novos desenvolvedores porque há tantas maneiras de expressar a mesma coisa em um website renderizado. Bold e Strong são talvez um dos casos mais comuns. Porque usar <strong></strong> vs <b></b>? Você precisa digitar muito mais ao usar strong e ela produz o mesmo resultado, certo?</p> + +<p>Talvez não; strong é um estado lógico, e bold é um estado físico. Estados lógicos separam apresentação do conteúdo, e ao fazer isso permitem que ele seja expresso de várias maneiras diferentes. Possivelmente em vez de renderizar um texto como negrito você queira renderizá-lo vermelho, ou num tamanho diferente, ou sublinhado, ou seja lá o que for. Faz mais sentido mudar as propriedades de apresentação de strong do que bold. Isto porque bold é um estado físico; não há separação entre a apresentação e o conteúdo, e fazer com que bold faça qualquer outra coisa diferente de deixar o texto em negrito seria confuso e ilógico.</p> + +<p>É importante notar que <b></b> tem outros usos, quando se quer chamar atenção sem aumentar a importância.</p> + +<h3 id="Emphasis_vs._Strong">Emphasis vs. Strong</h3> + +<p>Enquanto no HTML4, Strong simplesmente indicava uma ênfase mais forte, em HTML5, o elemento é descrito como representando "uma forte importância para o seu conteúdo." Esta é uma importante distinção a se fazer. Enquanto Emphasis é usado para alterar o significado de uma sentença ("Eu <em>amo</em> cenouras" vs. "Eu amo <em>cenouras</em>"), Strong é usado para dar mais importância a porções de uma sentença (e.g., "<strong>Cuidado!</strong> Isso é <strong>muito perigoso.</strong>"). Ambos Strong e Emphasis podem ser aninhados para aumentar o grau relativo de importância ou reforçar ênfase, respectivamente.</p> + +<h2 id="Exemplo">Exemplo</h2> + +<h3 id="Exemplo_básico">Exemplo básico</h3> + +<pre class="brush: html"><p>Ao fazer x é <strong>imperativo</strong> + que se faça y antes de prosseguir.</p> +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>Ao fazer x é <strong>imperativo</strong> que se faça y antes de prosseguir.</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-strong-element', '<strong>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-strong-element', '<strong>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#edef-STRONG', '<strong>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Navegadores_Compatíveis">Navegadores Compatíveis</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="sect1"></h2> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/HTML/Element/b">HTML bold element</a></li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/pt-br/web/html/element/style/index.html b/files/pt-br/web/html/element/style/index.html new file mode 100644 index 0000000000..c4a7193fe4 --- /dev/null +++ b/files/pt-br/web/html/element/style/index.html @@ -0,0 +1,177 @@ +--- +title: <style> +slug: Web/HTML/Element/style +translation_of: Web/HTML/Element/style +--- +<h2 id="Resumo">Resumo</h2> + +<p><span id="ouHighlight__0_2TO0_0">O</span><span id="noHighlight_0.1750939046200588"> </span><strong><span id="ouHighlight__9_15TO7_13">elemento HTML <style></span></strong><span id="noHighlight_0.8079549119676314"> </span><span id="ouHighlight__25_32TO23_28">contém</span><span id="noHighlight_0.0421581815387565"> </span><span id="ouHighlight__40_50TO30_40">informações</span><span id="noHighlight_0.25522005222047533"> de </span><span id="ouHighlight__34_38TO45_50">estilo</span><span id="noHighlight_0.8209890781977366"> </span><span id="ouHighlight__52_54TO52_55">para</span><span id="noHighlight_0.5883082522572468"> </span><span id="ouHighlight__56_56TO57_58">um</span><span id="noHighlight_0.2588224459451632"> </span><span id="ouHighlight__58_65TO60_68">documento</span><span id="noHighlight_0.7118265581909791"> </span><span id="ouHighlight__68_69TO70_71">ou</span><span id="noHighlight_0.8287466668843697"> </span><span id="ouHighlight__71_71TO73_75">uma</span><span id="noHighlight_0.39376658311892987"> </span><span id="ouHighlight__73_76TO77_81">parte</span><span id="noHighlight_0.8630187689455433"> </span><span id="ouHighlight__78_79TO83_84">do</span><span id="noHighlight_0.40389604768470954"> </span><span id="ouHighlight__81_88TO86_94">documento</span><span id="noHighlight_0.9271558521836898">.</span> <span id="ouHighlight__0_2TO0_1">As</span><span id="noHighlight_0.01947156645811987"> </span><span id="ouHighlight__19_29TO3_13">informações</span><span id="noHighlight_0.6308358281341976"> de </span><span id="ouHighlight__13_17TO18_23">estilo</span><span id="noHighlight_0.7819626952353096"> </span><span id="ouHighlight__4_11TO25_34">específico</span><span id="noHighlight_0.037122023106831326"> </span><span id="ouHighlight__31_32TO36_40">estão</span><span id="noHighlight_0.5142985590356746"> </span><span id="ouHighlight__34_42TO42_49">contidas</span><span id="noHighlight_0.711229095635556"> </span><span id="ouHighlight__44_52TO51_56">dentro</span><span id="noHighlight_0.24112451117868316"> </span><span id="ouHighlight__54_57TO58_62">deste</span><span id="noHighlight_0.9213975894944808"> </span><span id="ouHighlight__59_65TO64_71">elemento</span><span id="noHighlight_0.8329735359180445">,</span><span id="noHighlight_0.8298143863599811"> </span><span id="ouHighlight__68_74TO74_83">geralmente</span><span id="noHighlight_0.5711213807667961"> </span><span id="ouHighlight__76_77TO85_86">no</span> <a href="/en-US/docs/Web/CSS">CSS</a>.</p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories">Content categories</a></dfn><a href="/en-US/docs/Web/HTML/Content_categories#Metadata_content">Metadata content</a>, e se o atributo <code>scoped</code> é apresentado: <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content </a>.</li> + <li><dfn>Conteúdo Permitido</dfn> Style information matching the language of the <code>type</code> attribute.</li> + <li><dfn>Omissão de Tag</dfn> {{no_tag_omission}}</li> + <li><dfn>Permitted parent elements</dfn>Qualquer elemento que aceite Metadata content.</li> + <li><dfn>Interface DOM</dfn> {{domxref("HTMLStyleElement")}}</li> +</ul> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento inclui os <a href="/en-US/docs/Web/HTML/Global_attributes">atributos</a> globais.</p> + +<dl> + <dt>type</dt> + <dd> + <div><span id="ouHighlight__0_3TO0_3">Este</span><span id="noHighlight_0.8579400349648248"> </span><span id="ouHighlight__5_13TO5_12">atributo</span><span id="noHighlight_0.3854254651380227"> </span><span id="ouHighlight__15_21TO14_19">define</span><span id="noHighlight_0.8348115153365787"> </span><span id="ouHighlight__23_25TO21_21">a</span><span id="noHighlight_0.92536449251985"> </span><span id="ouHighlight__27_33TO23_31">linguagem</span><span id="noHighlight_0.01298276536212839"> de </span><span id="ouHighlight__35_42TO36_41">estilo</span><span id="noHighlight_0.9223154847604207"> </span><span id="ouHighlight__44_45TO43_46">como</span><span id="noHighlight_0.736163559561333"> </span><span id="ouHighlight__47_47TO48_49">um</span><span id="noHighlight_0.03862268120438256"> </span><span id="ouHighlight__54_57TO51_54">tipo</span><span id="noHighlight_0.2511141024635852"> </span><span id="ouHighlight__49_52TO56_59">MIME</span><span id="noHighlight_0.6782484431487542"> </span><span id="ouHighlight__59_66TO61_68">(charset</span><span id="noHighlight_0.18358757155083355"> </span><span id="ouHighlight__75_77TO70_72">não</span><span id="noHighlight_0.44979933507841085"> </span><span id="ouHighlight__68_73TO74_77">deve</span><span id="noHighlight_0.5007642888524966"> </span><span id="ouHighlight__79_80TO79_81">ser</span><span id="noHighlight_0.8485105216576607"> </span><span id="ouHighlight__82_92TO83_96">especificado).</span><span id="noHighlight_0.46671142603855187"> </span><span id="ouHighlight__94_103TO98_108">' text/css'</span><span id="noHighlight_0.5699288045943831"> </span><span id="ouHighlight__105_114TO110_116">presume s</span><span id="ouHighlight__116_117TO118_119">e</span><span id="noHighlight_0.7459826865051293"> </span><span id="ouHighlight__119_122TO121_124">este</span><span id="noHighlight_0.9196365633086188"> </span><span id="ouHighlight__124_132TO126_133">atributo</span><span id="noHighlight_0.0331245971064732"> </span><span id="ouHighlight__134_135TO135_141">estiver</span><span id="noHighlight_0.28761738927837327"> </span><span id="ouHighlight__137_142TO143_149">ausente</span><span id="noHighlight_0.7309063458164579">.</span></div> + </dd> + <dt>media</dt> + <dd><span id="ouHighlight__0_4TO0_3">Qual</span><span id="noHighlight_0.9487001642029698"> </span><span id="ouHighlight__6_10TO5_9">mídia</span><span id="noHighlight_0.5818721598559546"> </span><span id="ouHighlight__12_17TO11_14">deve</span><span id="noHighlight_0.8216010413042378"> aplicar-</span><span id="ouHighlight__19_23TO24_25">se</span><span id="noHighlight_0.9684099649594098"> </span><span id="ouHighlight__25_26TO27_27">a</span><span id="noHighlight_0.6453849418761239"> </span><span id="ouHighlight__28_31TO29_32">este</span><span id="noHighlight_0.8646761478920065"> </span><span id="ouHighlight__33_37TO34_39">estilo</span><span id="noHighlight_0.21618152360947235">.</span><span id="noHighlight_0.6502822773321322"> </span><span id="ouHighlight__40_45TO42_45">Deve</span><span id="noHighlight_0.8517521288787646"> </span><span id="ouHighlight__47_48TO47_49">ser</span><span id="noHighlight_0.3429259151906706"> </span><span id="ouHighlight__50_50TO51_53">uma</span><span id="noHighlight_0.21714643269449368"> </span><span id="ouHighlight__58_62TO55_62">consulta</span><span id="noHighlight_0.4634673334346823"> de </span><span id="ouHighlight__52_56TO67_71">mídia</span><span id="noHighlight_0.22857637058931268">,</span><span id="noHighlight_0.694132699274177"> </span><span id="ouHighlight__65_67TO74_81">consulte</span> <a href="http://dev.w3.org/csswg/css3-mediaqueries">http://dev.w3.org/csswg/css3-mediaqueries</a>.</dd> + <dt>scoped</dt> + <dd>Se este atributo está presente, <span id="ouHighlight__0_3TO0_4">então</span><span id="noHighlight_0.7072472779279142"> </span><span id="ouHighlight__5_7TO6_6">o</span><span id="noHighlight_0.15338123492911987"> </span><span id="ouHighlight__9_13TO8_13">estilo</span><span id="noHighlight_0.41845648486720943"> aplica-</span><span id="ouHighlight__15_21TO22_23">se</span><span id="noHighlight_0.950417667445752"> </span><span id="ouHighlight__23_26TO25_30">apenas</span><span id="noHighlight_0.9144995569837693"> </span><span id="ouHighlight__28_29TO32_33">ao</span><span id="noHighlight_0.38786747032526664"> </span><span id="ouHighlight__31_33TO35_37">seu</span><span id="noHighlight_0.058590795139071616"> </span><span id="ouHighlight__42_48TO39_46">elemento</span><span id="noHighlight_0.9818376239477247"> </span><span id="ouHighlight__35_40TO48_50">pai</span><span id="noHighlight_0.554258042353067">. </span>Se está ausente, o estilo aplica-se ao documento inteiro.</dd> + <dt>title</dt> + <dd> + <div><span id="ouHighlight__0_8TO0_9">Especifica</span><span id="noHighlight_0.42987463148670984"> os </span><span id="ouHighlight__34_37TO14_22">conjuntos</span><span id="noHighlight_0.8221645677949255"> de </span><span id="ouHighlight__28_32TO27_32">folhas</span><span id="noHighlight_0.43137767689811523"> de </span><span id="ouHighlight__22_26TO37_42">estilo</span><span id="noHighlight_0.05923721990289876"> </span><span id="ouHighlight__10_20TO44_54">alternativa</span><span id="noHighlight_0.13072207195995622">.</span></div> + </dd> + <dt>disabled</dt> + <dd> + <div><span id="ouHighlight__0_1TO0_1">Se</span><span id="noHighlight_0.600441022166897"> </span><span id="ouHighlight__3_5TO3_10">definido</span><span id="noHighlight_0.13139955085373511">,</span><span id="noHighlight_0.8717514828663568"> </span><span id="ouHighlight__8_15TO13_20">desativa</span><span id="noHighlight_0.6238364008051305"> </span><span id="ouHighlight__17_21TO22_22">(</span><span id="ouHighlight__23_25TO23_25">não</span><span id="noHighlight_0.14891134719059346"> </span><span id="ouHighlight__27_32TO27_36">se aplica)</span><span id="noHighlight_0.6376602974642449"> à</span><span id="ouHighlight__34_36TO38_39">s</span><span id="noHighlight_0.7171441911265772"> </span><span id="ouHighlight__44_48TO41_46">regras</span><span id="noHighlight_0.9674741518492469"> de </span><span id="ouHighlight__38_42TO51_56">estilo</span><span id="noHighlight_0.6808438926767122"> </span><span id="ouHighlight__50_51TO58_61">para</span><span id="noHighlight_0.36424926955213305"> </span><span id="ouHighlight__53_55TO63_63">a</span><span id="noHighlight_0.896825854484904"> </span><span id="ouHighlight__57_90TO65_98">{{domxref("document","Document")}}</span><span id="noHighlight_0.43693055041022915"> </span><span id="ouHighlight__92_95TO100_102">que</span><span id="noHighlight_0.39862222385832574"> </span><span id="ouHighlight__97_99TO104_106">são</span><span id="noHighlight_0.28020993616401263"> </span><span id="ouHighlight__101_109TO108_120">especificadas</span><span id="noHighlight_0.903019508942388"> </span><span id="ouHighlight__111_116TO122_123">no</span><span id="noHighlight_0.8716870288974083"> </span><span id="ouHighlight__118_128TO125_132">elemento</span><span id="noHighlight_0.07707647090584646">.</span></div> + </dd> +</dl> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Uma_folha_de_estilo_simples">Uma folha de estilo simples</h3> + +<pre class="brush:html"><style type="text/css"> +body { + color:red; +} +</style> +</pre> + +<h3 id="Uma_folha_de_estilos_com_escopo">Uma folha de estilos com escopo</h3> + +<pre class="brush:html;highlight:7"><article> + <div>The scoped attribute allows for you to include style elements mid-document. + Inside rules only apply to the parent element.</div> + <p>This text should be black. If it is red your browser does not support the scoped attribute.</p> + <section> + <style scoped> + p { color: red; } + </style> + <p>This should be red.</p> + </section> +</article> +</pre> + +<h4 id="Amostra">Amostra</h4> + +<div>{{ EmbedLiveSample('A_scoped_stylesheet', '100%', '200') }}</div> + +<div> </div> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{ SpecName('HTML WHATWG', 'document-metadata.html#the-style-element', 'style') }}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td>No change from {{ SpecName('HTML5 W3C') }}.</td> + </tr> + <tr> + <td>{{ SpecName('HTML5 W3C', 'document-metadata.html#the-style-element', 'style') }}</td> + <td>{{ Spec2('HTML5 W3C') }}</td> + <td>Added the <code>scoped</code> attribute</td> + </tr> + <tr> + <td>{{ SpecName('HTML4.01', 'present/styles.html#h-14.2.3', 'style') }}</td> + <td>{{ Spec2('HTML4.01') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_Browsers">Compatibilidade de Browsers</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(1.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><font face="Consolas">escopo</font></td> + <td>20 <span style="color: #4d4e53;">[1]</span></td> + <td>{{CompatGeckoDesktop(21.0)}}<a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=508725">[2]</a></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(1.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><font face="Consolas">escopo</font></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(25.0)}}<a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=508725">[2]</a></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Suportado no Chrome +20 à 34 permitindo que o "<strong>Enable <style scoped></strong>" ou "<strong>experimental WebKit features</strong>" bandeira em chrome://flags. <a href="https://groups.google.com/a/chromium.org/forum/#!searchin/blink-dev/scoped/blink-dev/R1x18ZLS5qQ/Bjuh_cENhlQJ">Removido em Chrome 35+ devido</a> à complexidade de código.<br> + [2] Gecko 20 e implementar mais tarde: pseudo-classes de escopo, mas o layout de preferência.css. pseudo-escopo.habilitado deve ser definido como verdadeiro. <span id="ouHighlight__128_131TO151_154">Este</span><span id="noHighlight_0.15467017134631428"> </span><span id="ouHighlight__133_134TO156_156">é</span><span id="noHighlight_0.19032478155667737"> </span><span id="ouHighlight__136_139TO158_163">apenas</span><span id="noHighlight_0.4481609875438388"> </span><span id="ouHighlight__141_143TO165_165">o</span><span id="noHighlight_0.2856676670965124"> </span><span id="ouHighlight__145_148TO167_170">caso</span><span id="noHighlight_0.3503742666548186"> </span><span id="ouHighlight__150_151TO172_174">por</span><span id="noHighlight_0.5176009057037444"> </span><span id="ouHighlight__153_159TO176_181">padrão</span><span id="noHighlight_0.41189447914399674"> </span><span id="ouHighlight__161_162TO183_184">em</span><span id="noHighlight_0.4570854011972225"> </span><span id="ouHighlight__164_170TO186_200">todas</span><span id="noHighlight_0.2404120565835543"> </span><span id="ouHighlight__188_195TO204_210">versões</span><span id="noHighlight_0.26344014792456754"> de </span><span id="ouHighlight__183_186TO215_219">teste</span><span id="noHighlight_0.862371668935014"> de </span><span id="ouHighlight__176_181TO224_229">Aurora e Nightly</span><span id="noHighlight_0.3727967329118698">.</span></p> + +<p> </p> + +<h2 id="Veja_também">Veja também:</h2> + +<ul> + <li>O elemento {{HTMLElement("link")}} que permite usar folhas de estilo externas.</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/pt-br/web/html/element/summary/index.html b/files/pt-br/web/html/element/summary/index.html new file mode 100644 index 0000000000..7d639703de --- /dev/null +++ b/files/pt-br/web/html/element/summary/index.html @@ -0,0 +1,110 @@ +--- +title: summary +slug: Web/HTML/Element/summary +tags: + - Element + - HTML + - Summary + - Web +translation_of: Web/HTML/Element/summary +--- +<h2 id="Sumário">Sumário</h2> + +<p>O elemento HTML <em>summary</em> (<code><summary></code>) é utilizado como um sumário ou legenda para o conteúdo de um elemento {{ HTMLElement("details") }}.</p> + +<div class="note"><strong>Nota:</strong> Se o elemento <code><summary></code> for omitido, o cabeçalho "details" será utilizado.</div> + +<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>Omissão de tag</td> + <td>Nenhuma, tanto as tags iniciais quanto as finais devem estar presentes.</td> + </tr> + <tr> + <td>Elementos pai permitidos</td> + <td>O elemento {{ HTMLElement("details") }}.</td> + </tr> + <tr> + <td>Documentos normativos</td> + <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#the-summary-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#the-summary-element">HTML5, section 4.11.2</a></td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Como todos os outros elementos HTML, esse elemento possui os <a href="/pt-BR/docs/Web/HTML/Global_attributes">atributos globais</a>.</p> + +<h2 id="Interface_do_DOM">Interface do DOM</h2> + +<p>Esse elemento implementa a interface <code><a href="/en/DOM/element" title="en/DOM/element">HTMLElement</a></code>.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<p>Veja a página {{ HTMLElement("details") }} para ver exemplos com <code><summary></code>.</p> + +<h2 id="Compatibilidade_dos_Navegadores">Compatibilidade dos Navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte Básico</td> + <td>12</td> + <td>{{CompatGeckoDesktop("49.0")}}<sup>[1]</sup></td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte Básico</td> + <td>4.0</td> + <td>{{CompatGeckoMobile("49.0")}}<sup>[1]</sup></td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Esse recurso está disponível desde o Firefox 47 prefereências <code>dom.details_element.enabled</code>, iniciado por padrão como <code>false</code>, exceto nas versões Nightly e Aurora ({{bug(1241750)}}). O suporte foi ativado, e a prferência foi alterada para <code>true</code>, desde o Firefox 49.0 ({{bug("1226455")}}).</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{ HTMLElement("details") }}</li> +</ul> + +<div class="noinclude">{{ languages({ "en": "en/HTML/Element/summary", "ja": "ja/HTML/Element/summary" }) }}</div> diff --git a/files/pt-br/web/html/element/table/index.html b/files/pt-br/web/html/element/table/index.html new file mode 100644 index 0000000000..28038a1932 --- /dev/null +++ b/files/pt-br/web/html/element/table/index.html @@ -0,0 +1,447 @@ +--- +title: <table> +slug: Web/HTML/Element/table +tags: + - Elemento + - Referencia + - tabelas +translation_of: Web/HTML/Element/table +--- +<h2 id="Resumo">Resumo</h2> + +<p>O elemento HTML <em>Table</em><em> </em><span style="line-height: 1.5;">(</span><code style="font-size: 14px;"><table></code><span style="line-height: 1.5;">) representa dados em duas dimensões ou mais.</span></p> + +<div class="note"><strong>Nota: </strong>Antes da criação do <a href="/en-US/docs/CSS" title="CSS">CSS</a>, os elementos HTML eram muitas vezes utilizados para alterar o layout da página. Esta prática tem sido desencorajada desde o HTML 4 e o elemento <em>Table</em> não deve ser utilizado para fins de layout.</div> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content categories">Categoria de conteúdo</a></td> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Fluxo de conteúdo</a></td> + </tr> + <tr> + <td>Conteúdo permitido</td> + <td> + <div class="content-models"> + <div id="table-mdls">Nesta ordem: + <ul> + <li>um elemento {{HTMLElement("caption")}} opcional,</li> + <li>zero ou mais {{HTMLElement("colgroup")}} elementos,</li> + <li>um elemento {{HTMLElement("thead")}} opcional,</li> + <li>uma das duas alternativas: + <ul> + <li>um elemento {{HTMLElement("tfoot")}}, seguido por: + <ul> + <li>zero ou mais elementos {{HTMLElement("tbody")}},</li> + <li>ou um ou mais elementos {{HTMLElement("tr")}},</li> + </ul> + </li> + <li>uma segunda alternativa seguida por um elemento {{HTMLElement("tfoot")}} opcional: + <ul> + <li>zero ou mais elementos {{HTMLElement("tbody")}},</li> + <li>ou um ou mais elementos {{HTMLElement("tr")}}</li> + </ul> + </li> + </ul> + </li> + </ul> + </div> + </div> + </td> + </tr> + <tr> + <td>Omissão de tag</td> + <td>Nenhuma, ambas as tags de início e fim são obrigatórias</td> + </tr> + <tr> + <td>Elementos pais permitidos</td> + <td>Qualquer elemento que aceite fluxo de conteúdo</td> + </tr> + <tr> + <td>Documento normativo</td> + <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-table-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-table-element">HTML5, section 4.9.1</a> (<a class="external" href="http://www.w3.org/TR/REC-html40/struct/tables.html#edef-TABLE" title="http://www.w3.org/TR/REC-html40/struct/tables.html#edef-TABLE">HTML4.01, section 11.2.1</a>)</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p><span style="line-height: 21px;">Este elemento inclui os </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">atributos globais</a><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{htmlattrdef("align")}} {{Deprecated_inline}}</dt> + <dd> Este atributo enumerado indica como a tabela deve ser alinhada considerando o conteúdo do documento. Que pode ter os seguintes valores: + <ul> + <li><span>left</span>, significando que a tabela deve ser exibida à esquerda do documento;</li> + <li><span>center</span>, significando que a tabela deve ser exibida centralizada no documento;</li> + <li><span>right</span>, significando que a tabela deve ser exibida à direita do documento.</li> + </ul> + + <div class="note"><strong>Note: </strong> + + <ul> + <li><strong>Não use estes atributos</strong>, pois foram depreciados: o elemento {{HTMLElement("table")}} deve ser estilizado utilizando <a href="/en-US/docs/CSS" title="CSS">CSS</a>. Para dar um efeito similar ao atributo align, a propriedade <a href="/en-US/docs/CSS" title="CSS">CSS</a> "text-align" e "vertical-align" devem ser usadas.</li> + <li>Antes do Firefox 4, Firefox também suportava, somente em quirks mode, <code>os valores middle</code>, <code>absmiddle</code>, and <code>abscenter</code> <code>como sinônimos de center</code><em>. </em></li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("bgcolor")}} {{Deprecated_inline}}</dt> + <dd>Este atributo define a cor de fundo da tabela e seu conteúdo. É um dos códigos hexadecimais de 6 dígitos como definido em <a class="external" href="http://www.w3.org/Graphics/Color/sRGB" title="http://www.w3.org/Graphics/Color/sRGB">sRGB</a>, prefixado por um '#'. Um dos textos das dezesseis cores predefinidas podem também ser utilizados: + <table> + <tbody> + <tr> + <td style="width: 24px; background-color: black;"> </td> + <td><span>black</span> = "#000000"</td> + <td style="width: 24px; background-color: green;"> </td> + <td><span>green</span> = "#008000"</td> + </tr> + <tr> + <td style="width: 24px; background-color: silver;"> </td> + <td><span>silver</span> = "#C0C0C0"</td> + <td style="width: 24px; background-color: lime;"> </td> + <td><span>lime</span> = "#00FF00"</td> + </tr> + <tr> + <td style="width: 24px; background-color: gray;"> </td> + <td><span>gray</span> = "#808080"</td> + <td style="width: 24px; background-color: olive;"> </td> + <td><span>olive</span> = "#808000"</td> + </tr> + <tr> + <td style="width: 24px; background-color: white;"> </td> + <td><span>white</span> = "#FFFFFF"</td> + <td style="width: 24px; background-color: yellow;"> </td> + <td><span>yellow</span> = "#FFFF00"</td> + </tr> + <tr> + <td style="width: 24px; background-color: maroon;"> </td> + <td><span>maroon</span> = "#800000"</td> + <td style="width: 24px; background-color: navy;"> </td> + <td><span>navy</span> = "#000080"</td> + </tr> + <tr> + <td style="width: 24px; background-color: red;"> </td> + <td><span>red</span> = "#FF0000"</td> + <td style="width: 24px; background-color: blue;"> </td> + <td><span>blue</span> = "#0000FF"</td> + </tr> + <tr> + <td style="width: 24px; background-color: purple;"> </td> + <td><span>purple</span> = "#800080"</td> + <td style="width: 24px; background-color: teal;"> </td> + <td><span>teal</span> = "#008080"</td> + </tr> + <tr> + <td style="width: 24px; background-color: fuchsia;"> </td> + <td><span>fuchsia</span> = "#FF00FF"</td> + <td style="width: 24px; background-color: aqua;"> </td> + <td><span>aqua</span> = "#00FFFF"</td> + </tr> + </tbody> + </table> + + <div class="note"><strong>Usage note: </strong>Do not use this attribute, as it has been deprecated: the {{HTMLElement("table")}} element should be styled using <a href="/en-US/docs/CSS" title="CSS">CSS</a>. To give a similar effect than the <span>bgcolor</span> attribute, the <a href="/en-US/docs/CSS" title="CSS">CSS</a> property {{cssxref("background-color")}} should be used.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("border")}} {{Deprecated_inline}}</dt> + <dd>This integer attribute defines, in pixels, the size of the frame surrounding the table. If set to <span>0</span>, it implies that the {{htmlattrxref("frame", "table")}} attribute is set to <span>void</span>. + <div class="note"><strong>Usage note: </strong>Do not use this attribute, as it has been deprecated: the {{HTMLElement("table")}} element should be styled using <a href="/en-US/docs/CSS" title="CSS">CSS</a>. To give a similar effect than the <span>border</span> attribute, the <a href="/en-US/docs/CSS" title="CSS">CSS</a> properties {{cssxref("border")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}} and {{cssxref("border-style")}} should be used.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("cellpadding")}} {{Deprecated_inline}}</dt> + <dd>This attribute defines the space between the content of a cell and the border, displayed or not, of it. If it is a pixel length, this pixel-sized space will be applied on all four sides; if it is a percentage length, the content will be centered and the total vertical space (top and bottom) will represent this percentage. The same is true for the total horizontal space (left and right). + <div class="note"><strong>Usage note: </strong>Do not use this attribute, as it has been deprecated: the {{HTMLElement("table")}} element should be styled using <a href="/en-US/docs/CSS" title="CSS">CSS</a>. To give a similar effect than the <span>border</span> attribute, use the <a href="/en-US/docs/CSS" title="CSS">CSS</a> property {{cssxref("border-collapse")}} with the value collapse on the {{HTMLElement("table")}} element itself, and the property {{cssxref("padding")}} on the {{HTMLElement("td")}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("cellspacing")}} {{Deprecated_inline}}</dt> + <dd>This attribute defines the size, in percentage or in pixels, of the space between two cells (both horizontally and vertically), between the top of the table and the cells of the first row, the left of the table and the first column, the right of the table and the last column and the bottom of the table and the last row. + <div class="note"><strong>Usage note: </strong>Do not use this attribute, as it has been deprecated: the {{HTMLElement("table")}} element should be styled using <a href="/en-US/docs/CSS" title="CSS">CSS</a>. To give a similar effect than the <span>border</span> attribute, use the <a href="/en-US/docs/CSS" title="CSS">CSS</a> property {{cssxref("border-collapse")}} with the value collapse on the {{HTMLElement("table")}} element itself, and the property {{cssxref("margin")}} on the {{HTMLElement("td")}} element.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("frame")}} {{Deprecated_inline}}</dt> + <dd>This enumerated attribute defines which side of the frame surrounding the table must be displayed. It may have the following values: + <table style="width: 668px;"> + <tbody> + <tr> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><span>above</span></td> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><span>below</span></td> + </tr> + <tr> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><span>hsides</span></td> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><span>vsides</span></td> + </tr> + <tr> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><span>lhs</span></td> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><span>rhs</span></td> + </tr> + <tr> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><span>border</span></td> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><span>box</span></td> + </tr> + <tr> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><span>void</span></td> + </tr> + </tbody> + </table> + + <div class="note"><strong>Usage note: </strong>Do not use this attribute, as it has been deprecated: the {{HTMLElement("table")}} element should be styled using <a href="/en-US/docs/CSS" title="CSS">CSS</a>. To give a similar effect than the <span>frame</span> attribute, use the <a href="/en-US/docs/CSS" title="CSS">CSS</a> properties {{cssxref("border-style")}} and {{cssxref("border-width")}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("rules")}} {{Deprecated_inline()}}</dt> + <dd>This enumerated attribute defines where rules, i.e. lines, should appear in a table. It can have the following values: + <ul> + <li><span>none</span>, which indicates the no rules will be displayed; it is the default value;</li> + <li><span>groups</span>, which will make the rules to be displayed between row groups (defined by the {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} and {{HTMLElement("tfoot")}} elements) and between column groups (defined by the {{HTMLElement("col")}} and {{HTMLElement("colgroup")}} elements) only;</li> + <li><span>rows</span>, which will make the rules to be displayed between rows;</li> + <li><span>columns</span>, which will make the rules to be displayed between columns;</li> + <li><span>all</span>, which wil make the rules to be displayed between rows and columns.</li> + </ul> + + <div class="note"><strong>Note</strong>: + + <ul> + <li>The styling of the rules is browser-dependant and cannot be modified.</li> + <li>Do not use this attribute, as it has been deprecated: the rules should be defined and styled using <a href="/en-US/docs/CSS" title="CSS">CSS</a>. use the <a href="/en-US/docs/CSS" title="CSS">CSS</a> property {{cssxref("border")}} on the adequate {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("col")}} or {{HTMLElement("colgroup")}} elements.</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("summary")}} {{Deprecated_inline}}</dt> + <dd>This attribute defines an alternative text use to describe the table in user-agent unable to display it. Typically, it contents a description of it to allow visually impaired people, like blind people browsing the web using Braille screen, to get the information in it. If the information added in this attribute may also be useful for non-visually impaired people, consider using the {{HTMLElement("caption")}} instead. The summary attribute is not mandatory and may be omitted when a {{HTMLElement("caption")}} element fulfills its role. + <div class="note"><strong>Usage Note: </strong>Do not use this attribute, as it has been deprecated. Instead, use one of these way of describing a table: + <ul> + <li>In prose, surrounding the table (this is the less semantic-conveying way of doing it).</li> + <li>In the table's {{HTMLElement("caption")}} element.</li> + <li>In a {{HTMLElement("details")}} element, inside the table's {{HTMLElement("caption")}} element.</li> + <li>Include the {{HTMLElement("table")}} element in a {{HTMLElement("figure")}} element and add the description in prose next to it.</li> + <li>Include the {{HTMLElement("table")}} element in a {{HTMLElement("figure")}} element and add the description in prose inside a {{HTMLElement("figcaption")}} element.</li> + <li>Adjust the table so that such description is no more needed, by using {{HTMLElement("th")}} and {{HTMLElement("thead")}} elements for example.</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("width")}} {{Deprecated_inline}}</dt> + <dd>This attribute defines the width of the table. It may either be a pixel length or a percentage value, representing the percentage of the width of its container that the table should use. + <div class="note"><strong>Usage Note: </strong>Do not use this attribute, as it has been deprecated: the rules should be defined and styled using <a href="/en-US/docs/CSS" title="CSS">CSS</a>. use the <a href="/en-US/docs/CSS" title="CSS">CSS</a> property {{cssxref("width")}} instead.</div> + </dd> +</dl> + +<h2 id="DOM_interface">DOM interface</h2> + +<p>This element implements the <code><a href="/en-US/docs/DOM/HTMLTableElement" title="DOM/HTMLTableElement">HTMLTableElement</a></code> interface.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Simple_Table">Simple Table</h3> + +<pre class="brush: html" style="font-size: 12px;"><table> + <tr> + <td>John</td> + <td>Doe</td> + </tr> + <tr> + <td>Jane</td> + <td>Doe</td> + </tr> +</table></pre> + +<p><span style="line-height: 1.5;">{{ EmbedLiveSample('Examples:Simple_Table', '100%', '800') }}</span></p> + +<h3 id="More_Examples">More Examples</h3> + +<pre class="brush: html"><p>Simple table with header</p> +<table> + <tr> + <th>First name</th> + <th>Last name</th> + </tr> + <tr> + <td>John</td> + <td>Doe</td> + </tr> + <tr> + <td>Jane</td> + <td>Doe</td> + </tr> +</table> + +<p>Table with thead, tfoot, and tbody</p> +<table> + <thead> + <tr> + <th>Header content 1</th> + <th>Header content 2</th> + </tr> + </thead> + <tfoot> + <tr> + <td>Footer content 1</td> + <td>Footer content 2</td> + </tr> + </tfoot> + <tbody> + <tr> + <td>Body content 1</td> + <td>Body content 2</td> + </tr> + </tbody> +</table> + +<p>Table with colgroup</p> +<table> + <colgroup span="4" class="columns"></colgroup> + <tr> + <th>Countries</th> + <th>Capitals</th> + <th>Population</th> + <th>Language</th> + </tr> + <tr> + <td>USA</td> + <td>Washington D.C.</td> + <td>309 million</td> + <td>English</td> + </tr> + <tr> + <td>Sweden</td> + <td>Stockholm</td> + <td>9 million</td> + <td>Swedish</td> + </tr> +</table> + +<p>Table with colgroup and col</p> +<table> + <colgroup> + <col class="column1"> + <col class="columns2plus3" span="2"> + </colgroup> + <tr> + <th>Lime</th> + <th>Lemon</th> + <th>Orange</th> + </tr> + <tr> + <td>Green</td> + <td>Yellow</td> + <td>Orange</td> + </tr> +</table> + +<p>Simple table with caption</p> +<table> + <caption>Awesome caption</caption> + <tr> + <td>Awesome data</td> + </tr> +</table> +</pre> + +<div class="hidden"> +<pre class="brush: css">table +{ +border-collapse: collapse; +border-spacing: 0px; +} +table, th, td +{ +padding: 5px; +border: 1px solid black; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Examples', '100%', '800') }}</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>4.0</td> + <td>7.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Other table-related HTML Elements: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};</li> + <li>CSS properties that may be specially useful to style the <span style="font-family: Courier New;"><table></span> element: + <ul> + <li>{{cssxref("width")}} to control the width of the table;</li> + <li>{{cssxref("border")}}, {{cssxref("border-style")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}}, {{cssxref("border-collapse")}}, {{cssxref("border-spacing")}} to control the aspect of cell borders, rules and frame;</li> + <li>{{cssxref("margin")}} and {{cssxref("padding")}} to style the individual cell content;</li> + <li>{{cssxref("text-align")}} and {{cssxref("vertical-align")}} to define alignment of text and cell content.</li> + </ul> + </li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/pt-br/web/html/element/template/index.html b/files/pt-br/web/html/element/template/index.html new file mode 100644 index 0000000000..7f45ba9172 --- /dev/null +++ b/files/pt-br/web/html/element/template/index.html @@ -0,0 +1,198 @@ +--- +title: <template> +slug: Web/HTML/Element/template +tags: + - Componentes + - Elemento + - HTML + - Referência(2) + - Web + - Web Componentes +translation_of: Web/HTML/Element/template +--- +<h2 id="Summary" name="Summary">Sumário</h2> + +<p><span class="seoSummary">O elemento <strong><a href="/en-US/docs/Web/HTML">HTML</a> <code><template></code></strong> é um mecanismo para encapsular um conteúdo do lado do cliente que não é renderizado quando a página é carregada, mas que pode ser instanciado posteriormente em tempo de execução usando JavaScript.</span></p> + +<p>Pense no template como um fragmento de conteúdo, que é armazenado para um possível uso futuro no documento. Enquanto o parser processa o conteúdo do elemento <strong><code><template></code> </strong>ao carregar a página, isso apenas garante que o conteúdo é válido; porém, o conteúdo do elemento ainda não foi renderizado.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Conteúdo de categorias</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Metadata_content">Metadata content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">phrasing content</a>, script-supporting element</td> + </tr> + <tr> + <th scope="row">Conteúdo Permitido</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Metadata_content">Metadata content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content, </a>qualquer conteúdo HTML válido que é permitido para ocorrer dentro do {{HTMLElement("ol")}}, {{HTMLElement("dl")}}, {{HTMLElement("figure")}}, {{HTMLElement("ruby")}}, {{HTMLElement("object")}}, {{HTMLElement("video")}}, {{HTMLElement("audio")}}, {{HTMLElement("table")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("tr")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("select")}}, {{HTMLElement("details")}} elemento e {{HTMLElement("menu")}} cujo tipo de atributo está em estado de menu de contexto.</td> + </tr> + <tr> + <th scope="row">Tags omitidas</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Elementos pais permitidos</th> + <td>{{HTMLElement("body")}}, {{HTMLElement("frameset")}}, {{HTMLElement("head")}} and {{HTMLElement("colgroup")}} sem um atributo <code>span</code></td> + </tr> + <tr> + <th scope="row">Interface do DOM</th> + <td>{{domxref("HTMLTemplateElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">Atributos</h2> + +<p>Esse elemento inclui os <a href="/pt-BR/docs/Web/HTML/Global_attributes">atributos globais</a>.</p> + +<p>Há também um atributo <em>content, </em>o qual é <em>read-only </em>e provê acesso ao conteúdo do template. A existência desse atributo <em>content</em> é frequentemente usada como um modo de determinar se o navegador do usuário suporta o element <strong style="line-height: 1.5;"><code><template></code></strong><span style="line-height: 1.5;">.</span></p> + +<h2 id="Example" name="Example">Exemplo</h2> + +<p>Primeiro, nós começamos com um pedaço de HTML como exemplo:</p> + +<pre class="brush: html"><table id="producttable"> + <thead> + <tr> + <td>UPC_Code</td> + <td>Product_Name</td> + </tr> + </thead> + <tbody> + <!-- existing data could optionally be included here --> + </tbody> +</table> + +<template id="productrow"> + <tr> + <td class="record"></td> + <td></td> + </tr> +</template> +</pre> + +<p>No início, nós temos uma tabela que irá receber conteúdo inserido via Javascript. Em seguida, vem o <em>template</em>, que descreve a estrutura de um fragmento de HTML que representa uma única linha da tabela.</p> + +<p>Agora que a tabela foi criada e o <em>template</em> definido, nós usamos JavaScript para inserir linhas na tabela, cada linha é construída usando o <em>template</em> como base.</p> + +<pre class="brush:js;">// Teste se seu navegador suporta o <em>template</em> HTML checando +// a presença do atribute content no elemento <em>template</em> . +if ('content' in document.createElement('template')) { + + // Instancie a tabela com o HTML <em>tbody</em> e a <em>row</em> com o template + var t = document.querySelector('#productrow'), + td = t.content.querySelectorAll("td"); + td[0].textContent = "1235646565"; + td[1].textContent = "Stuff"; + + // Clone a nova <em>row</em> e insira-a na tabela + var tb = document.getElementsByTagName("tbody"); + var clone = document.importNode(t.content, true); + tb[0].appendChild(clone); + + // Crie uma nova <em>row</em> + td[0].textContent = "0384928528"; + td[1].textContent = "Acme Kidney Beans"; + + // Clone a nova <em>row</em> e insira-a na tabela + var clone2 = document.importNode(t.content, true); + tb[0].appendChild(clone2); + +} else { + // Ache outro modo de adicionar as <em>rows</em> na tabela, pois + // o elemento HTML <em>template </em>não é suportado. +} +</pre> + +<p>O resultado é a tabela original do HTML, com duas novas linhas inseridas via Javascript:</p> + +<div class="hidden"> +<pre class="brush: css">table { + background: #000; +} +table td { + background: #fff; +}</pre> +</div> + +<p>{{EmbedLiveSample("Example", 500, 120)}}</p> + +<h2 id="Specifications" name="Specifications">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','/scripting-1.html#the-template-element','template element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Sem mudanças</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','/scripting-1.html#the-template-element','template element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Definição Inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade de Navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suporte Básico</td> + <td>26</td> + <td>{{CompatGeckoDesktop("22")}}</td> + <td>Edge 13</td> + <td>15</td> + <td>7.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte Básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>iOS 8</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li>Web components: {{HTMLElement("content")}}, {{HTMLElement("shadow")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/pt-br/web/html/element/textarea/index.html b/files/pt-br/web/html/element/textarea/index.html new file mode 100644 index 0000000000..546d86ba4c --- /dev/null +++ b/files/pt-br/web/html/element/textarea/index.html @@ -0,0 +1,262 @@ +--- +title: <textarea> +slug: Web/HTML/Element/textarea +translation_of: Web/HTML/Element/textarea +--- +<div>{{HTMLRef}}</div> + +<p>O <strong>elemento</strong> HTML <code><textarea></code> representa um controle de edição para uma caixa de texto, útil quando você quer permitir ao usuário informar um texto extenso em formato livre, como um comentário ou formulário de retorno. </p> + +<div>{{EmbedInteractiveExample("pages/tabbed/textarea.html", "tabbed-standard")}}</div> + +<p class="hidden">O código fonte deste exemplo interativo está armazenado em um repositório GitHub. Caso queira contribuir com o projeto de exemplos interativos, faça um clone do repósitório <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> e nos envie um solicitação de recebimento.</p> + +<p>Os exemplos acima demonstram vários recursos do <code><textarea></code>. O primeiro exemplo mostra o uso mais simples, com apenas um <code>id</code> atributo para permitir que o<code><textarea></code> estar associado a um {{htmlelement("label")}} elemento para fins de acessibilidade e um <code>name</code> atributo para definir o nome do ponto de dados associado enviado ao servidor quando o formulário é enviado.</p> + +<p>O segundo exemplo mostra alguns recursos mais complexos:</p> + +<ul> + <li>O <code>rows</code> e <code>cols</code> atributos permitem especificar um tamanho exato para o <code><textarea></code> pegar. Definir isso é uma boa idéia para manter a consistência, pois os padrões do navegador podem ser diferentes.</li> + <li><code>maxlength</code> especifica um número máximo de caracteres que o <code><textarea></code> tem permissão para conter. Você também pode definir um comprimento mínimo considerado válido usando o <code>minlength</code> atributo e especifique que o <code><textarea></code> não enviará (e é inválido) se estiver vazio, usando o<code>required</code> atributo. Isso fornece o <code><textarea></code> com validação simples, que é mais básica que os outros elementos do formulário (por exemplo, você não pode fornecer regexs específicas para validar o valor usando o método <code>pattern</code> atributo, como você pode com o {{htmlelement("input")}} elemento).</li> + <li><code>wrap</code> especifica o comportamento de quebra automática do texto quando ele atinge a borda do <code><textarea></code>.</li> + <li>Se você deseja conteúdo padrão para o seu <code><textarea></code>, você o insere entre as tags de abertura e fechamento. <code><textarea></code> não suporta o <code>value</code> atributo.</li> +</ul> + +<p>O <code><textarea></code> O elemento também aceita vários atributos comuns para formar <code><input></code>s, tal como<code>autocomplete</code>, <code>autofocus</code>, <code>disabled</code>, <code>placeholder</code>, <code>readonly</code>, e <code>required</code>.</p> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento inclui os atributos globais.</p> + +<dl> + <dt>{{htmlattrdef("autocapitalize")}} {{non-standard_inline}}</dt> + <dd>Este é um atributo não padrão suportado pelo WebKit no iOS (portanto, quase todos os navegadores executados no iOS, incluindo Safari, Firefox e Chrome), que controla se e como o valor do texto deve ser automaticamente capitalizado quando é inserido / editado pelo do utilizador. Os valores não preteridos estão disponíveis no iOS 5 e posterior. Os valores possíveis são: + <ul> + <li><code>none</code>: Desativa completamente a capitalização automática.</li> + <li><code>sentences</code>: Coloque automaticamente em maiúscula a primeira letra das frases.</li> + <li><code>words</code>: Coloque em maiúscula automaticamente a primeira letra das palavras.</li> + <li><code>characters</code>: Colocar em maiúscula automaticamente todos os caracteres.</li> + <li><code>on</code>: {{deprecated_inline()}} Descontinuado desde o iOS 5.</li> + <li><code>off</code>: {{deprecated_inline()}} Descontinuado desde o iOS 5.</li> + </ul> + </dd> + <dt>{{htmlattrdef("autocomplete")}}</dt> + <dd>Este atributo indica se o valor do controle pode ser preenchido automaticamente pelo navegador. Os valores possíveis são: + <ul> + <li><code>off</code>: The user must explicitly enter a value into this field for every use, or the document provides its own auto-completion method; the browser does not automatically complete the entry.</li> + <li><code>on</code>: O navegador pode concluir automaticamente o valor com base nos valores inseridos pelo usuário durante os usos anteriores.</li> + </ul> + + <p>Se o <code>autocomplete</code> atributo não está especificado em um <code><textarea></code> elemento, o navegador usa o elemento <code>autocomplete</code> valor do atributo <code><textarea></code> proprietário do formulário do elemento. O proprietário do formulário é o {{HTMLElement("form")}} elemento que este<code><textarea></code> elemento é um descendente ou o elemento de formulário cuja <code>id</code> é especificado pelo <code>form</code> atributo do elemento de entrada. Para mais informações, consulte o {{htmlattrxref("autocomplete", "form")}} atribuno no {{HTMLElement("form")}}.</p> + </dd> + <dt>{{ htmlattrdef("autofocus") }}</dt> + <dd>Esse atributo booleano permite especificar que um controle de formulário tenha foco de entrada quando a página for carregada. Somente um elemento associado ao formulário em um documento pode ter esse atributo especificado.<br> + <br> + {{ htmlattrdef("cols") }}</dd> + <dd>A largura visível do controle de texto, em larguras médias de caracteres. Se for especificado, deve ser um número inteiro positivo. Se não for especificado, o valor padrão é 20.</dd> + <dt>{{ htmlattrdef("disabled") }}</dt> + <dd>Esse atributo booleano indica que o usuário não pode interagir com o controle. Se esse atributo não for especificado, o controle herdará sua configuração do elemento que contém, por exemplo {{ HTMLElement("fieldset") }}; se não houver elemento contendo quando o <code>disabled</code> atributo estiver definido, o controle está ativado.</dd> + <dt>{{ htmlattrdef("form") }}</dt> + <dd>O elemento do formulário que o <code><textarea></code> elemento está associado (seu "proprietário do formulário"). O valor do atributo deve ser o <code>id</code> de um elemento de formulário no mesmo documento. Se este atributo não for especificado, o atributo <code><textarea></code> O elemento deve ser um descendente de um elemento do formulário. Este atributo permite que você coloque<code><textarea></code> elementos em qualquer lugar do documento, não apenas como descendentes de elementos do formulário.</dd> + <dt>{{ htmlattrdef("maxlength") }}</dt> + <dd>O número máximo de caracteres (pontos de código unicode) que o usuário pode inserir. Se esse valor não for especificado, o usuário poderá inserir um número ilimitado de caracteres.</dd> + <dt>{{ htmlattrdef("minlength") }}</dt> + <dd>O número mínimo de caracteres (pontos de código unicode) exigidos pelo usuário.</dd> + <dt>{{ htmlattrdef("name") }}</dt> + <dd>O nome do controle.</dd> + <dt>{{ htmlattrdef("placeholder") }}</dt> + <dd>Uma dica para o usuário sobre o que pode ser inserido no controle. Retornos de carro ou feeds de linha no texto do espaço reservado devem ser tratados como quebras de linha ao renderizar a dica. + <div class="note"><strong>Nota: Os espaços reservados devem ser usados apenas para mostrar um exemplo do tipo de dados que deve ser inserido em um formulário; eles não substituem uma adequada</strong> {{HTMLElement("label")}} elemento vinculado à entrada. Veja {{SectionOnPage("/en-US/docs/Web/HTML/Element/input", "Labels and placeholders")}} para uma explicação completa.</div> + </dd> + <dt>{{ htmlattrdef("readonly") }}</dt> + <dd>Esse atributo booleano indica que o usuário não pode modificar o valor do controle. Ao contrário do <code>disabled</code> atributo, o<code>readonly</code> O atributo não impede o usuário de clicar ou selecionar no controle. O valor de um controle somente leitura ainda é enviado com o formulário.</dd> + <dt>{{ htmlattrdef("required") }}</dt> + <dd>Este atributo especifica que o usuário deve preencher um valor antes de enviar um formulário.</dd> + <dt>{{ htmlattrdef("rows") }}</dt> + <dd>O número de linhas de texto visíveis para o controle.</dd> + <dt>{{ htmlattrdef("spellcheck") }}</dt> + <dd>Especifica se o <code><textarea></code>está sujeito a verificação ortográfica pelo navegador / SO subjacente. o valor pode ser: + <ul> + <li><code>true</code>: Indica que o elemento precisa ter sua ortografia e gramática verificadas.</li> + <li><code>default</code> :Indica que o elemento deve agir de acordo com um comportamento padrão, possivelmente com base no próprio elemento pai <code>spellcheck</code> valor.</li> + <li><code>false</code> : Indica que o elemento não deve ter verificação ortográfica.</li> + </ul> + </dd> + <dt>{{ htmlattrdef("wrap") }}</dt> + <dd>Indica como o controle quebra o texto. Os valores possíveis são: + <ul> + <li><code>hard</code>: O navegador insere automaticamente quebras de linha (CR + LF) para que cada linha não tenha mais que a largura do controle; a <code>cols</code> O atributo também deve ser especificado para que isso entre em vigor.</li> + <li><code>soft</code>: O navegador garante que todas as quebras de linha no valor consistam em um par CR + LF, mas não insira nenhuma quebra de linha adicional.</li> + <li><code>off</code> {{non-standard_inline}}: Como <code>soft</code> mas muda a aparência para <code>white-space: pre</code> segmentos de linha que excedam <code>cols</code> não estão embrulhados e os <code><textarea></code> torna-se rolável horizontalmente.</li> + </ul> + + <p>Se este atributo não for especificado, <code>soft</code> é o seu valor padrão.</p> + </dd> +</dl> + +<h2 id="Estilo_com_CSS">Estilo com CSS</h2> + +<p><code><textarea></code> é um elemento substituído - possui dimensões intrínsecas, como uma imagem rasterizada. Por padrão, sua{{cssxref("display")}} o valor é bloco. Em comparação com outros elementos de formulário, é relativamente fácil de estilizar, com seu modelo de caixa, fontes, esquema de cores etc. sendo facilmente manipuláveis usando CSS comum.</p> + +<p><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">O estilo de formulários HTML fornece algumas dicas úteis sobre estilo</a><code><textarea></code>s.</p> + +<h3 id="Inconsistência_da_linha_de_base">Inconsistência da linha de base</h3> + +<p>A especificação HTML não define onde a linha de base de um <code><textarea></code> ou seja, navegadores diferentes o definem em posições diferentes. Para Gecko, o <code><textarea></code> linha de base é definida na linha de base da primeira linha da primeira linha da área de texto, em outro navegador pode ser definida na parte inferior da <code><textarea></code>caixa. Não use {{cssxref("vertical-align")}}<code>: baseline</code> nele; o comportamento é imprevisível</p> + +<h3 id="Controlando_se_uma_área_de_texto_é_redimensionável">Controlando se uma área de texto é redimensionável</h3> + +<p>Na maioria dos navegadores, <code><textarea></code>s são redimensionáveis - você notará a alça de arrasto no canto direito, que pode ser usada para alterar o tamanho do elemento na página. Isso é controlado pelo {{ cssxref("resize") }} Propriedade CSS - o redimensionamento está ativado por padrão, mas você pode desativá-lo explicitamente usando um<code>resize</code> valor de<code>none</code>:</p> + +<pre class="brush: html">textarea { + resize: none; +} +</pre> + +<h3 id="Estilo_de_valores_válidos_e_inválidos">Estilo de valores válidos e inválidos</h3> + +<p>Valores válidos e inválidos de um <code><textarea></code> elemento (por exemplo, dentro e fora dos limites definidos por<code>minlength</code>, <code>maxlength</code>, ou<code>required</code>) pode ser destacado usando o {{cssxref(":valid")}} e{{cssxref(":invalid")}} pseudo-classes. Por exemplo, para atribuir à sua área de texto uma borda diferente, dependendo se é válida ou inválida:</p> + +<pre class="brush: css">textarea:invalid { + border: 2px dashed red; +} + +textarea:valid { + border: 2px solid lime; +}</pre> + +<h2 id="Exemplo">Exemplo</h2> + +<h3 id="Exemplo_básico">Exemplo básico</h3> + +<p>O exemplo a seguir mostra uma área de texto muito simples, com um número definido de linhas e colunas e algum conteúdo padrão.</p> + +<pre class="brush: html"><textarea name="textarea" + rows="10" cols="50">Write something here</textarea></pre> + +<p>{{ EmbedLiveSample('Basic_example','600','150') }}</p> + +<h3 id="Comprimento_mínimo_e_máximo">Comprimento mínimo e máximo</h3> + +<p>Este exemplo tem um número mínimo e máximo de caracteres - de 10 e 20, respectivamente. Experimente e veja.</p> + +<pre class="brush: html"><textarea name="textarea" + rows="5" cols="30" + minlength="10" maxlength="20">Write something here</textarea></pre> + +<p>{{ EmbedLiveSample('Min_and_max_length','600','80') }}</p> + +<p>Observe que <code>minlength</code> não impede o usuário de remover caracteres para que o número digitado ultrapasse o mínimo, mas faz com que o valor digitado no <code><textarea></code> invalide.Observe também que, mesmo se você tiver um <code>minlength</code> conjunto de valores (3, por exemplo), um campo vazio <code><textarea></code> ainda é considerado válido, a menos que você também tenha o <code>required</code> conjunto de atributos.</p> + +<h3 id="Placeholder">Placeholder</h3> + +<p>Este exemplo tem um espaço reservado definido. Observe como ele desaparece quando você começa a digitar na caixa.</p> + +<pre class="brush: html"><textarea name="textarea" + rows="5" cols="30" + placeholder="Comment text."></textarea></pre> + +<p>{{ EmbedLiveSample('Placeholder','600','80') }}</p> + +<div class="note"> +<p><strong>Nota: Os espaços reservados devem ser usados apenas para mostrar um exemplo do tipo de dados que deve ser inserido em um formulário; eles não substituem uma adequada</strong>{{HTMLElement("label")}} elemento vinculado à entrada. Veja {{SectionOnPage("/en-US/docs/Web/HTML/Element/input", "Labels and placeholders")}} para uma explicação completa.</p> +</div> + +<h3 id="Desativado_e_somente_leitura">Desativado e somente leitura</h3> + +<p>Este exemplo mostra dois <code><textarea></code>s — um dos quais é <code>disabled</code>, e o outro é <code>readonly</code>.Brinque com os dois e verá a diferença de comportamento - O <code>disabled</code> elemento não é selecionável de forma alguma (e seu valor não é enviado), enquanto o elemento <code>readonly</code> é selecionável e seu conteúdo copiável (e seu valor é enviado); você simplesmente não pode editar o conteúdo.</p> + +<pre class="brush: html"><textarea name="textarea" + rows="5" cols="30" + disabled>I am a disabled textarea</textarea> +<textarea name="textarea" + rows="5" cols="30" + readonly>I am a readonly textarea</textarea> +</pre> + +<p>{{ EmbedLiveSample('Disabled_and_readonly','600','80') }}</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">Elemento associado ao formulário de conteúdo de fluxo, conteúdo de frases, conteúdo interativo, listado, rotulável, redefinível e submetível a envio.</a></td> + </tr> + <tr> + <th scope="row">Conteúdo permitido</th> + <td>Text</td> + </tr> + <tr> + <th scope="row">Omissão de tag</th> + <td><strong style="font-size: 1rem; font-style: inherit; font-weight: 700; letter-spacing: -0.00278rem;">Parents permitido</strong></td> + </tr> + <tr> + <th scope="row"> + <p>Funções ARIA permitidas</p> + </th> + <td>None</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLTextAreaElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Especificacões">Especificacões</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-textarea-element', '<textarea>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-textarea-element', '<textarea>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.7', '<textarea>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> + +<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você deseja contribuir com os dados, consulte https://github.com/mdn/browser-compat-data e envie-nos uma solicitação de recebimento.</div> + +<p>{{Compat("html.elements.textarea")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<p>Outros elementos relacionados ao formulário:</p> + +<ul> + <li>{{ HTMLElement("form") }}</li> + <li>{{ HTMLElement("button") }}</li> + <li>{{ HTMLElement("datalist") }}</li> + <li>{{ HTMLElement("legend") }}</li> + <li>{{ HTMLElement("label") }}</li> + <li>{{ HTMLElement("select") }}</li> + <li>{{ HTMLElement("optgroup") }}</li> + <li>{{ HTMLElement("option") }}</li> + <li>{{ HTMLElement("input") }}</li> + <li>{{ HTMLElement("keygen") }}</li> + <li>{{ HTMLElement("fieldset") }}</li> + <li>{{ HTMLElement("output") }}</li> + <li>{{ HTMLElement("progress") }}</li> + <li>{{ HTMLElement("meter") }}</li> +</ul> diff --git a/files/pt-br/web/html/element/tfoot/index.html b/files/pt-br/web/html/element/tfoot/index.html new file mode 100644 index 0000000000..e6c2531394 --- /dev/null +++ b/files/pt-br/web/html/element/tfoot/index.html @@ -0,0 +1,203 @@ +--- +title: '<tfoot>: Elemento para o rodapé da tabela' +slug: Web/HTML/Element/tfoot +translation_of: Web/HTML/Element/tfoot +--- +<div>{{HTMLRef}}</div> + +<p id="Summary">O <strong><code><tfoot></code> </strong>é um <strong>elemento HTML </strong> que define um conjunto de linhas as quais farão parte do rodapé de uma tabela HTML</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/tfoot.html","tabbed-taller")}}</div> + +<p class="hidden">As fontes dos exemplos interativos estão armazenadas no repositório do GitHub. Se você gosta de contribuir com exemplos interativos para o projeto por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> e nos envie uma requesição.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/Guide/HTML/Content_categories">Categorias de conteúdo</a></th> + <td>Nenhum.</td> + </tr> + <tr> + <th scope="row">Conteúdo permitido</th> + <td>Zero ou mais {{HTMLElement("tr")}} elementos.</td> + </tr> + <tr> + <th scope="row">Omitir Tag</th> + <td>Iniciar a tag é obrigatório. O fechamento da tag pode ser omitida caso não exista mais conteúdo no elemento pai {{HTMLElement("table")}}.</td> + </tr> + <tr> + <th scope="row">Pais permitidos</th> + <td>O elemento {{HTMLElement("table")}}. O {{HTMLElement("tfoot")}} deve aparecer depois de qualquer {{HTMLElement("caption")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, ou elementos {{HTMLElement("tr")}}. Note que isso é requerido no HTML5.<br> + {{HTMLVersionInline("4")}} O elemento {{HTMLElement("tfoot")}} não pode ser colocado depois de qualquer {{HTMLElement("tbody")}} e o elemento {{HTMLElement("tr")}}. Note que isso contradiz diretamento com as normas do HTML5.</td> + </tr> + <tr> + <th scope="row">Papeis de ARIA permitidos</th> + <td>Qualquer um</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLTableSectionElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento inclui os <a href="/en-US/docs/Web/HTML/Global_attributes">atributos globais</a>.</p> + +<dl> + <dt>{{htmlattrdef("align")}} {{Deprecated_inline}} no {{HTMLVersionInline("4")}}, {{obsolete_inline}} no {{HTMLVersionInline("5")}}</dt> + <dd>Estes atributos especificam como será o alinhamento horizontal de cada conteúdo da célula. Os possíveis valores são: + <ul> + <li><code>left</code>, alinha o conteúdo do elemento a esquerda da célula</li> + <li><code>center</code>, centraliza o conteúdo ao centro da célula</li> + <li><code>right</code>, alinha o conteúdo do elemento a direita da célula</li> + <li><code>justify</code>, insere espaços ao texto para que o mesmo fique centralizado na célula</li> + <li><code>char</code>, alinha o texto em um alinhamento especial com um deslocamento mínimo definido pelos atributos {{htmlattrxref("char", "tbody")}} e {{htmlattrxref("charoff", "tbody")}} atributos {{unimplemented_inline("2212")}}.</li> + </ul> + + <p>Se nenhum atributo for definido o valor <code>left</code> é passado por padrão</p> + + <div class="note"><strong>Note: </strong>Não use esse atributo o mesmo está obsoleto (não suportado) no último padrão. + + <ul> + <li>Para obter os mesmo efeitos <code>left</code>, <code>center</code>, <code>right</code> ou <code>justify</code>, use a propriedade {{cssxref("text-align")}} do CSS.</li> + <li>Para obter o mesmo efeito no CSS3, você pode usar os valores {{htmlattrxref("char", "tfoot")}} com o valor de {{cssxref("text-align")}} propriedade {{unimplemented_inline}}.</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt> + <dd>Este atributo define uma cor de fundo para cada célula da coluna. Cada um dos 6 dígitos define um código hexadecimal no <a class="external" href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>, prefixado pelo '#'. Um desses nomes de cores predefinidos também podem ser usado: + <table style="width: 80%;"> + <tbody> + <tr> + <td style="background-color: black; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>black</code> = "#000000"</td> + <td style="background-color: green; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>green</code> = "#008000"</td> + </tr> + <tr> + <td style="background-color: silver; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>silver</code> = "#C0C0C0"</td> + <td style="background-color: lime; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>lime</code> = "#00FF00"</td> + </tr> + <tr> + <td style="background-color: gray; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>gray</code> = "#808080"</td> + <td style="background-color: olive; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>olive</code> = "#808000"</td> + </tr> + <tr> + <td style="background-color: white; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>white</code> = "#FFFFFF"</td> + <td style="background-color: yellow; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>yellow</code> = "#FFFF00"</td> + </tr> + <tr> + <td style="background-color: maroon; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>maroon</code> = "#800000"</td> + <td style="background-color: navy; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>navy</code> = "#000080"</td> + </tr> + <tr> + <td style="background-color: red; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>red</code> = "#FF0000"</td> + <td style="background-color: blue; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>blue</code> = "#0000FF"</td> + </tr> + <tr> + <td style="background-color: purple; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>purple</code> = "#800080"</td> + <td style="background-color: teal; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>teal</code> = "#008080"</td> + </tr> + <tr> + <td style="background-color: fuchsia; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>fuchsia</code> = "#FF00FF"</td> + <td style="background-color: aqua; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>aqua</code> = "#00FFFF"</td> + </tr> + </tbody> + </table> + + <div class="note"><strong>Nota de uso:</strong> Não use este atributo, como não é mais padrão ele não foi implementado em algumas versões do Microsoft Internet Explorer: o elemento {{HTMLElement("tfoot")}} pode ser estilizando com <a href="/en-US/docs/Web/CSS">CSS</a>. Para conseguir simular efeitos do atributo <strong>bgcolor</strong> use a propriedade {{cssxref("background-color")}} do <a href="/en-US/docs/Web/CSS">CSS</a> , nos elementos {{HTMLElement("td")}} ou {{HTMLElement("th")}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("char")}} {{Deprecated_inline}} no {{HTMLVersionInline("4")}}, {{obsolete_inline}} no {{HTMLVersionInline("5")}}</dt> + <dd>O elemento é usado para alinhar as células em uma columa. Valores típicos para isso inclui o periódico (.) quando se alinha valores monetários. Se {{htmlattrxref("align", "tfoot")}} não é definido para <code>char</code>, este atributo é ignorado + <div class="note"><strong>Nota: </strong>Não use esté atributo, ele é obsoleto (e não é mais suportado) desde da última versão padrão. Em vez disso use {{htmlattrxref("char", "tfoot")}} no CSS3, você pode usar o atributo {{htmlattrxref("char", "tfoot")}} com a propriedade {{cssxref("text-align")}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline}} no {{HTMLVersionInline("4")}}, {{obsolete_inline}} no {{HTMLVersionInline("5")}}</dt> + <dd>O atributo é usado para indicar um número de caracteres para compensar os dados da coluna dos caracteres de alinhamento especificados pelo atributo <strong>char</strong>. + <div class="note"><strong>Nota: </strong>Não use esse atributo o mesmo está obsoleto (e não é mais suportado) na última versão padrão.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("valign")}} {{Deprecated_inline}} no {{HTMLVersionInline("4")}}, {{obsolete_inline}} no {{HTMLVersionInline("5")}}</dt> + <dd>O atributo específico para o alinhamento do texto dentro de cada linha da célula do cabeçalho de uma tabela. Possíveis valores para esse atributo são: + <ul> + <li><code>baseline</code>, coloca o texto o mais próximo possível da parte de baixo da célula, mas o alinha a <a class="external" href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">baseline</a> dos caracteres em vez do <strong>bottom</strong> deles. Caso os caracteres tenham todos os mesmo tamanho, eles terão o mesmo efeito que <code>bottom</code>.</li> + <li><code>bottom</code>, coloca o texto o mais próximo possível da parte de baixo da célula;</li> + <li><code>middle</code>, centraliza o texto na célula;</li> + <li>e <code>top</code>, coloca o texto o mais próximo possível do topo da célula.</li> + </ul> + + <div class="note"><strong>Nota:</strong> Não use este atributo eles está obsoleto (e não é suportado) no último padrão: em vez disso use a propriedade {{cssxref("vertical-align")}} do CSS.</div> + </dd> +</dl> + +<h2 id="Exemplos">Exemplos</h2> + +<p>Por favor veja a página {{HTMLElement("table")}} para exemplos sobre <code><tfoot></code>.</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificações</th> + <th scope="col">Status</th> + <th scope="col">Comentários</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG','tables.html#the-tfoot-element','tfoot element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','tabular-data.html#the-tfoot-element','tfoot element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_com_Navegadores">Compatibilidade com Navegadores</h2> + +<div class="hidden">A compatibilidade das tabelas nesta página é gerada por uma estrutura de dados. Se você quiser contribuir com esses dados, por favor confira em <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos envie uma requisição.</div> + +<p>{{Compat("html.elements.tfoot")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>Outros elemento HTML relacionados a tabela: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};</li> + <li>Propriedades CSS e pseudo-classes são especialmente úteis para estilizar elementos <code><tfoot></code>: + <ul> + <li>a pseudo-class {{cssxref(":nth-child")}} para definir o alinhamento nas células de uma coluna;</li> + <li>a propriedade {{cssxref("text-align")}} para alinar as células do conteúdo que tenham um memso caractere como '.'.</li> + </ul> + </li> +</ul> diff --git a/files/pt-br/web/html/element/th/index.html b/files/pt-br/web/html/element/th/index.html new file mode 100644 index 0000000000..6d4a9fcde8 --- /dev/null +++ b/files/pt-br/web/html/element/th/index.html @@ -0,0 +1,234 @@ +--- +title: <th> +slug: Web/HTML/Element/th +translation_of: Web/HTML/Element/th +--- +<div>{{HTMLRef}}</div> + +<p>O <strong>elemento</strong> <strong>HTML <code><th></code> </strong> define uma célula cabeçalho do grupo de células de sua tabela. A exatidão natural deste grupo é denifida pelos atributos {{htmlattrxref("scope", "th")}} e {{htmlattrxref("headers", "th")}}.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/th.html","tabbed-taller")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/Guide/HTML/Content_categories">Categorias do conteúdo</a></th> + <td>Nenhuma.</td> + </tr> + <tr> + <th scope="row">Conteúdo permitido</th> + <td><a href="/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">Conteúdo de fluxo</a>, mas sem descendentes de cabeçalho, rodapé, conteúdo de seção ou conteúdo de cabeçalho.</td> + </tr> + <tr> + <th scope="row">Omissão de tag</th> + <td>A tag de abertura é obrigatória.<br> + A tag de fechamento pode ser omitida, se for imediatamente seguido por um {{HTMLElement("th")}}, {{HTMLElement("td")}} ou se não houver mais dados em seu elemento pai.</td> + </tr> + <tr> + <th scope="row">Elemento pai</th> + <td>Um elemento {{HTMLElement("tr")}}.</td> + </tr> + <tr> + <th scope="row">Funções ARIA permitidas</th> + <td>Qualquer</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLTableHeaderCellElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Esse elemento inclui os <a href="/en-US/docs/Web/HTML/Global_attributes">atributos globais</a>.</p> + +<dl> + <dt>{{htmlattrdef("abbr")}}</dt> + <dd>Este atributo contém uma breve descrição do conteúdo da célula. Alguns usuários-agentes, como leitores, pode apresentar essa descrição antes do próprio conteúdo.</dd> + <dt>{{htmlattrdef("colspan")}}</dt> + <dd>Este atributo contém um valor inteiro não negativo que indica quantas colunas a célula ocupará. Valor padrão <code>1</code>. Valores acima de 1000 são considerados incorretos e serão modificados para o valor padrão <code>1</code>.</dd> + <dt>{{htmlattrdef("headers")}}</dt> + <dd>Este atributo contém uma lista de palavras separadas por espaço, cada uma correspondendo ao atributo <strong>id</strong> dos elementos {{HTMLElement("th")}} que se aplicam a este elemento.</dd> + <dd></dd> + <dt>{{htmlattrdef("rowspan")}}</dt> + <dd>Este atributo contém um valor inteiro não negativo que indica quantas linhas a célula estende. Valor padrão <code>1</code>. Se seu valor é definido como <code>0</code>, ele se estende até o final da tabela ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, mesmo que implicitamente definido), que a célula pertence. Não é possível colocar valores superiores a 65534.</dd> + <dt>{{htmlattrdef("scope")}}</dt> + <dd>Este atributo define as células a que o cabeçalho (definido no elemento {{HTMLElement("th")}}) se relaciona.<br> + Possíveis valores:</dd> + <dd> + <ul> + <li><code>row</code>: O cabeçalho se relaciona com todas as células da linha a que pertence.</li> + <li><code>col</code>: O cabeçalho se relaciona com todas as células da coluna a que pertence.</li> + <li><code>rowgroup</code>: O cabeçalho pertence a um grupo de linhas e se relaciona com todas as suas células. Essas células podem ser colocadas à direita ou à esquerda do cabeçalho, dependendo do valor do atributo <code><a href="/en-US/docs/Web/HTML/Global_attributes/dir">dir</a></code> no elemento {{HTMLElement("table")}}.</li> + <li><code>colgroup</code>: O cabeçalho pertence a um grupo de colgroup e se relaciona com todas as suas células.</li> + <li><code>auto</code></li> + </ul> + + <p>O valor padrão quando este atributo não é especificado é <code>auto</code>.</p> + + <h3 id="Atributos_depreciados">Atributos depreciados</h3> + + + </dd> + <dt>{{htmlattrdef("align")}} {{obsolete_inline("html5")}}</dt> + <dd>Este atributo especifica como o alinhamento horizontal do conteúdo da célula será tratado.</dd> + <dd>Possíveis valores: + <ul> + <li><code>left</code>: O conteúdo é alinhado a esquerda da célula.</li> + <li><code>center</code>: O conteúdo é centralizado da célula.</li> + <li><code>right</code>: O conteúdo é alinhado a direita da célula.</li> + <li><code>justify</code> (somente com texto): O conteúdo é estendido dentro da célula para cobrir toda a sua largura.</li> + <li><code>char</code> (somente com texto): O conteúdo está alinhado a um caractere dentro do elemento <code><th></code> com deslocamento mínimo. Esse caractere é definido pelos atributos {{htmlattrxref("char", "th")}} e {{htmlattrxref("charoff", "th")}}.</li> + </ul> + + <p>O valor padrão quando não especificado é <code>left</code>.</p> + </dd> + <dd> + + + <div class="note"><strong>Note: </strong>Não use esse atributo, pois ele está obsoleto no padrão mais recente. + + <ul> + <li>Para alcançar o mesmo efeito que os valores <code>left</code>, <code>center</code>, <code>right</code> ou <code>justify</code>, aplique a propriedade CSS {{cssxref("text-align")}} no elemento.</li> + <li>Para alcançar o mesmo efeito que os valor <code>char</code>, atribue a {{cssxref("text-align")}} o mesmo valor que você usaria para {{htmlattrxref("char", "th")}}. {{unimplemented_inline}} no CSS3.</li> + </ul> + </div> + + + </dd> + <dt>{{htmlattrdef("axis")}} {{obsolete_inline("html5")}}</dt> + <dd>Este atributo contém uma lista de palavras separadas por espaço. Cada palavra é o <code>id</code> de um grupo de células às quais este cabeçalho se aplica. + <div class="note"><strong>Note:</strong> Não use esse atributo, pois ele está obsoleto no padrão mais recente: use o atributo {{htmlattrxref("scope", "th")}}.</div> + </dd> + <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt> + <dd>Esse atributo define a cor de fundo de cada célula na coluna. Ele consiste de 6 digitos hexadecimais definidos pelo <a href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a> com o prefixo '#. Nesse atributo pode ser usado dezesseis cores predefinidas: + <table> + <tbody> + <tr> + <td style="background-color: black; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>black</code> = "#000000"</td> + <td style="background-color: green; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>green</code> = "#008000"</td> + </tr> + <tr> + <td style="background-color: silver; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>silver</code> = "#C0C0C0"</td> + <td style="background-color: lime; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>lime</code> = "#00FF00"</td> + </tr> + <tr> + <td style="background-color: gray; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>gray</code> = "#808080"</td> + <td style="background-color: olive; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>olive</code> = "#808000"</td> + </tr> + <tr> + <td style="background-color: white; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>white</code> = "#FFFFFF"</td> + <td style="background-color: yellow; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>yellow</code> = "#FFFF00"</td> + </tr> + <tr> + <td style="background-color: maroon; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>maroon</code> = "#800000"</td> + <td style="background-color: navy; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>navy</code> = "#000080"</td> + </tr> + <tr> + <td style="background-color: red; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>red</code> = "#FF0000"</td> + <td style="background-color: blue; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>blue</code> = "#0000FF"</td> + </tr> + <tr> + <td style="background-color: purple; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>purple</code> = "#800080"</td> + <td style="background-color: teal; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>teal</code> = "#008080"</td> + </tr> + <tr> + <td style="background-color: fuchsia; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>fuchsia</code> = "#FF00FF"</td> + <td style="background-color: aqua; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>aqua</code> = "#00FFFF"</td> + </tr> + </tbody> + </table> + + <div class="note"><strong>Note:</strong> Não use esse atributo como padrão pois não é implementado em algumas versões do Microsoft Internet Explorer: O elemento {{HTMLElement("th")}} deve ser estilizado usando <a href="/en-US/docs/Web/CSS">CSS</a>. Para criar um efeito semelhante, use a propriedade {{cssxref("background-color")}} do <a href="/en-US/docs/Web/CSS">CSS</a>.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("char")}} {{obsolete_inline("html5")}}</dt> + <dd>O conteúdo da célula está alinhado a um caractere. Os valores típicos incluem um ponto (.) para alinhar números ou valores monetários. Se {{htmlattrxref("align", "th")}} não está definido no <code>char</code>, o atributo é ignorado. + <div class="note"><strong>Note:</strong> Não use esse atributo, pois ele está obsoleto no padrão mais recente. Para obter o mesmo efeito, você pode especificar o caractere como o primeiro valor da propriedade {{cssxref("text-align")}}, {{unimplemented_inline}} no CSS3.</div> + </dd> + <dt>{{htmlattrdef("charoff")}} {{obsolete_inline("html5")}}</dt> + <dd>Este atributo é usado para mudar os dados da coluna para a direita do caractere especificado pelo atributo <strong>char</strong>. Seu valor especifica o comprimento desse deslocamento. + <div class="note"><strong>Note: </strong>Não use esse atributo, pois ele está obsoleto no padrão mais recente.</div> + </dd> + <dt>{{htmlattrdef("height")}} {{Deprecated_inline("html 4")}}, {{obsolete_inline("html5")}}</dt> + <dd>Esse atributo é usado para definir uma altura recomendada da célula. + <div class="note"><strong>Note: </strong>Não use esse atributo, pois ele está obsoleto no padrão mais recente: use a propriedade CSS {{cssxref("height")}}.</div> + </dd> + <dt>{{htmlattrdef("valign")}} {{obsolete_inline("html5")}}</dt> + <dd>Esse atributo especifica como o texto é alinhado verticalmente na célula.</dd> + <dd>Possíveis valores: + <ul> + <li><code>baseline</code>: Posiciona o texto próximo à parte inferior da célula e o alinha ao <a href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">roda pé</a>. Se os caracteres não descerem abaixo da linha de base, o valor da linha de base alcançará o mesmo efeito que <code>bottom</code>.</li> + <li><code>bottom</code>: Posiciona o texto próximo à parte inferior da célula.</li> + <li><code>middle</code>: Centraliza o texto na célula.</li> + <li><code>top</code>: Posiciona o texto próximo à parte superior da célula.</li> + </ul> + + <div class="note"><strong>Note:</strong> Não use esse atributo, pois ele está obsoleto no padrão mais recente: use a propriedade CSS {{cssxref("vertical-align")}}.</div> + </dd> + <dt>{{htmlattrdef("width")}} {{Deprecated_inline("html 4")}}, {{obsolete_inline("html5")}}</dt> + <dd>Este atributo é usado para definir uma largura de célula recomendada. Espaço adicional pode ser adicionado com as propriedades {{domxref("HTMLTableElement.cellSpacing", "cellspacing")}} e {{domxref("HTMLTableElement.cellPadding", "cellpadding")}}, e a largura do elemento {{HTMLElement("col")}} pode criar largura extra. Mas, se a largura de uma coluna for muito estreita para mostrar uma célula específica corretamente, ela será ampliada quando exibida. + <div class="note"><strong>Note:</strong> Não use esse atributo, pois ele está obsoleto no padrão mais recente: use a propriedade CSS {{cssxref("width")}}.</div> + </dd> +</dl> + +<h2 id="Exemplos">Exemplos</h2> + +<p>Veja {{HTMLElement("table")}} para mais elementos <code><th></code>.</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificações</th> + <th scope="col">Estados</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG','tables.html#the-th-element','th element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','tabular-data.html#the-th-element','th element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h2> + + + +<p>{{Compat("html.elements.th")}}</p> + +<h2 id="Veja_mais">Veja mais</h2> + +<ul> + <li>Outros elementos HTML relacionados: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}.</li> +</ul> diff --git a/files/pt-br/web/html/element/time/index.html b/files/pt-br/web/html/element/time/index.html new file mode 100644 index 0000000000..9c613b7bb6 --- /dev/null +++ b/files/pt-br/web/html/element/time/index.html @@ -0,0 +1,145 @@ +--- +title: <time> +slug: Web/HTML/Element/time +translation_of: Web/HTML/Element/time +--- +<h2 id="Resumo">Resumo</h2> + +<p>O elemento HTML <em>time</em> <span style="line-height: inherit;">(</span><code style="font-size: 14px; line-height: inherit;"><time></code><span style="line-height: inherit;">) representa o tempo tanto no formato de 24 horas ou como uma data precisa no calendário Gregoriano (com informações </span><span style="line-height: inherit;">opcionais </span><span style="line-height: inherit;">de tempo e fuso horário)</span></p> + +<p>Este elemento é destinado a apresentar datas e horas no dispositivo em um formato legível<span style="line-height: inherit;">. Isto pode ser útil aos agentes do usuário em oferecer qualquer programação de eventos ao calendário do utilizador.</span></p> + +<div class="note"><strong>Notas de uso:</strong> Este elemento não é adequado por exemplo, quando uma data específica não pode ser calculada, e nem deveria ser utilizado em datas anteriores ao calendário Gregoriano (devido as complicações com os cálculos dessas datas).</div> + +<div class="note"><strong>Nota de estatus:</strong> Este elemento foi concebido e está em discussão desde 2011 (<a class="external" href="http://blog.whatwg.org/weekly-time-data" title="http://blog.whatwg.org/weekly-time-data">http://blog.whatwg.org/weekly-time-data</a><span style="line-height: 1.5em;">)</span></div> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content categories">Categorias de conteúdo</a></td> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a></td> + </tr> + <tr> + <td>Permitted content</td> + <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">Phrasing content</a>, but no descendant <code>time</code> elements.</td> + </tr> + <tr> + <td>Tag omission</td> + <td>None, both the start tag and the end tag are mandatory.</td> + </tr> + <tr> + <td>Permitted parent elements</td> + <td>Any element that accepts phrasing content.</td> + </tr> + <tr> + <td>Normative document</td> + <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-time-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-time-element">HTML5, section 4.6.10</a></td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Como todo outro elemento HTML, este elemento suporta os <a href="/en-US/docs/HTML/Global_attributes">atributos globais</a>.</p> + +<dl> + <dt>{{htmlattrdef("datetime")}}</dt> + <dd>Esse atributo indica a hora e a data do elemento e deve ser uma data válida com uma string de tempo opcional. Se o valor não puder ser analisado como uma data com uma string de tempo opcional, o elemento não possui um timestamp associado.</dd> + <dt>{{htmlattrdef("pubdate")}}</dt> + <dd>(This feature is still being discussed by the WHATWG and the W3C HTML5 Working Group.) This Boolean attribute specifies that the date and time given by the element is the publication date of a document. The document it applies to is either the nearest ancestor article element or the document as a whole (if there is no ancestor <a href="/en-US/docs/HTML/Element/article" title="HTML/Element/Article">article</a> element). If true, the <code>time</code> element must have a corresponding date. Additionally, each <code>time</code> element indicating a publication date must be the only <code>time</code> element that does so for that document.</dd> +</dl> + +<h2 id="DOM_interface">DOM interface</h2> + +<p>This element implements the <code><a href="/en-US/docs/DOM/HTMLTimeElement" title="DOM/HTMLTimeElement">HTMLTimeElement</a></code> interface.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Simple_example" name="Simple_example">Simple example</h3> + +<pre class="brush: html"><p>The concert starts at <time>20:00</time>.</p> +</pre> + +<p>Above HTML will output:</p> + +<p>The concert starts at 20:00.</p> + +<h3 id="Pubdate_example" name="Pubdate_example"><code>pubdate</code> example</h3> + +<pre class="brush: html"><article> + <p>This article was created on <time pubdate>2011-01-28</time>.</p> +</article> +</pre> + +<p>Above HTML will output:</p> + +<p>This article was created on 2011-01-28.</p> + +<h3 id="Datetime_example" name="Datetime_example"><code>datetime</code> example</h3> + +<pre class="brush: html"><p>The concert took place on <time datetime="2001-05-15 19:00">May 15</time>.</p> +</pre> + +<p>Above HTML will output:</p> + +<p>The concert took place on May 15.</p> + +<h2 id="Compatibilidade">Compatibilidade</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}} {{bug("629801")}}</td> + <td>{{CompatUnknown}}</td> + <td>11.50</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#the-time-element" title="http://www.whatwg.org/specs/web-apps/current-work/#the-time-element">The <code>time</code> element</a> (HTML5 specification)</li> +</ul> + +<p> </p> diff --git a/files/pt-br/web/html/element/title/index.html b/files/pt-br/web/html/element/title/index.html new file mode 100644 index 0000000000..2cd221d43e --- /dev/null +++ b/files/pt-br/web/html/element/title/index.html @@ -0,0 +1,93 @@ +--- +title: '<title>: O titulo do documento.' +slug: Web/HTML/Element/title +tags: + - Element + - HTML + - Nome da Aba + - Nome da Janela + - Nome da Página + - Reference + - Título da Aba + - Título da Janela + - Título da Página + - Web + - título +translation_of: Web/HTML/Element/title +--- +<p>O <strong>elemento HTML </strong><code><title></code> (<em>Elemento HTML Título</em>) define o título do documento, mostrado na barra de título de um navegador ou na aba da página. Pode conter somente texto e quaisquer marcações contidas no texto não são interpretadas.</p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categorias de conteúdo</a></dfn><a href="/pt-BR/docs/Web/Guide/HTML/Content_categories#Metadata_content">Conteúdo de metadados</a>.</li> + <li><dfn>Conteúdo permitido</dfn> Texto que não seja whitespace entre elementos.</li> + <li><dfn>Omissão de marcação</dfn>Todas as marcações são necessárias. Perceba que suprimir <code></title></code> fará o navegador ignorar o resto da página.</li> + <li><dfn>Elementos pais permitidos</dfn>Um elemento {{ HTMLElement("head") }} que não contenha outro elemento {{ HTMLElement("title") }}.</li> + <li><dfn>Funções ARIA permitidas</dfn> Nenhuma.</li> + <li><dfn>Interface DOM</dfn> {{domxref("HTMLTitleElement")}}</li> +</ul> + +<h2 id="Atributos">Atributos</h2> + +<p><span style="line-height: 21px;">Este elemento inclui somente os </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">atributos globais</a><span style="line-height: 21px;">.</span></p> + +<h2 id="Notas_de_uso">Notas de uso</h2> + +<p>O elemento <code><title></code> é sempre usado dentro da {{HTMLElement("head")}} da página.</p> + +<h2 id="Exemplo">Exemplo</h2> + +<pre class="brush: html"><title>Título incrível</title> +</pre> + +<h2 id="Specifications" name="Specifications">Preocupações de acessibilidade</h2> + +<p>É importante informar um valor para o <code>title</code> que descreva o propósito da página.</p> + +<p>Uma técnica comum de navegação para usuários de tecnologias assistivas é ler o título da página a fim de deduzir o que ela contém. Isso ocorre porque navegar pela página para determinar o conteúdo dela pode ser confuso e consumir muito tempo.</p> + +<h4 id="Exemplo_2">Exemplo</h4> + +<pre class="brush: html"><title>Menu - Casa Azul Comida Chinesa - FoodYum: Faça seu pedido online!</title></pre> + +<p>Para ajudar o usuário, atualize o valor do <code>title</code> para refletir mudanças significativas no estado da página (como problemas de validação em formulários).</p> + +<h4 id="Exemplo_3">Exemplo</h4> + +<pre><title>2 erros - Seu pedido - Casa Azul Comida Chinesa - FoodYum: Faça seu pedido online!</title></pre> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-title-element', '<title>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-title-element', '<title>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.2', '<title>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</h2> + +<div class="hidden"> +<p>A tabela de compatibilidade nesta página é gerada a partir dos dados estruturados. Se você quiser contribuir com os dados confira <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos uma solicitação de recebimento.</p> +</div> + +<p> {{Compat("html.elements.title")}}</p> diff --git a/files/pt-br/web/html/element/track/index.html b/files/pt-br/web/html/element/track/index.html new file mode 100644 index 0000000000..3e8d7dd53a --- /dev/null +++ b/files/pt-br/web/html/element/track/index.html @@ -0,0 +1,162 @@ +--- +title: <track> +slug: Web/HTML/Element/track +tags: + - Elemento + - HTML + - HTML5 + - Web + - legenda +translation_of: Web/HTML/Element/track +--- +<div>{{HTMLRef}}</div> + +<p>O <strong>elemento HTML <code><track></code> </strong>é usado como filho dos elementos de mídia{{HTMLElement("audio")}} e {{HTMLElement("video")}}. Ele permite que você especifique faixas de texto temporizadas (ou dados baseados em tempo), por exemplo, para lidar automaticamente com legendas. As faixas são formatadas em <a href="/en-US/docs/Web/API/Web_Video_Text_Tracks_Format">WebVTT format</a> (arquivos <code>.vtt</code>) — Web Video Text Tracks or <a href="https://w3c.github.io/ttml2/index.html">Timed Text Markup Language (TTML).</a></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/track.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> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Categorias de conteúdo</th> + <td>Nenhuma</td> + </tr> + <tr> + <th scope="row">Conteúdo permitido</th> + <td>Nenhum, é um {{Glossary("empty element")}}.</td> + </tr> + <tr> + <th scope="row">Omissão de tag</th> + <td>Como é um elemento vazio, a tag inicial deve estar presente e a tag final não deve estar presente.</td> + </tr> + <tr> + <th scope="row">Permite Parentes</th> + <td>Um elemento de mídia, antes de qualquer <a href="/en-US/docs/HTML/Content_categories#Flow_content">conteúdo de fluxo</a>.</td> + </tr> + <tr> + <th scope="row">Funções ARIA permitidas</th> + <td>Nenhum</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLTrackElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento inclui os <a href="/en-US/docs/HTML/Global_attributes">atributos globais</a>.</p> + +<dl> + <dt>{{htmlattrdef("default")}}</dt> + <dd>This attribute indicates that the track should be enabled unless the user's preferences indicate that another track is more appropriate. This may only be used on one <code>track</code> element per media element.</dd> + <dt>{{htmlattrdef("kind")}}</dt> + <dd>How the text track is meant to be used. If omitted the default kind is <code>subtitles</code>. If the attribute is not present, it will use the <code>subtitles</code>. If the attribute contains an invalid value, it will use <code>metadata</code>. (Versions of Chrome earlier than 52 treated an invalid value as <code>subtitles</code>.) The following keywords are allowed: + <ul> + <li><code>subtitles</code> + <ul> + <li>Subtitles provide translation of content that cannot be understood by the viewer. For example dialogue or text that is not English in an English language film.</li> + <li>Subtitles may contain additional content, usually extra background information. For example the text at the beginning of the Star Wars films, or the date, time, and location of a scene.</li> + </ul> + </li> + <li><code>captions</code> + <ul> + <li>Closed captions provide a transcription and possibly a translation of audio.</li> + <li>It may include important non-verbal information such as music cues or sound effects. It may indicate the cue's source (e.g. music, text, character).</li> + <li>Suitable for users who are deaf or when the sound is muted.</li> + </ul> + </li> + <li><code>descriptions</code> + <ul> + <li>Textual description of the video content.</li> + <li>Suitable for users who are blind or where the video cannot be seen.</li> + </ul> + </li> + <li><code>chapters</code> + <ul> + <li>Chapter titles are intended to be used when the user is navigating the media resource.</li> + </ul> + </li> + <li><code>metadata</code> + <ul> + <li>Tracks used by scripts. Not visible to the user.</li> + </ul> + </li> + </ul> + </dd> + <dt>{{htmlattrdef("label")}}</dt> + <dd>A user-readable title of the text track which is used by the browser when listing available text tracks.</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>Address of the track (<code>.vtt</code> file). Must be a valid URL. This attribute must be specified and its URL value must have the same origin as the document — unless the {{HTMLElement("audio")}} or {{HTMLElement("video")}} parent element of the <code>track</code> element has a <code><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">crossorigin</a></code> attribute.</dd> + <dt>{{htmlattrdef("srclang")}}</dt> + <dd>Language of the track text data. It must be a valid <a href="https://r12a.github.io/app-subtags/">BCP 47</a> language tag. If the <code>kind</code> attribute is set to <code>subtitles,</code> then <code>srclang</code> must be defined.</dd> +</dl> + +<h2 id="Usage_notes">Usage notes</h2> + +<p>The type of data that <code> track</code> adds to the media is set in the <code>kind</code> attribute, which can take values of <code>subtitles</code>, <code>captions</code>, <code>descriptions</code>, <code>chapters</code> or <code>metadata</code>. The element points to a source file containing timed text that the browser exposes when the user requests additional data.</p> + +<p>A <code>media</code> element cannot have more than one <code>track</code> with the same <code>kind</code>, <code>srclang</code>, and <code>label</code>.</p> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: html"><video controls poster="/images/sample.gif"> + <source src="sample.mp4" type="video/mp4"> + <source src="sample.ogv" type="video/ogv"> + <track kind="captions" src="sampleCaptions.vtt" srclang="en"> + <track kind="descriptions" + src="sampleDescriptions.vtt" srclang="en"> + <track kind="chapters" src="sampleChapters.vtt" srclang="en"> + <track kind="subtitles" src="sampleSubtitles_de.vtt" srclang="de"> + <track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en"> + <track kind="subtitles" src="sampleSubtitles_ja.vtt" srclang="ja"> + <track kind="subtitles" src="sampleSubtitles_oz.vtt" srclang="oz"> + <track kind="metadata" src="keyStage1.vtt" srclang="en" + label="Key Stage 1"> + <track kind="metadata" src="keyStage2.vtt" srclang="en" + label="Key Stage 2"> + <track kind="metadata" src="keyStage3.vtt" srclang="en" + label="Key Stage 3"> + <!-- Fallback --> + ... +</video> +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG','embedded-content.html#the-track-element','track element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "embedded-content-0.html#the-track-element", "track element")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.track")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/HTML/WebVTT">WebVTT text track format</a></li> +</ul> diff --git a/files/pt-br/web/html/element/ul/index.html b/files/pt-br/web/html/element/ul/index.html new file mode 100644 index 0000000000..ccd89eb04a --- /dev/null +++ b/files/pt-br/web/html/element/ul/index.html @@ -0,0 +1,186 @@ +--- +title: <ul> +slug: Web/HTML/Element/ul +tags: + - Elemento + - Guía + - HTML + - Indentação + - Intermediário + - Lista + - Listagem <ul> + - Referencia + - menu+HTML +translation_of: Web/HTML/Element/ul +--- +<p>O <strong>elemento HTML<code> <ul> </code></strong>(ou <em>elemento</em> <em>HTML de Lista desordenada</em><code>)</code> representa uma lista de itens sem ordem rígida, isto é, uma coleção de itens que não trazem uma ordenação numérica e as suas posições, nessa lista, são irrelevantes. Caracteristicamente, os itens em uma lista desordenada são exibidos com um marcador que pode ter várias formas, como um ponto, um círculo, ou um quadrado. O tipo de marcador não é definido na descrição HTML da página, mas na CSS associada, utilizando a propriedade<code> </code>{{ cssxref("list-style-type") }}.</p> + +<p><span id="result_box" lang="pt"><span>Não há nenhuma limitação</span> <span>para</span> <span>a profundidade e a</span> <span>imbricação</span> <span>das</span> <span>listas definidas</span> <span>com</span> <span>o</span></span>s elementos<code> </code>{{ HTMLElement("ol") }}<code> </code>e<code> </code>{{ HTMLElement("ul") }}.</p> + +<div class="note"><strong>Nota sobre a utilização: </strong>Ambos os elementos<code> </code>{{ HTMLElement("ol") }}<code> </code>e<code> </code>{{ HTMLElement("ul") }}<code> </code>representam uma lista de itens. São diferentes porque, com o elemento<code> </code>{{ HTMLElement("ol") }},<code> </code>a ordenação tem significado. Como regra de ouro para determinar qual dos dois usar, tente mudar a posição dos itens na lista; caso a significação seja alterada, o elemento<code> </code>{{ HTMLElement("ol") }}<code> </code>deve ser utilizado mas, se não houver mudança, você pode aplicar<code> </code>{{ HTMLElement("ul") }}.</div> + +<h2 id="Contexto_de_utilização">Contexto de utilização</h2> + +<table class="properties"> + <tbody> + <tr> + <td><a href="/en/HTML/Content_categories" title="en/HTML/Content categories">Categorias de conteúdo</a></td> + <td><a href="/en/HTML/Content_categories#flow_content" title="en/HTML/Content categories#Flow content">Flutuantes</a></td> + </tr> + <tr> + <td>Conteúdo permitido</td> + <td>zero ou mais<code> </code>{{ HTMLElement("li") }}<code> </code>elementos, eventualmente combinados com<code> </code>{{ HTMLElement("ol") }}<code> </code>e elementos<code> </code>{{ HTMLElement("ul") }}.</td> + </tr> + <tr> + <td>Omissão de etiqueta (<em>Tag</em>)</td> + <td>nenhuma, ambas as etiquetas - de início e de fim - são obrigatórias</td> + </tr> + <tr> + <td>Elementos pai permitidos</td> + <td>qualquer elemento que receba conteúdo flutuante</td> + </tr> + <tr> + <td>Interface DOM</td> + <td>{{domxref("HTMLUListElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<dl> +</dl> + +<p><span style="line-height: 21px;">Este elemento inclui os </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">atributos globais</a><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{ htmlattrdef("compact") }}{{ Deprecated_inline() }}</dt> + <dd>Este atributo booleano sugere que a lista será processada em um modelo compacto. A interpretação deste atributo depende do perfil de navegação (<em>user agent</em>) e não funciona em todos os navegadores. + <div class="note"><strong>Nota de utilização: </strong>Não aplique este atributo, que foi preterido - o elemento<code> </code>{{ HTMLElement("ul") }}<code> </code>deve ser definido utilizando-se a folha de estilos <a href="/en/CSS" title="en/CSS">CSS</a>. Para dar um efeito similar ao atributo compacto, a propriedade <a href="/en/CSS/line-height" title="en/CSS/line-height">line-height </a>(espaçamento), da <a href="/en/CSS" title="en/CSS">CSS</a>, pode ser utilizada com um valor de <span style="font-family: courier new;">80%</span>.</div> + </dd> +</dl> + +<dl> + <dt>{{ htmlattrdef("type") }}{{ Deprecated_inline() }}</dt> + <dd>Usados para estabelecer o tipo de marcador da lista. Os valores definidos durante a <a href="/en/HTML3.2" title="en/HTML3.2">HTML3.2</a> <span class="short_text" id="result_box" lang="pt"><span>e a versão</span> <span>de transição de</span></span> <a href="/en/HTML4.01" title="en/HTML4.01">HTML 4.0/4.01</a>, são<span style="font-family: monospace;">:</span> + <ul> + <li><code>círculo</code>,</li> + <li><code>disco</code>,</li> + <li>e <code>quadrado</code>.</li> + </ul> + + <p>Um quarto tipo de marcação está definido na interface <em>WebTV</em>, mas nem todos os navegadores o acolhem: <code>triângulo.</code></p> + + <p><span class="short_text" id="result_box" lang="pt"><span>Se não estiver presente</span> <span>e se nenhuma propriedade</span></span> <a href="/en/CSS" title="en/CSS">CSS</a><code> </code>{{ cssxref("list-style-type") }}<code> </code><span class="short_text" id="result_box" lang="pt"><span>se aplicar</span> <span>ao elemento</span></span>, o perfil de navegação decidirá qual tipo de marcador utilizar, dependendo d<span class="short_text" id="result_box" lang="pt"><span>o nível de aninhamento</span> <span>da lista.</span></span></p> + + <div class="note"><strong>Nota de utilização:</strong> Não use este atributo, pois está ultrapassado; em seu lugar, utilize a propriedade <a href="/en/CSS" title="en/CSS">CSS</a><code> </code>{{ cssxref("list-style-type") }}.</div> + </dd> +</dl> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Exemplo_simples">Exemplo simples</h3> + +<pre class="brush: html"><ul> + <li>primeiro item</li> + <li>segundo item</li> + <li>terceiro item</li> +</ul> +</pre> + +<p>A HTML acima resulta em:</p> + +<ul> + <li>primeiro item</li> + <li>segundo item</li> + <li>terceiro item</li> +</ul> + +<h3 id="Lista_aninhada">Lista aninhada</h3> + +<pre class="brush: html"><ul> + <li>primeiro item</li> + <li>segundo item <!-- Observe que a <em>tag</em> de fechamento </li> não é colocada aqui! --> + <ul> + <li>segundo item primeiro subitem</li> + <li>segundo item segundo subitem <!-- O mesmo para a segunda lista não ordenada aninhada (Same for the second nested unordered list)! --> + <ul> + <li>segundo item segundo subitem primeiro sub-subitem</li> + <li>segundo item segundo subitem segundo sub-subitem</li> + <li>segundo item segundo subitem terceiro sub-subitem</li> + </ul> + </li> <!-- A <em>tag</em> de fechamento </li>, que contém a terceira lista não ordenada (Closing </li> tag for the li that contains the third unordered list) --> + <li>segundo item terceiro subitem</li> + </ul> + </li> <!-- Aqui entra a <em>tag</em> de fechamento </li> (Here is the closing </li> tag) --> + <li>terceiro item</li> +</ul></pre> + +<p>A saída HTML acima, é:</p> + +<ul> + <li>primeiro item</li> + <li>segundo item + <ul> + <li>segundo item primeiro subitem</li> + <li>segundo item segundo subitem + <ul style=""> + <li>segundo item segundo subitem primeiro sub-subitem</li> + <li>segundo item segundo subitem segundo sub-subitem</li> + <li>segundo item segundo subitem terceiro sub-subitem</li> + </ul> + </li> + + <li>segundo item terceiro subitem</li> + </ul> + </li> + + <li>terceiro item</li> +</ul> + +<h3 id="<ul>_e_<ol>_aninhados"> <ul><code> </code>e<code> </code><ol><code> </code>aninhados</h3> + +<pre class="brush: html"><ul> + <li>primeiro item</li> + <li>segundo item <!-- Observe, a <em>tag</em> de fechamento </li> não é colocada aqui! (Look, the closing </li> tag is not placed here!) --> + <ol> + <li>segundo item primeiro subitem</li> + <li>segundo item segundo subitem</li> + <li>segundo item terceiro subitem</li> + </ol> + </li> <!-- Aqui está a <em>tag</em> de fechamento </li> (Here is the closing </li> tag) --> + <li>terceiro item</li> +</ul> +</pre> + +<p>A saída HTML acima será:</p> + +<ul> + <li>primeiro item</li> + <li>segundo item + <ol> + <li>segundo item primeiro subitem</li> + <li>segundo item segundo subitem</li> + <li>segundo item terceiro subitem</li> + </ol> + </li> + <li>terceiro item</li> +</ul> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>Outros elementos HTML relacionados à lista: {{ HTMLElement("ol") }},<code> </code>{{ HTMLElement("li") }},<code> </code>{{ HTMLElement("menu") }}<code> </code>e o obsoleto<code> </code>{{ HTMLElement("dir") }};</li> + <li>Propriedades CSS que podem ser especialmente úteis para determinar o modelo do elemento <span style="font-family: courier new;"><ul></span>: + <ul> + <li>a propriedade <a href="/en/CSS/list-style" title="en/CSS/list-style">list-style</a>, conveniente para escolher a maneira como os ordinais serão mostrados,</li> + <li><a href="/en/CSS_Counters" title="en/CSS_Counters">CSS counters</a>, eficientes para guiar listas complexas aninhadas,</li> + <li>a propriedade <a href="/en/CSS/line-height" title="en/CSS/line-height">line-height</a>, válida para simular o atributo ultrapassado<code> </code>{{ htmlattrxref("compact", "ul") }},</li> + <li>a propriedade <a href="/en/CSS/margin" title="en/CSS/margin">margin</a>, proveitosa para controlar a indentação da lista.</li> + </ul> + </li> +</ul> + +<p>{{ languages({ "en":"en/HTML/Element/ul", "de":"de/HTML/Element/ul", "ja":"ja/HTML/Element/ul", "pl":"pl/HTML/Element/ul"}) }}</p> + +<p>{{ HTMLRef }}</p> diff --git a/files/pt-br/web/html/element/var/index.html b/files/pt-br/web/html/element/var/index.html new file mode 100644 index 0000000000..a88e5500da --- /dev/null +++ b/files/pt-br/web/html/element/var/index.html @@ -0,0 +1,59 @@ +--- +title: <var> +slug: Web/HTML/Element/var +translation_of: Web/HTML/Element/var +--- +<h2 id="Resumo">Resumo</h2> + +<p>O elemento HTML Variable (<code><var></code>) representa uma variável em uma expressão matemática ou um contexto de programação.</p> + +<h2 id="Contexto_de_utilização">Contexto de utilização</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td>Permitted content</td> + <td>Phrasing content</td> + </tr> + <tr> + <td>Tag omission</td> + <td>Both start and end tags are required</td> + </tr> + <tr> + <td>Permitted parent elements</td> + <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>.</td> + </tr> + <tr> + <td>Normative document</td> + <td><a href="http://www.whatwg.org/html/#the-var-element">HTML, "The <code>var</code> element"</a></td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p><span style="line-height: 21px;">Este elemento somente inclui os </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Este elemento implementa a interface <code><a href="/en-US/docs/DOM/element" title="DOM/element">HTMLElement</a></code>.</p> + +<div class="note"> +<p><strong>Implementation note: </strong>up to Gecko 1.9.2 inclusive, Firefox implements the <a href="/en-US/docs/DOM/span" title="DOM/span"><span style="font-family: courier new;">HTMLSpanElement</span></a> interface for this element.</p> +</div> + +<h2 id="Propriedades_típicas_padrão_de_estilo">Propriedades típicas padrão de estilo</h2> + +<pre class="brush:css">var { + font-style: italic; +} +</pre> + +<h2 id="Exemplo">Exemplo</h2> + +<pre class="brush:html"><p> A simple equation: <var>x</var> = <var>y</var> + 2 </p> +</pre> + +<p>A simple equation: <var>x</var> = <var>y</var> + 2</p> + +<div>{{HTMLRef}}</div> diff --git a/files/pt-br/web/html/element/video/index.html b/files/pt-br/web/html/element/video/index.html new file mode 100644 index 0000000000..4d9e4db8d6 --- /dev/null +++ b/files/pt-br/web/html/element/video/index.html @@ -0,0 +1,348 @@ +--- +title: video +slug: Web/HTML/Element/Video +translation_of: Web/HTML/Element/video +--- +<p> </p> + +<h2 id="Sumário">Sumário</h2> + +<p>O elemento HTML <code><video></code> é utilizado para incorporar conteúdo de vídeo em um documento HTML ou XHTML.</p> + +<p>Para uma lista de formatos suportados veja <a 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>.</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#transparent_content" title="en/HTML/Content categories#transparent content">Transparent content</a>, contendo ou um atributo <strong>src</strong> ou um ou mais elementos {{ HTMLElement("source") }}, seguido por <a href="/en/HTML/Content_categories#flow_content" title="en/HTML/Content categories#flow content">flow content</a> ou <a href="/en/HTML/Content_categories#phrasing_content" title="en/HTML/Content categories#phrasing content">phrasing content</a> , sem <code><video></code> ou elementos {{ HTMLElement("audio") }}.</td> + </tr> + <tr> + <td>Omissão de tag</td> + <td>Nenhuma, tanto as tags iniciais quanto as finais devem estar presentes.</td> + </tr> + <tr> + <td>Permissão de elementos pais</td> + <td>Qualquer elemento que aceite <a href="/en/HTML/Content_categories#flow_content" title="en/HTML/Content categories#flow content">flow content</a>, ou qualquer outro elemento que aceite <a href="/en/HTML/Content_categories#phrasing_content" title="en/HTML/Content categories#phrasing content">phrasing content</a>.</td> + </tr> + <tr> + <td>Documento normativo</td> + <td><a class="external" href="http://www.w3.org/TR/html5/video.html#video" title="http://www.w3.org/TR/html5/video.html#video">HTML 5, section 4.8.6</a></td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Como qualquer elemento HTML, este elemento suporta os <a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">global attributes</a>.</p> + +<dl> + <dt>{{ htmlattrdef("autoplay") }}</dt> + <dd>Um atributo Booleano; se especificado, o video vai ser executado assim que possível sem precisar de carregar todo o arquivo.</dd> +</dl> + +<div class="note"> +<p>Nota: Algumas versões do Chrome aceitam somente o <code>autostart</code> e não o autoplay</p> +</div> + +<dl> + <dt>{{ htmlattrdef("autobuffer") }} {{ Non-standard_inline() }} {{ obsolete_inline() }}</dt> + <dd>Um atributo Booleano; se especificado, o video vai começar a carregar automaticamente mesmo que não especificado para tocar automaticamente. Isso deve ser usado em casos que é esperado que o vídeo seja reproduzido (por exemplo, se o usuário acessa a página para assistir o vídeo, mas não se o vídeo estiver incorporado à pagina junto a outro conteúdo). O vídeo é carregado até que o cache de mídia.</dd> + <dd> + <div class="note"><strong>Nota de implementação:</strong> embora parte dos primeiros rascunhos das especificações do HTML5, o atributo<code> autobuffer</code> foi removido das últimas versões. Ele foi removido do Gecko 2.0 e outros navegadores, e nunca implementado em outros. A especificação define um novo atributo enumerado, <code>preload</code>, para substituir o atributo <code>autobuffer</code>, com sintaxe diferente. {{ bug(548523) }}</div> + </dd> + <dt>{{ htmlattrdef("buffered") }}</dt> + <dd>Um atributo que pode ser lido para determinar os intervalos do vídeo que já foram carregados. Este atributo contém um objeto {{ domxref("TimeRanges") }}.</dd> + <dt>{{ htmlattrdef("controls") }}</dt> + <dd>Se esse atributo estiver presente, o Gecko oferecerá controles para permitir o usuário controlar a reprodução do vídeo, incluindo volume, navegação, e pausa/continuação da reprodução.</dd> + <dt>{{ htmlattrdef("height") }}</dt> + <dd>A altura da área de exibição do vídeo, em pixels de CSS.</dd> + <dt>{{ htmlattrdef("loop") }}</dt> + <dd>Um atributo Booleano; se especificado, ao chegar no fim do vídeo, ele voltará automaticamente para o começo.</dd> + <dt>{{ htmlattrdef("muted") }}</dt> + <dd>Um atributo Booleano que indica a configuração padrão do áudio contido no vídeo. Se definido, o áudio vai começar mudo. Seu valor padrão é falso, significando que o áudio será reproduzido juntamente com o vídeo.</dd> + <dt>{{ htmlattrdef("played") }}</dt> + <dd>Um objeto {{ domxref("TimeRanges") }} indicando que todo o vídeo foi reproduzido.</dd> + <dt>{{ htmlattrdef("preload") }}</dt> + <dd>Esse atributo enumerado pretende dar uma sugestão ao navegador sobre o que o autor pensa que proporcionará uma melhor experiência do usuário. Ele pode ter os seguintes valores: + <ul> + <li><span style="font-family: Courier New;">none: </span>indica que o usuário não necessitará consultar o vídeo ou que o servidor quer minimizar seu tráfego; em outros termos indica que o vídeo não deve ser pré-carregado.</li> + <li><span style="font-family: Courier New;">metadata</span>: indica que embora o usuário não necessitará consultar o vídeo, pegar os meta-dados (ex: comprimento) é interessante.</li> + <li><span style="font-family: Courier New;">auto</span>: indica que o usuário necessita ter prioridade; em outros termos isso indicou que, se necessário, o vídeo inteiro pode ser baixado, mesmo que não seja esperado a execução.</li> + <li>a <em>string vazia</em>: é um sinônimo do valor <span style="font-family: Courier New;">auto</span>.</li> + </ul> + + <p>Se não definido, seu valor padrão será definido pelo navegador (isto é, cada navegador pode escolher seu valor padrão), embora a especificação recomenda que seja definido para o <span style="font-family: Courier New;">metadata</span>.</p> + + <div class="note"><strong>Notas de uso:</strong> + + <ul> + <li>O atributo <code>autoplay</code> tem precedência sobre o <code>preload,</code>pois se é necessário executar o vídeo automaticamente, o navegador obviamente o baixará. Definindo ambos <code>autoplay</code> e <code>preload</code> é permitido pela especificação.</li> + <li>O navegador não é forçado pela especifição a seguir o valor desse atributo; é apenas uma sugestão.</li> + </ul> + </div> + </dd> + <dt>{{ htmlattrdef("poster") }}</dt> + <dd>Uma URL indicando uma imagem de prévia do vídeo até o usuário reproduzir ou navegar por ele. Se este atributo não estiver especificado, nada será mostrado até que o primeiro quadro esteja disponível; então o primeiro quadro será exibido como imagem de prévia.</dd> + <dt>{{ htmlattrdef("src") }}</dt> + <dd>A URL do vídeo a ser incorporado. Isto é opcional; ao invés disso você pode usar o elemento {{ HTMLElement("source") }} dentro do bloco do vídeo para especificar o vídeo a ser incorporado .</dd> + <dt>{{ htmlattrdef("width") }}</dt> + <dd>A largura da área de exibição do vídeo, em pixels de CSS.</dd> +</dl> + +<p>O tempo de compensação (time offset) entre o áudio e o vídeo está especificado como um valor de ponto flutuante (float) representando o número de segundos da compensação.</p> + +<div class="note"><strong>Nota:</strong> A definição de valor de tempo de compensação ainda não foi completada na especificação do HTML 5 e está sujeita a mudança.</div> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush: html"><!-- Exemplo simples de vídeo --> +<video src="arquivovideo.ogg" autoplay poster="imagemprevia.jpg"> + Desculpa, o seu navegador não suporta vídeos incorporados, + mas você pode <a href="videofile.ogg">baixá-lo</a> + e assistir pelo seu reprodutor de mídia favorito! +</video> + +<!-- Vídeo com legendas --> +<video src="foo.ogg"> + <track kind="subtitles" src="foo.en.vtt" srclang="en" label="English"> + <track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska"> +</video> +</pre> + +<p>O primeiro exemplo reproduz um vídeo, começando a reprodução assim que o vídeo for recebido para permitir a execução sem parar a execução para baixar mais. Até que o vídeo comece a reproduzir, a imagem "imagemprevia.jpg" será mostrada em seu lugar.</p> + +<p>O segundo exemplo permite o usuário escolher entre diferentes legendas.</p> + +<h2 id="Suporte_ao_Servidor">Suporte ao Servidor</h2> + +<p>Se o tipo MIME do vídeo não estiver definido corretamente no servidor, o vídeo poderá não ser mostrado ou uma caixa cinza contendo um X (se o JavaScript estiver habilitado) será exibida em seu lugar.</p> + +<p>Se você disponibiliza seu vídeos como Ogg Theora, você pode corrigir esse problema para o servidor web Apache adicionando a extensão utilizada por seu arquivos de vídeo (".ogm", ".ogv", e ".ogg" são as mais comuns) para o tipo MIME "video/ogg" através do arquivo "mime.types" localizado em "/etc/apache" ou através da configuração de diretiva "AddType" no httpd.conf.</p> + +<pre>AddType video/ogg .ogm +AddType video/ogg .ogv +AddType video/ogg .ogg +</pre> + +<p>Se você disponibilizar seu vídeos como WebM, você pode corrigir esse problema para o servidor web Apache adicionando a extensão usada por seu arquivos de vídeo (".webm" é a mais comum) para o tipo MIME "video/webm" através do arquivo "mime.types" localizado em "/etc/apache" ou através da configuração de diretiva "AddType" no httpd.conf.</p> + +<pre>AddType video/webm .webm +</pre> + +<p>Seu serviço de hospedagem talvez forneça uma interface simples para mudar a configuração dos tipos MIME para as novas tecnologias até que uma atualização global ocorra naturalmente.</p> + +<h2 id="Interface_do_DOM">Interface do DOM</h2> + +<p>Esse elemento implementa a interface <code><a href="/en/DOM/HTMLVideoElement" title="en/DOM/HTMLVideoElementInterface">HTMLVideoElement</a></code>.</p> + +<h2 id="Compatibilidade_dos_Navegadores">Compatibilidade dos Navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte Básico</td> + <td>3.0</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>9.0</td> + <td>10.5</td> + <td>3.1</td> + </tr> + <tr> + <td>Atributo <code>autoplay</code></td> + <td>3.0</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>9.0</td> + <td>10.5</td> + <td>3.1</td> + </tr> + <tr> + <td>Atributo <code>buffered</code></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoDesktop("2.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Atributo <code>controls</code></td> + <td>3.0</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>9.0</td> + <td>10.5</td> + <td>3.1</td> + </tr> + <tr> + <td>Atributo <code>loop</code></td> + <td>3.0</td> + <td>{{ CompatGeckoDesktop("11.0") }}</td> + <td>9.0</td> + <td>10.5</td> + <td>3.1</td> + </tr> + <tr> + <td>Atributo <code>muted</code></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoDesktop("11.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Atributo <code>played</code></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoDesktop("15.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Atributo <code>poster</code></td> + <td>3.0</td> + <td>{{ CompatGeckoDesktop("1.9.2") }}</td> + <td>9.0</td> + <td>10.5</td> + <td>3.1</td> + </tr> + <tr> + <td>Atributo <code>preload</code></td> + <td>3.0</td> + <td>{{ CompatGeckoDesktop("2.0") }}</td> + <td>9.0</td> + <td>Suportado sobre o nome antigo de <code>autobuffer</code></td> + <td>3.1</td> + </tr> + <tr> + <td>Atributo <code>src</code></td> + <td>3.0</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>9.0</td> + <td>10.5</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte Básico</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("1.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Atributo <code>autoplay</code></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("1.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Atributo <code>buffered</code></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("2.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Atributo <code>controls</code></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("1.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Atributo <code>loop</code></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("11.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Atributo <code>muted</code></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("11.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Atributo <code>played</code></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("15.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Atributo <code>poster</code></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("1.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Atributo <code>preload</code></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("2.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Atributo <code>src</code></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("1.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<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></li> + <li><a class="internal" href="http://developer-new.mozilla.org/pt-BR/docs/HTML/Element/audio" title="pt-BR/HTML/Element/Audio"><code>audio</code></a></li> + <li><a class="internal" href="/en/Using_HTML5_audio_and_video" title="En/Using audio and video in Firefox">Using HTML5 audio and video</a></li> + <li><a class="internal" href="/En/Manipulating_video_using_canvas" title="En/Manipulating video using canvas">Manipulating video using canvas</a></li> + <li><a class="internal" href="/En/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" title="En/NsIDOMHTMLMediaElement"><code>nsIDOMHTMLMediaElement</code></a></li> + <li><a class="external" href="http://tinyvid.tv/" title="http://tinyvid.tv/">TinyVid</a> - exemplos utilizando arquivos ogg em HTML5.</li> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#video" title="http://www.whatwg.org/specs/web-apps/current-work/#video">The <code>video</code> element</a> (Especificação HTML 5)</li> + <li><a class="internal" href="/en/Configuring_servers_for_Ogg_media" title="en/Configuring servers for Ogg media">Configuring servers for Ogg media</a></li> +</ul> + +<p>{{ languages( { "fr": "fr/HTML/Element/video","es": "es/HTML/Elemento/video" } ) }}</p> diff --git a/files/pt-br/web/html/element/wbr/index.html b/files/pt-br/web/html/element/wbr/index.html new file mode 100644 index 0000000000..f7f8e7e480 --- /dev/null +++ b/files/pt-br/web/html/element/wbr/index.html @@ -0,0 +1,106 @@ +--- +title: <wbr> +slug: Web/HTML/Element/wbr +translation_of: Web/HTML/Element/wbr +--- +<h2 id="Resumo">Resumo</h2> + +<p>O elemento HTML <code><wbr></code> representa uma posição no texto onde o navegador pode, opcionalmente, quebrar uma linha, embora suas regras de quebra de linha de outra forma não criar uma ruptura naquele local.</p> + +<p>Em UTF-8 páginas codificadas, <code><wbr></code> se comporta como o <code>B L 200 </code><code>de tamanho zero ESPAÇO</code> ponto de código. Em particular, ele se comporta como um bidi Unicode BN ponto de código, o que significa que não tem efeito sobre bidi-encomenda: <code><div dir=rtl> 123, <wbr> 456 </ div></code> exibe, quando não quebrado em duas linhas, <code>123.456</code> e Não <code>456,123</code> .</p> + +<p>Pela mesma razão, o <code><wbr></code> elemento não introduzir um hífen no ponto de quebra de linha. Para fazer um hífen só aparecem no final de uma linha, use a entidade suave caractere hífen ( <code>&shy;</code> ) em seu lugar.</p> + +<p>Este elemento foi implementado pela primeira vez no Internet Explorer 5.5 e foi oficialmente definido no HTML5.</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td>Permitida conteúdo</td> + <td>Vazio</td> + </tr> + <tr> + <td>Tag omissão</td> + <td>Este é um elemento vazio; ele deve ter uma marca de início, mas não deve ter uma tag de fechamento.</td> + </tr> + <tr> + <td>Elementos pai permitidas</td> + <td>Qualquer elemento que aceita <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">conteúdo fraseado</a> .</td> + </tr> + <tr> + <td>Documento normativo</td> + <td><a class="external" href="https://dev.w3.org/html5/spec/text-level-semantics.html#the-wbr-element">HTML 5, seção 4.6.24</a></td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento só inclui os <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">atributos globais </a>.</p> + +<h2 id="DOM_interface">DOM interface</h2> + +<p>Este elemento implementa o <a href="/en-US/docs/DOM/HTMLElement">HTMLElement</a> interface.</p> + +<h2 id="Exemplo">Exemplo</h2> + +<p><em><a class="external" href="https://styleguide.yahoo.com/">O Guia de Estilo Yahoo</a> </em> recomenda <a class="external" href="https://styleguide.yahoo.com/editing/treat-abbreviations-capitalization-and-titles-consistently/website-names-and-addresses">quebrar uma URL <em>antes de</em> pontuação</a> , para não deixar uma marca de pontuação no final da linha, o que o leitor pode confundir com o fim da URL.</p> + +<pre class="brush: html"><p>https://this<wbr>.is<wbr>.a<wbr>.really<wbr>.long<wbr>.example<wbr>.com/With<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages</p> +</pre> + +<p>{{EmbedLiveSample ("Exemplo")}}</p> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Cromo</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Ópera</th> + <th>Safári</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop ("3.0")}}</td> + <td>5.5</td> + <td>11,7</td> + <td>4.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Andróide</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.5</td> + <td>{{CompatGeckoMobile ("10.0")}}</td> + <td>?</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>{{HTMLRef}}</p> diff --git a/files/pt-br/web/html/elementos_block-level/index.html b/files/pt-br/web/html/elementos_block-level/index.html new file mode 100644 index 0000000000..3feed31681 --- /dev/null +++ b/files/pt-br/web/html/elementos_block-level/index.html @@ -0,0 +1,126 @@ +--- +title: Elementos block-level +slug: Web/HTML/Elementos_block-level +tags: + - Desenvolvimento + - Guía + - HTML + - HTML5 + - Iniciante + - Web +translation_of: Web/HTML/Block-level_elements +--- +<p>Elementos HTML <strong>(Linguagem de marcação de hipertexto) </strong>historicamente foram categorizados como “nível de bloco” ou <a href="/en-US/docs/HTML/Inline_elements">elementos “em linha”</a><span class="seoSummary">. Um elemento em nível de bloco ocupa todo o espaço de seu elemento pai (container), criando assim um “bloco”. Este artigo ajuda a explicar o que isso significa.</span></p> + +<p>Navegadores normalmente mostram o elemento em nível de bloco com uma nova linha antes e depois do elemento. O exemplo a seguir demonstra a influência desse elemento em nível de bloco:</p> + +<h2 id="Block-level_Example" name="Block-level_Example"><span style="color: #333333; margin-left: -3px; text-transform: none;">Elementos em nível de bloco</span></h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>Este parágrafo é um elemento block-level; seu plano de fundo foi colorido para exibir o elemento pai do parágrafo.</p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">p { background-color: #8ABB55; } +</pre> + +<p>{{ EmbedLiveSample('Block-level_Example') }}</p> + +<h2 id="Utilização">Utilização</h2> + +<ul> + <li>Elementos nível de bloco podem aparecer apenas dentro do elemento {{ HTMLElement("body") }} </li> +</ul> + +<h2 id="Nível-de-bloco_vs._em-linha">Nível-de-bloco vs. em-linha</h2> + +<p>Existem algumas diferenças importantes entre os elementos no nível do bloco e os elementos em linha:</p> + +<dl> + <dt>Modelo de conteúdo</dt> + <dd>Geralmente, os elementos no nível de bloco podem conter elementos em linha e, às vezes, outros elementos no nível de bloco. Inerente a essa distinção estrutural está a idéia de que elementos de bloco criam estruturas "maiores" que elementos em linha.</dd> + <dt>Formatação padrão</dt> + <dd><font>Por padrão, os elementos no nível de bloco começam em novas linhas, mas, os elementos em linha, podem iniciar em qualquer lugar.</font></dd> +</dl> + +<p>A distinção entre elementos em nível de bloco e elementos em linha foi usada nas especificações HTML até 4.01. No HTML5, essa distinção binária é substituída por um conjunto mais complexo de <a href="/en-US/docs/HTML/Content_categories">categorias de conteúdo</a>. Enquanto a categoria "em linha" corresponde aproximadamente à categoria de <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">conteúdo de frases</a>, a categoria "nível de bloco" não corresponde diretamente a nenhuma categoria de conteúdo HTML5. Mas, os elementos "nível de bloco" e "embutido" combinados, correspondem ao <a href="/en-US/docs/HTML/Content_categories#Flow_content">conteúdo de fluxo</a>, em HTML5. Existem também categorias adicionais, por exemplo <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Interactive_content">conteúdo interativo</a>.</p> + +<h2 id="Elementos">Elementos</h2> + +<p>A seguir, é apresentada uma lista completa de todos os elementos no nível de bloco HTML (embora "nível de bloco" não esteja tecnicamente definido para elementos novos no HTML5).</p> + +<div class="threecolumns"> +<dl> + <dt>{{ HTMLElement("address") }}</dt> + <dd>Informação de contato.</dd> + <dt>{{ HTMLElement("article") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Conteúdo do artigo.</dd> + <dt>{{ HTMLElement("aside") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Conteúdo lateral.</dd> + <dt>{{ HTMLElement("blockquote") }}</dt> + <dd>Citação longa ("bloco").</dd> + <dt>{{ HTMLElement("details") }}</dt> + <dd>Widget de divulgação.</dd> + <dt>{{ HTMLElement("dialog") }}</dt> + <dd>Caixa de diálogo.</dd> + <dt>{{ HTMLElement("dd") }}</dt> + <dd>Descreve um termo em uma lista de descrição.</dd> + <dt>{{ HTMLElement("div") }}</dt> + <dd>Divisão de conteúdo.</dd> + <dt>{{ HTMLElement("dl") }}</dt> + <dd>Lista de descrição.</dd> + <dt>{{ HTMLElement("fieldset") }}</dt> + <dd>Rótulo de conjunto de campos.</dd> +</dl> + +<dl> + <dt>{{ HTMLElement("figcaption") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Legenda da figura.</dd> + <dt>{{ HTMLElement("figure") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Groups media content with a caption (see {{ HTMLElement("figcaption") }}).</dd> + <dt>{{ HTMLElement("footer") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Section or page footer.</dd> + <dt>{{ HTMLElement("form") }}</dt> + <dd>Input form.</dd> + <dt>{{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}</dt> + <dd>Heading levels 1-6.</dd> + <dt>{{ HTMLElement("header") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Section or page header.</dd> + <dt>{{ HTMLElement("hgroup") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Groups header information.</dd> + <dt>{{ HTMLElement("hr") }}</dt> + <dd>Horizontal rule (dividing line).</dd> + <dt>{{ HTMLElement("li") }}</dt> + <dd>List item.</dd> + <dt>{{ HTMLElement("main") }}</dt> + <dd>Contains the central content unique to this document.</dd> + <dt>{{ HTMLElement("nav") }}</dt> + <dd>Contains navigation links.</dd> +</dl> + +<dl> + <dt>{{ HTMLElement("ol") }}</dt> + <dd>Ordered list.</dd> + <dt>{{ HTMLElement("p") }}</dt> + <dd>Paragraph.</dd> + <dt>{{ HTMLElement("pre") }}</dt> + <dd>Preformatted text.</dd> + <dt>{{ HTMLElement("section") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Section of a web page.</dd> + <dt>{{ HTMLElement("table") }}</dt> + <dd>Table.</dd> + <dt>{{ HTMLElement("tfoot") }}</dt> + <dd>Table footer.</dd> + <dt>{{ HTMLElement("ul") }}</dt> + <dd>Unordered list.</dd> + <dt>{{ HTMLElement("video") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Video player.</dd> +</dl> +</div> + +<h3 id="See_also" name="See_also">Veja também</h3> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Inline_elements" title="en/HTML/Inline_elements">Elementos Emlinha</a></li> +</ul> diff --git a/files/pt-br/web/html/favicon/index.html b/files/pt-br/web/html/favicon/index.html new file mode 100644 index 0000000000..6b3bef6490 --- /dev/null +++ b/files/pt-br/web/html/favicon/index.html @@ -0,0 +1,32 @@ +--- +title: favicon +slug: Web/HTML/favicon +--- +<p> </p> + +<h3 id="sect1"> </h3> + +<h3 id="Comentário_da_revisão">Comentário da revisão <a class="revision-comment-link" href="https://developer.mozilla.org/pt-BR/docs/MDN/Contribute/Editor/Basics#The_revision_comment_box" title="Saiba como usar os comentários da revisão"> </a></h3> + +<section class="wiki-block" id="page-comment"> +<h3 id="sect2"> </h3> + +<p>Diga-nos porque fez adições e alterações. É opcional, mas irá fazer com que o histórico da página seja mais fácil de entender.</p> +<input></section> + +<div class="wiki-block"> +<h3 id="É_necessário_revisão">É necessário revisão?</h3> + +<ul id="id_review_tags"> + <li><label><input> Técnico - exemplos de código, APIs ou tecnologias</label></li> + <li><label><input> Editorial - prosa, gramática, ou conteúdo</label></li> +</ul> +</div> + +<section class="page-tags wiki-block" id="page-tags"> +<h3 id="sect3"> </h3> +</section> + +<h3 id="Tags">Tags</h3> + +<p> </p> diff --git a/files/pt-br/web/html/formatos_midia_suportados/index.html b/files/pt-br/web/html/formatos_midia_suportados/index.html new file mode 100644 index 0000000000..75668d7d37 --- /dev/null +++ b/files/pt-br/web/html/formatos_midia_suportados/index.html @@ -0,0 +1,525 @@ +--- +title: Formatos de mídia suportados por elementos HTML de áudio e vídeo +slug: Web/HTML/formatos_midia_suportados +tags: + - Audio + - Firefox + - HTML + - HTML5 + - Ogg + - Reference + - Video + - formatos de arquivos + - mp3 + - mp4 +translation_of: Web/Media/Formats +--- +<p><span class="seoSummary">Os elementos {{ HTMLElement("audio") }} e {{ HTMLElement("video") }} fornecem suporte para a reprodução de mídias de áudio e vídeo sem necessitar de plug-ins.</span> Codecs de áudio e vídeo são usados para manipular arquivos de áudio e vídeo, diferentes codecs oferecem diferentes níveis de compressão e qualidade. Um formato do repositório é usado para armazenar e transmitir o codec de áudio e vídeo ( ambos juntos, no caso de um vídeo com tilha sonora). Existem muitas combinações de codecs e formatos de containers, embora apenas alguns são relevantes para a internet.</p> + +<p>Diferentes navegadores não dão suporte para os mesmos formatos de mídias em suas implementações de áudio e vídeo no HTML5, principalmente por causa de questões de patentes. A área de formatos de mídias na internet tem sofrido muito com leis de patentes em muitos países, incluindo os Estados Unidos e países da União Européia (as notas sobre patentes nesse artigo são fornecidas como estão e sem garantias). Este artigo discute a diferença de codecs e combinações de containers relevantes para a internet, incluindo suporte de navegadores em computadores ou outros tipos de dispositivos.<br> + <br> + Para exibir um vídeo usando HTML5, que funcione nas últimas versões dos principais navegadores, você pode disponibilizar seu vídeo em dois formatos: WebM e MPEG H.264 AAC, usando o elemento {{HTMLElement("source")}} desta forma:</p> + +<pre class="brush: html"><video controls> + <source src="somevideo.webm" type="video/webm"> + <source src="somevideo.mp4" type="video/mp4"> + Desculpe; seu navegador não suporta vídeos HTML5 em WebM com VP8 ou MP4 com H.264. + <!-- Você pode embutir um Flash player aqui, para exibir seu vídeo mp4 em navegadores antigos --> +</video> +</pre> + +<h2 id="WebM">WebM</h2> + +<p>O formato <a class="external" href="http://www.webmproject.org/" title="http://www.webmproject.org/">WebM</a> é baseado em uma versão restrita do container <a class="external" href="http://corecodec.com/products/matroska" title="http://corecodec.com/products/matroska">Matroska</a>. Ele sempre usa o codec de vídeo VP8 ou VP9 e o codec de áudio Vorbis ou Opus. WebM tem suporte nativo em navegadores de desktop e dispositivos móveis como Gecko (Firefox), Chrome e Opera, e o suporte para esse formato pode ser adicionado no Internet Explorer e Safari (mas não no iOS) por meio de um plug-in.<br> + <br> + <a href="http://blogs.msdn.com/b/ie/archive/2011/02/02/html5-and-web-video-questions-for-the-industry-from-the-community.aspx">Declaração da Microsoft sobre o porquê o IE9 não possui suporte nativo para o WebM.</a><br> + <br> + O formato WebM, especificamente o codec de vídeo VP8, tinha sido acusado de violar patentes por um grupo de empresas respondendo um chamado da MPEG LA para a formação de um conjunto de patentes, mas a <a href="http://www.businesswire.com/news/home/20130307006192/en/Google-MPEG-LA-Announce-Agreement-Covering-VP8">MPEG LA concordou em licenciar estas patentes para a Google</a> sob uma "<a href="http://xiphmont.livejournal.com/59893.html?thread=310261#t310261">licença perpétua intransferível, livre de direitos autorais</a>". Isto significa, efetivamente, que todas a patentes conhecidas do formato WebM são licenciadas para todos de graça.<br> + <br> + Gecko reconhece os seguintes tipos de arquivos WebM:</p> + +<dl> + <dt><code>video/webm</code></dt> + <dd>Um arquivo de mídia WebM contendo vídeo (e possivelmente áudio também).</dd> + <dt><code>audio/webm</code></dt> + <dd>Um arquivo de mídia WebM contendo apenas áudio.</dd> +</dl> + +<h2 id="Ogg_Theora_Vorbis">Ogg Theora Vorbis</h2> + +<p>O formato de container Ogg com o codec de vídeo Theora e o codec de áudio Vorbis é suportados em desktops e dispositivos móveis Gecko (Firefox), Chrome, Opera e o suporte para esses formatos pode ser adicionado ao Safari (exceto iOS) instalando um plug-in. O Internet Explorer não possui suporte para esse formato.<br> + <br> + WebM é geralmente mais utilizado que Ogg Theora Vorbis quando disponível, por que ele possui uma melhor qualidade de compressão e tem suporte na maioria dos navegadores. O formato Ogg, contudo, pode ser usado para navegadores mais antigos (por exemplo o Firefox 3.5/3.6 não tem suporte WebM, mas suporta Ogg).</p> + +<p>A situação de patente do Theora é similar com a da WebM.</p> + +<p>Você pode ler mais sobre criar méidia com Ogg lendo o <a class="external" href="http://en.flossmanuals.net/ogg-theora/" title="http://en.flossmanuals.net/ogg-theora/">Theora Cookbook</a>.</p> + +<p>Grecko reconhece os seguintes tipos MIME como arquivos Ogg:</p> + +<dl> + <dt><code>audio/ogg</code></dt> + <dd>Um arquivo Ogg que contem apensa áudio</dd> + <dt><code>video/ogg</code></dt> + <dd>Um arquivo Ogg que contem vídeo (e possivelmente áudio)</dd> + <dt><code>application/ogg</code></dt> + <dd>Um arquivo Ogg com conteúdo não especificado. Usando um dos dois tipos de MIME, mas você pode usar ele se você não sabe qual é o conteúdo do arquivo.</dd> +</dl> + +<h2 id="Ogg_Opus">Ogg Opus</h2> + +<p>O container Ogg pode também conter um áudio codificado usando o <a href="http://www.opus-codec.org/">codec Opus</a>. Suporte para ele está disponível no Gecko 15.0 {{ geckoRelease("15.0") }} e versões superiores, em navegadores no desktop e dispositivos móveis.</p> + +<h2 id="Ogg_FLAC">Ogg FLAC</h2> + +<p>O contêiner Ogg pode também conter um áudio codificado usando o <a href="https://xiph.org/flac/index.html">codec FLAC</a>. Suporte para ele está disponível no Gecko 51.0 {{geckoRelease ("51.0")}} e versões superiores, somente no desktop.</p> + +<h2 id="MP4_H.264_(AAC_ou_MP3)">MP4 H.264 (AAC ou MP3)</h2> + +<p>O formato MP4 com o codec de vídeo H.264 e codec de áudio AAC tem suporte nativo para Internet Explorer, Safari e Chrome no desktop e dispositivos móveis, o Opera não possui suporte para este formato. IE e Chrome também possuem suporte para codec de áudio MP3 no container MP4, mas o Safari não tem suporte para isso. Firefox/Firefox para hardware do dispositivo pode <span class="short_text" id="result_box" lang="pt"><span class="hps">manipular o</span> <span class="hps">perfil utilizado</span> <span class="hps">para codificar</span> <span class="hps">o MP4</span><span>.</span></span></p> + +<div class="note"> +<p><strong>Nota</strong>: Codificação MP4 com um perfil elevado não será executado em um hardware inferior, como o Firefox OS.</p> +</div> + +<p>O formato de mídia MPEG é coberto por patentes, do qual não é livremente licenciado. Todas as licenças necessárias podem ser compradas da MPEG LA. Desde H.264 o formato não é livre de direitos autorais, é impróprio para a internet aberta, de acordo com a Mozilla [<a class="external" href="http://shaver.off.net/diary/2010/01/23/html5-video-and-codecs/" title="http://shaver.off.net/diary/2010/01/23/html5-video-and-codecs/">1</a>, <a class="external" href="http://robert.ocallahan.org/2010/01/video-freedom-and-mozilla_23.html" title="http://robert.ocallahan.org/2010/01/video-freedom-and-mozilla_23.html">2</a>], Google [<a class="external" href="http://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.html" title="http://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.html">1</a>, <a class="external" href="http://blog.chromium.org/2011/01/more-about-chrome-html-video-codec.html" title="http://blog.chromium.org/2011/01/more-about-chrome-html-video-codec.html">2</a>] e Opera. Contudo, desde que os formatos de direitos livres não são suportados pelo Internet Explorer e Safari, a <a href="https://hacks.mozilla.org/2012/03/video-mobile-and-the-open-web/">Mozilla decidiu dar suporte para o formato</a>, e a Google nunca cumpriu sua promessa de remover o suporte para o Chrome.</p> + +<h2 id="MP3">MP3</h2> + +<p>O formato de áudio MP3(.mp3 audio/mpeg; diferente do áudio MP3 no MP4 container acima) é suportado na tag <audio> no Firefox/Firefox para Android/Firefox OS quando o sistema operacional fornece um decodificador MP3, para Internet Explorer, Chrome e Safari.</p> + +<h2 id="WAVE_PCM">WAVE PCM</h2> + +<p>O formato WAVE, com o codec de áudio PCM (codec WAVE "1") tem suporte nos navegadores Gecko(Firefox) e Safari no desktop e dispositivos móveis. Arquivos com o formato WAVE tipicamente tem a extensão ".wav".</p> + +<div class="note"><strong>Nota: Veja </strong><a class="external" href="http://www.rfc-editor.org/rfc/rfc2361.txt" title="http://www.rfc-editor.org/rfc/rfc2361.txt">RFC 2361</a> para ver registros do codec WAVE</div> + +<p>Gecko reconhece os seguintes tipos MIME em arquivos de áudio WAVE:</p> + +<ul> + <li><code>audio/wave</code> (preferido; não funciona no Chrome)</li> + <li><code>audio/wav</code></li> + <li><code>audio/x-wav</code></li> + <li><code>audio/x-pn-wav</code></li> +</ul> + +<h2 id="Media_Source_Extensions_(MSE)">Media Source Extensions (MSE)</h2> + +<p><a href="https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html">Origem da extesão de mídia</a> é um projeto de trabalho da W3C que planeja ampliar {{ domxref("HTMLMediaElement") }} para permitir que o JavaScript gere fluxo de mídia para reprodução. Permitindo que o JavaScript gere fluxos facilita uma variedade de uso, como o fluxo adaptado e o tempo de mudança de transmissão ao vivo. Isto é atualmente um suporte experimental no Firefox desktop, e em outros navegadores também.<br> + <br> + Por exemplo, <a href="http://msopentech.com/blog/2014/01/03/streaming_video_player/">você pode implementar MPEG-DASH usando JavaScript durante carregamento da decodificação para MSE</a>.</p> + +<div class="note"> +<p><strong>Nota</strong>: Time Shifting é o processo de consumo de uma transmissão ao vivo, algum tempo após ter acontecido.</p> +</div> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</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>Suporte básico</td> + <td>3.0</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>9.0</td> + <td>10.50</td> + <td>3.1</td> + </tr> + <tr> + <td><code><audio></code>: PCM em WAVE</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>{{ CompatNo() }}</td> + <td>10.50</td> + <td>3.1</td> + </tr> + <tr> + <td><code><audio></code>: Vorbis em WebM</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("2.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>10.60</td> + <td>3.1 (deve ser instaldo separamente)</td> + </tr> + <tr> + <td><code><audio></code>: Streaming Vorbis em WebM via <a href="https://w3c.github.io/media-source/">Origem das extensões de mídia</a></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoDesktop("36.0") }} na edição Nightly/Dev apenas</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code><audio></code>: Vorbis em Ogg</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>{{ CompatNo() }}</td> + <td>10.50</td> + <td>3.1 (deve ser instaldo separamente, e.g. <a class="external" href="http://www.xiph.org/quicktime/" title="http://www.xiph.org/quicktime/">XiphQT</a>)</td> + </tr> + <tr> + <td><audio>: MP3</td> + <td>{{ CompatVersionUnknown() }} (Não em Chromium)</td> + <td>Partial (Veja abaixo)</td> + <td>9.0</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>3.1</td> + </tr> + <tr> + <td><code><audio></code>: MP3 em MP4</td> + <td> + <p>{{ CompatUnknown() }}</p> + </td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><code><audio></code>: AAC em MP4</td> + <td> + <p>{{ CompatVersionUnknown() }} (Main only) (Não em Chromium)</p> + </td> + <td> + <p>Partial (Veja abaixo)</p> + </td> + <td>9.0</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>3.1</td> + </tr> + <tr> + <td><code><audio></code>: Opus em Ogg</td> + <td>27.0</td> + <td>{{ CompatGeckoDesktop("15.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code><video></code>: VP8 e Vorbis em WebM</td> + <td>6.0</td> + <td>{{ CompatGeckoDesktop("2.0") }}</td> + <td>9.0 (<a class="external" href="http://blogs.msdn.com/b/ie/archive/2011/03/16/html5-video-update-webm-for-ie9.aspx" title="http://blogs.msdn.com/b/ie/archive/2011/03/16/html5-video-update-webm-for-ie9.aspx">deve ser instalado separadamente</a>, e.g. <a class="external" href="http://tools.google.com/dlpage/webmmf/" title="http://tools.google.com/dlpage/webmmf/">WebM MF</a>)</td> + <td>10.60</td> + <td>3.1 (deve ser instaldo separamente, e.g. <a class="external" href="http://perian.org/" title="http://perian.org/">Perian</a>)</td> + </tr> + <tr> + <td><code><video></code>: VP9 e Opus em WebM</td> + <td>29.0</td> + <td>{{ CompatGeckoDesktop("28.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code><video></code>: Streaming VP9 e Opus/VP8 e Opus em WebM via <a href="https://w3c.github.io/media-source/">Origem das extensões de mídia</a></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoDesktop("36.0") }} na edição Nightly/Dev apenas</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code><video></code>: Theora e Vorbis em Ogg</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>{{ CompatNo() }}</td> + <td>10.50</td> + <td>3.1 (deve ser instaldo separamente, e.g. <a class="external" href="http://www.xiph.org/quicktime/" title="http://www.xiph.org/quicktime/">XiphQT</a>)</td> + </tr> + <tr> + <td><code><video></code>: H.264 e MP3 em MP4</td> + <td> + <p>{{ CompatVersionUnknown() }} (Not in Chromium)</p> + </td> + <td>Partial (Veja abaixo)</td> + <td>9.0</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><code><video></code>: H.264 e AAC em MP4</td> + <td> + <p>{{ CompatVersionUnknown() }} (Not in Chromium)</p> + </td> + <td>Partial (Veja abaixo)</td> + <td>9.0</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>3.1</td> + </tr> + <tr> + <td>outro formato</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>3.1 (executa todos os formatos via QuickTime)</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>Firefox OS (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Opera Mini</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>2.3</td> + <td>24.0</td> + <td>1.0.1</td> + <td>10.0</td> + <td>11.0</td> + <td>Partial (Veja abaixo)</td> + <td>3.2</td> + <td>29.0</td> + </tr> + <tr> + <td><code><audio></code>: PCM em WAVE</td> + <td>{{ CompatUnknown() }}</td> + <td>24.0</td> + <td>1.0.1</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>Partial (Veja abaixo)</td> + <td>3.2</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code><audio></code>: Vorbis em WebM</td> + <td>{{ CompatUnknown() }}</td> + <td>24.0</td> + <td>1.0.1</td> + <td>{{ CompatNo() }}</td> + <td>11.0</td> + <td>Partial (Veja abaixo)</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code><audio></code>: Streaming Vorbis em WebM via <a href="https://w3c.github.io/media-source/">Origem das extensões de mídia</a></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code><audio></code>: Vorbis em Ogg</td> + <td>{{ CompatUnknown() }}</td> + <td>24.0</td> + <td>1.0.1</td> + <td>{{ CompatNo() }}</td> + <td>11.0</td> + <td>Partial (Veja abaixo)</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code><audio></code>: MP3</td> + <td>{{ CompatUnknown() }}</td> + <td>Partial (Veja abaixo)</td> + <td>Partial (Veja abaixo)</td> + <td>10.0</td> + <td>{{ CompatUnknown() }}</td> + <td>Partial (Veja abaixo)</td> + <td>3.2</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code><audio></code>: MP3 em MP4</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code><audio></code>: AAC em MP4</td> + <td>{{ CompatUnknown() }}</td> + <td>Partial (Veja abaixo)</td> + <td>Partial (Veja abaixo)</td> + <td>10.0</td> + <td>{{ CompatUnknown() }}</td> + <td>Partial (Veja abaixo)</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code><audio></code>: Opus em Ogg</td> + <td>{{ CompatNo() }}</td> + <td>24.0</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>Partial (Veja abaixo)</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td><code><video></code>: VP8 e Vorbis em WebM</td> + <td>2.3</td> + <td>24.0</td> + <td>1.0.1</td> + <td>{{ CompatNo() }}</td> + <td>16.0</td> + <td>Partial (Veja abaixo)</td> + <td>{{ CompatNo() }}</td> + <td>29.0</td> + </tr> + <tr> + <td><code><video></code>: VP9 and Opus em WebM</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code><video></code>: Streaming VP9 and Opus/VP8 e Opus em WebM via <a href="https://w3c.github.io/media-source/">Origem das extensões de mídia</a></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code><video></code>: Theora e Vorbis em Ogg</td> + <td>{{ CompatNo() }}</td> + <td>24.0</td> + <td>1.0.1</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>Partial (Veja abaixo)</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td><code><video></code>: H.264 e MP3 em MP4</td> + <td>Partial (Veja abaixo)</td> + <td>24.0</td> + <td>Partial (Veja abaixo)</td> + <td>10.0</td> + <td>Partial since 11.0, full since 16.0</td> + <td>Partial (Veja abaixo)</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>29.0</td> + </tr> + <tr> + <td><code><video></code>: H.264 e AAC em MP4</td> + <td>Partial (Veja abaixo)</td> + <td>24.0</td> + <td>Partial (Veja abaixo)</td> + <td>10.0</td> + <td>Partial since 11.0, full since 16.0</td> + <td>Partial (Veja abaixo)</td> + <td>3.2</td> + <td>29.0</td> + </tr> + <tr> + <td>qualquer outro formato</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>Notas:</p> + +<ul> + <li>AAC é suportado apenas em containers MP4.</li> + <li>Opera Mini não suporta qualquer vídeo ou áudio, mas qualquer vídeo e áudio é passado para o dispositivo executar se ele tiver suporte para este formato. Opera Mobile também faz isso com formatos não suportados.</li> + <li>Para o navegador padrão do Android executar vídeo H.264, você precisa fazer mais etapas, como <a href="http://www.broken-links.com/2010/07/08/making-html5-video-work-on-android-phones/">explica Peter Gasston</a>.</li> + <li>No Firefox OS 1.0.1, ao detectar suporte para diferentes formatos <code><video> HTMLMediaElement.prototype.canPlayType </code>reporta erroneamente <code> </code><code>true </code>para vídeos H.264 considerando o fato que o navegador não tem suporte para H.264. No Firefox OS 1.1 este problema foi resolvido.</li> + <li>Para evitar questões de patentes, o suporte para MPEG 4, H.264, MP3 and AAC não são construídas diretamente no Firefox desktop e em dispositivos móveis (Android e Firefox OS). Ao invés disso ele conta com o apoio do sistema operacional ou hardware (o hardware também precisa ser capaz de suportar o perfil usado para codificar o vídeo, no caso do MP4). Firefox desktop suporta estes formatos nas seguintes plataformas:</li> +</ul> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Plataforma</th> + <th scope="col">Versão Firefox</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=825153" title="https://bugzilla.mozilla.org/show_bug.cgi?id=825153">Windows Vista</a>+</td> + <td>22.0+</td> + </tr> + <tr> + <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=748351" title="https://bugzilla.mozilla.org/show_bug.cgi?id=748351">Android</a></td> + <td>20.0+</td> + </tr> + <tr> + <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=714408" title="https://bugzilla.mozilla.org/show_bug.cgi?id=714408">Firefox OS</a></td> + <td>15.0+</td> + </tr> + <tr> + <td>Linux</td> + <td> + <p>26.0+ (depende do codec GStreamer)</p> + </td> + </tr> + <tr> + <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=851290">OS X 10.7+</a></td> + <td>35.0+</td> + </tr> + </tbody> +</table> + +<ul> + <li><a class="external" href="http://dev.opera.com/articles/view/introduction-html5-video/#codecs" title="http://dev.opera.com/articles/view/introduction-html5-video/#codecs">Video codecs in Opera</a></li> + <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ff975073%28v=VS.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ff975073%28v=VS.85%29.aspx">Video codecs in Internet Explorer</a></li> + <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ff975061%28v=vs.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ff975061%28v=vs.85%29.aspx">Audio codecs in Internet Explorer</a></li> + <li><a href="http://www.chromium.org/audio-video" title="http://www.chromium.org/audio-video">Audio & Video codecs in Chrome</a></li> +</ul> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a class="internal" href="/en/Using_HTML5_audio_and_video" title="En/Using audio and video in Firefox">Using audio and video in Firefox</a></li> + <li><a href="http://bluishcoder.co.nz/2013/08/21/html-media-support-in-firefox.html">HTML media support in Firefox</a></li> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#media-elements" title="http://www.whatwg.org/specs/web-apps/current-work/#media-elements">Media elements</a> (HTML 5 specification)</li> + <li><code><a class="internal" href="/en/HTML/Element/Video" title="En/HTML/Element/Video">video</a></code></li> + <li><a class="internal" href="/en/HTML/Element/Audio" title="En/HTML/Element/Audio"><code>audio</code></a></li> +</ul> diff --git a/files/pt-br/web/html/global_attributes/accesskey/index.html b/files/pt-br/web/html/global_attributes/accesskey/index.html new file mode 100644 index 0000000000..255522852e --- /dev/null +++ b/files/pt-br/web/html/global_attributes/accesskey/index.html @@ -0,0 +1,141 @@ +--- +title: accesskey +slug: Web/HTML/Global_attributes/accesskey +tags: + - Atributos globais + - Referências +translation_of: Web/HTML/Global_attributes/accesskey +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>O <a href="/en-US/docs/Web/HTML/Global_attributes">atributo global</a> <code><strong>accesskey</strong></code> fornece uma dica para gerar um atalho de teclado no elemento atual. O valor do atributo deve consistir em um único caracter imprimível (que inclui caracteres acentuados e outros caracteres que podem ser gerados pelo teclado).</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-accesskey.html","tabbed-shorter")}}</div> + +<div class="hidden">O código fonte desse exemplo interativo está armazenado em um repositório no GitHub. Se você deseja contribuir com o projeto de exemplos interativos, por favor clone o repositório: <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e nos envie uma solicitação de recebimento.</div> + +<div class="note"> +<p><strong>Nota</strong>: Na especificação do WHATWG, diz que você pode especificar vários caracteres separados por espaço, e o navegador usará primeiro o que ele suportar. No entanto, isso não funciona na maioria dos browsers. O IE/Edge usa o primeiro que ele suporta sem problemas, desde que não haja conflitos com outros comandos.</p> +</div> + +<p>A maneira de ativar a tecla de acesso depende do navegador e de sua plataforma:</p> + +<table class="standard-table"> + <tbody> + <tr> + <th></th> + <th>Windows</th> + <th>Linux</th> + <th>Mac</th> + </tr> + <tr> + <th>Firefox</th> + <td colspan="2" rowspan="1" style="text-align: center;"><kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd><em>key</em></kbd></td> + <td>No Firefox 57 ou mais recente: <kbd>Control</kbd> + <kbd>Option</kbd> + <kbd><em>key</em></kbd> or <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd><br> + No Firefox 14 ou mais recente: <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd><br> + No Firefox 13 ou mais antigo: <kbd>Control</kbd> + <kbd><em>key</em></kbd></td> + </tr> + <tr> + <th>Edge</th> + <td><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + <td colspan="2" rowspan="1">N/A</td> + </tr> + <tr> + <th>Internet Explorer</th> + <td><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + <td colspan="2" rowspan="1">N/A</td> + </tr> + <tr> + <th>Google Chrome</th> + <td colspan="2" rowspan="1" style="text-align: center;"><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + <td><kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + </tr> + <tr> + <th>Safari</th> + <td><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + <td>N/A</td> + <td><kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + </tr> + <tr> + <th>Opera 15+</th> + <td colspan="2" rowspan="1" style="text-align: center;"><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + <td><kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + </tr> + <tr> + <th>Opera 12</th> + <td colspan="3" rowspan="1"> + <p><kbd>Shift</kbd> + <kbd>Esc</kbd> abre uma lista de conteúdos acessíveis pela tecla de acesso e, em seguida, pode escolher um item pressionando <kbd><em>key</em></kbd></p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Preocupações_com_acessibilidade">Preocupações com acessibilidade</h2> + +<p>Além do baixo suporte ao navegador, existem inúmeras preocupações com o atributo <code>accesskey</code>:</p> + +<ul> + <li>Um valor de <code>accesskey</code> pode entrar em conflito com uma tecla de atalho do sistema ou do navegador, ou alguma funcionalidade de tecnologia assistida. O que pode funcionar para uma combinação de sistema operacional, tecnologia assistida e navegador pode não funcionar com outras combinações.</li> + <li>Certos valores de <code>accesskey</code> podem não estar presentes em alguns teclados, especialmente quando a internacionalização é uma preocupação. Portanto, a adaptação a idiomas específicos pode causar problemas adicionais.</li> + <li>Os valores de <code>accesskey</code> que dependem de números podem ser confusos para indivíduos com problemas cognitivos, onde o número não tem uma associação lógica com a funcionalidade que aciona.</li> + <li>Informar o usuário que <code>accesskey</code> estão presentes, para que eles estejam cientes da funcionalidade. Se o sistema não tiver o método de o usuário dessa funcionalidade, ele poderá ativar acidentalmente as teclas de acesso (<code>accesskeys)</code>.</li> +</ul> + +<p>Devido a esses problemas, geralmente não é aconselhável usar o <code>accesskey</code>s para a maioria dos sites e aplicativos da web.</p> + +<p><a href="https://webaim.org/techniques/keyboard/accesskey#spec">WebAIM: Keyboard Accessibility - Accesskey</a></p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML5.2', "editing.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML5.2')}}</td> + <td>Comportamento mais realista descrito para o que é implementado na realidade.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Nenhuma alteração das últimas especificações do W3C {{SpecName('HTML5.1')}} .</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Nenhuma alteração em {{SpecName('HTML5 W3C')}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "editing.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>A partir da {{SpecName('HTML4.01')}}, vários caracteres podem ser definidios como teclas de atalho. Além disso, pode ser definido em qualquer elemento.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', "interact/forms.html#h-17.11.2", "accesskey")}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Suportado apenas em {{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }} e {{ HTMLElement("textarea") }}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_com_Browsers">Compatibilidade com Browsers </h2> + +<div class="hidden">A tabela de compatibilidade desta página é gerada de dados estruturados. Se você quiser contribuir com os dados, por favor, verifique em <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos envie uma solicitação de recebimento.</div> + +<div 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 class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("html.global_attributes.accesskey")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{domxref("Element.accessKey")}}</li> + <li>{{domxref("HTMLElement.accessKeyLabel")}}</li> + <li>All <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</li> +</ul> diff --git a/files/pt-br/web/html/global_attributes/autocapitalize/index.html b/files/pt-br/web/html/global_attributes/autocapitalize/index.html new file mode 100644 index 0000000000..087bb9b29c --- /dev/null +++ b/files/pt-br/web/html/global_attributes/autocapitalize/index.html @@ -0,0 +1,49 @@ +--- +title: autocapitalize +slug: Web/HTML/Global_attributes/autocapitalize +tags: + - Atributos globais + - Autocapitalize + - HTML + - Referencia +translation_of: Web/HTML/Global_attributes/autocapitalize +--- +<p>{{HTMLSidebar("Global_attributes")}}</p> + +<p><span class="seoSummary">O <a href="/en-US/docs/Web/HTML/Global_attributes">atributo global</a> <strong><code>autocapitalize</code></strong> é um atributo enumerado que controla quando e como entradas de texto são automaticamente capitalizadas confome são escritas/editadas pelo usuário.</span> O atributo deve receber um dos seguintes valores:</p> + +<ul> + <li><code>off</code> ou <code>none</code>: Nenhuma capitalização é aplicada (por padrão as letras serão minúsculas)</li> + <li><code>on</code> ou <code>sentences</code>: A primeira letra de cada sentença será por padrão uma letra maíuscula; todas as demais letras serão por padrão minúsculas.</li> + <li><code>words</code>: A letra inicial de cada palavra serão por padrão maiúsculas; todas as demais letras serão por padrão minúsculas.</li> + <li><code>characters</code>: Todas as letras deverão ser maiúsculas por padrão.</li> +</ul> + +<p>O atributo <code>autocapitalize</code> não afeta comportamentos quando digitando em um teclado físico. Ao invés disso, afeta o comportamento de outros mecanismos de entrada, tais quais teclados virtuais em dispositivos móveis e entradas por voz. O comportamento de tais mecanismos é que frequentemente auxiliam usuários aos capitalizar automaticamente a primeira letra de sentenças. O atributo <code>autocapitalize</code> permite a autores sobrescreverem esse comportamento por elemento.</p> + +<p>O atributo <code>autocapitalize</code> nunca ativa a autocapitalização para um elemento {{HTMLElement("input")}} com um atributo {{htmlattrxref("type", "input")}} cujo valor seja <code>url</code>, <code>email</code>, ou <code>password</code>.</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', "interaction.html#autocapitalization", "autocapitalize")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_Browsers">Compatibilidade de Browsers</h2> + +<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você deseja contribuir com dados, por favor acesse <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos envie um pull request.</div> + +<p>{{Compat("html.global_attributes.autocapitalize")}}</p> diff --git a/files/pt-br/web/html/global_attributes/class/index.html b/files/pt-br/web/html/global_attributes/class/index.html new file mode 100644 index 0000000000..fb691e1deb --- /dev/null +++ b/files/pt-br/web/html/global_attributes/class/index.html @@ -0,0 +1,108 @@ +--- +title: class +slug: Web/HTML/Global_attributes/class +tags: + - Atributos globais + - Global attributes + - HTML + - Reference + - Referencia +translation_of: Web/HTML/Global_attributes/class +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>O <a href="/pt-BR/docs/Web/HTML/Global_attributes">atributo global</a> <strong>class</strong> é uma lista das classes de um elemento, separada por espaços. Classes permitem a CSS e Javascript selecionar e acessar elementos específicos através dos <a href="/pt-BR/docs/Web/CSS/Class_selectors">seletores de classe</a> ou funções como o método DOM {{domxref("document.getElementsByClassName")}}.</p> + +<p>Apesar da especificação não impor requesitos sobre os nomes de classes, é considerada boa prática usar nomes que descrevam o propósito semântico do elemento, em vez de sua representação (e.g. <em>atributo</em> para descrever um atributo em vez de <em>ítalico</em>, mesmo que um elemento desta classe possa ser representado por <em>ítalico)</em>. Nomes baseados em semântica permanecem coerentes mesmo se a representação da página mude.</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "elements.html#classes", "class")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Nenhuma mudança desde o mais recente snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "elements.html#classes", "class")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot de {{SpecName('HTML WHATWG')}}, nenhuma mudança desde {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "elements.html#classes", "class")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot de {{SpecName('HTML WHATWG')}}. Apartir de {{SpecName('HTML4.01')}}, <code>class</code> é um atributo global verdadeiro.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', "struct/global.html#h-7.5.2", "class")}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Suportado por todos os elementos menos {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, e {{HTMLElement("title")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_nos_Navegadores">Compatibilidade nos Navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></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>Recurso</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>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}} [1]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <code>class</code> é um atributo global verdadeiro desde desde o Firefox 32.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>Todos os <a href="/pt-BR/docs/Web/HTML/Global_attributes">atributos globais</a>.</li> +</ul> diff --git a/files/pt-br/web/html/global_attributes/contenteditable/index.html b/files/pt-br/web/html/global_attributes/contenteditable/index.html new file mode 100644 index 0000000000..6360e4c583 --- /dev/null +++ b/files/pt-br/web/html/global_attributes/contenteditable/index.html @@ -0,0 +1,77 @@ +--- +title: contenteditable +slug: Web/HTML/Global_attributes/contenteditable +translation_of: Web/HTML/Global_attributes/contenteditable +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>O <a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/Global_attributes">atributo global</a><span style="color: #3d7e9a;"> </span><strong><code>contenteditable</code></strong> é um atributo enumerado indicando se o elemento deve ser editável pelo usuário. Se assim for, o navegador modifica seu widget para permitir a edição.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-contenteditable.html","tabbed-shorter")}}</div> + +<p class="hidden">A fonte para este exemplo interativo está armazenada em um repositório do GitHub. Se você quiser contribuir para o projeto de exemplos interativos, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> e nos envie um pull request.</p> + +<p>O atributo deve ter um dos seguintes valores:</p> + +<ul> + <li><code>true</code> ou uma <a href="https://developer.mozilla.org/pt-BR/docs/Glossario/String">string</a> vazia, o que indica que o elemento é editável.</li> + <li><code>false</code>, o que indica que o elemento não é editável.</li> +</ul> + +<p>Se o atributo for aplicado sem um valor, como <code><label contenteditable>Rótulo de Exemplo</label></code>, seu valor é tratado como uma <em>string</em> vazia.</p> + +<p>Se esse atributo estiver faltando ou seu valor for inválido, seu valor é herdado de seu elemento pai: para que o elemento seja editável se seu pai for editável.</p> + +<p>Observe que, embora seus valores permitidos incluam <em>true</em> e <em>false</em>, este atributo é um enumerado e não um <em><a href="https://developer.mozilla.org/pt-BR/docs/Glossario/Booleano">Booleano</a></em>.</p> + +<p>Você pode definir a cor usada para desenhar a inserção de texto {{Glossary("caret")}} com a propriedade {{cssxref("caret-color")}} do CSS.</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "editing.html#attr-contenteditable", "contenteditable")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Nenhuma mudança na última instância, {{SpecName("HTML5.2")}}</td> + </tr> + <tr> + <td>{{SpecName("HTML5.2", "editing.html#making-document-regions-editable-the-contenteditable-content-attribute", "contenteditable")}}</td> + <td>{{Spec2("HTML5.2")}}</td> + <td>Instância de {{SpecName("HTML WHATWG")}}, sem mudanças para {{SpecName("HTML5.1")}}</td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "editing.html#making-document-regions-editable-the-contenteditable-content-attribute", "contenteditable")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>Instância de {{SpecName("HTML WHATWG")}}, sem mudanças para {{SpecName("HTML5 W3C")}}</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "editing.html#attr-contenteditable", "contenteditable")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td>Instância de {{SpecName("HTML WHATWG")}}, definição inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> + +<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você quiser contribuir com os dados, por favor, confira <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos envie um pull request.</div> + +<p>{{Compat("html.global_attributes.contenteditable")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/Web/Guide/HTML/Editable_content">Tornando o conteúdo editável</a></li> + <li>Todos os <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/HTML/Global_attributes">atributos globais</a></li> + <li>{{domxref("HTMLElement.contentEditable")}} e {{domxref("HTMLElement.isContentEditable")}}</li> + <li>A propriedade {{cssxref("caret-color")}} do CSS.</li> + <li><a href="https://developer.mozilla.org/pt-BR/docs/Web/Events/input">Evento de <code>input</code> - <code>HTMLElement</code></a></li> +</ul> diff --git a/files/pt-br/web/html/global_attributes/data-_star_/index.html b/files/pt-br/web/html/global_attributes/data-_star_/index.html new file mode 100644 index 0000000000..e1beb73d67 --- /dev/null +++ b/files/pt-br/web/html/global_attributes/data-_star_/index.html @@ -0,0 +1,116 @@ +--- +title: data-* +slug: Web/HTML/Global_attributes/data-* +translation_of: Web/HTML/Global_attributes/data-* +--- +<p class="note">{{HTMLSidebar("Global_attributes")}}</p> + +<p>Os <a href="/en-US/docs/Web/HTML/Global_attributes">atributos globais</a> <strong>data-*</strong> formam uma classe de atributos conhecida como <strong>custom data attributes</strong>, a qual permite que informações proprietárias sejam trocadas via script entre o <a href="/en-US/docs/Web/HTML" title="en/HTML">HTML</a> e sua representação <a href="/en-US/docs/DOM" title="en/DOM">DOM</a> . Todos esses dados personalizados estão disponíveis através da interface {{domxref("HTMLElement")}} do elemento, onde o atributo está definido. A propriedade {{domxref("HTMLElement.dataset")}} concede acesso a estes atributos .<br> + O <code>*</code> pode ser substituído por qualquer nome, desde que siga <a class="external" href="http://www.w3.org/TR/REC-xml/#NT-Name" title="http://www.w3.org/TR/REC-xml/#NT-Name">a regra de criação de nomes xml</a> com as seguintes restrições:</p> + +<ul> + <li>O nome não deve começar com xml, independente da caixa destas letras (Ex: XML, xml, XMl, XmL, ...);</li> + <li>O nome não deve conter ponto e vírgula (<code>U+003A</code>);</li> + <li>O nome não deve conter letras maiúsculas.</li> +</ul> + +<p>Observe que a propriedade {{domxref("HTMLElement.dataset")}} é uma {{domxref("DOMStringMap")}}, e o nome da custom data attribute <em> data-test-value</em> será acessível através do <code>HTMLElement.dataset.testValue </code>( ou<code> HTMLElement.dataset["<em>testValue</em>"] </code>) e todo o traço (<code>U+002D</code>) será substituído pela capitalização(tornar maiúscula) da letra subsequente, deixando o nome no formato camelcase.</p> + +<h3 id="Uso">Uso</h3> + +<p>Para adicionar atributos <strong>data-* </strong>, mesmo os elementos HTML mais comuns podem tornar-se mais complexos e poderosos objetos programáveis. Por exemplo, um "<a href="https://en.wikipedia.org/wiki/Sprite_(computer_graphics)">sprite</a><em>"</em> de uma nave espacial em um jogo pode ser um simples elemento {{HTMLElement("img")}} com um atributo <a href="/en-US/docs/Web/HTML/Global_attributes/class">class</a> e diversos atributos data-*:</p> + +<pre><img class="spaceship cruiserX3" src="shipX3.png" + data-navio-id="324" data-armas="laserI laserII" data-escudos="72%" + data-x="414354" data-y="85160" data-z="31940" + onclick="navesespaciais[this.dataset.shipId].explodida()" +</img> +</pre> + +<p id="Specifications">(Veja mais <em><a href="https://html.spec.whatwg.org/multipage/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes">aqui</a>)</em></p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop(6) }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoMobile(6) }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>All <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</li> + <li>The {{domxref("HTMLElement.dataset")}} property that allows to access and modify these values.</li> +</ul> diff --git a/files/pt-br/web/html/global_attributes/hidden/index.html b/files/pt-br/web/html/global_attributes/hidden/index.html new file mode 100644 index 0000000000..47dd314069 --- /dev/null +++ b/files/pt-br/web/html/global_attributes/hidden/index.html @@ -0,0 +1,111 @@ +--- +title: hidden +slug: Web/HTML/Global_attributes/hidden +tags: + - Atributos globais + - HTML + - Referência(2) +translation_of: Web/HTML/Global_attributes/hidden +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary">O <a href="/pt-BR/docs/Web/HTML/Global_attributes">atributo global</a> <strong><code>hidden</code></strong> é um atributo booleano que indica se um elemento é ou não <em>relevante</em>. Por exemplo, ele pode ser usado para esconder elementos de página que não podem ser usados até que o processo de login seja completo.</span> Os navegadores não renderizarão elementos com o atributo <code>hidden</code> setado.</p> + +<p>O atributo <code>hidden</code> não deve ser utilizado para esconder conteúdo que poderia legitimamente ser mostrado em outra apresentação, por exemplo, não é correto usar <code>hidden</code> para esconder abas de formulários em paineis, porque interfaces separadas por abas são meramente um tipo de apresentação em fluxo — o que pode ser igualmente mostrado em forma vertical com barra de rolagem. É similarmente incorreto usar este atributo para esconder conteúdo de apenas uma apresentação — se algo está marcado como <code>hidden</code>, ele está escondido de todas as apresentações incluindo, por exemplo, leitores de tela.</p> + +<p>Elementos com <code>hidden</code> não devem estar ligados a outros elementos sem <code>hidden</code>. Elementos filhos de um elemento com o atributo <code>hidden</code> ainda estão ativos, ou seja, é possível executar a ação <code>submit</code> de um formulário ou uma tag <code>script</code> pode ser executada se em ambos os casos estes elementos forem filhos de um elemento com o atributo <code>hidden</code>.</p> + +<p>Por exemplo, é incorreto o uso do atributo <code>href</code> referenciando a uma sessão marcada com o atributo <code>hidden</code>. Se o conteúdo não é aplicável ou relevante, não faz sentido fazer a referência.</p> + +<p>Pode ser correto, entretanto, usar o atributo ARIA <code>aria-describedby</code>para referenciar descrições que estejam, elas mesmas, escondidas. Esconder as descrições implica que elas não são úteis por si só. Mas elas podem ser escritas de forma que sejam úteis no contexto específico do elemento que descrevem</p> + +<p>Similarmente, um elemento canvas com atributo <code>hidden</code> poderia ser usado como buffer por um script de gráficos, e um controle de formulário, usando seu atributo form, poderia referir-se a um elemento <code>form</code> com atributo <code>hidden</code>.</p> + +<div class="note"> +<p><strong>Nota:</strong> Mudar o valor da propriedade {{cssxref("display")}} no CSS de um elemento com o atributo <code>hidden</code> sobrescreve o comportamento. Por exemplo, elementos com o estilo <code>display: flex;</code> serão mostrados independente da presença do atributo <code>hidden</code>.</p> +</div> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#the-hidden-attribute", "hidden")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Sem mudanças desde o último snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "rendering.html#hiddenCSS", "Hidden elements")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td><span id="result_box" lang="pt"><span>Define</span> <span>o processamento padrão</span> <span>sugerido d</span><span>o atributo hidden</span> <span>usando </span></span>CSS</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "hidden")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Definição inicial do snapshot de {{SpecName('HTML WHATWG')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_em_navegadores">Compatibilidade em navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("2") }}</td> + <td>11</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 para Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>4</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoMobile("2") }}</td> + <td>11</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>Todos os <a href="/pt-BR/docs/Web/HTML/Global_attributes">atributos globais</a>.</li> +</ul> diff --git a/files/pt-br/web/html/global_attributes/id/index.html b/files/pt-br/web/html/global_attributes/id/index.html new file mode 100644 index 0000000000..98141f9b80 --- /dev/null +++ b/files/pt-br/web/html/global_attributes/id/index.html @@ -0,0 +1,115 @@ +--- +title: id +slug: Web/HTML/Global_attributes/id +tags: + - Atributos globais + - HTML + - Referência(2) +translation_of: Web/HTML/Global_attributes/id +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<div>O <a href="/pt-BR/docs/Web/HTML/Global_attributes">atributo global</a> <strong>id</strong> define um identificador exclusivo (ID) que deve ser único por todo o documento. Seu objetivo é identificar o elemento ao navegar por âncoras<em> </em>(usando um identificador de fragmento), quando utilizar scripts ou estilizando (com CSS).</div> + +<div> </div> + +<p>O valor deste atributo é uma string opaca: isso significa que os desenvolvedores não devem utilizá-lo para transmitir nenhuma informação. Significados específicos como, por exemplo, significado semântico não devem ser provenientes desta string.</p> + +<p>O valor deste atributo não deve conter lacunas (espaços, tabulações etc.). Navegadores tratam IDs inadequadas que contenham lacunas como se as lacunas fossem parte do ID. Em contraste com o atributo <strong>class</strong>, que permite múltiplos valores separados por espaço, os elementos podem ter somente um único ID.</p> + +<div class="note"> +<p><strong>Nota:</strong> Utilizar caracteres exceto letras e dígitos ASCII, <code>'_'</code>, <code>'-'</code> e <code>'.'</code> pode causar problemas de compatibilidade, já que eles não eram permitidos no HTML 4. Embora esta restrição fora suspensa no HTML 5, um ID deve iniciar com uma letra para fins de compatibilidade.</p> +</div> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#the-id-attribute", "id")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Nenhuma mudança desde o mais recente snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-id-attribute", "id")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot de {{SpecName('HTML WHATWG')}}, nenhuma mudança desde {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-id-attribute", "id")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot de {{SpecName('HTML WHATWG')}}, passa a aceitar <code>'_'</code>, <code>'-'</code> and <code>'.'</code> se não estiverem no começo do ID. Se torna um atributo global verdadeiro.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#adef-id', 'id')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Suportado por todos os elementos menos {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_nos_Navegadores">Compatibilidade nos Navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <code>id</code> é um atributo global verdadeiro desde Gecko 32.0 {{geckoRelease("32.0")}}.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>Todos os <a href="/pt-BR/docs/Web/HTML/Global_attributes">atributos globais</a>.</li> + <li>{{domxref("Element.id")}} para explorar este atributo.</li> +</ul> diff --git a/files/pt-br/web/html/global_attributes/index.html b/files/pt-br/web/html/global_attributes/index.html new file mode 100644 index 0000000000..adabaf9186 --- /dev/null +++ b/files/pt-br/web/html/global_attributes/index.html @@ -0,0 +1,479 @@ +--- +title: Atributos Globais +slug: Web/HTML/Global_attributes +tags: + - Attribute + - HTML + - Internet + - NeedsBrowserCompatibility + - NeedsTranslation + - PrecisaCompatibilidadeNavegadores + - Reference + - Referencia + - TopicStub + - Web + - atributo +translation_of: Web/HTML/Global_attributes +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<div class="summary"> +<p><strong>Atributos Globais</strong> são atributos comuns a todos elementos HTML; eles podem ser usados em todos os elementos, embora os atributos não tenham efeito em alguns elementos.</p> +</div> + +<p>Os atributos globais podem ser especificados em todos os elementos HTML, mesmo aqueles não especificados no padrão. Isso significa que qualquer elemento não padrão ainda deve permitir esses atributos, mesmo que usar esses elementos significa que o documento não é mais compatível com HTML5. Por exemplo, navegadores compatíveis com HTML5 escondem o conteúdo marcado como <code><foo hidden>...<foo>, </code>mesmo que <code><foo></code> não seja um elemento HTML válido.</p> + +<p>Além dos atributos globais HTML básicos, os seguintes atributos globais também existem:</p> + +<ul> + <li><strong><code>xml:lang</code></strong> e <code><strong>xml:base</strong></code> — Estes são herdados das especificações XHTML e obsoletos, mas mantidos para fins de compatibilidade.</li> + <li>Os vários atributos <code><strong><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA">aria-*</a></strong></code>, são utilizados para promover a acessibilidade.</li> + <li>Os atributos manipuladores de eventos:: <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="Lista_dos_Atributos_Globais">Lista dos Atributos Globais</h2> + +<dl> + <dt id="attr-accesskey"><code><a href="/en-US/docs/Web/HTML/Global_attributes/accesskey">accesskey</a></code></dt> + <dd>Fornece uma dica para gerar um atalho de teclado para o elemento atual. Este atributo consiste em uma lista de caracteres separados por espaços. O navegador deve usar o primeiro que existe no layout do teclado do computador.</dd> + <dt id="attr-class"><code><a href="/en-US/docs/Web/HTML/Global_attributes/class">class</a></code></dt> + <dd>É uma lista separada por espaço das classes do elemento. as classes permitem ao CSS e ao JavaScript selecionar e acessar elementos específicos atraves dos seletores de classe ou funciona como um método <br> + {{domxref("Document.getElementsByClassName()")}}.</dd> + <dt id="attr-contenteditable"><code><a href="/en-US/docs/Web/HTML/Global_attributes/contenteditable">contenteditable</a></code></dt> + <dd>É um atributo enumerado que indica se o elemento deve ser editado pelo usuário. Se assim for, o navegador modifica seu widget para permitir a edição. O atributo deve ter um dos seguintes valores: + <ul> + <li><code>true</code> ou uma string vazia, indica que o elemento deve ser editável;</li> + <li><code>false</code>, indica que o elemento não deve ser editável.</li> + </ul> + </dd> + <dt id="attr-contextmenu"><code><a href="/en-US/docs/Web/HTML/Global_attributes/contextmenu">contextmenu</a></code></dt> + <dd>É o <code><a href="#attr-id"><strong>id</strong></a></code> de um {{HTMLElement("menu")}} para usar como o menu contextual para este elemento.</dd> + <dt id="attr-dataset"><code><a href="/en-US/docs/Web/HTML/Global_attributes/data-*">data-*</a></code></dt> + <dd>Forma uma classe de atributos, denominado de dados personalizados, que permite troca de informações proprietárias entre o <a href="/en-US/docs/Web/HTML">HTML</a> e a sua representação no <a href="/en-US/docs/Glossary/DOM">DOM</a> pode ser usada por scripts. Todos esses dados personalizados estão disponíveis através da interface do elemento {{domxref("HTMLElement")}} em que o atributo está definido. A propriedade {{domxref("HTMLElement.dataset")}} dá acesso a eles.</dd> + <dt id="attr-dir"><code><a href="/en-US/docs/Web/HTML/Global_attributes/dir">dir</a></code></dt> + <dd>É um atributo enumerado que indica a direcionalidade do texto do elemento. Pode ter os seguintes valores: + <ul> + <li><code>ltr</code>, significa da esquerda para a direita e deve ser usado para idiomas que são escritos da esquerda para a direita (como o português do Brasil, inglês, espanhol, etc);</li> + <li><code>rtl</code>, significa da direita para a esquerda e deve ser usado para idiomas que são escritos da direita para a esquerda (como o árabe);</li> + <li><code>auto</code>, que permite que o agente do usuário decida. Ele usa um algoritmo básico, pois analisa os caracteres dentro do elemento até encontrar um caractere com uma direcionalidade forte e, em seguida, aplica essa direcionalidade para todo o elemento.</li> + </ul> + </dd> + <dt id="attr-draggable"><code><a href="/en-US/docs/Web/HTML/Global_attributes/draggable">draggable</a></code> {{experimental_inline}}</dt> + <dd>É um atributo enumerado que indica se o elemento pode ser arrastado, usando a <a href="/en-us/docs/DragDrop/Drag_and_Drop">API Drag and Drop</a>. Pode ter os seguintes valores: + <ul> + <li><code>true</code>, que indica que o elemento pode ser arrastado</li> + <li><code>false</code>, que indica que o elemento não pode ser arrastado.</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>É um atributo enumerado que indica quais tipos de conteúdo podem ser descartados em um elemento, usando a <a href="/en-US/docs/DragDrop/Drag_and_Drop">API Drag and Drop</a>. Pode ter os seguintes valores: + <ul> + <li><code>copy</code>, que indica que o lançamento criará uma cópia do elemento que foi arrastado.</li> + <li><code>move</code>, que indica que o elemento que foi arrastado será movido para esta nova localização.</li> + <li><code>link</code>, irá criar um link para os dados arrastados.</li> + </ul> + </dd> + <dt id="attr-hidden"><code><a href="/en-US/docs/Web/HTML/Global_attributes/hidden">hidden</a></code></dt> + <dd>Um atributo booleano indica que o elemento ainda não é relevante ou não é mais relevante. Por exemplo, ele pode ser usado para ocultar elementos da página que não podem ser usados até que o processo de login tenha sido concluído. O navegador não renderizará esses elementos. Este atributo não deve ser usado para ocultar conteúdo que possa ser legível.</dd> + <dt id="attr-id"><code><a href="/en-US/docs/Web/HTML/Global_attributes/id">id</a></code></dt> + <dd>Define um identificador exclusivo (ID) que deve ser único em todo o documento. Seu objetivo é identificar o elemento ao vincular (usando um identificador de fragmento), um script ou estilo (com CSS).</dd> +</dl> + +<div class="note"> +<p><strong>Nota: </strong>Os 5 atributos seguintes são partes do <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#microdata">Recursos de Microdados WHATWG HTML</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>O identificador único e global de um item.</dd> + <dt id="attr-itemprop"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemprop">itemprop</a></code> {{experimental_inline}}</dt> + <dd>Usado para adicionar propriedades a um item. Cada elemento HTML pode ter um atributo itemprop especificado, onde um itemprop consiste em um par de nomes e valores.</dd> + <dt id="attr-itemref"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemref">itemref</a></code> {{experimental_inline}}</dt> + <dd>As propriedades que não são descendentes de um elemento com o atributo <code>itemscope</code> podem ser associadas ao item usando um <strong>itemref</strong>. Itemref fornece uma lista de ids de elementos (não <code>itemid</code>) com propriedades adicionais em outro lugar do documento.</dd> + <dt id="attr-itemscope"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemscope">itemscope</a> </code>{{experimental_inline}}</dt> + <dd>Este atributo funciona, em geral, com o atributo <code><a href="/en-US/docs/Web/HTML/Global_attributes/itemtype">itemtype</a></code> para especificar o HTML dentro de um bloco é sobre um item particular. <code><a href="/en-US/docs/Web/HTML/Global_attributes/itemscope">itemscope</a></code> cria o item e define o escopo do <code><a href="/en-US/docs/Web/HTML/Global_attributes/itemtype">itemtype</a></code> associado a ele. <code><a href="/en-US/docs/Web/HTML/Global_attributes/itemtype">itemtype</a></code> é uma URL válida de um vocabulário (como o <a class="external external-icon" href="http://schema.org/">schema.org</a>) que descreve o item e o context de seus atributos.</dd> + <dt id="attr-itemtype"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemtype">itemtype</a></code> {{experimental_inline}}</dt> + <dd>Especifica a URL do vocabulário que será usado para definir as propriedades do item na estrutura de dados. <code><a href="/en-US/docs/Web/HTML/Global_attributes/itemscope">itemscope</a></code> é usado para alterar o escopo na estrutura de dados onde o vocabulário definido por <code><a href="/en-US/docs/Web/HTML/Global_attributes/itemtype">itemtype</a></code> estará ativo.</dd> + <dt id="attr-lang"><code><a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang</a></code></dt> + <dd>Participa da definição do idioma do elemento, o idioma no qual os elementos não-editáveis estão escritos, ou o idioma no qual elementos editáveis devem ser escritos. A Tag contém um único valor no formato definido no documento da IEFT <a href="http://www.ietf.org/rfc/bcp/bcp47.txt">Tags para Identificação de Idiomas (BCP47)</a>. <a href="#attr-xml:lang"><strong>xml:lang</strong></a> tem prioridade mais alta que <code><a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang</a></code>.</dd> + <dt id="attr-spellcheck"><code><a href="/en-US/docs/Web/HTML/Global_attributes/spellcheck">spellcheck</a></code> {{experimental_inline}}</dt> + <dd>É um atributo enumerado que define se o elemento pode ser verificado por errors de ortografia. Pode ter os seguintes valores: + <ul> + <li><code>true</code>, indica que o elemento deve ser, se possível, verificado por errors ortográficos;</li> + <li><code>false</code>, indica que o elemento não deve ser verificado quanto à ortogratia do texto.</li> + </ul> + </dd> + <dt id="attr-style"><code><a href="/en-US/docs/Web/HTML/Global_attributes/style">style</a></code></dt> + <dd>Contém regras de declarações <a href="/pt-BR/docs/">CSS</a> para aplicar no elemento. Note que é recomendado que as regras CSS fiquem num arquivo, ou vários arquivos, separado do HTML. Este atributo e o elemento {{HTMLElement("style")}} tem principalmente o propósito para rápida estilização do elemento, como por exemplo para testes.</dd> + <dt id="attr-tabindex"><code><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a></code></dt> + <dd>É um atributo que recebe valores inteiros e indica se um elemento pode receber o foco de entrada de valores (é focável), se ele deve entrar na sequência da navegação pelo teclado (através da tecla TAB), e qual posição da sequência. Sobre seus valores: + <ul> + <li>um <em>valor negativo</em> indica que o elemento <strong>é focável</strong>, mas <strong>não é alcançável</strong> pela navegação sequencial do teclado (através da tecla TAB);</li> + <li><code>0</code> indica que o elemento <strong>é focável</strong> e <strong>alcançavel</strong> pela navegação sequencial do teclado, mas sua ordem de seleção relativa é definida pela convenção da plataforma (ou do navegador);</li> + <li>um <em>valor positivo</em> indica que o elemento <strong>é focável</strong> e <strong>alcançável</strong> pela navegação sequencial do teclado; sua ordem de seleção relativa é definida pelo valor colocado: a sequência segue em ordem crescente definida no <code><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a></code>. Se vários elementos possuem o mesmo valor de <code><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a></code>, sua ordem relativa é estabelecida pela posição relativa no documento HTML.</li> + </ul> + </dd> + <dt id="attr-title"><code><a href="/en-US/docs/Web/HTML/Global_attributes/title">title</a></code></dt> + <dd>Contém um texto representativo sobre a informação relacionada ao elemento ao qual este atributo pertence. Tal informação pode, mas não necessariamente, ser apresentada através de um <em>tooltip</em>.</dd> + <dt id="attr-translate"><code><a href="/en-US/docs/Web/HTML/Global_attributes/translate">translate</a></code></dt> + <dd>É um atributo enumerado, usado para especificar se um atributo de um elemento e os valores dos seus nós descendentes (filhos) {{domxref("Text")}} serão traduzidos quando a página for localizada, ou se não serão alterados. Pode ter os seguintes valores: + <ul> + <li><code>yes</code> ou string vazia: indicam que o elemento será traduzido;</li> + <li><code>no</code>: indica que o elemento não será traduzido.</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">Status</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_com_Navegadores">Compatibilidade com Navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Atributo</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>Atributo</th> + <th>Android</th> + <th>Chrome para 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="Veja_também">Veja também</h2> + +<ul> + <li>{{domxref("Element")}} e {{domxref("GlobalEventHandlers")}} interfaces que permitem acessar a maioria dos atributos globais.</li> +</ul> diff --git a/files/pt-br/web/html/global_attributes/itemprop/index.html b/files/pt-br/web/html/global_attributes/itemprop/index.html new file mode 100644 index 0000000000..06a11f013d --- /dev/null +++ b/files/pt-br/web/html/global_attributes/itemprop/index.html @@ -0,0 +1,513 @@ +--- +title: itemprop +slug: Web/HTML/Global_attributes/itemprop +tags: + - Atributos + - Atributos globais + - HTML + - Referências + - itemprop +translation_of: Web/HTML/Global_attributes/itemprop +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>O atributo global <code><strong>itemprop</strong></code> é usado para adicionar propriedades para um item. Todo elemento HTML pode ter um atributo <code>itemprop</code> especificado, e um <code>itemprop</code> consiste em um par de nome e valor. Cada par de nome e valor é chamado de <strong>propriedade,</strong> e um grupo de uma ou mais propriedades forma um <strong>item</strong>. Os valores das propriedades são ou um texto ou uma URL e pode ser associada a uma grande variedade de elementos incluindo {{HTMLElement("audio")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("object")}}, {{HTMLElement("source")}} , {{HTMLElement("track")}}, and {{HTMLElement("video")}}.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<p>The example below shows the source for a set of elements marked up with <code>itemprop</code> attributes, followed by a table showing the resulting structured data.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div itemscope itemtype ="http://schema.org/Movie"> + <h1 <strong>itemprop="name"</strong>>Avatar</h1> + <span>Director: + <span <strong>itemprop="director"</strong>>James Cameron</span> + (born August 16, 1954)</span> + <span <strong>itemprop="genre"</strong>>Science fiction</span> + <a href="../movies/avatar-theatrical-trailer.html" + <strong>itemprop="trailer"</strong>>Trailer</a> +</div></pre> + +<h3 id="Structured_data">Structured data</h3> + +<table class="standard-table"> + <tbody> + <tr> + <td colspan="1" rowspan="2"> </td> + <th colspan="2" rowspan="1"><strong>Item</strong></th> + </tr> + <tr> + <th><strong>itemprop name</strong></th> + <th><strong>itemprop value</strong></th> + </tr> + <tr> + <td>itemprop</td> + <td>name</td> + <td>Avatar</td> + </tr> + <tr> + <td>itemprop</td> + <td>director</td> + <td>James Cameron</td> + </tr> + <tr> + <td>itemprop</td> + <td>genre</td> + <td>Science fiction</td> + </tr> + <tr> + <td>itemprop</td> + <td>trailer</td> + <td>../movies/avatar-theatrical-trailer.html</td> + </tr> + </tbody> +</table> + +<h2 id="Properties">Properties</h2> + +<p>Properties have values that are either a string or a URL. When a string value is a URL, it is expressed using the {{HTMLElement("a")}} element and its {{htmlattrxref("href", "a")}} attribute, the {{HTMLElement("img")}} element and its {{htmlattrxref("src", "img")}} attribute, or other elements that link to or embed external resources.</p> + +<h3 id="Three_properties_with_values_that_are_strings">Three properties with values that are strings</h3> + +<pre class="brush: html"><div itemscope> + <p>My name is + <span itemprop="name">Neil</span>.</p> + <p>My band is called + <span itemprop="band">Four Parts Water</span>.</p> + <p>I am + <span itemprop="nationality">British</span>.</p> +</div></pre> + +<h3 id="One_property_image_whose_value_is_a_URL">One property, "image", whose value is a URL</h3> + +<pre class="brush: html"><div itemscope> + <img itemprop="image" + src="google-logo.png" alt="Google"> +</div></pre> + +<p>When a string value can't be easily read and understood by a person (e.g., a long string of numbers and letters), it can be displayed using the value attribute of the data element, with the more easily-understood-by-a human-version given in the element's contents (which is not part of the structured data - see example below).</p> + +<h3 id="An_item_with_a_property_whose_value_is_a_product_ID">An item with a property whose value is a product ID</h3> + +<p>The ID is not human-friendly, so the product's name is used the human-visible text instead of the ID.</p> + +<pre class="brush: html"><h1 itemscope> + <data itemprop="product-id" + value="9678AOU879">The Instigator 2000</data> +</h1></pre> + +<p>For numeric data, the meter element and its value attribute can be used.</p> + +<h3 id="A_meter_element">A meter element</h3> + +<pre class="brush: html"><div itemscope itemtype="http://schema.org/Product"> + <span itemprop="name">Panasonic White + 60L Refrigerator</span> + <img src="panasonic-fridge-60l-white.jpg" alt=""> + <div itemprop="aggregateRating" + itemscope + itemtype="http://schema.org/AggregateRating"> + <meter itemprop="ratingValue" + min=0 value=3.5 max=5>Rated 3.5/5</meter> + (based on <span + itemprop="reviewCount">11</span> + customer reviews) + </div> +</div></pre> + +<p>Similarly, for date- and time-related data, the time element and its datetime attribute can be used.</p> + +<h3 id="An_item_with_one_property_birthday_whose_value_is_a_date">An item with one property, "birthday", whose value is a date</h3> + +<pre class="brush: html"><div itemscope> + I was born on <time + itemprop="birthday" + datetime="2009-05-10">May 10th 2009</time>. +</div></pre> + +<p>Properties can also be groups of name-value pairs, by putting the itemscope attribute on the element that declares the property. Each value is either a string or a group of name-value pairs (i.e. an item).</p> + +<h3 id="An_outer_item_representing_a_person_and_an_inner_one_representing_a_band">An outer item representing a person, and an inner one representing a band</h3> + +<pre class="brush: html"><div itemscope> + <p>Name: + <span itemprop="name">Amanda</span></p> + <p>Band: + <span itemprop="band" itemscope> + <span itemprop="name">Jazz Band</span> + (<span itemprop="size">12</span> + players)</span></p> +</div></pre> + +<p>The outer item above has two properties, "name" and "band". The "name" is "Amanda", and the "band" is an item in its own right, with two properties, "name" and "size". The "name" of the band is "Jazz Band", and the "size" is "12". The outer item in this example is a top-level microdata item. Items that are not part of others are called top-level microdata items.</p> + +<h3 id="All_the_properties_separated_from_their_items">All the properties separated from their items</h3> + +<p>This example is the same as the previous one, but all the properties are separated from their items</p> + +<pre class="brush: html"><div itemscope id="amanda" itemref="a b"></div> +<p id="a">Name: + <span itemprop="name">Amanda</span></p> +<div id="b" + itemprop="band" + itemscope itemref="c"></div> +<div id="c"> + <p>Band: + <span itemprop="name">Jazz Band</span></p> + <p>Size: + <span itemprop="size">12</span> players</p> +</div></pre> + +<p>This gives the same result as the previous example. The first item has two properties, "name", set to "Amanda", and "band", set to another item. That second item has two further properties, "name", set to "Jazz Band", and "size", set to "12".</p> + +<p>An item can have multiple properties with the same name and different values.</p> + +<h3 id="Ice_cream_with_two_flavors">Ice cream with two flavors</h3> + +<pre class="brush: html"><div itemscope> + <p>Flavors in my favorite ice cream:</p> + <ul> + <li itemprop="flavor">Lemon sorbet</li> + <li itemprop="flavor">Apricot sorbet</li> + </ul> +</div></pre> + +<p>This results in an item with two properties, both with the name "flavor" and having the values "Lemon sorbet" and "Apricot sorbet".</p> + +<p>An element introducing a property can also introduce multiple properties at once, to avoid duplication when some of the properties have the same value.</p> + +<h3 id="An_item_with_two_properties_favorite-color_and_favorite-fruit_both_set_to_the_value_orange">An item with two properties, "favorite-color" and "favorite-fruit", both set to the value "orange"</h3> + +<pre class="brush: html"><div itemscope> + <span + itemprop="favorite-color + favorite-fruit">orange</span> +</div></pre> + +<div class="note"> +<p>Note: There is no relationship between the microdata and the content of the document where the microdata is marked up.</p> +</div> + +<h3 id="Same_structured_data_marked_up_in_two_different_ways">Same structured data marked up in two different ways</h3> + +<p id="There_is_no_semantic_difference_between_the_following_two_examples">There is no semantic difference between the following two examples</p> + +<pre class="brush: html"><figure> + <img src="castle.jpeg"> + <figcaption><span + itemscope><span + itemprop="name">The Castle</span></span> + (1986)</figcaption> +</figure></pre> + +<pre class="brush: html"><span itemscope><meta + itemprop="name" + content="The Castle"></span> +<figure> + <img src="castle.jpeg"> + <figcaption>The Castle + (1986)</figcaption> +</figure></pre> + +<p>Both have a figure with a caption, and both, completely unrelated to the figure, have an item with a name-value pair with the name "name" and the value "The Castle". The only difference is that if the user drags the figcaption out of the document, the item will be included in the drag-and-drop data. The image associated with the item won't be included.</p> + +<h2 id="Names_and_values">Names and values</h2> + +<p>A property is an unordered set of unique tokens that are case-sensitive and represent the name-value pairs. The property value must have at least one token. In the example below, each data cell is a token.</p> + +<h3 id="Names_examples">Names examples</h3> + +<table class="standard-table"> + <thead> + <tr> + <th colspan="1" rowspan="2" scope="col"> </th> + <th colspan="2" rowspan="1" scope="col">Item</th> + </tr> + <tr> + <th scope="col">itemprop <strong>name</strong></th> + <th scope="col">itemprop <strong>value</strong></th> + </tr> + </thead> + <tbody> + <tr> + <th>itemprop</th> + <td>country</td> + <td>Ireland</td> + </tr> + <tr> + <th>itemprop</th> + <td>Option</td> + <td>2</td> + </tr> + <tr> + <th>itemprop</th> + <td>https://www.flickr.com/photos/nlireland/6992065114/</td> + <td>Ring of Kerry</td> + </tr> + <tr> + <th>itemprop</th> + <td>img</td> + <td>https://www.flickr.com/photos/nlireland/6992065114/</td> + </tr> + <tr> + <th>itemprop</th> + <td>website</td> + <td>flickr</td> + </tr> + <tr> + <th>itemprop</th> + <td>(token)</td> + <td>(token)</td> + </tr> + </tbody> +</table> + +<p><strong>Tokens </strong>are either strings or URL's. An item is called a <strong>typed item</strong> if it is a URL. Otherwise, it is a string. Strings cannot contain a period or a colon (see below).</p> + +<ol> + <li>If the item is a typed item it must be either: + <ol> + <li>A defined property name, or</li> + <li>A valid URL, which refers to the vocabulary definition, or</li> + <li>A valid URL that is used as a proprietary item property name (i.e. one not defined in a public specification), or</li> + </ol> + </li> + <li>If the item is not a typed item it must be: + <ol> + <li>A string that contains no "<strong>.</strong>" (U+002E FULL STOP) characters and no "<strong>:</strong>" characters (U+003A COLON) and is used as a proprietary item property name (again, one not defined in a public specification).</li> + </ol> + </li> +</ol> + +<p class="note"><strong>Note:</strong> the rules above disallow ":" characters in non-URL values because otherwise they could not be distinguished from URLs. Values with "." characters are reserved for future extensions. Space characters are disallowed because otherwise the values would be parsed as multiple tokens.</p> + +<h2 id="Values">Values</h2> + +<p>The property value of a name-value pair is as given for the first matching case in the following list:</p> + +<ul> + <li>If the element has an <strong>itemscope </strong>attribute + + <ul> + <li>The value is the <strong>item </strong>created by the element.</li> + </ul> + </li> + <li>If the element is a <strong>meta </strong>element + <ul> + <li>The value is the value of the element's <strong>content </strong>attribute</li> + </ul> + </li> + <li>If the element is an <strong>audio</strong>, <strong>embed</strong>, <strong>iframe</strong>, <strong>img</strong>, <strong>source</strong>, <strong>track</strong>, or <strong>video </strong>element + <ul> + <li>The value is the resulting URL string that results from parsing the value of the element's src attribute relative to the node document (part of the <a href="/en-US/docs/Web/API/Microdata_DOM_API">Microdata DOM API</a>) of the element at the time the attribute is set</li> + </ul> + </li> + <li>If the element is an <strong>a</strong>, <strong>area</strong>, or <strong>link </strong>element + <ul> + <li>The value is the resulting URL string that results from parsing the value of the element's href attribute relative to the node document of the element at the time the attribute is set</li> + </ul> + </li> + <li>If the element is an <strong>object </strong>element + <ul> + <li>The value is the resulting URL string that results from parsing the value of the element's data attribute relative to the node document of the element at the time the attribute is set</li> + </ul> + </li> + <li>If the element is a <strong>data </strong>element + <ul> + <li>The value is the value of the element's value attribute</li> + </ul> + </li> + <li>If the element is a <strong>meter </strong>element + <ul> + <li>The value is the value of the element's <strong>value </strong>attribute</li> + </ul> + </li> + <li>If the element is a <strong>time </strong>element + <ul> + <li>The value is the element's <strong>datetime </strong>value</li> + </ul> + </li> +</ul> + +<p>Otherwise</p> + +<ul> + <li>The value is the element's <strong>textContent</strong>.</li> +</ul> + +<p>If a property's value is a<strong> URL</strong>, the property must be specified using a URL property element. The URL property elements are the <strong>a</strong>, <strong>area</strong>, <strong>audio</strong>, <strong>embed</strong>, <strong>iframe</strong>, <strong>img</strong>, <strong>link</strong>, <strong>object</strong>, <strong>source</strong>, <strong>track</strong>, and <strong>video </strong>elements.</p> + +<h3 id="Name_order">Name order</h3> + +<p>Names are unordered relative to each other, but if a particular name has multiple values, they do have a relative order.</p> + +<h4 id="In_the_following_example_the_a_property_has_the_values_1_and_2_in_that_order_but_whether_the_a_property_comes_before_the_b_property_or_not_is_not_important">In the following example, the "a" property has the values "1" and "2", <em>in that order</em>, but whether the "a" property comes before the "b" property or not is not important</h4> + +<pre class="brush: html"><div itemscope> + <p itemprop="a">1</p> + <p itemprop="a">2</p> + <p itemprop="b">test</p> +</div></pre> + +<h4 id="The_following_is_equivalent">The following is equivalent</h4> + +<pre class="brush: html"><div itemscope> + <p itemprop="b">test</p> + <p itemprop="a">1</p> + <p itemprop="a">2</p> +</div></pre> + +<h4 id="As_is_the_following">As is the following</h4> + +<pre class="brush: html"><div itemscope> + <p itemprop="a">1</p> + <p itemprop="b">test</p> + <p itemprop="a">2</p> +</div></pre> + +<h4 id="And_the_following">And the following</h4> + +<pre class="brush: html"><div id="x"> + <p itemprop="a">1</p> +</div> +<div itemscope itemref="x"> + <p itemprop="b">test</p> + <p itemprop="a">2</p> +</div> +</pre> + +<h2 id="Other_examples">Other examples</h2> + +<h3 id="HTML_2">HTML</h3> + +<pre class="brush: html"><dl itemscope + itemtype="http://vocab.example.net/book" + itemid="urn:isbn:0-330-34032-8"> + <dt>Title + <dd + itemprop="title">The Reality Dysfunction + <dt>Author + <dd + itemprop="author">Peter F. Hamilton + <dt>Publication date + <dd><time + itemprop="pubdate" + datetime="1996-01-26">26 January 1996</time> +</dl> +</pre> + +<h3 id="Structured_data_2">Structured data</h3> + +<table class="standard-table"> + <tbody> + <tr> + <td colspan="1" rowspan="14">itemscope</td> + <td>itemtype: itemid</td> + <td colspan="2" rowspan="1">http://vocab.example.net/book: urn:isbn:0-330-34032-8</td> + </tr> + <tr> + <td>itemprop</td> + <td>title</td> + <td>The Reality Dysfunction</td> + </tr> + <tr> + <td>itemprop</td> + <td>author</td> + <td>Peter F. Hamilton</td> + </tr> + <tr> + <td>itemprop</td> + <td>pubdate</td> + <td>1996-01-26</td> + </tr> + </tbody> +</table> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample('HTML_2', '', '', '', 'Web/HTML/Global_attributes/itemprop')}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td><code><a href="https://html.spec.whatwg.org/multipage/microdata.html#names:-the-itemprop-attribute:names:-the-itemprop-attribute">itemprop</a></code></td> + <td> </td> + <td>WG Note - No longer being actively developed</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Global_attributes">Other different global attributes</a></li> + <li>Other, microdata related, global attributes: + <ul> + <li>{{htmlattrxref("itemid")}}</li> + <li>{{htmlattrxref("itemprop")}}</li> + <li>{{htmlattrxref("itemref")}}</li> + <li>{{htmlattrxref("itemscope")}}</li> + <li>{{htmlattrxref("itemtype")}}</li> + </ul> + </li> +</ul> +</div> +</div> diff --git a/files/pt-br/web/html/global_attributes/lang/index.html b/files/pt-br/web/html/global_attributes/lang/index.html new file mode 100644 index 0000000000..932152774a --- /dev/null +++ b/files/pt-br/web/html/global_attributes/lang/index.html @@ -0,0 +1,89 @@ +--- +title: lang +slug: Web/HTML/Global_attributes/lang +tags: + - Atributos globais + - Referencia + - lang +translation_of: Web/HTML/Global_attributes/lang +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>O <a href="/en-US/docs/Web/HTML/Global_attributes">atributo global</a> <strong><code>lang</code></strong> ajuda a definir o idioma de um elemento: a língua em que elementos não-editáveis são escritos, ou a língua em que elementos editáveis devem ser escritos pelo usuário. O atributo contém uma uma única “tag de idioma” em um formato definido em <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt"><em>Tags para identificar linguagens(BCP47)</em></a>.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-lang.html","tabbed-shorter")}}</div> + +<p class="hidden">O código-fonte para este exemplo interativo está armazenado em um repositório do GitHub. Se você gosta de contribuir para projetos de exemplos interativos, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e envie-nos um pull request.</p> + +<p>Se o valor do atributo é uma <em>string vazia</em> (<code>lang=""</code>), o idioma é definido como <em>unknown (desconhecido)</em>; se a tag de idioma não é válida conforme o BCP47, ela é definida como<em> invalid (invalida)</em>.</p> + +<div class="note"> +<h2 id="Sintaxe_da_tag_de_idioma">Sintaxe da tag de idioma</h2> + +<p>A sintaxe completa do BCP47 é profunda o suficente para caracterizar dialetos de linguagem extremamente expecíficos, mas a maioria dos usos são bem mais simples.</p> + +<p>Uma tag de idioma é feita de <em>subtags de idioma </em>separadas por hífen, onde cada subtag indica uma certa propriedade da língua. As três subtags mais comuns são:</p> + +<dl> + <dt>Subtag de idioma</dt> + <dd>Necessária. Um código de 2 ou 3 caracteres que define o idioma base, tipicamente escrita em letras minúsculas. Por exemplo, o código para Inglês é <code>en</code> e o código para Português é <code>pt</code>.</dd> + <dt>Subtag de script</dt> + <dd>Opcional. Essa subtag define o sistema de escrita usado para a linguagem, e sempre tem 4 caracteres, com a primeira letra maiúscula. Por exemplo, Francês em Braile é <code>fr-Brai</code> e <code>ja-Kana</code> é Japonês escrito no alfabeto Katakana. Se a língua é escrita em uma maneira tipicamente comum, como Inglês no alfabeto Latino, não é necessário o uso da subtag.</dd> + <dt>Subtag de região</dt> + <dd>Opcional. Essa subtag define um dialeto do idioma base em uma localização particular e tem um código de duas letras maiúsculas referentes ao país, ou um código de três números referentes à uma área fora do país. Por exemplo, <code>es-ES</code> é para espanhol falado na Espanha, e <code>es-013</code> é o espanhol falado na America Central. “Espanhol Internacional” seria <code>es</code>.</dd> +</dl> + +<p>A subtag de script precede a região da subtag quando ambos estão presentes— <code>ru-Cyrl-BY</code> é Russo, escrito no alfabeto Cyrillic, falado em Belarus.</p> + +<p>Para encontrar os códigos corretos para uma subtag de idioma, acesse <a href="https://r12a.github.io/app-subtags/" rel="external">Language Subtag Lookup</a>.</p> +</div> + +<p>Mesmo que o atributo <strong>lang</strong> esteja bem definido ele ainda pode ser ignorado, pois o atributo <a href="/en-US/docs/Web/HTML/Global_attributes/xml:lang"><strong>xml:lang</strong></a> tem prioridade.</p> + +<p>Para as pseudo-classes CSS {{cssxref(":lang")}}, dois nomes de idiomas inválidos são diferentes se seus nomes forem diferentes. Por tanto, enquanto <code>:lang(es)</code> corresponde a ambos <code>lang="es-ES"</code> e <code>lang="es-419"</code>, <code>:lang(xyzzy)</code> não corresponde a <code>lang="xyzzy-Zorp!"</code>.</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Sem mudança até o último registro, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Registro de {{SpecName('HTML WHATWG')}}, sem mudança para {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Registro de {{SpecName('HTML WHATWG')}}, comportamento com <code>xml:lang</code> e algoritmo de determinação definido. Ele também é um atributo global.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/dirlang.html#h-8.1', 'lang')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Suportado em todos os elementos, mas {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}} e {{HTMLElement("script")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade">Compatibilidade</h2> + +<div class="hidden">A tabela de compatibilidade nesta página é gerada através de dados estruturados. Se você quiser contribuir com dados, por favor, cheque <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos envie um pull request.</div> + +<p>{{Compat("html.global_attributes.lang")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>Todos <a href="/en-US/docs/Web/HTML/Global_attributes">atributos globais</a>.</li> +</ul> diff --git a/files/pt-br/web/html/global_attributes/tabindex/index.html b/files/pt-br/web/html/global_attributes/tabindex/index.html new file mode 100644 index 0000000000..b4212f9871 --- /dev/null +++ b/files/pt-br/web/html/global_attributes/tabindex/index.html @@ -0,0 +1,127 @@ +--- +title: tabindex +slug: Web/HTML/Global_attributes/tabindex +tags: + - Atributos globais + - HTML + - Referencia +translation_of: Web/HTML/Global_attributes/tabindex +--- +<p>{{HTMLSidebar("Global_attributes")}}</p> + +<p>O <a href="/en-US/docs/Web/HTML/Global_attributes">atributo global</a> <strong>tabindex</strong> indica se um elemento pode receber foco de entrada (se ele é <em>focável</em>), se e em qual posição ele deve fazer parte da navegação sequencial do teclado (geralmente com a tecla <kbd>Tab</kbd>, daí seu nome).</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-tabindex.html","tabbed-standard")}}</div> + +<p class="hidden">O código-fonte desse exemplo interativo está hospedado em um repositório do Github. Se você quiser contribuir para exemplos interativos desse projeto, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a>e mande nos mande um pull request.</p> + +<p>Ele aceita valores inteiros, com diferentes resultados dependendo do valor desse inteiro:</p> + +<ul> + <li>um <em>valor negativo</em> (geralmente <code>tabindex="-1"</code>) significa que o elemento não deve ser localizado pela navegação sequencial do teclado, mas pode ser focável visualmente ou com JavaScript. Isso é mais útil para criar widgets accessíveis com JavaScript. + + <div class="note"> + <p>Um valor negativo é útil quando você tem conteúdo fora da tela que aparece com um evento específico. O usuário não poder focar em nenhum elemento com um <code>tabindex</code> negativo utilizando o teclado, porém um script pode o fazer utilizando o <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus">método</a> <code>focus()</code>.</p> + </div> + </li> + <li><code>tabindex="0"</code> significa que o elemento deve ser focável e que pode ser localizado pela navegação sequencial do teclado, mas a sua posição será definida pela ordem no código-fonte do documento;</li> + <li>um <em>valor positivo</em> significa que o elemento deve ser focável e que pode ser localizado pela navegação sequencial do teclado, e a sua posição definida pelo valor do número. Sendo assim, <code>tabindex="4"</code> seria focado antes de <code>tabindex="5"</code>, mas depois de <code>tabindex="3"</code>. Se vários elementos possuírem o mesmo valor positivo de <code>tabindex</code>, a sua posição na ordenação será definida pela sua posição no código-fonte do documento. O valor máximo do <code>tabindex</code> é 32767. Se não especificado, assume o valor padrão 0. + <div class="warning"> + <p>Evite usar valores do <code>tabindex</code> maiores que 0. Ao fazer isso dificulta para pessoas que dependem de tecnologias assistivas para navegar e operar o conteúdo da página. Ao invés disso, escreva o documento com os elementos em uma sequência lógica.</p> + </div> + </li> +</ul> + +<p>Se o atributo <code>tabindex</code> for definido em um elemento div {{htmlelement("div")}}, seu conteúdo filho (interno) não poderá ser rolado utilizando as teclas direcionais a menos que seja definido <code>tabindex</code> no conteúdo também.<a href="https://jsfiddle.net/jainakshay/0b2q4Lgv/"> Veja este fiddle para entender melhor os efeitos de rolagem do tabindex</a>.</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "editing.html#attr-tabindex", "tabindex")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Nenhuma mudança desde o mais recente snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#attr-tabindex", "tabindex")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot de {{SpecName('HTML WHATWG')}}, nenhuma mudança desde {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "editing.html#attr-tabindex", "tabindex")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot de {{SpecName('HTML WHATWG')}}. Desde {{SpecName("HTML4.01")}}, o atributo agora é suportado em todos os elementos (atributos globais).</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#adef-tabindex', 'tabindex')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Suportado apenas em {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, e {{HTMLElement("textarea")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_nos_Navegadores">Compatibilidade nos Navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</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>Recurso</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>Suporte básico</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="Veja_também">Veja também</h2> + +<ul> + <li>Todos os <a href="/pt-BR/docs/Web/HTML/Global_attributes">atributos globais</a>.</li> + <li>{{domxref("HTMLElement.tabIndex")}} que reflete este atributo.</li> + <li>Problemas de acessibilidade com tabindex: veja <a href="http://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html" id="id-22" style="font-size: inherit; line-height: inherit;" title="Don’t Use Tabindex Greater than 0 | Adrian Roselli">Don’t Use Tabindex Greater than 0 | Adrian Roselli</a> (em inglês).</li> +</ul> diff --git a/files/pt-br/web/html/global_attributes/title/index.html b/files/pt-br/web/html/global_attributes/title/index.html new file mode 100644 index 0000000000..917008a62f --- /dev/null +++ b/files/pt-br/web/html/global_attributes/title/index.html @@ -0,0 +1,139 @@ +--- +title: title +slug: Web/HTML/Global_attributes/title +tags: + - Atributos globais + - HTML + - Referencia +translation_of: Web/HTML/Global_attributes/title +--- +<p>{{HTMLSidebar("Global_attributes")}}</p> + +<p><span class="seoSummary">O <a href="/en-US/docs/Web/HTML/Global_attributes">atributo global</a> <strong>title </strong>contém textos representando informações de orientação, relacionados ao elemento a que pertence. Geralmente, mas não obrigatoriamente, esta informação pode ser apresentada ao usuário como uma dica. Alguns usos comuns:</span></p> + +<ul> + <li>Link: título ou descrição do documento vinculado</li> + <li>Elemento de mídia como uma imagem: descrição ou créditos associados</li> + <li>Parágrafo: nota de rodapé ou um comentário sobre ele</li> + <li>Citação: informação sobre o autor, e assim por diante.</li> +</ul> + +<p>Se este atributo for omitido, significa que o título do antecessor mais próximo desse elemento ainda é relevante (e poderá ser usado como dica para este elemento). Se este atributo estiver difinido como uma <em>string vazia</em>, significa explicitamente que o título do antecessor mais próximo não é relevante (e não deve ser usado como dica para este elemento).</p> + +<p>Semânticas adicionais são anexadas aos atributos <strong>title</strong> dos elementos {{ HTMLElement("link") }}, {{ HTMLElement("abbr") }}, {{ HTMLElement("input") }} e {{ HTMLElement("menuitem") }}.</p> + +<p>O atributo <strong>title</strong> pode conter várias linhas. Cada <code>U+000A LINE FEED</code> (<code>LF</code>) inserida representa uma nova linha. Alguns cuidados devem ser tomados, como a seguir:</p> + +<pre class="brush: html"><p>Novas linhas em título devem ser levadas em conta, como este <abbr title="Este é um +título de multiplas linhas">examplo</abbr>.</p> +</pre> + +<p>Este exemplo define um título de duas linhas.</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "elements.html#the-title-attribute", "title")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-title-attribute", "title")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-title-attribute", "title")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, it is now a true global attribute.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#adef-title', 'title')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, and {{HTMLElement("title")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>Suporte multi linha</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{CompatGeckoDesktop(12)}}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome para Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>Suporte multi linha</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(12)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>Todos os <a href="/en-US/docs/Web/HTML/Global_attributes">atributos globais</a>.</li> + <li>{{domxref("HTMLElement.title")}} que reflete este atributo.</li> +</ul> diff --git a/files/pt-br/web/html/html5/index.html b/files/pt-br/web/html/html5/index.html new file mode 100644 index 0000000000..e39b45444a --- /dev/null +++ b/files/pt-br/web/html/html5/index.html @@ -0,0 +1,299 @@ +--- +title: HTML5 +slug: Web/HTML/HTML5 +tags: + - Desenvolvimento Web + - Guía + - HTML + - HTML5 + - Visão Geral + - Web +translation_of: Web/Guide/HTML/HTML5 +--- +<p>HTML5 é a mais recente evolução do padrão que define o <a href="https://developer.mozilla.org/pt-BR/docs/HTML" title="https://developer.mozilla.org/pt-BR/docs/HTML">HTML</a>. O termo representa dois conceitos diferentes:</p> + +<ul> + <li>É uma nova versão da <em>linguagem </em>HTML, com novos elementos, atributos, e comportamentos</li> + <li>e um conjunto maior de tecnologias que permite o desenvolvimento de aplicações e web sites mais diversos e poderosos. Este conjunto é chamado <em>HTML5 & friends</em> e muitas vezes abreviado apenas como <em>HTML5.</em></li> +</ul> + +<p>Criada para ser utilizável por todos os desenvolvedores da Web Aberta, essa página de referências faz ligações a inúmeros recursos do HTML5, classificados em diversos grupos, baseando-se em suas funções;</p> + +<ul> + <li><em>Semântica</em>: permite você descrever mais precisamente o seu conteúdo.</li> + <li>Conectividade: permite uma comunicação com o servidor de formas modernas e inovadoras.</li> + <li>Offline e armazenamento: Permite que páginas web armazenem dados localmente do lado do cliente e opere de forma offline mais eficientemente.</li> + <li>Multimídia: Viabiliza a utilização de áudio e vídeo de forma primorosa na Web Aberta.</li> + <li>Gráficos e efeitos 2D/3D: viabiliza um leque diversificado de opções de representação gráfica. </li> + <li>Performance e integração: fornece grande otimização de velocidade e melhor utilização do hardware do computador.</li> + <li>Acesso ao dispositivo: viabiliza a utilização de diversos métodos e dispositivos de entrada e saída.</li> + <li>Estilização: permite aos autores a escrita de temas mais sofisticados.</li> +</ul> + +<div class="twocolumns"> + +</div> + +<h2 id="Semântica"><img alt="" src="https://mdn.mozillademos.org/files/3827/HTML5_Semantics_512.png" style="height: 50px; width: 50px;"> Semântica </h2> + +<dl> + <dt><strong><a href="https://developer.mozilla.org/pt-BR/docs/Sections_and_Outlines_of_an_HTML5_document">Seções e estruturas em HTML</a></strong></dt> + <dd>Uma visão geral sobre as novas estruturas e novos elementos de seção do HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}} e {{HTMLElement("aside")}}</dd> + <dt><strong><a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/Using_HTML5_audio_and_video">Utilizando áudio e vídeo com HTML5</a></strong></dt> + <dd>Os elementos {{HTMLElement("audio")}} e {{HTMLElement("video")}} incorporam e permitem manipulação de novos conteúdos multimídia. </dd> + <dt><strong><a href="https://developer.mozilla.org/pt-BR/docs/HTML/Forms_in_HTML">Formulários em HTML5</a></strong> </dt> + <dd>Uma visão geral sobre as melhorias dos formulários web com o HTML5: a API de validação de restrição, novos valores para o atributo {{htmlattrxref("type", "input")}} dos {{HTMLElement("input")}} e o novo elemento {{HTMLElement("output")}}.</dd> + <dt><strong>Novos elementos semânticos</strong></dt> + <dd>Seções laterais, mídia e elementos de formulário: há diversos novos elementos, como {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, ou {{HTMLElement("meter")}} e {{HTMLElement("main")}}, incrementando o montante de <a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element">elementos válidos do HTML5</a>.</dd> + <dt><strong>Melhorias no {{HTMLElement("iframe")}}</strong></dt> + <dd>Usando os atributos {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, e {{htmlattrxref("srcdoc", "iframe")}} , autores podem ser precisos sobre o nível de segurança e a renderização desejada de um elemento <strong>{{HTMLElement("iframe")}}.</strong></dd> + <dt><a href="https://developer.mozilla.org/pt-BR/docs/Web/MathML">MathML</a></dt> + <dd>Viabiliza a inserção direta de fórmulas matemáticas no código HTML5.</dd> + <dt><a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/HTML5/Introduction_to_HTML5">Introdução ao HTML5</a></dt> + <dd>Este artigo introduz como indicar para o navegador que você está usando HTML5 em sua página ou aplicação web. </dd> + <dt><a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/HTML5/Parser_HTML5">HTML5 parser compatível</a></dt> + <dd>O parser, que torna os bytes de um HTML em DOM, foi extendido e agora define precisamente o comportamento em todos os casos, mesmo quando se depara com código HTML inválido. Isso viabiliza uma grandiosa previsibilidade e interoperabilidade entre navegadores compatíveis com o HTML5.</dd> +</dl> + +<h2 id="Conectividade"><img alt="" src="https://mdn.mozillademos.org/files/3839/HTML5_Connectivity_512.png" style="height: 50px; width: 50px;">Conectividade</h2> + +<dl> + <dt><a href="https://developer.mozilla.org/pt-BR/docs/WebSockets">Web Sockets</a></dt> + <dd>Permite a criação de uma conexão permanente entre a página e o servidor para que estes possam trocar dados através desta ligação.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events">Eventos do servidor</a></dt> + <dd>Permite que o servidor envie eventos para um cliente, ao contrário do paradigma clássico onde o servidor pode enviar apenas dados em resposta às requests do cliente.</dd> + <dt><a href="https://developer.mozilla.org/pt-BR/docs/Web/Guide/API/WebRTC">WebRTC</a></dt> + <dd>WebRTC (Comunicação em tempo real), permite conexões entre usuários e controle de videoconferência diretamente no browser, sem necessidade de um plugin ou aplicação externa.</dd> +</dl> + +<h2 id="Offline_e_armazenamento"><img alt="" src="https://mdn.mozillademos.org/files/3833/HTML5_Offline_Storage_512.png" style="height: 50px; width: 50px;">Offline e armazenamento</h2> + +<dl> + <dt><a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/Using_the_application_cache">Recursos offline: cache de aplicação</a></dt> + <dd>Firefox possui suporte completo às especificações dos recursos offlines do HTML5. A maioria dos outros navegadores suportam apenas parte deste recurso.</dd> + <dt>Eventos online e offline</dt> + <dd> + <p>Firefox 3 dá suporte aos eventos WHATWG online e offline, o que permite que aplicações e extensões percebam quando há conexão de Internet, assim como permite a detecção das oscilações de conexão. </p> + </dd> + <dt>WHATWG </dt> + <dd>Sessão <em>client-side</em> e armazenamento persistente permite que aplicações web armazenem dados de forma estruturada no lado do cliente.</dd> + <dt>IndexedDB</dt> + <dd>É um padrão web para armazenamento de quantidades significativas de dados estruturados no navegador e para alta performace de busca nestes dados, usando índices.</dd> + <dt>Uso de arquivos de aplicações web</dt> + <dd>Foi adicionado ao <a href="https://developer.mozilla.org/pt-BR/docs/Mozilla/Gecko">Gecko</a> o suporte à nova API de arquivos do HTML5, tornando possível o acesso de arquivos locais pelas aplicações. Isso inclui suporte para seleções de múltiplos arquivos usando {{HTMLElement("input")}} do novo <a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/Input#attr-type">tipo</a> <span style="font-family: courier;">file</span> do HTML5. Há também o <a href="https://developer.mozilla.org/pt-BR/docs/Web/API/FileReader">FileReader</a>.</dd> +</dl> + +<h2 id="Multimídia"><img alt="" src="https://mdn.mozillademos.org/files/3835/HTML5_Multimedia_512.png" style="height: 50px; width: 50px;">Multimídia</h2> + +<dl> + <dt>Utilizando áudio e vídeo com HTML5</dt> + <dd>Os elementos {{HTMLElement("audio")}} e {{HTMLElement("video")}} incluem e permitem a manipulação de novos conteúdos multimídia.</dd> + <dt>WebRTC</dt> + <dd>Permite conexões entre usuários e controle de videoconferência diretamente no browser, sem necessidade de um <em>plugin</em> ou aplicação externa.</dd> + <dt>API da câmera</dt> + <dd>Permite o uso, manipulação e armazenamento de uma imagem diretamente da câmera do computador.</dd> + <dt>Track e WebVTT</dt> + <dd>O elemento {{HTMLElement("track")}} permite legendas e capítulos. WebVTT é o formato de texto do track {{HTMLElement("track")}}.</dd> +</dl> + +<h2 id="Gráficos_e_efeitos_3D"><img alt="" src="https://mdn.mozillademos.org/files/3841/HTML5_3D_Effects_512.png" style="height: 50px; width: 50px;">Gráficos e efeitos 3D</h2> + +<dl> + <dt><a href="https://developer.mozilla.org/pt-BR/docs/Web/Guide/HTML/Canvas_tutorial">Canvas</a></dt> + <dd>Aprenda sobre o novo elemento {{HTMLElement("canvas")}} e como utilizá-lo para desenhar gráficos e objetos no Firefox.</dd> + <dt>API de texto para {{HTMLElement("canvas")}}</dt> + <dd>O elemento {{HTMLElement("canvas")}} agora dá suporte à API de texto do HTML5.</dd> + <dt>WebGL</dt> + <dd>WebGL traz gráficos 3D à Web, introduzindo uma API que se aproxima bastante à OpenGL ES 2.0, que pode ser usada em elementos {{HTMLElement("canvas")}}.</dd> + <dt>SVG</dt> + <dd>Um formato de imagens vetoriais baseada em XML que pode ser diretamente embutido no HTML5.</dd> +</dl> + +<h2 id="Performance_e_integração"><img alt="" src="https://developer.mozilla.org/files/3831/HTML5_Performance_512.png" style="height: 50px; width: 50px;">Performance e integração</h2> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Using_web_workers" title="Using web workers">Web Workers</a></dt> + <dd>Permite a delegação da evolução do JavaScript para threads em segundo plano, permitindo que essas atividades sejam prevenidas e assim não deixando as interações dos eventos lentas.</dd> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> level 2</dt> + <dd>Permite buscar de forma <span id="result_box" lang="pt"><span>assíncrona</span></span> algumas partes da página, permitindo apresentar na tela conteúdo dinâmico, variando de acordo com o tempo e ações do usuário. Está é a tecnologia por trás do <a href="https://developer.mozilla.org/en-US/docs/AJAX" title="AJAX">Ajax</a>.</dd> + <dt>Motor JIT-compiling para JavaScript</dt> + <dd>A nova e poderosa geração de motores JavaScript é muito mais poderosa, levando para uma maior performance.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating_the_browser_history">History API</a></dt> + <dd>Permite a manipulação do histórico do navegador. Isso é especialmente útil para páginas que carregam novas informações interativas.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_Editable" title="HTML/Content Editable">O atributo contentEditable: Transforme seu website em uma wiki!</a></dt> + <dd>O HTML5 padronizou o atributo contentEditable. Saiba mais sobre este recurso.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">Arrastar e soltar</a></dt> + <dd>A API do HTML5 permite suportar o recurso de arrastar e soltar (<em>dragging and dropping</em>) items dentro e entre sites da web. Isso também fornece uma simples API para fazer o uso de extensões e aplicações baseadas na Mozilla.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Focus_management_in_HTML" title="Focus_management_in_HTML">Foco de gestão em HTML</a></dt> + <dd>O novo HTML5 <code>activeElement</code> e <code>hasFocus</code> são atributos suportados.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">Manipuladores de protocolos beseados na web</a></dt> + <dd>Agora você pode registrar aplicações web com manipuladores de protocolos utilizando o método the<code>navigator.registerProtocolHandler()</code>.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame" title="Web-based_protocol_handlers">requestAnimationFrame</a></dt> + <dd>Permite o controle de animações de renderização para obter a performance ideal.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Using_full-screen_mode" title="DOM/Using_full-screen_mode">API Fullscreen</a></dt> + <dd>Controla o uso de toda a tela para uma página web ou aplicação, sem mostrar a interface de UI do navegador.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">API bloqueio de ponteiro</a></dt> + <dd>Permite o bloqueio do ponteiro para o conteúdo, para jogos e aplicações semelhantes para não perder o foco quanto o ponteiro atinge o limite da janela.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Eventos online e offline</a></dt> + <dd>A fim de construir uma boa aplicação web offline, você precisa saber quando sua aplicação é realmente offline. Aliás, você também precisa saber quando sua aplicação foi retornada por um status online novamente.</dd> +</dl> + +<h2 id="Acesso_à_dispositivos"><img alt="" src="https://developer.mozilla.org/files/3837/HTML5_Device_Access_512.png" style="height: 50px; width: 50px;">Acesso à dispositivos</h2> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Usando a API da câmera</a></dt> + <dd>É permitido o uso, manipulação, e armazenar imagens através câmeras dos computadores.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Touch_events" title="DOM/Touch_events">Eventos touch</a></dt> + <dd>Manipuladores para reagir a eventos criados por um usuário ao pressionar em telas sensíveis ao toque (<em>touch screens</em>).</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Using_geolocation" title="Using geolocation">Utilizando geolocalização</a></dt> + <dd>Deixa que os navegadores localizem a posição do usuário utilizando a geolocalização.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Detecting_device_orientation" title="Detecting_device_orientation">Detectando a orientaçåo do dispositivo</a></dt> + <dd>Coleta a informação quando o dispositivo em que o browser está rodando muda sua orientação de tela. Isto pode ser utilizado como um dispositivo de entrada (por exemplo, para fazer jogos que utiliza à posiçao do dispositivo) ou para adaptar o layout de uma pagina para a orientaçao da tela (vertical ou horizontal).</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt> + <dd>Permite que o cursor fique limitado às medidas do conteúdo da aplicação, assim, jogos e outras aplicações não perdem o foto quando o cursos ultrapassa os limites do conteúdo.</dd> +</dl> + +<h2 id="Estilização"><img alt="" src="https://developer.mozilla.org/files/3829/HTML5_Styling_512.png" style="height: 50px; width: 50px;">Estilização</h2> + +<p id="CSS_has_been_extended_to_be_able_to_style_elements_in_a_much_more_complex_way._This_is_often_referred_as_CSS3_though_CSS_is_not_a_monolithic_specification_any_more_and_the_different_modules_are_not_all_at_level_3_some_are_at_level_1_and_others_at_level_4_with_all_the_intermediate_levels_covered."><a href="https://developer.mozilla.org/en-US/docs/CSS" title="CSS">CSS</a> <span id="result_box" lang="pt"><span>foi estendido para</span> <span>ser</span> <span>capaz de estilo</span> <span>elementos</span> <span>de uma forma</span> <span>muito mais complexa</span></span>. Sua extensão, também conhecido como <a href="https://developer.mozilla.org/en-US/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a>, mas, como o CSS não segue uma especificação padrão, alguns módulos podem não estar necessariamente na versão 3,. Alguns estão na versão 3 e outros até na 1. Chamar de CSS3 é apenas uma convenção.</p> + +<dl> + <dt>Novas caracteristicas dos estilos de background</dt> + <dd>Agora é possível determinar uma sombra à um elemento, usando a propriedade <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow" title="The box-shadow property describes one or more shadow effects as a comma-separated list.">box-shadow</a> </code>e também podemos definir <a href="https://developer.mozilla.org/en-US/docs/CSS/Multiple_backgrounds">diversos backgrounds</a> para um elemento.</dd> + <dt>More fancy borders</dt> + <dd>Também é possível utilizar imagens para estilizar bordas, usando a propriedade <code>border-image. </code>Bordas arredondadas são suportadas através da propriedade <code>border-radius.</code></dd> + <dt>Animating your style</dt> + <dd>Utilizando <code>transition </code>para animar diferentes estágios de determinadas propriedades ou usando <code>animation </code>para animar trechos da página sem precisar usar o JavaScript com algum evento vinculado, permitindo total controle sobre movimentação de elementos. </dd> + <dd>Using <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions" title="CSS/Using_CSS_transitions">CSS Transitions</a> to animate between different states or using <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_animations" title="CSS/Using_CSS_animations">CSS Animations</a>to animate parts of the page without a triggering event, you can now control mobile elements on your page.</dd> + <dt>Typography improvement</dt> + <dd>Authors have better control to reach better typography. Eles podem controlar <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow" title="The text-overflow property determines how overflowed content that is not displayed is signaled to users. It can be clipped, display an ellipsis ('…', U+2026 Horizontal Ellipsis), or display a custom string."><code>text-overflow</code></a> e <a href="https://developer.mozilla.org/en-US/docs/CSS/hyphens" title="CSS/hyphens">hyphenation</a>, mas tambem pode adicionar um <a href="https://developer.mozilla.org/en-US/docs/CSS/text-shadow" title="CSS/text-shadow">shadow</a> a ele ou controlar mais precisamente a sua <a href="https://developer.mozilla.org/en-US/docs/CSS/text-decoration" title="SVG/Attribute/text-decoration">decorations</a>. Tipos de letras personalizadas podem ser baixadas e aplicadas gracas a nova<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face" title="The @font-face CSS at-rule allows authors to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, @font-face eliminates the need to depend on the limited number of fonts users have installed on their computers. The @font-face at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule."><code>@font-face</code></a> at-rule.</dd> + <dt>Novos layouts de apresentaçoes</dt> + <dd>A fim de melhorar a flexibilidade dos modelos, foram adicionados, dois novos esquemas: o <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="CSS/Using_CSS_multi-column_layouts">CSS multi-column layouts</a> e <a href="https://developer.mozilla.org/en-US/docs/CSS/Flexbox" title="CSS/Flexbox">CSS flexible box layout</a>.</dd> +</dl> + + + +<p>(Alguns <a href="/en/HTML/HTML5/HTML5_Thematic_Classification" title="en/HTML/HTML5/HTML5 Thematic Classification">outros artigos relacionados com HTML5</a>.)</p> + +<h2 id="Introdução_ao_HTML5">Introdução ao HTML5</h2> + +<dl> + <dt><a href="/en/HTML/HTML5/Introduction_to_HTML5" title="en/HTML/Introduction to HTML5"><strong>Introdução ao HTML5</strong></a></dt> + <dd>Este artigo introduz como utilizar HTML5 no desenho de site ou de sua aplicação.</dd> +</dl> + +<h2 id="Elementos_do_HTML5">Elementos do HTML5</h2> + +<dl> + <dt><a href="/en/HTML/HTML5/HTML5_element_list" title="en"><strong>Lista de tags / elementos do HTML5</strong></a></dt> + <dd>Esta página contém uma tabela com todos os elementos (tags) baseado no rascunho atual das especificações do HTML5.</dd> +</dl> + +<dl> + <dt><a href="/en/Using_HTML5_audio_and_video" title="En/Using_audio_and_video_in_Firefox">Utilizando audio e video</a></dt> + <dd>Adicionando suporte aos elementos do HTML5 {{ HTMLElement("audio") }} e {{ HTMLElement("video") }} ao Firefox 3.5.</dd> + <dt><a href="/en/HTML/Forms_in_HTML" title="en/HTML/HTML5/Forms in HTML5">Formulários em HTML5</a></dt> + <dd><span id="result_box" lang="pt"><span class="hps">Veja as</span> <span class="hps">melhorias para</span> <span class="hps">formulários web</span> <span class="hps">em</span> <span class="hps">HTML5</span><span>: a</span> <span class="hps">API</span> de <span class="hps">validação de restrição</span><span>, vários</span> <span class="hps">novos atributos,</span> <span class="hps">novos valores</span> <span class="hps">para </span></span>{{ HTMLElement("input") }} atributo {{ htmlattrxref("type", "input") }}<span id="result_box" lang="pt"> <span class="hps">e os</span> <span class="hps">novo</span> <span class="hps">elemento </span></span>{{ HTMLElement("output") }}.<span id="result_box" lang="pt"> </span></dd> + <dt><a href="/en/Sections_and_Outlines_of_an_HTML5_document" title="en/Sections and Outlines of an HTML5 document">Seções e esboços em HTML5</a></dt> + <dd><span id="result_box" lang="pt"><span class="hps">Veja os novos elementos para </span><span class="hps">delinear</span> e seccionar <span class="hps">em</span> <span class="hps">HTML5:</span></span> {{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("aside") }} and {{ HTMLElement("hgroup") }}.</dd> + <dt>O elemento {{ HTMLElement("mark") }}</dt> + <dd>Este elemento é usado para marcar em destaque um texto de especial relevância.</dd> + <dt>O elemento {{ HTMLElement("figure") }} e {{ HTMLElement("figcaption") }}</dt> + <dd>Este elemento permite adicionar figuras e ilustrações, com uma eventual legenda, <span id="result_box" lang="pt">colocado a<span class="hps">baixo d</span><span class="hps">o texto principal</span><span>.</span></span></dd> +</dl> + +<h3 id="Suporte_Canvas">Suporte Canvas</h3> + +<dl> + <dt><a href="/en/Canvas_tutorial" title="https://developer.mozilla.org/en/Canvas_tutorial">Tutorial Canvas </a></dt> + <dd> Apreda sobre o novo elemento<code> {{ HTMLElement("canvas") }} </code>e como desenhar gráficos e outros objetos no Firefox.</dd> + <dt><a href="/en/Drawing_text_using_a_canvas" title="en/Drawing_text_using_a_canvas">HTML5 API texto para elemento <canvas></a></dt> + <dd><span id="result_box" lang="pt">HTML5 <span class="hps">API</span> <span class="hps">texto</span> <span class="hps">agora é suportado</span> <span class="atn hps">pelo </span></span>{{ HTMLElement("canvas") }}<span id="result_box" lang="pt"><span class="hps">.</span></span></dd> +</dl> + +<div class="twocolumns"> +<h2 id="Recursos_de_aplicações_web">Recursos de aplicações web</h2> +</div> + +<dl> + <dt><a href="/en/HTML/Using_the_application_cache" title="en/Offline_resources_in_Firefox">Recursos Offline</a></dt> + <dd><span id="result_box" lang="pt">O <span class="hps">Firefox</span> suporta completamente <span class="hps">as</span> <span class="hps">especificações de</span> <span class="hps">HTML5 para </span> <span class="hps">recurso</span> <span class="hps">offline.</span> <span class="hps">A maioria dos outros</span> navegadores <span class="hps">tem</span> algum nível de suporte aos <span class="hps">recursos offline</span></span>.</dd> + <dt><a href="/en/Online_and_offline_events" title="en/Online_and_offline_events">Eventos online e offline</a></dt> + <dd><span id="result_box" lang="pt"><span class="hps">O Firefox 3 suporta</span> <span class="hps">WHATWG</span> <span class="hps">eventos online e offline</span><span>, que permitem que</span> <span class="hps">aplicações e extensões</span> <span class="hps">detectem se</span> <span class="hps">há ou não</span> <span class="hps">uma conexão ativa com Internet</span><span>, bem como</span> <span class="hps">detecta</span> <span class="hps">quando a conexão</span> conecta e desconecta.</span></dd> + <dt><a href="/en/DOM/Storage" title="en/DOM/Storage">Sessão WHATWG do lado cliente e armazenamento persistente (aka DOM Storage)</a></dt> + <dd><span id="result_box" lang="pt"><span class="hps">A sessão do lado cliente</span> <span class="hps">e</span> o <span class="hps">armazenamento persistente</span> <span class="hps">permitem que as aplicações web</span> <span class="hps">armazenem</span> <span class="hps">dados estruturados</span> <span class="hps">no lado cliente</span><span>.</span></span></dd> + <dt><a href="/en/HTML/Content_Editable" title="en/HTML/Content Editable">O atributo contentEditable: transforma seu website em um wiki!</a></dt> + <dd><span id="result_box" lang="pt"><span class="hps">O HTML5</span> <span class="hps">tem</span> um<span class="hps"> atributo</span> <span class="hps">padronizado</span> <span class="hps">contentEditable</span><span>.</span> <span class="hps">Saiba mais sobre</span> <span class="hps">este recurso.</span></span></dd> + <dt><a href="/en/Using_files_from_web_applications" title="en/Using_files_from_web_applications">Usando arquivos de aplicações web</a></dt> + <dd><span id="result_box" lang="pt"><span class="hps">Suporta para </span><span class="hps">a nova HTML5 API de arquivo</span> <span class="hps">foi adicionada ao</span> <span class="hps">Gecko,</span> <span class="hps">tornando possível </span><span class="hps">as aplicações web</span> <span class="hps">para acessarem arquivos</span> <span class="hps">locais</span> <span class="hps">selecionados pelo usuário</span><span>.</span> <span class="hps">Isso inclui suporte</span> <span class="hps">para selecionar vários arquivos</span> <span class="hps">usando o novo element</span>o HTML </span><span style="font-family: monospace;">{{ HTMLElement("input") }}</span> do <a href="/en/HTML/Element/Input#attr-type" title="en/HTML/Element/input#attr-type"><strong>type</strong></a> <span style="font-family: courier new;">arquivo</span> <span id="result_box" lang="pt"><span>de</span> </span><a href="/en/HTML/Element/Input#attr-multiple" title="en/HTML/Element/input#attr-multiple"><strong>multiplos</strong></a> atributos.</dd> +</dl> + +<h2 id="Recursos_DOM">Recursos DOM</h2> + +<dl> + <dt><a href="/en/DOM/document.getElementsByClassName" title="en/DOM/document.getElementsByClassName">getElementsByClassName</a></dt> + <dd>O método getElementsByClassName no Document e Element nodes são suportados. Estes métodos permitem encontrar elementos de uma classe ou de uma lista de classes.</dd> + <dt><a href="/En/DragDrop/Drag_and_Drop" title="En/DragDrop/Drag_and_Drop">Arrastar e soltar</a></dt> + <dd>A HTML5 API drag and drop permite suporte para arrastar e soltar itens dentro e entre web sites. <span id="result_box" lang="pt"><span class="hps">Isto também proporciona</span> <span class="hps">uma API simples</span> <span class="hps">para uso de extensões</span> <span class="hps">e</span> <span class="hps">aplicativos baseados em</span> <span class="hps">Mozilla</span><span>.</span></span></dd> + <dt><a href="/en/Focus_management_in_HTML" title="en/Focus_management_in_HTML">Foco na gestão do HTML</a></dt> + <dd><span id="result_box" lang="pt">Os novos</span> <code>activeElement</code> e <code>hasFocus</code> são atributos suportados pelo HTML5..</dd> + <dt><a href="/en/Web-based_protocol_handlers" title="en/Web-based_protocol_handlers">Manipuladores de protocolo baseado em web</a></dt> + <dd>Agora você pode registrar uma aplicação web como um manipulador de protocolo usando o método <code>navigator.registerProtocolHandler()</code>.</dd> +</dl> + +<h2 id="HTML_parser">HTML parser</h2> + +<p>O Gecko é <a href="/en/HTML/HTML5/HTML5_Parser" title="en/HTML/HTML5/HTML5 parser">compatível com HTML5 parser</a>—que transforma os bytes de documento HTML em um DOM—foi ativado por padrão a partir de maio de 2010. (Note que a versão do HTML5 parser que foi incluída no Gecko 1.9.2 / Firefox 3.6 tem bastante erros e não é recomendado para uso real.) {{ fx_minversion_inline(4.0) }}</p> + +<h2 id="Alterações_adicionais">Alterações adicionais</h2> + +<ul> + <li><code>localName</code> e <code>namespaceURI</code> em documentos HTML agora se comportam como em documentos XML: <code>localName</code> retorna em minúsculas e <code>namespaceURI</code> para elementos HTML é <code>"<a class="external" href="http://www.w3.org/1999/xhtml" rel="external nofollow" title="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>" </code></li> + <li>Quando a URI da página muda o identificador de fragmento de documento (a parte depois do caracter "#" (hash)), um novo evento <code>hashchange</code> é enviado para a página. Veja <a href="/en/DOM/window.onhashchange" title="en/DOM/window.onhashchange">window.onhashchange</a> para mais informação.</li> + <li>Suporte para <code><a href="/en/DOM/element.classList" title="en/DOM/element.classList">element.classList</a></code> para facilitar o manuseio de atributo de classe.</li> + <li>evnto de documento pronto <a href="/en/DOM/document.onreadystatechange" title="en/DOM/document.onreadystatechange">document.onreadystatechange</a> e <a href="/en/DOM/document.readyState" title="en/DOM/document.readyState">document.readyState</a> são propriedades suportadas.</li> + <li><span id="result_box" lang="pt"><span class="hps">Cores em</span> <span class="hps">atributos de apresentação</span> <span class="hps">são interpretados</span> <span class="hps">de acordo com o</span> <span class="hps">HTML5.</span></span></li> +</ul> + +<h2 id="Tecnologias_muitas_vezes_chamado_de_parte_do_HTML5_que_não_são"><span id="result_box" lang="pt"><span class="hps">Tecnologias</span> <span class="hps">muitas vezes chamado de</span> <span class="hps">parte do</span> <span class="hps">HTML5</span> <span class="hps">que não</span> <span class="hps">são</span></span></h2> + +<p><span id="result_box" lang="pt"><span class="hps">Estas</span> são <span class="hps">muitas vezes </span><span class="hps">consideradas em conjunto com</span> <span class="hps">um uso</span> <span class="hps">amplo</span> <span class="hps">termo</span> <span class="atn hps">de "</span><span>HTML5</span><span>", mas</span> <span class="hps">não são</span> <span class="hps">realmente parte do</span> </span><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/" rel="external" title="W3C HTML5 Spec">W3C HTML5 Spec</a>.</p> + +<ul> + <li><a href="/en/WebGL" title="en/WebGL">WebGL</a></li> + <li><a href="/en/DOM/FileReader" title="en/DOM/FileReader"><code>FileReader</code></a></li> + <li><code><a href="/en/DOM/XMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a></code></li> + <li><code><a href="/en/DOM/Locating_DOM_elements_using_selectors" title="En/DOM/Locating DOM elements using selectors">querySelector()</a></code></li> + <li><a href="/En/Using_geolocation" title="En/Using geolocation">Geolocation</a></li> + <li><a href="/en/JavaScript/ECMAScript_5_support_in_Mozilla" title="En/JavaScript/ECMAScript 5 support in Mozilla">ECMAScript5</a></li> + <li><a href="/en/CSS/CSS3" title="CSS3">CSS3</a></li> + <li><a href="/en/XBL2_specification_(external)" title="en/XBL2 specification (external)">XBL2</a></li> + <li><a href="/En/DOM/Using_web_workers" title="En/Using web workers">Web Workers</a></li> + <li><a href="/en/WebSockets" title="https://developer.mozilla.org/en/WebSockets">Web Sockets</a></li> + <li>Faster JavaScript</li> +</ul> + +<h2 id="Veja_também">Veja também</h2> + +<p><span id="result_box" lang="pt"><span class="hps">Alterações</span> <span class="hps">nas versões</span> <span class="hps">do Firefox</span> <span class="hps">que afetam</span> <span class="hps">os desenvolvedores</span> <span class="hps">da Web:</span></span></p> + +<ul> + <li><a href="/en/Firefox_12_for_developers" title="Firefox 12 for developers">Firefox 12</a></li> + <li><a href="/en/Firefox_11_for_developers" title="Firefox 11 for developers">Firefox 11</a></li> + <li><a href="/en/Firefox_10_for_developers" title="Firefox 10 for developers">Firefox 10</a></li> + <li><a href="/en/Firefox_9_for_developers" title="Firefox 9 for developers">Firefox 9</a></li> + <li><a href="/en/Firefox_8_for_developers" title="Firefox 8 for developers">Firefox 8</a></li> + <li><a href="/en/Firefox_7_for_developers" title="Firefox 7 for developers">Firefox 7</a></li> + <li><a href="/en/Firefox_6_for_developers" title="Firefox 6 for developers">Firefox 6</a></li> + <li><a href="/en/Firefox_5_for_developers" title="Firefox 5 for developers">Firefox 5</a></li> + <li><a href="../../../../en/Firefox_4_for_developers" rel="internal">Firefox 4 </a></li> + <li><a href="/en/Firefox_3.6_for_developers" title="en/Firefox 3.6 for developers">Firefox 3.6 </a></li> + <li><a href="/En/Firefox_3.5_for_developers" title="En/Firefox 3.5 for developers">Firefox 3.5 </a></li> + <li><a href="/en/Firefox_3_for_developers" title="en/Firefox 3 for developers">Firefox 3 </a></li> + <li><a href="/en/Firefox_2_for_developers" title="en/Firefox 2 for developers">Firefox 2 </a></li> + <li><a href="/en/Firefox_1.5_for_developers" title="en/Firefox 1.5 for developers">Firefox 1.5 </a></li> +</ul> + +<div class="noinclude"> +<p>{{ languages( {"es": "es/HTML/HTML5", "fr": "fr/HTML/HTML5", "ja": "ja/HTML/HTML5" , "ko": "ko/HTML/HTML5" , "pl": "pl/HTML/HTML5", "pt": "pt/HTML/HTML5", "zh-cn": "cn/HTML/HTML5", "zh-tw": "zh_tw/HTML/HTML5", "pt-br": "pt-br/HTML/HTML5"} ) }}</p> +</div> diff --git a/files/pt-br/web/html/html5/introduction_to_html5/index.html b/files/pt-br/web/html/html5/introduction_to_html5/index.html new file mode 100644 index 0000000000..465d67760d --- /dev/null +++ b/files/pt-br/web/html/html5/introduction_to_html5/index.html @@ -0,0 +1,23 @@ +--- +title: Introdução ao HTML5 +slug: Web/HTML/HTML5/Introduction_to_HTML5 +translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 +--- +<p><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">HTML5</a> é a mais nova versão do padrão HTML. Ele oferece novas funcionalidades para proporcionar não somente mídias diversas, mas para melhorar o suporte para criar aplicações web que possam interagir com o usuário, seus dados locais, e servidores mais facilmente e efetivamente.</p> + +<p>Pelo fato do HTML5 estar ainda no estágio de projeto, mudanças nas especificações são inevitáveis. Por isso, nem todas as funcionalidades são fornecidas por todos os navegadores. Entretanto, o Gecko (e por consequência, o Firefox) tem um bom suporte inicial para o HTML5, e o trabalho continua rumo a fornecer mais e mais de suas funcionalidades. O Gecko começou a fornecer algumas funcionalidades do HTML5 na versão 1.8.1. Você também pode encontrar uma lista das funcionalides do HTML5 que o Gecko suporta na <a href="/en/HTML/HTML5" title="en/HTML/HTML5">página principal do HTML5</a>. Para informação detalhada sobre o suporte de vários navegadores quanto às funcionalidades do HTML5, veja o site <a class="external" href="http://caniuse.com/#cats=HTML5" title="http://caniuse.com/#cats=HTML5">CanIUse</a>.</p> + +<p>Seu primeiro passo: O doctype do HTML5</p> + +<p>O doctype para o HTML5 é muito simples. Para indicar que seu conteúdo HTML usa HTML5, simplesmente use:</p> + +<pre><!DOCTYPE html> +</pre> + +<p>Esse simples doctype causará até os navegadores que não oferecem suporte ao HTML5 a entrar no modo dos padrões, isso significa que eles interpretarão as partes já estabelecidas pelo HTML em um modo "compatível" com HTML5, ignorando as novas funcionalidades que ele não suporta.</p> + +<div class="noinclude"> +<p>{{ languages( {"ja": "ja/HTML/HTML5/Introduction to HTML5", "fr":"fr/HTML/Introduction_à_HTML5", "pt": "pt/HTML/HTML5/Introdução_ao_HTML5", "pt-BR": "pt-BR/HTML/HTML5/Introdução_ao_HTML5"} ) }}</p> +</div> + +<p> </p> diff --git a/files/pt-br/web/html/index.html b/files/pt-br/web/html/index.html new file mode 100644 index 0000000000..97a8e50f37 --- /dev/null +++ b/files/pt-br/web/html/index.html @@ -0,0 +1,118 @@ +--- +title: 'HTML: Linguagem de Marcação de Hipertexto' +slug: Web/HTML +tags: + - HTML + - HTML 5 + - Página de destino + - Web + - 'l10n:prioridade' +translation_of: Web/HTML +--- +<div>{{HTMLSidebar}}</div> + +<p class="summary"><span class="seoSummary"><strong>HTML</strong> (Linguagem de Marcação de HiperTexto) é o bloco de construção mais básico da web. Define o significado e a estrutura do conteúdo da web. Outras tecnologias além do HTML geralmente são usadas para descrever a aparência/apresentação (<a href="/pt-BR/docs/Web/CSS">CSS</a>) ou a funcionalidade/comportamento (<a href="/pt-BR/docs/Web/JavaScript">JavaScript</a>) de uma página da web.</span></p> + +<p>"Hipertexto" refere-se aos <em>links</em> que conectam páginas da Web entre si, seja dentro de um único site ou entre sites. Links são um aspecto fundamental da web. Ao carregar conteúdo na Internet e vinculá-lo a páginas criadas por outras pessoas, você se torna um participante ativo na world wide web.</p> + +<p>O HTML usa "Marcação" para anotar texto, imagem e outros conteúdos para exibição em um navegador da Web. A marcação HTML inclui "elementos" especiais, como {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("datalist")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("nav")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("video")}}, {{HTMLElement("ul")}}, {{HTMLElement("ol")}}, {{HTMLElement("li")}} e muitos outros.</p> + +<p>Um elemento HTML é separado de outro texto em um documento por "tags", que consistem no nome do elemento entre "<code><</code>" e "<code>></code>". O nome de um elemento dentro de uma tag é insensível a maiúsculas e minúsculas. Isto é, pode ser escrito em maiúsculas, minúsculas ou um mistura. Por exemplo, a tag <code><title></code> pode ser escrita como <code><Title></code>, <code><TITLE></code> ou de qualquer outra forma.</p> + +<p>Os artigos abaixo podem ajudá-lo a aprender mais sobre HTML.</p> + +<section class="cleared" id="sect1"> +<ul class="card-grid"> + <li><span>Introdução ao HTML</span> + + <p>Se você é novo no desenvolvimento web, não deixe de ler nosso artigo <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/HTML_basico">O Básico do HTML </a>para aprender o que é HTML e como usá-lo.</p> + </li> + <li><span>Tutoriais HTML </span> + <p>Para artigos sobre como usar o HTML, assim como tutoriais e exemplos completos, confira nossa <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/HTML">Área de Aprendizado de HTML</a>.</p> + </li> + <li><span>Referência do HTML </span> + <p>Em nossa extensa seção de <a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/ReferenciaHTML">Referência do HTML</a>, você encontrará os detalhes sobre cada elemento e atributo do HTML.</p> + </li> +</ul> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Tools" id="Tutoriais_para_iniciantes">Tutoriais para iniciantes</h2> + +<p>Nossa <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/HTML">Área de Aprendizado de HTML</a> apresenta vários módulos que ensinam HTML desde o início — sem necessidade de conhecimento prévio.</p> + +<dl> + <dt><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML">Introdução ao HTML</a></dt> + <dd>Este módulo fornece uma base de conhecimento, permitindo que você acostume-se com os conceitos e sintaxes importantes, tais como aplicar HTML para texto, como criar <em>hyperlinks</em> e como usar HTML para estruturar uma página web.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimídia e como incorporá-la</a></dt> + <dd>Este módulo explora como usar HTML para incluir multimídia em sua página web, incluindo as diferentes maneiras para incluir imagens, e como incorporar vídeos, áudios e até como colocar uma página inteira em outras páginas web.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Tables">Tabelas HTML</a></dt> + <dd>Representar dados tabulares em uma página web de maneira entendível e acessível pode ser um desafio. Este módulo cobre marcação tabular básica, junto com outras funcionalidades mais complexas como legendas e sumários.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Forms">Formulários HTML</a></dt> + <dd>Formulários são partes muito importantes na Web — proporcionam muitas das funcionalidades que você precisa para interagir em páginas web. Exemplos disso são registrar-se e conectar-se, enviar comentários, comprar produtos e muito mais. Este módulo lhe permite começar a criar as partes visíveis dos formulários, ou seja, as partes que os usuários interagem.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto">Usando HTML para resolver problemas comuns</a></dt> + <dd>Apresenta links para seções com conteúdo explicando como usar HTML para resolver problemas muito comuns, quando se cria uma página web: como trabalhar com títulos, agregar imagens ou vídeos, colocar ênfase em conteúdo, criar um formulário básico, etc.</dd> +</dl> + +<h2 id="Tópicos_avançados">Tópicos avançados</h2> + +<dl> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/CORS_enabled_image">Habilitando Imagem CORS </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> adequado, permite definir imagens pelo elemento {{HTMLElement("img")}} para ser carregado de outras fontes em um elemento {{HTMLElement("canvas")}} como se estivessem sendo carregados da fonte atual.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">Configuração de atributos CORS</a></dt> + <dd class="landingPageList">Alguns elementos em HTML que suportam <a href="/en-US/docs/HTTP/Access_control_CORS">CORS</a>, como por exemplo o {{HTMLElement("img")}} ou {{HTMLElement("video")}}, têm o atributo <code>crossorigin</code> (a propriedade <code>crossOrigin</code>), que permite configurar as requisições CORS para os dados recebidos pelo elemento.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Focus_management_in_HTML">Gerenciamento de foco em HTML</a></dt> + <dd class="landingPageList">O atributo DOM <code><a href="/en-US/docs/Web/API/Document/activeElement">activeElement</a></code> e o método DOM <code><a href="/en-US/docs/Web/API/Document/hasFocus">hasFocus()</a></code> lhe ajudam a melhorar a interação entre o usuário e os elementos da página.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Link_types">Tipos de conexões</a></dt> + <dd class="landingPageList">Em HTML, vários tipos de links podem ser utilizados para realizar conexões entre documentos, como por exemplo <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> e <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">Formatos de arquivos suportados pelos elementos de áudio e vídeo em HTML</a></dt> + <dd class="landingPageList">Os elementos <a href="/en-US/docs/Web/HTML/Element/audio"><code><audio></code></a> e <a href="/en-US/docs/Web/HTML/Element/video"><code><video></code></a> permitem que você reproduza áudios e vídeos no seu HTML. Estes elementos fornecem uma alternativa nativa de recursos do navegador, parecidos com a do Adobe Flash Player e outros plug-ins.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Using_the_application_cache">Usando o cachê de aplicação</a></dt> + <dd class="landingPageList">O cachê de aplicação tem como o objetivo executar a aplicação offline. Você pode usar a interface <strong>Application Cache</strong> (<em>AppCache</em>) para escolher elementos que o browser possa guardar, deixando-os disponíveis para usuários desconectados. As aplicações que forem armazenadas em cache podem ser utilizadas sem nenhum problema, mesmo que o usuário clique no botão de atualizar a página enquanto estiver offline.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content">Pré-carregando conteúdo com rel="preload"</a></dt> + <dd class="landingPageList">O valor <code>preload</code> do atributo {{htmlattrxref("rel", "link")}} do elemento {{htmlelement("link")}} permite que você escreva solicitações de busca declarativas em seu elemento {{htmlelement("head")}} do HTML, especificando recursos que suas páginas vão utilizar logo após o carregamento. Você também pode necessitar que estes recursos sejam pré-carregados ao início do ciclo de execução da página e depois que o mecanismo de renderização do navegador comece a agir. Isso garante que estarão disponíveis mais cedo e que seja menos provável que sua página seja bloqueada do processo de renderizar. Isso aumenta a performance da página. Este artigo oferece um guia básico de como <code>preload</code> funciona.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Documentation" id="Referências">Referências</h2> + +<dl> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Reference">Referência do HTML </a></dt> + <dd class="landingPageList">HTML é formado de <strong>elementos</strong>, onde cada um deles pode ser modificado por alguns <strong>atributos</strong>. Documentos HTML são interconectados através de <a href="/en-US/docs/Web/HTML/Link_types">links</a>.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Element">Referência dos Elementos HTML</a></dt> + <dd class="landingPageList">Navegue em uma lista com todos os elementos <a class="glossaryLink" href="/en-US/docs/Glossary/HTML">HTML</a>.</dd> +</dl> + +<dl> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Attributes">Referência de atributos em HTML</a></dt> + <dd class="landingPageList">Elementos em HTML possuem atributos. Estes configuram ou ajustam o funcionamento e o comportamento dos seus elementos de muitas maneiras.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Global_attributes">Atributos Globais</a></dt> + <dd class="landingPageList">Os atributos globais podem ser utilizados em todos os <a href="/en-US/docs/Web/HTML/Element">elementos HTML</a>, <em>mesmo aqueles que não são especificados como padrão</em>. Isso significa que qualquer elemento não padrão vai permitir estes atributos, mesmo que este retorne um documento HTML5 incompatível.</dd> +</dl> + +<dl> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Inline_elements">Elementos em linha</a> e <a href="/en-US/docs/Web/HTML/Block-level_elements">Elementos em nível de bloco</a></dt> + <dd class="landingPageList">Elementos HTML são normalmente elementos <em>inline</em> (em linha) ou <em>block-level</em> (em nível de bloco). Um elemento em linha ocupa somente o espaço limitado pelas tags que o definem. Um elemento em nível de bloco ocupa o espaço inteiro do elemento pai (container), portanto criando um bloco.</dd> +</dl> + +<dl> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Link_types">Tipos de Links</a></dt> + <dd class="landingPageList">No HTML, vários tipos de links podem ser utilizados para estabelecer e definir o relacionamento entre dois documentos. Os tipos de elementos de link que podem ser incluídos são <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> e <code><a href="/en-US/docs/Web/HTML/Element/link"><link></a></code>.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Supported_media_formats">Formatos de mídia suportados pelos elementos vídeo e áudio do HTML</a></dt> + <dd class="landingPageList">Os elementos <a href="/en-US/docs/Web/HTML/Element/audio"><code><audio></code></a> e <a href="/en-US/docs/Web/HTML/Element/video"><code><video></code></a> permitem que você reproduza mídias de áudio e vídeo. Estes elementos fornecem uma alternativa nativa para o navegador reproduzir recursos similares aos encontrados no Adobe Flash e outros plug-ins.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Kinds_of_HTML_content">Tipos de conteúdo HTML</a></dt> + <dd class="landingPageList">O HTML é composto de uma grande diversidade de conteúdos, e cada um pode ser usado em certos contextos e não ser permitido em outros. Da mesma forma, cada um tem um conjunto de outras categorias de conteúdos que podem ou não serem usadas dentro deles. Este é um guia destas categorias.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">Os Modos Quirks e o Modo Padrão </a></dt> + <dd class="landingPageList">Informações sobre a história dos Modos <em>Quirks</em> e o Modo padrão.</dd> +</dl> + +<h2 class="landingPageList" id="Tópicos_relacionados">Tópicos relacionados</h2> + +<dl> + <dt><a href="/en-US/docs/Web/HTML/Applying_color">Aplicando cores em elementos HTML usando CSS</a></dt> + <dd>Este artigo mostra as principais formas de se usar CSS para adicionar cores ao seu conteúdo HTML, mostrando que partes dos documentos HTML podem ser coloridas e quais propriedades utilizar. Inclui exemplos e links para ferramentas de <em>palette-building</em>, entre outros.</dd> +</dl> +</div> +</div> +<span class="alllinks"><a href="/pt-BR/docs/tag/HTML">Ver todos...</a></span></section> diff --git a/files/pt-br/web/html/inline_elemente/index.html b/files/pt-br/web/html/inline_elemente/index.html new file mode 100644 index 0000000000..7a5866b243 --- /dev/null +++ b/files/pt-br/web/html/inline_elemente/index.html @@ -0,0 +1,29 @@ +--- +title: Elementos inline +slug: Web/HTML/Inline_elemente +translation_of: Web/HTML/Inline_elements +--- +<h3 id="Summary" name="Summary">Sumário</h3> +<p>"Inline" é uma categorização dos elementos do HTML, em contraste com os <a href="/en-US/docs/HTML/Block-level_elements">"elementos de bloco"</a>. Os elementos inline podem ser exibidos em nível de bloco ou outros elementos inline. Eles ocupam somente a largura de seu conteúdo. A diferença entre elementos inline e bloco incluem:</p> +<dl> + <dt> + Modelo de conteúdo</dt> + <dd> + Geralmente, elementos inline devem ter somente dados em outros elementos inline.</dd> + <dt> + Formato</dt> + <dd> + Por padrão, os elementos inline não começam em uma nova linha.</dd> +</dl> +<h3 id="Elements" name="Elements">Elementos</h3> +<p>Listagem dos elementos que são "inline":</p> +<ul> + <li><a href="/en/HTML/Element/b" title="en/HTML/Element/b">b</a>, <a href="/en/HTML/Element/big" title="en/HTML/Element/big">big</a>, <a href="/en/HTML/Element/i" title="en/HTML/Element/i">i</a>, <a href="/en/HTML/Element/small" title="en/HTML/Element/small">small</a>, <a href="/en/HTML/Element/tt" title="en/HTML/Element/tt">tt</a></li> + <li><a href="/en/HTML/Element/abbr" title="en/HTML/Element/abbr">abbr</a>, <a href="/en/HTML/Element/acronym" title="en/HTML/Element/acronym">acronym</a>, <a href="/en/HTML/Element/cite" title="en/HTML/Element/cite">cite</a>, <a href="/en/HTML/Element/code" title="en/HTML/Element/code">code</a>, <a href="/en/HTML/Element/dfn" title="en/HTML/Element/dfn">dfn</a>, <a href="/en/HTML/Element/em" title="en/HTML/Element/em">em</a>, <a href="/en/HTML/Element/kbd" title="en/HTML/Element/kbd">kbd</a>, <a href="/en/HTML/Element/strong" title="en/HTML/Element/strong">strong</a>, <a href="/en/HTML/Element/samp" title="en/HTML/Element/samp">samp</a>, <a href="/en/HTML/Element/var" title="en/HTML/Element/var">var</a></li> + <li><a href="/en/HTML/Element/a" title="en/HTML/Element/a">a</a>, <a href="/en/HTML/Element/bdo" title="en/HTML/Element/bdo">bdo</a>, <a href="/en/HTML/Element/br" title="en/HTML/Element/br">br</a>, <a href="/En/HTML/Element/Img" title="En/HTML/Element/Img">img</a>, <a href="/en/HTML/Element/map" title="en/HTML/Element/map">map</a>, <a href="/en/HTML/Element/object" title="en/HTML/Element/object">object</a>, <a href="/en/HTML/Element/q" title="en/HTML/Element/q">q</a>, <a href="/En/HTML/Element/Script" title="En/HTML/Element/Script">script</a>, <a href="/en/HTML/Element/span" title="en/HTML/Element/span">span</a>, <a href="/en/HTML/Element/sub" title="en/HTML/Element/sub">sub</a>, <a href="/en/HTML/Element/sup" title="en/HTML/Element/sup">sup</a></li> + <li><a href="/en/HTML/Element/button" title="en/HTML/Element/button">button</a>, <a href="/en/HTML/Element/Input" title="en/HTML/Element/Input">input</a>, <a href="/en/HTML/Element/label" title="en/HTML/Element/label">label</a>, <a href="/en/HTML/Element/select" title="en/HTML/Element/select">select</a>, <a href="/en/HTML/Element/textarea" title="en/HTML/Element/textarea">textarea</a></li> +</ul> +<h3 id="See_also" name="See_also">Ver também</h3> +<ul> + <li><a href="/en/HTML/Block-level_elements" title="en/HTML/Block-level_elements">Elementos de nível de bloco</a></li> +</ul> diff --git a/files/pt-br/web/html/microformatos/index.html b/files/pt-br/web/html/microformatos/index.html new file mode 100644 index 0000000000..01e61069a7 --- /dev/null +++ b/files/pt-br/web/html/microformatos/index.html @@ -0,0 +1,444 @@ +--- +title: Microformatos +slug: Web/HTML/microformatos +translation_of: Web/HTML/microformats +--- +<div>{{HTMLSidebar}}</div> + +<p><a href="http://microformats.org/"><dfn>Microformatos</dfn></a> (ás vezes abreviado como <strong>μF</strong>) são convenções utilizadas para incorporar convenções semânticas em HTML e providenciar uma API a ser usada por mecanismos de pesquisa, agregadores e outras ferramentas. Esses padrões mínimos de HTML são usados para marcar entidades que variam de informações fundamentais a específicas de domínio, como pessoas, organizações, eventos e locais.</p> + +<p>Os microformatos são suportados pelos principais mecanismos de pesquisa. Os dados são transportados na propriedade de classe que pode ser adicionada a qualquer elemento HTML. Além de legíveis por máquina, seu formato é projetado para ser facilmente lido por humanos.</p> + +<p>Existem <a href="http://microformats.org/wiki/microformats2#Parsers">bibliotecas de análise para a maioria das linguagens</a> para microformatos2.</p> + +<h3 id="Como_os_Microformatos_Funcionam">Como os Microformatos Funcionam?</h3> + +<p>Um autor de uma página web pode adicionar microformatos no seu HTML. Por exemplo se ele quer se identificar ele podem utilizar um <a href="http://microformats.org/wiki/h-card">h-card</a> como:</p> + +<div dir="ltr" style="text-align: left;"> +<pre class="source-html4strict"><a class="h-card" href="http://example.com">Joe Bloggs</a></pre> + +<p>Quando um analisador encontra esse dado, ele saberá que nessa página contém um "card" que descreve uma pessoa ou uma organização chamada <code>Joe Blogger</code> com uma URL de <code>http://example.com/</code>. O analisador disponibiliza esses dados por meio de APIs que podem ser usadas por diferentes aplicativos.</p> + +<p><span class="tlid-translation translation" lang="pt"><span title="">Como neste exemplo, alguns padrões de marcação requerem apenas um único nome de classe raiz de microformato, que os analisadores usam para encontrar algumas propriedades genéricas, como:</span></span> <code>name</code>, <code>url</code>, <code>photo</code>.</p> +</div> + +<h2 id="Prefixos_de_Microformatos">Prefixos de Microformatos</h2> + +<p>Todos os microformatos consistem de uma raíz e uma coleção de propriedades. As propriedades são opcionais e potencilamente multivaloradas - aplicações que necessitam de um valor único devem utilizar a primeira instância de uma propriedade<span class="tlid-translation translation" lang="pt"><span title="">. Os dados hierárquicos são representados com microformatos aninhados, normalmente como valores de propriedade.</span></span></p> + +<p>Todas os nomes de classes de microformatos utilizam prefixos. Os prefixos são <span class="tlid-translation translation" lang="pt"><span title="">Os prefixos são <strong>independentes da sintaxe dos vocabulários</strong>, os quais são desenvolvidos separadamente.</span></span></p> + +<ul> + <li><strong>"h-*" para nome de classes raíz</strong>, p.ex "h-card", "h-entry", "h-feed", e várias outras. Essas classes de alto nível normalmente indicam um tipo e o <span class="tlid-translation translation" lang="pt"><span title="">vocabulário esperado de propriedades correspondente.</span> <span title="">Por exemplo:</span></span> + + <ul> + <li><a href="http://microformats.org/wiki/h-card">h-card</a> descreve uma pessoa ou uma organização.</li> + <li><a href="http://microformats.org/wiki/h-entry">h-entry</a> descreve conteúdo on-line em série ou com data marcada como uma postagem de blog.</li> + <li><a href="http://microformats.org/wiki/h-feed">h-feed</a> descreve um fluxo de dados ou um feed de postagens.</li> + <li>Você pode encontrar vários outros You can find many more <a href="http://microformats.org/wiki/microformats2#v2_vocabularies">vocabulários na wiki de microformatos2.</a></li> + </ul> + </li> + <li><strong>"p-*" para propriedades de texto simples,</strong> p.ex "p-name", "p-summary" + <ul> + <li><span class="tlid-translation translation" lang="pt"><span title="">Análise de texto simples, texto de elemento em geral.</span> <span title="">Em certos elementos HTML, use atributos especiais primeiro, por exemplo</span> <span title="">img / alt, abbr / título.</span></span></li> + </ul> + </li> + <li><strong>"u-*" para propriedades URL</strong>, p.ex "u-url", "u-photo", "u-logo" + <ul> + <li>Análise especial necessária: prefer a/href, img/src, object/data etc. atributos sobre o conteúdo do elemento.</li> + </ul> + </li> + <li><strong>"dt-*" para propriedades de data e hora</strong>, p.ex "dt-start", "dt-end", "dt-bday" + <ul> + <li>Análise especial necessária: <a href="http://microformats.org/wiki/value-class-pattern" title="value-class-pattern">value-class-pattern</a> and separate date time value parsing for readability.</li> + </ul> + </li> + <li><strong>"e-*" para propriedades da árvore de elementos </strong><span class="tlid-translation translation" lang="pt"><span title="">em que toda a hierarquia de elementos contidos é o valor,</span></span> p.ex "e-content". O prefixo "e-" também pode ser lembrado mnemonicamente como "árvore de elementos", "marcação incorporada", ou "marcação encapsulada".</li> +</ul> + +<h2 id="Alguns_exemplos_de_microformatos">Alguns exemplos de microformatos</h2> + +<h3 id="h-card">h-card</h3> + +<p>O microformato <a href="http://microformats.org/wiki/h-card">h-card</a> representa uma pessoa ou uma organização.</p> + +<p>O valor de cada propriedade é definido no HTML utilizando a propriedade class, qualquer elemento pode receber.</p> + +<h4 id="Exemplo_de_h-card">Exemplo de h-card</h4> + +<div dir="ltr" style="text-align: left;"> +<pre class="source-html4strict"><p class="h-card"> + <img class="u-photo" src="http://example.org/photo.png" alt="" /> + <a class="p-name u-url" href="http://example.org">Joe Bloggs</a> + <a class="u-email" href="mailto:joebloggs@example.com">joebloggs@example.com</a>, + <span class="p-street-address">17 Austerstræti</span> + <span class="p-locality">Reykjavík</span> + <span class="p-country-name">Iceland</span> +</p></pre> +</div> + +<table class="standard-table"> + <tbody> + <tr> + <th>Propriedade</th> + <th>Descrição</th> + </tr> + <tr> + <td><strong><code>p-name</code></strong></td> + <td>O nome completo/formatado da pessoa ou organização</td> + </tr> + <tr> + <td><strong><code>u-email</code></strong></td> + <td>endereço de e-mail</td> + </tr> + <tr> + <td><strong><code>u-photo</code></strong></td> + <td>uma foto da</td> + </tr> + <tr> + <td><strong><code>u-url</code></strong></td> + <td>página na web ou outra URL representando a pessoa ou a organização</td> + </tr> + <tr> + <td><strong><code>u-uid</code></strong></td> + <td>identificador universal único, de preferência URL canônico</td> + </tr> + <tr> + <td><strong><code>p-street-address</code></strong></td> + <td>número da rua + enderço</td> + </tr> + <tr> + <td><strong><code>p-locality</code></strong></td> + <td>cidade ou vilarejo</td> + </tr> + <tr> + <td><strong><code>p-country-name</code></strong></td> + <td>nome do país</td> + </tr> + </tbody> +</table> + +<h4 id="Exemplo_de_h-card_aninhado">Exemplo de h-card aninhado</h4> + +<div dir="ltr" style="text-align: left;"> +<pre class="source-html4strict"><div class="h-card"> + <a class="p-name u-url" + href="http://blog.lizardwrangler.com/" + >Mitchell Baker</a> + (<a class="p-org h-card" + href="http://mozilla.org/" + >Mozilla Foundation</a>) +</div></pre> +</div> + +<p>JSON analisado:</p> + +<div dir="ltr" style="text-align: left;"> +<pre class="source-javascript">{ + "items": [{ + "type": ["h-card"], + "properties": { + "name": ["Mitchell Baker"], + "url": ["http://blog.lizardwrangler.com/"], + "org": [{ + "value": "Mozilla Foundation", + "type": ["h-card"], + "properties": { + "name": ["Mozilla Foundation"], + "url": ["http://mozilla.org/"] + } + }] + } + }] +}</pre> +</div> + +<p>Nota: o h-card aninhado implica nas propriedades 'name' e 'url', assim como qualquer outro h-card apenas com nome de classe raiz em um <code><a href></code>.</p> + +<h3 id="h-entry">h-entry</h3> + +<p>O microformato <a href="http://microformats.org/wiki/h-entry">h-entry</a> representa um conteúdo em série ou um conteúdo com data marcada na web. h-entry <span class="tlid-translation translation" lang="pt"><span title="">é frequentemente usado com conteúdo destinado a ser distribuído, p.ex</span> <span title="">postagens em blog.</span></span></p> + +<p>Exemplo de h-entry como uma postagem em blog:</p> + +<div dir="ltr" style="text-align: left;"> +<pre class="source-html4strict"><article class="h-entry"> + <h1 class="p-name">Microformats are amazing</h1> + <p>Published by <a class="p-author h-card" href="http://example.com">W. Developer</a> + on <time class="dt-published" datetime="2013-06-13 12:00:00">13<sup>th</sup> June 2013</time></p> + + <p class="p-summary">In which I extoll the virtues of using microformats.</p> + + <div class="e-content"> + <p>Blah blah blah</p> + </div> +</article></pre> + +<h4 id="Propriedades">Propriedades</h4> +</div> + +<table class="standard-table"> + <tbody> + <tr> + <th>Propriedade</th> + <th>Descrição</th> + </tr> + <tr> + <td><strong><code>p-name</code></strong></td> + <td>nome/título da entrada</td> + </tr> + <tr> + <td><strong><code>p-author</code></strong></td> + <td>quem escreveu a entrada, h-card opcionalmente incorporado</td> + </tr> + <tr> + <td><strong><code>dt-published</code></strong></td> + <td>quando a entrada foi publicada</td> + </tr> + <tr> + <td><strong><code>p-summary</code></strong></td> + <td>breve resumo da entrada</td> + </tr> + <tr> + <td><strong><code>e-content</code></strong></td> + <td>conteúdo completo da entrada</td> + </tr> + </tbody> +</table> + +<h4 id="Exemplo_de_h-entry_analisado">Exemplo de h-entry analisado</h4> + +<pre id="line1"><div class="<a class="attribute-value">h-entry</a>"> + <p><span class="p-author h-card"> + <a href="<a class="attribute-value">https://quickthoughts.jgregorymcverry.com/profile/jgmac1106</a>" ><img class="<a class="attribute-value">u-photo</a>" src="<a class="attribute-value">https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg</a>"/></a> + <a class="<a class="attribute-value">p-name u-url</a>" href="<a class="attribute-value">https://quickthoughts.jgregorymcverry.com/profile/jgmac1106</a>">Greg McVerry</a></span> + Replied to <a class="<a class="attribute-value">u-in-reply-to</a>" href="<a class="attribute-value">https://developer.mozilla.org/en-US/docs/Web/HTML/microformats</a>">a post on + <strong>developer.mozilla.org</strong> </a>: + </p> + <p class="<a class="attribute-value">p-name e-content</a>">Hey thanks for making this microformats resource</p> + <p> <a href="<a class="attribute-value">https://quickthoughts.jgregorymcverry.com/profile/jgmac1106</a>">Greg McVerry</a> + published this <a class="<a class="attribute-value">u-url url</a>" href="<a class="attribute-value">https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource</a>"><time class="<a class="attribute-value">dt-published</a>" + datetime="<a class="attribute-value">2019-05-31T14:19:09+0000</a>">31 May 2019</time></a></p> +</div></pre> + +<div class="panelContent"> +<pre class="data">{ + "items": [ + { + "type": [ "h-entry" ], + "properties": { + "in-reply-to": [ "https://developer.mozilla.org/en-US/docs/Web/HTML/microformats" ], + "name": [ "Hey thanks for making this microformats resource" ], + "url": [ "https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource" ], + "published": [ "2019-05-31T14:19:09+0000" ], + "content": [ + { + "html": "Hey thanks for making this microformats resource", + "value": "Hey thanks for making this microformats resource", + "lang": "en" + } + ], + "author": [ + { + "type": [ "h-card" ], + "properties": { + "name": [ "Greg McVerry" ], + "photo": [ "https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg" ], + "url": [ "https://quickthoughts.jgregorymcverry.com/profile/jgmac1106" ] + }, + "lang": "en", + "value": "Greg McVerry" + } + ] + }, + "lang": "en" + }</pre> +</div> + +<h3 id="h-feed">h-feed</h3> + +<p>O <a href="http://microformats.org/wiki/h-feed">h-feed</a> é um fluxo de dados ou um feed de posts de <a href="http://microformats.org/wiki/h-entry" title="h-entry">h-entry</a>, <span class="tlid-translation translation" lang="pt"><span title="">como postagens completas em uma página inicial ou em páginas de arquivo, sumários ou outras listagens de postagens</span></span></p> + +<h4 id="Exemplo_h-feed">Exemplo h-feed</h4> + +<div dir="ltr" style="text-align: left;"> +<pre class="source-html4strict"><div class="h-feed"> + <h1 class="p-name">Microformats Blogs</h1> + <article class="h-entry"> + <h2 class="p-name">Microformats are amazing</h2> + <p>Published by <a class="p-author h-card" href="http://example.com">W. Developer</a> + on <time class="dt-published" datetime="2013-06-13 12:00:00">13<sup>th</sup> June 2013</time> + </p> + <p class="p-summary">In which I extoll the virtues of using microformats.</p> + <div class="e-content"> <p>Blah blah blah</p> </div> + </article> +</div></pre> +</div> + +<h4 id="Propriedades_2">Propriedades</h4> + +<table class="standard-table"> + <tbody> + <tr> + <th>Propriedades</th> + <th>Descrição</th> + </tr> + <tr> + <td><strong><code>p-name</code></strong></td> + <td>nome do feed</td> + </tr> + <tr> + <td><strong><code>p-author</code></strong></td> + <td>autor do feed, opcionalmente incorporado com um h-card</td> + </tr> + </tbody> +</table> + +<h4 id="Filhos">Filhos</h4> + +<table class="standard-table"> + <tbody> + <tr> + <td><strong>h-entry aninhado</strong></td> + <td></td> + </tr> + <tr> + <td>objetos representando os itens do feed</td> + <td></td> + </tr> + </tbody> +</table> + +<h3 id="h-event">h-event</h3> + +<p>O <code>h-event</code> é para evento na web. <span class="tlid-translation translation" lang="pt"><span title="">O h-event é frequentemente usado com listagens de eventos e páginas de eventos individuais.</span></span></p> + +<div dir="ltr" style="text-align: left;"> +<pre class="source-html4strict"><div class="h-event"> + <h1 class="p-name">Microformats Meetup</h1> + <p>From + <time class="dt-start" datetime="2013-06-30 12:00">30<sup>th</sup> June 2013, 12:00</time> + to <time class="dt-end" datetime="2013-06-30 18:00">18:00</time> + at <span class="p-location">Some bar in SF</span></p> + <p class="p-summary">Get together and discuss all things microformats-related.</p> +</div></pre> +</div> + +<h4 id="Propriedades_3">Propriedades</h4> + +<table class="standard-table"> + <tbody> + <tr> + <th>Propriedade</th> + <th>Descrição</th> + </tr> + <tr> + <td><strong><code>p-name</code></strong></td> + <td>nome do evento (ou título)</td> + </tr> + <tr> + <td><strong><code>p-summary</code></strong></td> + <td>breve sumário do evento</td> + </tr> + <tr> + <td><strong><code>dt-start</code></strong></td> + <td>data e hora de início do evento</td> + </tr> + <tr> + <td><strong><code>dt-end</code></strong></td> + <td>data e hora de termino do evento</td> + </tr> + <tr> + <td><strong><code>p-location</code></strong></td> + <td>local do evento, opcionalmente incorporado com um h-card</td> + </tr> + </tbody> +</table> + +<h4 id="Exemplo_de_h-event_analisado">Exemplo de h-event analisado</h4> + +<div dir="ltr" style="text-align: left;"> +<pre><div class="h-event"> + <h2 class="p-name">IndieWeb Summit</h2> + <time class="dt-start" datetime="2019-06-29T09:00:00-07:00">June 29, 2019 at 9:00am (-0700)</time><br>through <time class="dt-end" datetime="2019-06-30T18:00:00-07:00">June 30, 2019 at 6:00pm (-0700)</time><br> + <div class="p-location h-card"> + <div> + <span class="p-name">Mozilla</span> + </div> + <div> + <span class="p-street-address">1120 NW Couch St</span>, + <span class="p-locality">Portland</span>, + <span class="p-region">Oregon</span>, + <span class="p-country">US</span> + </div> + <data class="p-latitude" value="45.52345"></data> + <data class="p-longitude" value="-122.682677"></data> + </div> + <div class="e-content">Come join us + </div> + <div> + <span class="p-author h-card"><a class="u-url p-name" href="https://aaronparecki.com">Aaron Parecki</a></span> Published this <a href="https://aaronparecki.com/2019/06/29/1/" class="u-url">event </a>on <time class="dt published" datetime="2019-05-25T18:00:00-07:00">May 5th, 2019</time> + </div> +</div></pre> + +<div class="panelContent"> +<pre class="data">{ + "items": [ + { + "type": [ "h-event" ], + "properties": { + "name": [ "IndieWeb Summit" ], + "url": [ "https://aaronparecki.com/2019/06/29/1/" ], + "author": [ + { + "type": [ "h-card" ], + "properties": { + "name": [ "Aaron Parecki" ], + "url": [ "https://aaronparecki.com"] + }, + "lang": "en", + "value": "Aaron Parecki" + } + ], + "start": [ "2019-06-29T09:00:00-07:00" ], + "end": [ "2019-06-30T18:00:00-07:00" ], + "published": [ "2019-05-25T18:00:00-07:00" ], + "content": [ + { + "html": "Come join us", + "value": "Come join us", + "lang": "en" + } + ], + "location": [ + { + "type": [ "h-card" ], + "properties": { + "name": [ "Mozilla" ], + p-street-address: [ "1120 NW Couch St" ] + "locality": [ "Portland" ], + "region": [ "Oregon" ], + "country": [ "US" ], + "latitude": [ "45.52345" ], + "longitude": [ "-122.682677" ] + }, + "lang": "en", + "value": "Mozilla" + } + ] + }, + "lang": "en" + } + ],</pre> +</div> +</div> + +<p>See also</p> + +<ul> + <li>{{Interwiki("wikipedia", "Microformat")}} na Wikipedia</li> + <li><a href="http://microformats.org/">Site oficial dos Microformatos</a></li> + <li><a href="http://microformats.org/wiki/search_engines">Motores de busca suportados</a> no site oficial do Microformats</li> + <li><a href="https://indiewebcamp.com/microformats">Microformatos no IndieWebCamp</a></li> +</ul> diff --git a/files/pt-br/web/html/optimizing_your_pages_for_speculative_parsing/index.html b/files/pt-br/web/html/optimizing_your_pages_for_speculative_parsing/index.html new file mode 100644 index 0000000000..5da1c3efa2 --- /dev/null +++ b/files/pt-br/web/html/optimizing_your_pages_for_speculative_parsing/index.html @@ -0,0 +1,23 @@ +--- +title: Optimizing your pages for speculative parsing +slug: Web/HTML/Optimizing_your_pages_for_speculative_parsing +translation_of: Glossary/speculative_parsing +--- +<p>Traditionally in browsers the HTML parser has run on the main thread and has blocked after a <code></script></code> tag until the script has been retrieved from the network and executed. The HTML parser in Firefox 4 and later supports speculative parsing off the main thread. It parses ahead while scripts are being downloaded and executed. As in Firefox 3.5 and 3.6, the HTML parser starts speculative loads for scripts, style sheets and images it finds ahead in the stream. However, in Firefox 4 and later the HTML parser also runs the HTML tree construction algorithm speculatively. The upside is that when a speculation succeeds, there's no need to reparse the part of the incoming file that was already scanned for scripts, style sheets and images. The downside is that there's more work lost when the speculation fails.</p> +<p>This document helps you avoid the kind of things that make speculation fail and slow down the loading of your page.</p> +<h2 id="Making_speculative_loads_succeed">Making speculative loads succeed</h2> +<p>There's only one rule for making speculative loads of linked scripts, style sheets and images succeed:</p> +<ul> + <li>If you use a <code><base></code> element to override the base URI of your page, put the element in the non-scripted part of the document. Don't add it via <code>document.write()</code> or <code>document.createElement()</code>.</li> +</ul> +<h2 id="Avoiding_losing_tree_builder_output">Avoiding losing tree builder output</h2> +<p>Speculative tree building fails when <code>document.write()</code> changes the tree builder state such that the speculative state after the <code></script></code> tag no longer holds when all the content inserted by <code>document.write()</code> has been parsed. However, only unusual uses of <code>document.write()</code> cause trouble. Here are the things to avoid:</p> +<ul> + <li>Don't write unbalanced trees. <code><script>document.write("<div>");</script></code> is bad. <code><script>document.write("<div></div>");</script></code> is OK.</li> + <li>Don't write an unfinished token. <code><script>document.write("<div></div");</script></code> is bad.</li> + <li>Don't finish your writing with a carriage return. <code><script>document.write("Hello World!\r");</script></code> is bad. <code><script>document.write("Hello World!\n");</script></code> is OK.</li> + <li>Note that writing balanced tags may cause other tags to be inferred in a way that makes the write unbalanced. E.g. <code><script>document.write("<div></div>");</script></code> inside the <code>head</code> element will be interpreted as <code><script>document.write("</head><body><div></div>");</script></code> which is unbalanced.</li> + <li>Don't let the semicolon of a named character reference be the last thing that is written. Due to a <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=535530" title="https://bugzilla.mozilla.org/show_bug.cgi?id=535530">bug</a> in Firefox 4 though 10 (fixed in Firefox 11), <code><script>document.write("foo&nbsp;");</script></code> causes a speculation failure. However, <code><script>document.write("&nbsp;foo");</script></code> is OK.</li> + <li>Don't format part of a table. <code><table><script>document.write("<tr><td>Hello World!</td></tr>");</script></table></code> is bad. However, <code><script>document.write("</code><code><table></code><code><tr><td>Hello World!</td></tr></code><code></table></code><code>");</script></code> is OK.</li> + <li>TODO: document.write inside other formatting elements.</li> +</ul> diff --git a/files/pt-br/web/html/preloading_content/index.html b/files/pt-br/web/html/preloading_content/index.html new file mode 100644 index 0000000000..6c5165a5c6 --- /dev/null +++ b/files/pt-br/web/html/preloading_content/index.html @@ -0,0 +1,239 @@ +--- +title: Preloading content with rel="preload" +slug: Web/HTML/Preloading_content +translation_of: Web/HTML/Preloading_content +--- +<p class="summary">O valor <code>preload</code> do atributo <code><a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/link#attr-rel">rel</a></code> do elemento <a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/link" title="O Elemento HTML <link> especifica as relações entre o documento atual e um recurso externo. Possíveis usos para este elemento incluem a definição de uma estrutura relacional para navegação. Este elemento é mais usado para vincular as folhas de estilo."><code><link></code></a> permite que você escreva solicitações de busca declarativas em seu elemento <a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/head" title="The HTML <head> elemento providencia informações gerais (metadados) sobre document, incluindo seu título e links para scripts e folhas de estilos."><code><head></code></a> do HTML, especificando recursos que suas páginas vão precisar logo após o carregamento. Você também pode querer que estes recursos sejam pré-carregados no início do ciclo de vida da página e depois que o mecanismo de renderização do navegador comece a agir. Isso garante que estarão disponíveis mais cedo e que seja menos provável que sua página seja bloqueada do processo de renderizar. Isso aumenta a performance da página. Este artigo oferece um guia básico de como <code>preload</code> funciona.</p> + +<h2 id="O_básico">O básico</h2> + +<p>Você comumente usa o elemento <code><link></code> quando carrega um arquivo de estilo CSS para sua pagina com:</p> + +<pre class="brush: html notranslate"><link rel="stylesheet" href="styles/main.css"></pre> + +<p>No entanto, aqui nós usamos <code>rel</code> com valor <code>preload</code>, que transforma o elemento <code><link></code> em um <em>preloader</em> para praticamente qualquer recurso que você precisar. Você também precisa especificar</p> + +<ul> + <li>o caminho para o recurso a ser pré-carregado, no atributo {{htmlattrxref("href", "link")}}</li> + <li>o tipo de recurso que vc esta pré-carregando, no atributo {{htmlattrxref("as", "link")}}.</li> +</ul> + +<p>Um exemplo simples pode se parecer com o seguinte (veja seus <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/js-and-css">JS and CSS example source</a>, e <a href="https://mdn.github.io/html-examples/link-rel-preload/js-and-css/">also live</a>):</p> + +<pre class="brush: html notranslate"><head> + <meta charset="utf-8"> + <title>JS and CSS preload example</title> + + <link rel="preload" href="style.css" as="style"> + <link rel="preload" href="main.js" as="script"> + + <link rel="stylesheet" href="style.css"> +</head> + +<body> + <h1>bouncing balls</h1> + <canvas></canvas> + + <script src="main.js"></script> +</body></pre> + +<p>Aqui estamos pré-carregando seus arquivos CSS e JavaScript de forma que estarão disponíveis assim que forem necessários mais tarde durante a renderização da página. Este exemplo é um pouco trivial, visto que o browser provavelmente descobre os elementos <code><link rel="stylesheet"></code> e <code><script></code> no mesmo pedaço de HTML que os preloads, mas o benefício pode ser visto mais claramente, quanto mais tarde os recursos são descobertos e quanto maiores forem eles. Por exemplo:</p> + +<ul> + <li>Os recursos apontados de dentro de um arquivo CSS, como fontes ou imagens;</li> + <li>Recursos que podem ser solicitados pelo JavaScript, como JSON, scripts importados ou web workers;</li> + <li>Imagens maiores e arquivos de vídeo.</li> +</ul> + +<p><code>preload</code> também possui outras vantagens. Usando o atributo <code>as</code> para especificar o tipo de conteúdo a ser pre-carregado permite que o browser:</p> + +<ul> + <li>Priorize o carregamento de recursos com maior precisão;</li> + <li id="tw-target-text">Corresponda solicitações futuras, reutilizando o mesmo recurso, se apropriado;</li> + <li>Aplique a <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP">content security policy</a> adequada ao recurso;</li> + <li>Defina os cabeçalhos corretos de {{HTTPHeader("Accept")}}.</li> +</ul> + +<h3 id="Qual_tipo_de_conteúdo_pode_ser_pré-carregado">Qual tipo de conteúdo pode ser pré-carregado?</h3> + +<p>Muitos diferentes tipos de conteúdo podem ser pré-carregados. Os valores possíveis para o atributo <code>as</code> são os seguintes:</p> + +<ul> + <li><code>audio</code>: Arquivo de áudio, como usados geralmente em {{htmlelement("audio")}} .</li> + <li><code>document</code>: Um documento HTML destinado a ser incorporado dentro de um {{htmlelement("frame")}} ou {{htmlelement("iframe")}}.</li> + <li><code>embed</code>: Recurso destinado a ser incorporado dentro de um elemento {{htmlelement("embed")}}.</li> + <li><code>fetch</code>: Recurso a ser acessado por um fetch ou XHR request, como um ArrayBuffer ou arquivo JSON.</li> + <li><code>font</code>: Arquivo de fonte.</li> + <li><code>image</code>: Arquivo de imagem.</li> + <li><code>object</code>: Recurso a ser incorporado dentro de um elemento {{htmlelement("object")}}.</li> + <li><code>script</code>: Arquivo JavaScript.</li> + <li><code>style</code>: Estilo CSS.</li> + <li><code>track</code>: Arquivo webVTT.</li> + <li><code>worker</code>: Um web worker JavaScript ou shared worker.</li> + <li><code>video</code>: Arquivo de vídeo, usualmente usado em {{htmlelement("video")}} .</li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: Você pode ler um pouco mais sobre estes valores e os recursos da web que eles esperam consumir na especificação Preload — veja <a href="https://w3c.github.io/preload/#link-element-extensions">link element extensions</a>. Observe também que a lista completa de valores que o atributo <code>as</code> pode assumir é regida pelas definiçoes nas especificaçoes Fetch — veja <a href="https://fetch.spec.whatwg.org/#concept-request-destination">request destinations</a>.</p> +</div> + +<h2 id="Incluindo_um_tipo_MIME">Incluindo um tipo MIME</h2> + +<p><code><link></code> pode aceitar um atributo {{htmlattrxref("type", "link")}}, o qual contém o MIME type do recurso para o qual o elemento está apontando. Isto é especialmente útil quando pre-carregando recursos — o browser usará o valor do atributo <code>type</code> para trabalhar se ele suportar o recurso, e irá somente iniciar o carregamento se este for o caso, ignorando se não for.</p> + +<p>Você pode ver um exemplo disto no nosso exemplo de video (veja o <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/video">full source code</a>, e também <a href="https://mdn.github.io/html-examples/link-rel-preload/video/">the live version</a>):</p> + +<pre class="brush: html notranslate"><head> + <meta charset="utf-8"> + <title>Video preload example</title> + + <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4"> +</head> +<body> + <video controls> + <source src="sintel-short.mp4" type="video/mp4"> + <source src="sintel-short.webm" type="video/webm"> + <p>Your browser doesn't support HTML5 video. Here is a <a href="sintel-short.mp4">link to the video</a> instead.</p> + </video> +</body></pre> + +<p>Então neste caso, navegadores que suportem MP4s vão pré-carregar e usar MP4, fazendo o reprodutor de video esperançosamente mais suave/mais responsivo para os usuários. Browsers que não suportem MP4 podem continuar carregando versao WebM, mas não tem as vantagens do pré-carregamento. Isto mostra como conteudo pré-carregado pode ser combinado com a filosofia de aprimoramento progressivo.</p> + +<h2 id="Buscas_de_origem_cruzada">Buscas de origem cruzada</h2> + +<p>Se você tem no seu site as configurações de <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS">CORS</a> funcionando corretamente, você pode pré-carregar com sucesso recursos de origem cruzada, desde que você defina um atributo {{htmlattrxref("crossorigin","link")}} no seu elemento <code><link></code>.</p> + +<p dir="ltr" id="tw-target-text">Um caso interessante em que isso se aplica mesmo se a busca não é de origem cruzada é arquivos de fonte. Por várias razões, elas precisam ser buscadas usando o modo anônimo CORS (veja <a href="https://drafts.csswg.org/css-fonts/#font-fetching-requirements">Font fetching requirements</a> se você esta interesado em todos os detalhes).</p> + +<p>Vamos usar este caso como um exemplo, em primeiro lugar porque o carregamento de fontes é realmente um bom caso de uso para pré-carregamento e, em segundo lugar, porque é mais fácil do que configurar um exemplo de solicitação de origem cruzada. Voce pode ver o exemplo completo no <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/fonts">source code on GitHub</a> (<a href="https://mdn.github.io/html-examples/link-rel-preload/fonts/">also see it live</a>):</p> + +<pre class="brush: html notranslate"><head> + <meta charset="utf-8"> + <title>Web font example</title> + + <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous"> + <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous"> + + <link href="style.css" rel="stylesheet" type="text/css"> +</head> +<body> + ... +</body></pre> + +<p>Você verá aqui que não apenas estamos fornecendo as dicas do tipo MIME nos atributos de tipo, mas também estamos fornecendo o atributo <code>crossorigin</code> para lidar com os problemas de CORS..</p> + +<h2 id="Adicionando_media">Adicionando media</h2> + +<p>Um bom recurso de alemento <code><link></code> é sua abilidade de aceitar atributos {{htmlattrxref("media", "link")}}. Estes podem aceitar <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_types">media types</a> ou full-blown <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">media queries</a>, permitindo que você faça o pré-carregamento responsivo!</p> + +<p>Vamos ver um exemplo simples (see it on GitHub — <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/media">source code</a>, <a href="https://mdn.github.io/html-examples/link-rel-preload/media/">live example</a>):</p> + +<pre class="brush: html notranslate"><head> + <meta charset="utf-8"> + <title>Responsive preload example</title> + + <link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)"> + <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)"> + + <link rel="stylesheet" href="main.css"> +</head> +<body> + <header> + <h1>My site</h1> + </header> + + <script> + var mediaQueryList = window.matchMedia("(max-width: 600px)"); + var header = document.querySelector('header'); + + if(mediaQueryList.matches) { + header.style.backgroundImage = 'url(bg-image-narrow.png)'; + } else { + header.style.backgroundImage = 'url(bg-image-wide.png)'; + } + </script> +</body></pre> + +<p>Você verá que estamos incluindo atributos de mídia em nossos <link> elementos, de modo que um estreita imagem é pre-carregada se o usuario estiver em um dispositivo de tela estreita, e uma imagem mais ampla é carregada se eles estiverem em um dispositivo de tela maior. Ainda precisamos anexar a imagem correta ao cabeçalho, dependendo do resultado — nos usamos {{domxref("Window.matchMedia")}} / {{domxref("MediaQueryList")}} para fazer isso (veja <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries">Testing media queries</a> para mais informaçoes sobre isso).</p> + +<p>Isso torna muito mais provável que a fonte estará disponível no momento em que a renderização da página for concluída, reduzindo os problemas de FOUT (flash de texto sem estilo).</p> + +<p>Note que isso não precisa ser limitado a imagens, ou até mesmo arquivos do mesmo tipo - pense grande! Talvez você pré-carregue e exiba um diagrama SVG simples se o usuário estiver em uma tela estreita em que a largura de banda e CPU é potencialmente mais limitada ou pré-carregue um bloco complexo de JavaScript e use-o para renderizar um modelo 3D interativo se os recursos do usuário forem mais abundantes.</p> + +<h2 id="Scripting_and_preloads">Scripting and preloads</h2> + +<p>Outra coisa legal sobre preloads é que você pode executá-los completamente com script, se desejar. Por exemplo, aqui estamos criando uma instancia {{domxref("HTMLLinkElement")}}, em seguida anexando-o ao DOM:</p> + +<pre class="brush: js notranslate"><code class="language-javascript"><span class="keyword token">var</span> preloadLink <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"link"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +preloadLink<span class="punctuation token">.</span>href <span class="operator token">=</span> <span class="string token">"myscript.js"</span><span class="punctuation token">;</span> +preloadLink<span class="punctuation token">.</span>rel <span class="operator token">=</span> <span class="string token">"preload"</span><span class="punctuation token">;</span> +preloadLink<span class="punctuation token">.</span><span class="keyword token">as</span> <span class="operator token">=</span> <span class="string token">"script"</span><span class="punctuation token">;</span> +document<span class="punctuation token">.</span>head<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>preloadLink<span class="punctuation token">)</span><span class="punctuation token">;</span> +</code></pre> + +<p>Isso significa que o navegador pré-carregará o arquivo JavaScript, mas ainda não o utilizará.</p> + +<p>Para usalo, você poderia fazer isso quando desejado:</p> + +<pre class="brush: js notranslate"><code class="language-javascript"><span class="keyword token">var</span> preloadedScript <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"script"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +preloadedScript<span class="punctuation token">.</span>src <span class="operator token">=</span> <span class="string token">"myscript.js"</span><span class="punctuation token">;</span> +document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>preloadedScript<span class="punctuation token">)</span><span class="punctuation token">;</span> +</code></pre> + +<p>Isso é útil quando você deseja pré-carregar um script, mas adia executá-lo até exatamente quando precisar.</p> + +<h2 id="Outros_mecanismos_de_pré-carregamento_de_recursos">Outros mecanismos de pré-carregamento de recursos</h2> + +<p dir="ltr" id="tw-target-text">Existem outros recursos de pré-carregamento, mas nenhum é tão adequado ao propósito <code><link rel="preload"></code>:</p> + +<ul> + <li><code><link rel="prefetch"></code><br> + tem sido suportado nos navegadores por um longo tempo, mas destina-se à pré-busca de recursos que serão usados na próxima navegação / carregamento da página (por exemplo, quando você vai para a próxima página). Isso é bom, mas não é útil para a página atual! Além disso, os navegadores darão aos recursos de pré-busca uma prioridade menor que os pré-carregados - a página atual é mais importante que a próxima. veja <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ">Link prefetching FAQ</a> para mais detalhes.</li> + <li><code><link rel="prerender"></code> + <p dir="ltr" id="tw-target-text">é usado para renderizar a página da Web especificada em segundo plano, acelerando o carregamento da página se o usuário navegar para ela. Devido ao potencial de desperdiçar largura de banda dos usuários, Chrome trata<code>prerender</code> como um <a href="https://developers.google.com/web/updates/2018/07/nostate-prefetch">NoState prefetch</a>.</p> + </li> + <li><code><link rel="subresource"></code> {{non-standard_inline}} + <p dir="ltr" id="tw-target-text">foi suportado no Chrome há algum tempo e tinha a intenção de lidar com recursos de pré-carregamento para o carregamento da página / navegação atual, mas tinha um problema - não havia como calcular uma prioridade para buscar os itens (como não existia naquela época ), então todos acabaram sendo buscados com pouca prioridade, o que não ajudou a situação.</p> + </li> + <li> + <p dir="ltr">Há vários carregadores de recursos baseados em script disponíveis, mas eles não têm nenhum poder sobre a fila de priorização de busca do navegador e estão sujeitos aos mesmos problemas de desempenho.</p> + </li> +</ul> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Preload','#x2.link-type-preload','preload')}}</td> + <td>{{Spec2('Preload')}}</td> + <td>mais detalhes sobre <code>preload</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'link-type-preload', 'rel=preload')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>definições de <code>rel=preload</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2> + +<p class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você quiser contribuir com os dados, por favor veja <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos mande um pedido de envio.</p> + +<p>{{Compat("html.elements.link.rel.preload")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/">Preload: What Is It Good For?</a> by Yoav Weiss</li> +</ul> + +<p>{{QuickLinksWithSubpages("/en-US/docs/Web/HTML")}}</p> diff --git a/files/pt-br/web/html/quirks_mode_and_standards_mode/index.html b/files/pt-br/web/html/quirks_mode_and_standards_mode/index.html new file mode 100644 index 0000000000..0eeeaba80d --- /dev/null +++ b/files/pt-br/web/html/quirks_mode_and_standards_mode/index.html @@ -0,0 +1,55 @@ +--- +title: Quirks Mode e Standards Mode +slug: Web/HTML/Quirks_Mode_and_Standards_Mode +tags: + - Desenvolvimento Web + - Gecko + - Guia(2) + - Guía + - HTML + - Padrões Web + - Web Standars + - XHTML +translation_of: Web/HTML/Quirks_Mode_and_Standards_Mode +--- +<p>Nos velhos dias da web, páginas eram tipicamente escritas em duas versões: Uma para o Netscape Navigator, e outra para o Microsoft Internet Explorer. Quando os padrões web foram criados pelo W3C, navegadores não puderam começar a usá-los imediatamente, pois isto iria quebrar a maior parte dos sites existentes na web. Portanto os navegadores introduziram dois modos para tratar os novos padrões em sites condescendentes diferentemente dos antigos sites legados.</p> + +<p>Existem agora três modos usados pelos mecanismos de layout nos navegadores web: "quirks mode" ("modo equivocado"), "almost standards mode" ("modo quase padrão"), e "full standards mode" ("modo de padrões completos"). Em <strong>quirks mode</strong>, o layout emula o comportamento não-padrão do Netscape Navigator 4 e do Internet Explorer 5 para Windows que é requerido para não quebrar o conteúdo existente na Web. No <strong>full standards mode</strong>, o comportamento é (espera-se) o descrito pelas especificações do HTML e CSS. No <strong>almost standards mode</strong>, há apenas um número muito pequeno de peculiaridades não-padrão implementadas.</p> + +<h2 id="How_does_Mozilla_determine_which_mode_to_use.3F" name="How_does_Mozilla_determine_which_mode_to_use.3F">Como os navegadores determinam qual modo usar?</h2> + +<p>Para documentos <a href="/en-US/docs/HTML" title="/en-US/docs/HTML">HTML</a>, os navegadores usam um DOCTYPE no início do documento para decidir se os tratarão em <em>quirks mode</em> ou <em>standards mode</em>. Para garantir que sua página use o <em>full standards mode</em>, certifique-se que sua página tenha um DOCTYPE como deste exemplo:</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset=UTF-8> + <title>Olá Mundo!</title> + </head> + <body> + </body> +</html></pre> + +<p>O DOCTYPE mostrado no exemplo, <code><!DOCTYPE html></code>, é o mais simples possível, e o recomendado pelo HTML5. As versões anteriores do HTML padrão recomendavam outras variantes, mas todos os navegadores existentes hoje irão usar o <em>full standards mode</em> para este DOCTYPE, até mesmo o Internet Explorer 6. Não há razões válidas para usar um DOCTYPE mais complicado. Se você usar outro DOCTYPE, você pode correr o risco de escolher um que acione o almost <em>standards mode</em> ou o <em>quirks mode</em>.</p> + +<p>Certifique-se de colocar o DOCTYPE logo no início de seu documento HTML. Qualquer coisa antes do DOCTYPE, como um comentário ou uma declaração XML irá acionar o <em>quirks mode</em> no Internet Explorer 9 e versões anteriores.</p> + +<p>Em HTML5, o único propósito do DOCTYPE é de ativar o <em>full standards mode</em>. Versões mais antigas do padrão HTML deram significado adicional ao DOCTYPE, mas nenhum navegador jamais usou o DOCTYPE para qualquer outra coisa além de alternar entre o <em>quirks mode</em> e o <em>standards mode</em>.</p> + +<p>Veja também uma descrição detalhada de <a class="external" href="http://hsivonen.iki.fi/doctype/" title="http://hsivonen.iki.fi/doctype/">quando diferentes navegadores escolhem diferentes modos</a>.</p> + +<h3 id="XHTML">XHTML</h3> + +<p>Se você servir sua página como <a href="/en-US/docs/XHTML" title="XHTML">XHTML</a> usando o MIME type <code>application/xhtml+xml</code> no cabeçalho HTTP <code>Content-Type</code>, você não precisará de um DOCTYPE para ativar o <em>full standards mode</em>, já que tais documentos sempre usam este modo. Note porém que servir suas páginas como <code>application/xhtml+xml</code> irá fazer com que o Internet Explorer 8 (e anteriores) <a href="/en-US/docs/XHTML#Support" title="XHTML">mostre uma caixa de diálogo para download</a> de um formato desconhecido ao invés de exibir sua página, pois a primeira versão do Internet Explorer com suporte ao XHTML é o Internet Explorer 9.</p> + +<p>Se você servir conteúdo como XHTML usando o MIME type <code>text/html</code>, os navegadores irão lê-lo como HTML, e você precisará colocar o DOCTYPE para usar o <em>standards mode</em>.</p> + +<h2 id="What_are_the_differences_between_the_modes.3F" name="What_are_the_differences_between_the_modes.3F">Como faço para ver o modo usado?</h2> + +<p>No Firefox, selecione <em>Propriedades da página</em> no menu de contexto, e procure por <em>Renderização</em>.</p> + +<p>No Internet Explorer, pressione <em>F12</em>, e procure por <em>Modo de Documento</em>.</p> + +<h2 id="What_are_the_differences_between_the_modes.3F" name="What_are_the_differences_between_the_modes.3F">Quais as diferenças entre os modos?</h2> + +<p>Veja a <a href="/en-US/docs/Mozilla_Quirks_Mode_Behavior" title="Mozilla_Quirks_Mode_Behavior">lista de peculiaridades ("quirks")</a> e "<a href="/en-US/docs/Gecko's_"Almost_Standards"_Mode" title="Gecko%27s_%22Almost_Standards%22_Mode">almost standards mode</a>" para entender a diferença entre estes modos.</p> diff --git a/files/pt-br/web/html/referenciahtml/index.html b/files/pt-br/web/html/referenciahtml/index.html new file mode 100644 index 0000000000..f0eda6be3f --- /dev/null +++ b/files/pt-br/web/html/referenciahtml/index.html @@ -0,0 +1,25 @@ +--- +title: Referência HTML +slug: Web/HTML/ReferenciaHTML +translation_of: Web/HTML/Reference +--- +<div>{{HTMLSidebar}}</div> + +<p>Esta referência de <a href="/pt-BR/docs/Web/HTML">HTML</a> descreve todos os <strong>elementos</strong> e <strong>atributos</strong> do HTML, incluindo <strong>atributos globais</strong> que se aplicam a todos elementos.</p> + +<dl> + <dt><a href="/en-US/docs/Web/HTML/Element">Referência de elementos do HTML</a></dt> + <dd>Esta página lista todos os elementos do HTML que são criados usando tags.</dd> + <dt><a href="/en-US/docs/Web/HTML/Attributes">Referência de atributos do HTML</a></dt> + <dd>Os elementos do HTML contêm atributos, que são valores adicionais que configuram os elementos ou ajustam seu comportamento de várias formas, para que se adaptem aos critérios dos usuários.</dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes">Atributos globais</a></dt> + <dd>Atributos globais são atributos comuns a todos os elementos do HTML; podem ser usados em todos os elementos, embora possam não ter efeito em alguns elementos.</dd> + <dt><a href="/en-US/docs/Web/HTML/Link_types">Tipos de links</a></dt> + <dd>Em HTML, os tipos de links a seguir indicam o relacionamento entre dois documentos, em que um aponta para o outro usando um elemento <code><a></code>, <code><area></code> ou <code><link></code>.</dd> + <dt><a href="/en-US/docs/Web/Guide/HTML/Content_categories">Categorias de conteúdo</a></dt> + <dd>Todo elemento em HTML é membro de uma ou mais categorias de conteúdo — estas categorias agrupam elementos que compartilham características comuns.</dd> +</dl> + +<p><span class="alllinks"><a href="/pt-BR/docs/tag/HTML" title="Article tagged: HTML">Veja todas as páginas com a tag<em> </em><em>HTML</em>...</a></span></p> + +<div class="section"></div> diff --git a/files/pt-br/web/html/using_html5_audio_and_video/index.html b/files/pt-br/web/html/using_html5_audio_and_video/index.html new file mode 100644 index 0000000000..895ba11988 --- /dev/null +++ b/files/pt-br/web/html/using_html5_audio_and_video/index.html @@ -0,0 +1,239 @@ +--- +title: Utilizando áudio e vídeo com HTML5 +slug: Web/HTML/Using_HTML5_audio_and_video +translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +--- +<p style="margin-left: 40px;">O HTML5 introduz o suporte de mídia embutido por meio dos elementos {{ HTMLElement("audio") }} e {{ HTMLElement("video") }}, oferecendo a possibilidade de incorporar facilmente mídia em documentos HTML.</p> + +<h2 id="Incorporando_mídia">Incorporando mídia:</h2> + +<p>Incorporar mídia em documentos HTML é simples:</p> + +<pre class="brush: html"><video src="<a class="linkification-ext" href="http://v2v.cc/~j/theora_testsuite/320x240.ogg" title="Linkification: http://v2v.cc/~j/theora_testsuite/320x240.ogg">http://v2v.cc/~j/theora_testsuite/320x240.ogg</a>" controls> + Seu navegador não suporta o elemento <code>video</code>. +</video> +</pre> + +<p>Esse exemplo reproduz uma amostra de vídeo, com controles de reprodução, a partir do site Theora.</p> + +<p>Aqui há um exemplo de áudio incorporado em um documento HTML</p> + +<pre class="brush: html"><audio src="/test/audio.ogg"> +<p>Seu nevegador não suporta o elemento audio.</p> +</audio> +</pre> + +<p>O atributo <code>src</code> pode ser a URL do arquivo de áudio ou o caminho do arquivo no sistema local.</p> + +<pre class="brush: html"><audio src="audio.ogg" controls autoplay loop> +<p>Seu navegador não suporta o elemento audio </p> +</audio> +</pre> + +<p>Esse exemplo de código usa atributos do elemento {{ HTMLElement("audio") }}:</p> + +<ul> + <li><code>controls</code> : Mostra os controles padrão para o áudio na página.</li> + <li><code>autoplay</code> : Faz com que o áudio reproduza automaticamente.</li> + <li><code>loop</code> : Faz com que o áudio repita automaticamente.</li> +</ul> + +<pre class="brush: html"><code><audio src="audio.mp3" preload="auto" controls></audio></code> +</pre> + +<p>O atributo <code>preload</code> é usado em elementos audio para carregar arquivos grandes. Ele pode assumir 3 valores:</p> + +<ul> + <li><code>"none"</code> não carrega o arquivo</li> + <li><code>"auto"</code> carrega o arquivo</li> + <li><code>"metadata"</code> carrega apenas os meta dados do arquivo</li> +</ul> + +<p>Vários arquivos podem ser especificados utilizando o elemento {{ HTMLElement("source") }} para disponibilizar vídeo ou áudio codificados em formatos diferentes para navegadores diferentes. Por exemplo:</p> + +<pre class="brush: html"><video controls> + <source src="foo.ogg" type="video/ogg"> + <source src="foo.mp4" type="video/mp4"> + Seu navegador não suporta o elemento <code>video</code>. +</video> +</pre> + +<p>Isso reproduz o arquivo Ogg em navegadores que suportam o formato Ogg. Se o navegador não suportar Ogg, o navegador reproduz o arquivo MPEG-4. Veja também a lista <a 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> para detalhes.</p> + +<p>Também é possível especificar os codecs que o arquivo de mídia requer; isso permite que o navegador faça escolhas mais inteligentes:</p> + +<pre class="brush: html"><video controls> + <source src="foo.ogg" type="video/ogg; codecs=dirac, speex"> + Seu navegador não suporta o elemento <code>video</code>. +</video></pre> + +<p>Aqui é especificado que o vídeo usa os codecs Dirac e Speex. Se o navegador suportar Ogg, mas não suportar os codecs especificados, o vídeo não será reproduzido.</p> + +<p>Se o atributo <code>type</code> não estiver especificado, o tipo de mídia é obtido no servidor e é verificado se o navegador consegue reproduzi-lo; se ele não pode ser renderizado, o próximo <code>source</code> é verificado. Se nenhum dos elementps <code>source</code> pode ser utilizado, um evento <code>error</code> é enviado para o elemento <code>video</code>. Se o atributo <code>type</code> estiver especificado, ele é comparado aos tipos que o navegador consegue reproduzir, e se ele não for reconhecido, o servidor não é verificado; ao invés disso, o próximo <code>source</code> é verificado.</p> + +<p>Veja <a href="/en/DOM/Media_events" title="https://developer.mozilla.org/en/DOM/Media_events">Media events</a> para uma lista completa de eventos relacionados a reprodução de mídia. Para detalhes sobre os formatos de mídia suportados por vários navegadores, veja <a 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>.</p> + +<h2 id="Controlando_a_reprodução_de_mídia">Controlando a reprodução de mídia</h2> + +<p>Após a mídia ser incorporada utilizando no documento HTML utilizando os novos elementos, é possível controla-los com código de JavaScript. Por exemplo, para começar (ou repetir) a reprodução, você pode fazer isto:</p> + +<pre class="brush: js">var v = document.getElementsByTagName("video")[0]; +v.play(); +</pre> + +<p>A primeira linha pega o primeiro elemento video, e a segunda chama o método <a class="internal" href="/En/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement#play()" title="en/nsIDOMHTMLMediaElement#play()"><code>play()</code></a> do elemento, como definido na interface {{ interface("nsIDOMHTMLMediaElement") }}, que é utilizada para implementar elementos de mídia</p> + +<p>Controlando um reprodutor de áudio para reproduzir, pausar, aumentar e diminuir o volume usando JavaScript é simples.</p> + +<pre class="brush: html"><audio id="demo" src="audio.mp3"></audio> +<div> + <button onclick="document.getElementById('demo').play()">Reproduzir o áudio</button> + <button onclick="document.getElementById('demo').pause()">Pausar o áudio</button> + <button onclick="document.getElementById('demo').volume+=0.1">Aumentar o volume</button> + <button onclick="document.getElementById('demo').volume-=0.1">Diminuir o volume</button> +</div> +</pre> + +<h2 id="Parando_o_download_de_mídia">Parando o download de mídia</h2> + +<p>Embora parar a reprodução de mídia seja fácil usando o método pause() do elemento, o navegador continua baixando a mídia até que o elemento de mídia seja excluído por meio da coleção de lixo.</p> + +<p>Esta é um modo para parar o download imediatamente:</p> + +<pre class="brush: js">var mediaElement = document.getElementById("myMediaElementID"); +mediaElement.pause(); +mediaElement.src = ""; +</pre> + +<p>Ao definir o atributo <code>src</code> do elemento de mídia para uma string vazia, o decodificador interno do elemento é destruído, o que para o download.</p> + +<h2 id="Navegando_pela_mídia">Navegando pela mídia</h2> + +<p>Elementos de mídia provemsuporte para mover a posição atual para pontos específicos do conteúdo da mídia. Iso é feito ao definir o valor da propriedade <code>currentTime</code> no elemento; veja {{ domxref("HTMLMediaElement") }} para mais detalhes sobre as propriedades do elemento. Simplesmente defina o valor para o tempo, em segundos, em que você quer que a reprodução do vídeo continue.</p> + +<p>Você pode usar a propriedade <code>seekable</code> para determinar os valores em que é possível ir no momento. Essa propriedade retorna o objeto {{ domxref("TimeRanges") }} listando os intervalos de tempo em que você pode navegar.</p> + +<pre class="brush: js">var mediaElement = document.getElementById('mediaElementID'); +mediaElement.seekable.start(); // Retorna o tempo em que o arquivo começa (em segundos) +mediaElement.seekable.end(); // Retorna o tempo em que o arquivo termina (em segundos) +mediaElement.currentTime = 122; // Ir para 122 segundos +mediaElement.played.end(); // Retorna o numero de segundos que o navegador reproduziu +</pre> + +<h2 id="Especificando_o_intervalo_de_reprodução">Especificando o intervalo de reprodução</h2> + +<p>Quado especificando a URI de um elemento {{ HTMLElement("audio") }} ou {{ HTMLElement("video") }}, você pode incluir opcionalmente informações adicionais para especificar a parte da mídia a ser reproduzida. Para fazer isso, use uma hashtag ("#") seguida pela descrição do fragmento da mídia.</p> + +<p>O intervalo é especificado usando a sintaxe:</p> + +<pre>#t=[tempoinicial],[tempofinal] +</pre> + +<p>O tempo pode ser especificado como um nímero de segundos (como um valor de ponto flutuante) ou no formato horas:minutos:segundos (como 2:05:01 para 2 horas, 5 minutos, e 1 segundo).</p> + +<p>Alguns exemplos:</p> + +<dl> + <dt><span class="nowiki">http://foo.com/video.ogg#t=10,20</span></dt> + <dd>Especifica que o intervalo entre 10 e 20 segundos deve ser reproduzido.</dd> + <dt><span class="nowiki">http://foo.com/video.ogg#t=,10.5</span></dt> + <dd>Especifica que o vídeo deve ser reproduzido do início até 10,5 segundos.</dd> + <dt><span class="nowiki">http://foo.com/video.ogg#t=,02:00:00</span></dt> + <dd>Especifica que o vídeo deve ser reproduzido do início até 2 horas.</dd> + <dt><span class="nowiki">http://foo.com/video.ogg#t=60,</span></dt> + <dd>Especifica que o vídeo deve começar aos 60 segundos e ser reproduzido até o final.</dd> +</dl> + +<div class="geckoVersionNote" style=""> +<p>{{ gecko_callout_heading("9.0") }}</p> + +<p>O intervalo de reprodução foi adicionado à especificação URI od elemeto media no Gecko 9.0 {{ geckoRelease("9.0") }}. Atualmente, é a única parte da <a class="external" href="http://www.w3.org/TR/media-frags/" title="http://www.w3.org/TR/media-frags/">Media Fragments URI specification</a> implementada pelo Gecko, e somente pode ser utilizada para especificar a fonte dos elementos media, e não na barra de endereço.</p> +</div> + +<h2 id="Opções_alternativas">Opções alternativas</h2> + +<p>O HTML inclui elementos que podem ser colocados entre as tags iniciais e finais de codigo que é processado por navegadores que não suportam mídia em HTML5. É possível aproveitar esse fato para prover alternativas para esses navegadores.</p> + +<p>Esa seção mostra duas alternativas possíveis para vídeos. Em cada caso, se o naegador suportar HTML5, ele é usado; se não for posível, a alternativa é utilizada.</p> + +<h3 id="Utilizando_Flash">Utilizando Flash</h3> + +<p>Você pode utilizar Flash para reproduzir um vídeo no formato Flash caso o elemento {{ HTMLElement("video") }} não seja suportado:</p> + +<pre class="brush: html"><video src="video.ogv" controls> + <object data="flvplayer.swf" type="application/x-shockwave-flash"> + <param value="flvplayer.swf" name="movie"/> + </object> +</video> +</pre> + +<p>Note que você não deve incluir <code>classid</code> na tag <code>object</code> para que outros navegadores além do Internet Explorer sejam compatíveis.</p> + +<h3 id="Reproduzindo_vídeos_em_Ogg_usando_uma_applet_Java">Reproduzindo vídeos em Ogg usando uma applet Java</h3> + +<p>Existe uma applet Java chamada <a class="external" href="http://maikmerten.livejournal.com/2256.html" title="http://maikmerten.livejournal.com/2256.html">Cortado</a> que você pode utilizar como alternativa para reproduzir vídeos em Ogg em navegadores que possuem suporte a Java, mas não suportam vídeos em HTML5:</p> + +<pre class="brush: html"><video src="my_ogg_video.ogg" controls width="320" height="240"> + <object type="application/x-java-applet" + width="320" height="240"> + <param name="archive" value="cortado.jar"> + <param name="code" value="com.fluendo.player.Cortado.class"> + <param name="url" value="my_ogg_video.ogg"> + <p>You need to install Java to play this file.</p> + </object> +</video> +</pre> + +<p>Se você não criar um elemento filho alternativo do elemento objeto cortado, como o elemento {{ HTMLElement("p") }} mostrado acima, o Firefox 3.5 que conseguem reproduzir o vídeo mas não tem Java instalado vao informar incorretamente ao usuário que ele precisa instalar um plugin para visualizar o conteúdo da página.</p> + +<p>{{ h1_gecko_minversion("Error handling", "2.0") }}</p> + +<p>A partir do Gecko 2.0 {{ geckoRelease("2.0") }}, o gerenciamento de erros é revisada para corresponder à última versão da especificação do HTML5. Ao invés do evento <code>error</code> ser enviado ao elemento media, ele é enviado ao elemento filho {{ HTMLElement("source") }} correspondente às fontes em que ocorreram o erro.</p> + +<p>Isso permite que você detecte que fonte falhou, o que pode ser útil. Considere esse código HTML:</p> + +<pre class="brush: html"><video> +<source id="mp4_src" + src="video.mp4" + type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> +</source> +<source id="3gp_src" + src="video.3gp" + type='video/3gpp; codecs="mp4v.20.8, samr"'> +</source> +<source id="ogg_src" + src="video.ogv" + type='video/ogg; codecs="theora, vorbis"'> +</source> +</video></pre> + +<p>Como o FIrefox não suporta MP4 e 3GP por serem patenteados, os elementos {{ HTMLElement("source") }} com os IDs "mp4_src" e "3gp_src" vão receber eventos <code>error</code> antes que o rescurso Ogg seja carregado. As fontes são testadas na ordem em que aparecem, e assim que uma é carregada de maneira correta, o resto das fontes não são testadas.</p> + +<h3 id="Detectando_quando_nenhuma_fonte_foi_carregada">Detectando quando nenhuma fonte foi carregada</h3> + +<p>Para detectar que todos os elementos filhos {{ HTMLElement("source") }} falharam, confira os valores do atributo <code>networkState</code> do elemento media. Se esse valor for <code>HTMLMediaElement.NETWORK_NO_SOURCE</code>, você saberá que todas as fontes falharam o carregamento.</p> + +<p>Se nesse ponto você inserir uma outra fonte ao inserir um novo elemento {{ HTMLElement("source") }} como filho do elemento media, o Gecko tenta carregar o recurso especificado.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>Os elementos HTML relacionados a mídia: {{ HTMLElement("audio") }}, {{ HTMLElement("video") }}, {{ HTMLElement("source") }};</li> + <li><a class="internal" href="/En/Manipulating_video_using_canvas" title="En/Manipulating video using canvas">Manipulating video using canvas</a></li> + <li><a href="/en/Introducing_the_Audio_API_Extension" title="en/Introducing the Audio API Extension">Introducing the Audio API Extension</a></li> + <li>{{ interface("nsIDOMHTMLMediaElement") }}</li> + <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></li> + <li><a class="external" href="http://en.flossmanuals.net/ogg-theora/" title="http://en.flossmanuals.net/ogg-theora/">Theora Cookbook</a></li> + <li><a class="external" href="http://popcornjs.org/" title="http://popcornjs.org/">Popcorn.js - The HTML5 Media Framework</a></li> + <li><a class="external" href="http://www.html5video.org/kaltura-html5/" title="http://www.html5video.org/kaltura-html5/">Kaltura Video Library Solution</a>, uma biblioteca JavaScript (mwEmbed) que suporta alternativas de reprodução utilizando HTML5, VLC Player, Java Cortado e OMTK Flash Vorbis player. (É utilizado pela Wikimedia)</li> + <li><a class="external" href="http://omtk.org/flash/index.html" title="http://omtk.org/flash/index.html">OMTK - Flash</a>, uma biblioteca Flash que implementa um decodificador Vorbis</li> + <li><a class="external" href="http://www.projekktor.com" title="http://www.projekktor.com">Projekktor Player</a>, um wrapper em JavaScript para áudio e vídeo com alternativas de reprodução em flash, open source e GPL</li> + <li><a class="external" href="http://www.theora.org/cortado/" title="http://www.theora.org/cortado/">Applet Cortado</a>, uma solução para reprodução de áudio e vídeo em Java, mantido pelo Xiph.org</li> + <li><a class="external" href="http://videojs.com" title="Video.js HTML5 Video Player">Video.JS</a>, uma framework e reprodutor de mídia para HTML5(open source).</li> + <li><a class="external" href="http://mediaelementjs.com/" title="http://mediaelementjs.com/">MediaElement.js</a> - framework aberta para áudio e vídeo em HTML5 com uma biblioteca Flash customizada que imita a API de HTML5 para navegadores antigos</li> + <li><a class="external" href="http://www.hdwebplayer.com" title="http://www.hdwebplayer.com">Flv Player</a> - uma player de vídeo alternativo para HTML5</li> +</ul> + +<p>{{ HTML5ArticleTOC() }}</p> + +<div>{{ languages({ "fr": "fr/Utilisation_d'audio_et_video_dans_Firefox", "es": "es/Usando_audio_y_video_en_Firefox", "ja": "ja/Using_HTML5_audio_and_video","zh-cn":"zh-cn/Using_HTML5_audio_and_video" }) }}</div> diff --git a/files/pt-br/web/html/using_the_application_cache/index.html b/files/pt-br/web/html/using_the_application_cache/index.html new file mode 100644 index 0000000000..fc32fe9712 --- /dev/null +++ b/files/pt-br/web/html/using_the_application_cache/index.html @@ -0,0 +1,392 @@ +--- +title: Usando cache de aplicação +slug: Web/HTML/Using_the_application_cache +tags: + - NeedsTranslation + - TopicStub +translation_of: Web/HTML/Using_the_application_cache +--- +<p>{{DefaultAPISidebar("App Cache")}}{{deprecated_header}}</p> + +<div class="warning"> +<p>Usar o recurso de <em>application caching</em> descrito aqui é altamente desencorajado nesse momento; ele <a href="https://html.spec.whatwg.org/multipage/browsers.html#offline">está sendo removido da plataforma Web</a>. Em vez dele use <a href="https://developer.mozilla.org/pt-BR/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service Workers</a>. De fato, a partir do Firefox 44, quando o <a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/Using_the_application_cache">AppCache</a> é usado para prover suporte offline uma mensagem de alerta é exibida no console, recomendando aos desenvolvedores que usem <a href="https://developer.mozilla.org/pt-BR/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service workers</a> ({{bug("1204581")}}).</p> +</div> + +<h2 id="Introdução">Introdução</h2> + +<p><a href="/en-US/docs/HTML/HTML5" title="HTML/HTML5">HTML5</a> <span>fornece um mecanismo de <em>cache</em> de <em>aplicativo</em> que permite que aplicações baseadas na web sejam executadas offline.</span> <span>Os desenvolvedores podem usar a interface do <strong>cache do aplicativo</strong> <em>(AppCache)</em> para especificar os recursos que o navegador deve armazenar em cache e disponibilizar aos usuários offline.</span> <span>Os aplicativos que estão em cache de carga e funcionam corretamente, mesmo se os usuários clicarem no botão de atualização quando estão offline.</span></p> + +<p><span>Usando um cache de aplicativo dá uma aplicação os seguintes benefícios:</span></p> + +<ul> + <li><span>Navegação off-line: os usuários podem navegar em um site, mesmo quando estão offline.</span></li> + <li><span>Velocidade: os recursos são armazenados em cache local, e, portanto, carregam mais rápido.</span></li> + <li><span>Redução de carga do servidor: o navegador somente faz download de recursos que foram alterados a partir do servidor.</span></li> +</ul> + +<h2 id="Como_funciona_o_cache_de_aplicativo"><span>Como funciona o cache de aplicativo</span></h2> + +<h3 id="Ativando_o_cache_de_aplicativo"><span>Ativando o cache de aplicativo</span></h3> + +<p>Para habilitar o cache de aplicativo para um aplicativo, você deve incluir o {{htmlattrxref("manifest", "html")}} atributo na {{HTMLElement("html")}} elemento em páginas de seu aplicativo, como mostrado no exemplo a seguir:</p> + +<div> +<pre class="brush: html"><span class="brush: html"><html manifest="example.appcache"> </span> + ... +</html> +</pre> + +<p><span>O atributo manifest faz referência a um arquivo de <strong>manifesto cache,</strong> que é um arquivo de texto que lista os recursos (arquivos) que o navegador deve armazenar em cache para sua aplicação.</span></p> + +<p><span>Você deve incluir o <code>manifest</code> atributo em todas as páginas do seu aplicativo que você deseja armazenar em cache.</span> <span>O navegador não armazena em cache páginas que não contêm o <code>manifest</code> atributo, a menos que tais páginas são explicitamente listados no próprio arquivo de manifesto.</span> <span>Você não precisa listar todas as páginas que você deseja armazenar em cache no arquivo de manifesto, o navegador adiciona, implicitamente, todas as páginas que o usuário visita e que tem o <code>manifest</code> atributo definido para o cache do aplicativo.</span></p> + +<p><span>Alguns navegadores (por exemplo, Firefox) exibem uma barra de notificação a primeira vez que um usuário carrega um aplicativo que usa o cache do aplicativo.</span> <span>A barra de notificação exibe uma mensagem como esta:</span></p> + +<p style="margin-left: 40px;">Este site (www.example.com) está pedindo para armazenar dados em seu computador para uso offline. <span>.</span> <span>[Permitir] [Nunca para este Site] [Not Now]</span></p> + +<p>O termo "aplicações (habilitados) offline" às vezes se refere especificamente a aplicativos que o usuário tem permissão para usar recursos offline.</p> + +<h3 id="Carregando_documentos"><span>Carregando documentos</span></h3> + +<p><span>O uso de um cache de aplicação modifica o processo normal de carregamento de um documento:</span></p> + +<ul> + <li><span>Se um cache de aplicativo existe, o navegador carrega o documento e seus recursos associados diretamente a partir do cache, sem acessar a rede.</span><span>Isso acelera o tempo de carregamento do documento.</span></li> + <li><span>O navegador, em seguida, verifica se o manifesto de cache foi atualizado no servidor.</span></li> + <li><span>Se o manifesto de cache foi atualizado, o navegador faz o download de uma nova versão do manifesto e os recursos listados no manifesto.</span> <span>Isto é feito no fundo e não afecta o desempenho significativamente.</span></li> +</ul> + +<p><span>O processo para carregamento de documentos e actualizando o cache de aplicação é especificado em maior detalhe abaixo:</span></p> + +<ol> + <li><span>Quando o navegador visita um documento que inclui o atributo <code>manifest</code>, se nenhum cache do aplicativo existe, o navegador carrega o documento e, em seguida, vai buscar todas as entradas listadas no arquivo de manifesto, criando a primeira versão do cache do aplicativo.</span></li> + <li><span>Visitas subseqüentes a esse documento com que o navegador para carregar o documento e outros bens especificados no arquivo de manifesto do cache de aplicativo (e não do servidor).</span> <span>Além disso, o navegador também envia uma <code>checking</code> de eventos para o</span> <code><a href="/en-US/docs/DOM/window.applicationCache" title="DOM/window.applicationCache">window.applicationCache</a></code> objeto, e vai buscar o arquivo de manifesto, seguindo as regras de cache HTTP apropriados.</li> + <li><span>Se a cópia atualmente em cache do manifesto é up-to-date, o navegador envia uma <code>noupdate</code> evento ao <code>applicationCache</code> objeto, e o processo de atualização for concluída.</span> <span>Note que se você alterar quaisquer recursos em cache no servidor, você também deve alterar o próprio arquivo de manifesto, de modo que o navegador sabe que precisa buscar todos os recursos novamente.</span></li> + <li>Se o arquivo de manifesto <em>mudou,</em> todos os arquivos listados no manifesto-bem como aqueles adicionados ao cache chamando <code><a href="/en-US/docs/nsIDOMOfflineResourceList#add.28.29" title="nsIDOMOfflineResourceList#add.28.29">applicationCache.add()</a></code>— <span>são buscados em um cache temporário, seguindo as regras de cache HTTP apropriados.</span> <span>Para cada arquivo obtidos para este cache temporário, o navegador envia um <code>progress</code> evento ao <code>applicationCache</code> objeto.</span> <span>Se ocorrer algum erro, o navegador envia um <code>error</code>evento, e a atualização para no meio.</span></li> + <li><span>Depois que todos os arquivos foram recuperados com sucesso, eles são movidos para o cache off-line reais automaticamente, e um <code>cached</code> evento é enviado para o <code>applicationCache</code> objeto.</span> <span>Uma vez que o documento já tiver sido carregado no browser a partir do cache, o documento atualizado não será processado até que o documento é recarregado (manualmente ou através de programação).</span></li> +</ol> + +<h2 id="Local_de_armazenamento_e_limpando_o_cache_off-line"><span>Local de armazenamento e limpando o cache off-line</span></h2> + +<p>No Chrome, você pode limpar o cache off-line selecionando "Limpar dados de navegação ..." nas preferências ou visitando <a title="chrome://appcache-internals/">chrome://appcache-internals/</a>. Safari tem uma configuração semelhante "cache Empty" em suas preferências, mas uma reinicialização do navegador também pode ser necessária.</p> + +<p>No Firefox, os dados de cache offline é armazenado separadamente a partir do perfil de próxima ao cache de disco regular Firefox:</p> + +<ul> + <li>Windows Vista/7: <code>C:\Users\<username>\AppData\<strong>Local</strong>\Mozilla\Firefox\Profiles\<salt>.<profile name>\OfflineCache</code></li> + <li>Mac/Linux: <code>/Users/<username>/Library/Caches/Firefox/Profiles/<salt>.<profile name>/OfflineCache</code></li> +</ul> + +<p><span>No Firefox o status atual do cache off-line pode ser inspecionado no <code>about:cache</code> da página (no âmbito do "dispositivo de cache offline" designação).</span> <span>O cache off-line pode ser liberado para cada local separadamente utilizando o botão "Remover ..." em Ferramentas -> Opções -> Avançado -> Rede -> dados offline.</span></p> + +<p><span>Antes do Firefox 11, nem Ferramentas -> Limpar histórico recente nem Ferramentas -> Opções -> Avançado -> Rede -> dados off-line -> Limpar agora de limpar o cache offline.</span> <span>Isso foi corrigido.</span></p> + +<p>No Linux, você pode encontrar a definição em Editar> Preferências> Avançado> Rede> Off-line de conteúdo da Web e dados de usuário</p> + +<p>Veja também <a href="/en-US/docs/DOM/Storage#Storage_location_and_clearing_the_data" title="DOM/Storage#Storage location and clearing the data">a limpeza de dados de armazenamento DOM </a>.</p> + +<p><span>Caches de aplicativos também podem se tornar obsoletos.</span> <span>Se o arquivo de manifesto de um aplicativo é removido do servidor, o navegador remove todos os caches de aplicativos que usam esse manifesto, e envia um evento "obsoleto" para o <code>applicationCache</code> objeto.</span> <span>Isso define o estado do cache do aplicativo para <code>OBSOLETE</code> .</span></p> + +<h2 id="O_arquivo_de_manifesto_de_cache"><span>O arquivo de manifesto de cache</span></h2> + +<h3 id="Fazendo_referência_a_um_arquivo_de_manifesto_de_cache"><span>Fazendo referência a um arquivo de manifesto de cache</span></h3> + +<p><span>O <code>manifest</code> atributo em uma aplicação web pode especificar o caminho relativo de um arquivo de manifesto de cache ou um URL absoluto.</span> <span>(Absolute URLs devem ser da mesma origem que a aplicação).</span> <span>Um arquivo de manifesto de cache pode ter qualquer extensão de arquivo, mas ele deve ser servido com o tipo MIME <code>text/cache-manifest</code> .</span></p> + +<div class="note"><strong>Nota: </strong>Em servidores Apache, o tipo MIME para manifesto (.appcache) arquivos podem ser definidos pela adição de AddType text/cache-manifest .appcache em um arquivo .htaccess, no o diretório raiz, ou o mesmo diretório do aplicativo.</div> + +<h3 id="As_entradas_de_um_arquivo_de_manifesto_de_cache"><span>As entradas de um arquivo de manifesto de cache</span></h3> + +<p><span>O arquivo de manifesto cache é um simples arquivo de texto que lista os recursos do navegador deve armazenar em cache para acesso offline.</span> <span>Os recursos são identificados pelo URI.</span> <span>Entradas listadas no manifesto de cache deve ter o mesmo esquema, host e porta que o manifesto.</span></p> + +<h3 id="Exemplo_1_um_arquivo_de_manifesto_de_cache_simples"><span>Exemplo 1: um arquivo de manifesto de cache simples</span></h3> + +<p>O que se segue é um arquivo de manifesto de cache simples, <code style="font-style: normal;">example.appcache</code> , para um web site imaginário em <span class="nowiki">www.example.com.</span></p> + +<pre>CACHE MANIFEST +# v1 - 2011-08-13 +# This is a comment. +<span class="nowiki">http://www.example.com/index.html</span> +<span class="nowiki">http://www.example.com/header.png</span> +<span class="nowiki">http://www.example.com/blah/blah</span> +</pre> + +<p><span>Um arquivo de manifesto de cache pode incluir três secções ( <code>CACHE</code> , <code>NETWORK</code> , e <code>FALLBACK</code> , discutidas abaixo).</span> <span>No exemplo acima, não há cabeçalho de seção, para que todos os dados linhas estão a ser assumida no explícita ( <code>CACHE</code> seção), o que significa que o navegador deve armazenar em cache todos os recursos listados no cache do aplicativo.</span> <span>Os recursos podem ser especificados usando URLs absoluto ou relativo (por exemplo, <code>index.html</code> ).</span></p> + +<p><span>O comentário "v1" no exemplo acima está lá por um bom motivo.</span> <span>Browsers apenas atualizar um cache de aplicativo quando o arquivo de manifesto muda, byte por byte.</span> <span>Se você alterar um recurso de cache (por exemplo, você atualizar o <code>header.png</code> imagem com novo conteúdo), você também deve alterar o conteúdo do arquivo de manifesto, a fim de permitir que os navegadores sabem que precisam para atualizar o cache.</span> <span>Você pode fazer qualquer mudança que você quer o arquivo de manifesto, mas revisando um número de versão é a melhor prática recomendada.</span></p> + +<div class="warning"><strong>Importante:</strong> Não especificar a manifestar-se no arquivo de manifesto cache, caso contrário, será quase impossível para informar o navegador de um novo manifesto está disponível.</div> + +<h3 id="Seções_em_um_arquivo_de_manifesto_de_cache_CACHE_NETWORK_e_FALLBACK"><span>Seções em um arquivo de manifesto de cache: <code>CACHE</code> , <code>NETWORK</code> , e <code>FALLBACK</code></span></h3> + +<p>Um manifesto pode ter três secções distintas: <code style="font-style: normal;">CACHE</code> , <code style="font-style: normal;">NETWORK</code> , e <code style="font-style: normal;">FALLBACK</code> .</p> + +<dl> + <dt><code>CACHE:</code></dt> + <dd><span>Esta é a seção padrão para entradas em um arquivo de manifesto cache.</span> <span>Os arquivos listados sob o <code>CACHE:</code> cabeçalho de seção (ou imediatamente após o <code>CACHE MANIFEST</code> line) são explicitamente em cache depois do download pela primeira vez.</span></dd> + <dt><code>NETWORK:</code></dt> + <dd><span>Os arquivos listados sob a <code>NETWORK:</code> cabeçalho de seção no arquivo de manifesto de cache são recursos enumerados na lista branca que requerem uma conexão com o servidor.</span> <span>Todas as solicitações para tais recursos ignorar o cache, mesmo se o usuário estiver offline.</span> <span>O caractere curinga <code>*</code> pode ser usado uma vez.</span> <span>A maioria dos sites precisam <code>*</code> .</span></dd> + <dt><code>FALLBACK:</code></dt> + <dd><span>O <code>FALLBACK:</code> seção especifica páginas fallback o navegador deve usar se um recurso é inacessível.</span> <span>Cada entrada nesta secção enumera duas URIs-o primeiro é o recurso, o segundo é o fallback.</span> <span>Ambos os URIs deve ser relativo e da mesma origem do arquivo de manifesto.</span> <span>Curingas podem ser usados.</span></dd> +</dl> + +<p>Os <code style="font-style: normal;">CACHE</code> , <code style="font-style: normal;">NETWORK</code> e <code style="font-style: normal;">FALLBACK</code> seções podem ser listados em qualquer ordem em um arquivo de manifesto cache, e cada seção pode aparecer mais de uma vez em um único manifesto.</p> + +<h3 id="Exemplo_2_um_arquivo_de_manifesto_de_cache_mais_completo"><span>Exemplo 2: um arquivo de manifesto de cache mais completo</span></h3> + +<p>O seguinte é um arquivo de manifesto de cache mais completo para o web site imaginário em <span class="nowiki">www.example.com:</span></p> + +<pre>CACHE MANIFEST +# v1 2011-08-14 +# This is another comment +index.html +cache.html +style.css +image1.png + +# Use from network if available +NETWORK: +network.html + +# Fallback content +FALLBACK: +/ fallback.html +</pre> + +<p>Este exemplo usa <code style="font-style: normal;">NETWORK</code> e <code style="font-style: normal;">FALLBACK</code> seções para especificar que o <code style="font-style: normal;">network.html</code> página deve sempre ser recuperada a partir da rede, e que o<code style="font-style: normal;">fallback.html</code> página deve ser servido como um recurso fallback (por exemplo, no caso de uma conexão com o servidor não pode ser estabelecida ).</p> + +<h3 id="Estrutura_de_um_arquivo_de_manifesto_de_cache"><span>Estrutura de um arquivo de manifesto de cache</span></h3> + +<p><span>Cache arquivos de manifesto deve ser servido com o <code>text/cache-manifest</code> tipo MIME.</span> <span>Todos os recursos servido usando este tipo MIME deve seguir a sintaxe para um manifesto do cache do aplicativo, conforme definido nesta seção.</span></p> + +<p><span>Manifestos de cache são UTF-8 arquivos de texto formato, e pode incluir, opcionalmente, um personagem BOM.</span> <span>Newlines pode ser representado por avanço de linha ( <code>U+000A</code> ), retorno de carro ( <code>U+000D</code> ), ou retorno de carro e alimentação de linha ambos.</span></p> + +<p><span>A primeira linha do manifesto de cache deve consistir da seqüência de <code>CACHE MANIFEST</code> (com um único <code>U+0020</code> o espaço entre as duas palavras), seguido de zero ou mais espaço ou tabulação caracteres.</span> <span>Qualquer outro texto na linha é ignorado.</span></p> + +<p>O restante do manifesto cache deve ser composta de zero ou mais das seguintes linhas:</p> + +<dl> + <dt><span>Linha em branco</span></dt> + <dd><span>Você pode usar linhas em branco composta de zero ou mais de espaço e caracteres de tabulação.</span></dd> + <dt><span>Comentário</span></dt> + <dd><span>Comentários consistem em zero ou mais abas ou espaços seguidos por um único <code>#</code> caracteres, seguido por zero ou mais caracteres de texto de comentário.</span> <span>Comentários só pode ser utilizado em suas próprias linhas (após a <span style="line-height: 1.572;">linha</span> <span style="font-family: courier new,andale mono,monospace; line-height: normal;">MANIFESTO CACHE</span> <span style="line-height: 1.572;">inicial), e não pode ser adicionado a outras linhas.</span></span> <span><span style="line-height: 1.572;">Isso significa que você não pode especificar identificadores de fragmentos.</span></span></dd> + <dt><span>Cabeçalho da seção</span></dt> + <dd><span>Cabeçalhos de seção especificar qual seção do manifesto cache está sendo manipulado.</span> <span>Há três cabeçalhos de seção possíveis:</span></dd> +</dl> + +<blockquote> +<table class="standard-table"> + <tbody> + <tr> + <th><strong style="background-color: rgba(212, 221, 228, 0.498039); font-family: open sans light,sans-serif; font-weight: bold;">Cabeçalho da seção</strong></th> + <th><strong style="background-color: rgba(212, 221, 228, 0.498039); font-family: open sans light,sans-serif; font-weight: bold;">Descrição</strong></th> + </tr> + <tr> + <td><code>CACHE:</code></td> + <td><span style="background-color: rgba(212, 221, 228, 0.14902);">Muda para a seção explícita do manifesto de cache (esta é a seção padrão).</span></td> + </tr> + <tr> + <td><code>NETWORK:</code></td> + <td><span style="background-color: rgba(212, 221, 228, 0.14902);">Muda para a seção whitelist linha do manifesto de cache.</span></td> + </tr> + <tr> + <td><code>FALLBACK:</code></td> + <td><span style="background-color: rgba(212, 221, 228, 0.14902);">Muda para a seção de fallback do manifesto de cache.</span></td> + </tr> + </tbody> +</table> +</blockquote> + +<dl> + <dd><span>A linha de cabeçalho da seção pode incluir espaços em branco, mas deve incluir os dois pontos ( <code>:</code> ) no nome da seção.</span></dd> + <dt><span>Seção de dados</span></dt> + <dd><span>O formato de linhas de dados varia de uma seção para outra.</span> <span>No explícita ( <code>CACHE:</code> ) seção, cada linha é um URI ou IRI referência válida para um recurso para cache (sem caracteres curinga são permitidos neste seções).</span> <span>Espaços em branco são permitidas antes e depois da URI ou IRI em cada linha.</span> <span>Na secção Fallback cada linha é um URI ou IRI referência válida para um recurso, seguido de um recurso de reversão que é para ser servido para cima quando uma ligação com o servidor não pode ser feito.</span> <span>Na seção de rede, cada linha é um URI ou IRI referência válida para um recurso para buscar a partir da rede (ou o caractere curinga <code>*</code> pode ser usado nesta seção).</span></dd> + <dd> + <div class="note"><strong>Nota: </strong>Os URIs relativos são em relação ao URI do manifesto de cache, não para o URI do documento que faz referência ao manifesto.</div> + </dd> +</dl> + +<p>Cache arquivos de manifesto pode mudar de uma seção para outra à vontade (cada cabeçalho de seção pode ser usada mais de uma vez), e as seções estão autorizados a estar vazio.</p> + +<h2 id="Recursos_do_cache_de_aplicativo"><span>Recursos do cache de aplicativo</span></h2> + +<p><span>Um cache de aplicativo inclui sempre pelo menos um recurso, identificado por URI.</span> <span>Todos os recursos se enquadrar em uma das seguintes categorias:</span></p> + +<dl> + <dt><span>Entradas Mestre</span></dt> + <dd><span>Trata-se de recursos adicionais para o cache porque um contexto de navegação visitado pelo usuário incluído um documento que indicava que era neste cache usando seu <code>manifest</code> atributo.</span></dd> + <dt><span>Entradas explícitas</span></dt> + <dd><span>Estes são os recursos expressamente enumeradas no arquivo de manifesto de cache do aplicativo.</span></dd> + <dt><span>Entradas de rede</span></dt> + <dd><span>Estes são os recursos enumerados no cache de arquivos de manifesto do aplicativo como entradas de rede.</span></dd> + <dt><span>Entradas de fallback</span></dt> + <dd><span>Estes são os recursos enumerados no cache de arquivos de manifesto do aplicativo como entradas de fallback.</span></dd> +</dl> + +<div class="note"><strong>Nota:</strong> Os recursos podem ser marcados com múltiplas categorias, e pode portanto ser categorizadas como entradas múltiplas. Por exemplo, uma entrada pode ser tanto uma entrada explícita e uma entrada de fallback.</div> + +<p>As categorias de recursos são descritos em maior detalhe abaixo.</p> + +<h3 id="Entradas_Mestre"><span>Entradas Mestre</span></h3> + +<p>Entradas Master são todos os arquivos HTML que incluem um {{htmlattrxref("manifest","html")}} em seu atributo {{HTMLElement("html")}} <span> elemento.</span> <span>Por exemplo, vamos dizer que temos o arquivo HTML</span> <code><a class="linkification-ext external" href="http://www.foo.bar/entry.html" title="Linkification: http://www.foo.bar/entry.html">http://www.example.com/entry.html</a></code>, que se parece com isso:</p> + +<pre class="brush: html"><html manifest="example.appcache"> + <h1>Application Cache Example</h1> +</html> +</pre> + +<p>Se <code style="font-style: normal;">entry.html</code> não está listado no <code style="font-style: normal;">example.appcache</code> arquivo de manifesto cache, visitando o <code style="font-style: normal;">entry.html</code> página faz com que <code style="font-style: normal;">entry.html</code> a ser adicionado ao cache de aplicativo como uma entrada de mestre.</p> + +<h3 id="Entradas_explícitas"><span>Entradas explícitas</span></h3> + +<p>Entradas explícitas são recursos que estão listados explicitamente na <code style="font-style: normal;">CACHE</code> seção de um arquivo de manifesto cache.</p> + +<h3 id="Entradas_de_rede"><span>Entradas de rede</span></h3> + +<p><span>A <code>NETWORK</code> seção de um arquivo de manifesto de cache especifica recursos para que uma aplicação web requer acesso online.</span> <span>Entradas de rede em um cache de aplicativo são essencialmente um -URIs "whitelist on-line" especificadas na <code>NETWORK</code> seção são carregados a partir do servidor em vez do cache.</span><span>Isso permite que o modelo de segurança do navegador proteger o usuário de possíveis violações de segurança, limitando o acesso aos recursos aprovados.</span></p> + +<p>Como exemplo, você pode usar as entradas de rede para carregar e executar scripts e outros códigos do servidor em vez do cache:</p> + +<pre>CACHE MANIFEST +NETWORK: +/api +</pre> + +<p>A seção manifesto de cache listados acima assegura que os pedidos para carregar recursos contidos no <code><a href="http://www.example.com/api/" rel="freelink">http://www.example.com/api/</a></code> subtree sempre ir para a rede sem tentar acessar o cache.</p> + +<div class="note"><strong>Nota</strong>: A simples omissão entradas master (arquivos que têm o manifest atributo definido no html elemento) a partir do arquivo de manifesto não teria o mesmo resultado, pois as entradas de mestre será acrescentado e, posteriormente, servido a partir das-o cache do aplicativo.</div> + +<h3 id="Entradas_de_fallback"><span>Entradas de fallback</span></h3> + +<p><span>Entradas de fallback são usados quando uma tentativa de carregar um recurso falhar.</span> <span>Por exemplo, digamos que o arquivo de manifesto de cache</span> <code><a href="http://www.example.com/example.appcache" rel="freelink">http://www.example.com/example.appcache</a></code> inclui o seguinte conteúdo:</p> + +<pre>CACHE MANIFEST +FALLBACK: +example/bar/ example.html +</pre> + +<p>Qualquer pedido de <code><a href="http://www.example.com/example/bar/" rel="freelink">http://www.example.com/example/bar/</a></code> <span>ou qualquer de seus subdiretórios e seu conteúdo com que o navegador para emitir uma solicitação de rede para tentar carregar o recurso solicitado.</span> <span>Se a tentativa falhar, devido a uma falha de rede ou um erro no servidor de algum tipo, o navegador carrega o arquivo <code>example.html</code>.</span></p> + +<h2 id="Estados_do_cache"><span>Estados do cache</span></h2> + +<p><span>Cada cache de aplicativo tem um <strong>estado,</strong> o que indica a condição atual do cache.</span> <span>Caches que compartilham o mesmo URI manifesto compartilham o mesmo estado de cache, o que pode ser um dos seguintes procedimentos:</span></p> + +<dl> + <dt><code>UNCACHED</code></dt> + <dd>Um valor especial que indica que um objeto de cache do aplicativo não está totalmente inicializado.</dd> + <dt><code>IDLE</code></dt> + <dd>O cache de aplicativo não está neste momento em processo de ser atualizado.</dd> + <dt><code>CHECKING</code></dt> + <dd>O manifesto está sendo buscado e verificado se há atualizações.</dd> + <dt><code>DOWNLOADING</code></dt> + <dd>Os recursos estão sendo baixados para ser adicionado ao cache, devido a um manifesto de recursos alterado.</dd> + <dt><code>UPDATEREADY</code></dt> + <dd><span>Há uma nova versão do cache do aplicativo disponível.</span> <span>Há um correspondente <code>updateready</code> evento, que é acionado em vez do <code>cached</code> de eventos quando uma nova atualização já foi baixado, mas ainda não activado através do <code>swapCache()</code> método.</span></dd> + <dt><code>OBSOLETE</code></dt> + <dd>O grupo de cache do aplicativo é agora obsoleto.</dd> +</dl> + +<h2 id="Testando_se_há_atualizações_para_o_manifesto_de_cache"><span>Testando se há atualizações para o manifesto de cache</span></h2> + +<p><span>Você pode programaticamente testar para ver se um aplicativo tem um arquivo de manifesto cache atualizado, usando JavaScript.</span> <span>Uma vez que um arquivo de manifesto de cache pode ter sido atualizado antes de um script atribui ouvintes de eventos para testar atualizações, os scripts deve sempre testar<code>window.applicationCache.status</code> .</span></p> + +<pre class="brush: js">function onUpdateReady() { + alert('found new version!'); +} +window.applicationCache.addEventListener('updateready', onUpdateReady); +if(window.applicationCache.status === window.applicationCache.UPDATEREADY) { + onUpdateReady(); +}</pre> + +<p>Para iniciar manualmente o teste para um novo arquivo de manifesto, você pode usar <code style="font-style: normal;">window.applicationCache.update()</code> .</p> + +<h2 id="Recomendações">Recomendações</h2> + +<ul> + <li><span>Nunca acessar os arquivos armazenados em cache utilizando parâmetros GET tradicionais (como o <code>other-cached-page.html?parameterName=value</code>).</span> <span>Isso fará com que o desvio do cache do navegador e tentar obtê-lo a partir da rede.</span> <span>Para conectar-se a recursos armazenados em cache que têm parâmetros analisados em parâmetros de uso de JavaScript na parte hash da ligação, como <code>other-cached-page.html#whatever?parameterName=value</code> .</span></li> + <li><span>Quando os aplicativos são armazenados em cache, simplesmente atualizar os recursos (arquivos) que são usados em uma página da web não é suficiente para atualizar os arquivos que foram armazenados em cache.</span> <span>É necessário atualizar o arquivo de manifesto de cache em si antes de o navegador recuperar e usar os arquivos atualizados.</span> <span>Você pode fazer isso por meio de programação usando <code>window.applicationCache.swapCache()</code> , embora que os recursos que já foram carregados não serão afetados.</span> <span>Para certificar-se de que os recursos são carregados a partir de uma nova versão do cache do aplicativo, atualizar a página é o ideal.</span></li> + <li><span>É uma boa idéia para definir cabeçalhos expira em seu servidor web para <code>*.appcache</code> arquivos para expirar imediatamente.</span> <span>Isso evita o risco de cache dos arquivos de manifesto.</span> <span>Por exemplo, no Apache é possível especificar uma configuração tal como se segue:</span> <code>ExpiresByType text/cache-manifest "access plus 0 seconds"</code></li> +</ul> + +<h2 id="Compatibilidade_do_navegador"><span>Compatibilidade do navegador</span></h2> + +<div>{{CompatibilityTable}}</div> + +<div> +<div id="compat-desktop"> +<table class="compat-table" style="height: 57px; width: 763px;"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>4.0</td> + <td>{{CompatGeckoDesktop("1.9.1")}}<sup>[1]</sup></td> + <td>10.0</td> + <td>10.6</td> + <td>4.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table" style="height: 57px; width: 765px;"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>2.1</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0.1<sup>[2]</sup></td> + <td>11.0<sup>[3]</sup></td> + <td>11.0</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> +</div> + +<div> </div> + +<p>Nota: [1] As versões do Firefox antes de 3,5 ignora as seções da rede e fallback do arquivo de manifesto cache.<br> + [2] Quando usar AppCache para prover compatibilidade offline no FirefoxOS hosted App, você necessita declarar no arquivo manifest.webapp . Procure mais informações no campo <a href="/pt-BR/Apps/Manifest">appcache_path</a>.<br> + [3] Recarregar a página no Internet Explorer móvel irá limpar o cache da aplicação, então a página irá falhar. No entanto, fechar a página e abrir via favoritos, funcionará novamente.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="http://www.html5rocks.com/pt/tutorials/appcache/beginner/" title="http://www.html5rocks.com/en/tutorials/appcache/beginner/">HTML5Rocks - Um Guia do Iniciante para Usar o Cache da Aplicação</a></li> + <li><a href="https://translate.google.com/translate?hl=en&sl=eu&tl=pt&u=http%3A%2F%2Falistapart.com%2Farticle%2Fapplication-cache-is-a-douchebag" title="http://alistapart.com/article/application-cache-is-a-douchebag">A List Apart: Cache de aplicação é um Douchebag</a></li> + <li><a href="https://translate.google.com/translate?hl=en&sl=en&tl=pt&u=https%3A%2F%2Fhacks.mozilla.org%2F2010%2F01%2Foffline-web-applications%2F" title="http://hacks.mozilla.org/2010/01/offline-web-applications/">Mozilla hacks </a>- Demos de aplicativos offline e explanação de como funciona.</li> + <li><a href="https://translate.google.com/translate?hl=en&sl=en&tl=pt&u=https%3A%2F%2Fhtml.spec.whatwg.org%2Fmultipage%2Fbrowsers.html%23offline" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#offline">HTML 5 - Rascunho de Trabalho: Aplicações web offline</a></li> + <li><a href="https://translate.google.com/translate?hl=en&sl=en&tl=pt&u=http%3A%2F%2Fwww.w3.org%2FTR%2Foffline-webapps%2F" title="http://www.w3.org/TR/offline-webapps/">W3C Grupo de Trabalho - Nota: Aplicações web Offline</a></li> + <li><a href="https://translate.google.com/translate?hl=en&sl=en&tl=pt&u=http%3A%2F%2Fdeveloper.teradata.com%2Fblog%2Fjs186040%2F2011%2F11%2Fhtml5-cache-manifest-an-off-label-usage" title="http://developer.teradata.com/blog/js186040/2011/11/html5-cache-manifest-an-off-label-usage">HTML5 Cache do Manifesto: Um uso do Off-label</a></li> + <li><a href="http://manifest-validator.com" title="http://manifest-validator.com">Validador do Manifesto do Cache</a></li> + <li><a href="https://translate.google.com/translate?hl=en&sl=en&tl=pt&u=http%3A%2F%2Fwww.ibm.com%2Fdeveloperworks%2Ftopics%2Foffline%2520mobile%2520app%2520example%2F">IBM developerWorks</a> - Diversos artigos relacionados ao cache de aplicação.</li> + <li>{{interface("nsIApplicationCache")}}</li> + <li>{{interface("nsIApplicationCacheNamespace")}}</li> + <li>{{interface("nsIApplicationCacheContainer")}}</li> + <li>{{interface("nsIApplicationCacheChannel")}}</li> + <li>{{interface("nsIApplicationCacheService")}}</li> + <li>{{interface("nsIDOMOfflineResourceList")}}</li> +</ul> + +<div>{{HTML5ArticleTOC}}</div> +</div> |