From 68fc8e96a9629e73469ed457abd955e548ec670c Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:49:58 +0100 Subject: unslug pt-br: move --- files/pt-br/web/html/attributes/index.html | 578 +++++++++++++++++++++ .../pt-br/web/html/block-level_elements/index.html | 126 +++++ .../web/html/canvas/a_basic_ray-caster/index.html | 76 --- files/pt-br/web/html/canvas/index.html | 134 ----- .../index.html | 69 --- files/pt-br/web/html/cors_enabled_image/index.html | 113 ++++ .../web/html/cors_imagens_habilitadas/index.html | 113 ---- .../index.html" | 135 ----- files/pt-br/web/html/element/command/index.html | 129 ----- files/pt-br/web/html/element/content/index.html | 101 ++++ .../web/html/element/conte\303\272do/index.html" | 101 ---- files/pt-br/web/html/element/figura/index.html | 193 ------- files/pt-br/web/html/element/figure/index.html | 193 +++++++ files/pt-br/web/html/element/input/data/index.html | 430 --------------- files/pt-br/web/html/element/input/date/index.html | 430 +++++++++++++++ .../web/html/elementos_block-level/index.html | 126 ----- files/pt-br/web/html/favicon/index.html | 32 -- .../web/html/formatos_midia_suportados/index.html | 526 ------------------- .../html/global_attributes/spellcheck/index.html | 69 +++ files/pt-br/web/html/html5/index.html | 299 ----------- .../html/html5/introduction_to_html5/index.html | 23 - files/pt-br/web/html/inline_elemente/index.html | 29 -- files/pt-br/web/html/inline_elements/index.html | 29 ++ files/pt-br/web/html/microformatos/index.html | 444 ---------------- files/pt-br/web/html/microformats/index.html | 444 ++++++++++++++++ .../index.html | 23 - files/pt-br/web/html/reference/index.html | 25 + files/pt-br/web/html/referenciahtml/index.html | 25 - .../html/using_html5_audio_and_video/index.html | 240 --------- 29 files changed, 2108 insertions(+), 3147 deletions(-) create mode 100644 files/pt-br/web/html/attributes/index.html create mode 100644 files/pt-br/web/html/block-level_elements/index.html delete mode 100644 files/pt-br/web/html/canvas/a_basic_ray-caster/index.html delete mode 100644 files/pt-br/web/html/canvas/index.html delete mode 100644 files/pt-br/web/html/controlando_verificacao_ortografica_em_formularios_html/index.html create mode 100644 files/pt-br/web/html/cors_enabled_image/index.html delete mode 100644 files/pt-br/web/html/cors_imagens_habilitadas/index.html delete mode 100644 "files/pt-br/web/html/dicas_para_criar_p\303\241ginas_html_de_carregamento_r\303\241pido/index.html" delete mode 100644 files/pt-br/web/html/element/command/index.html create mode 100644 files/pt-br/web/html/element/content/index.html delete mode 100644 "files/pt-br/web/html/element/conte\303\272do/index.html" delete mode 100644 files/pt-br/web/html/element/figura/index.html create mode 100644 files/pt-br/web/html/element/figure/index.html delete mode 100644 files/pt-br/web/html/element/input/data/index.html create mode 100644 files/pt-br/web/html/element/input/date/index.html delete mode 100644 files/pt-br/web/html/elementos_block-level/index.html delete mode 100644 files/pt-br/web/html/favicon/index.html delete mode 100644 files/pt-br/web/html/formatos_midia_suportados/index.html create mode 100644 files/pt-br/web/html/global_attributes/spellcheck/index.html delete mode 100644 files/pt-br/web/html/html5/index.html delete mode 100644 files/pt-br/web/html/html5/introduction_to_html5/index.html delete mode 100644 files/pt-br/web/html/inline_elemente/index.html create mode 100644 files/pt-br/web/html/inline_elements/index.html delete mode 100644 files/pt-br/web/html/microformatos/index.html create mode 100644 files/pt-br/web/html/microformats/index.html delete mode 100644 files/pt-br/web/html/optimizing_your_pages_for_speculative_parsing/index.html create mode 100644 files/pt-br/web/html/reference/index.html delete mode 100644 files/pt-br/web/html/referenciahtml/index.html delete mode 100644 files/pt-br/web/html/using_html5_audio_and_video/index.html (limited to 'files/pt-br/web/html') diff --git a/files/pt-br/web/html/attributes/index.html b/files/pt-br/web/html/attributes/index.html new file mode 100644 index 0000000000..cac8b527ec --- /dev/null +++ b/files/pt-br/web/html/attributes/index.html @@ -0,0 +1,578 @@ +--- +title: Atributos +slug: HTML/Attributes +translation_of: Web/HTML/Attributes +--- +

 

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nome do AtributoElementosDescrição
accept{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Lista de tipos que o servidor aceita, tipicamente um tipo de arquivo.
accept-charset{{ HTMLElement("form") }}Lista de conjunto de caracteres suportados.
accesskeyGlobal attributeDefine um atalho no teclado para ativar ou adicionar foco ao elemento.
action{{ HTMLElement("form") }}A URI de um programa que processa a informação submetida através do formulário.
align{{ HTMLElement("applet") }}, {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }},  {{ HTMLElement("hr") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }},  {{ HTMLElement("td") }},  {{ HTMLElement("tfoot") }} , {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }}Especifica o alinhamento horizontal do elemento.
alt +

{{ HTMLElement("applet") }}, {{ HTMLElement("area") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}

+ 		Texto alternativo caso uma imagem não possa ser exibida.
async{{ HTMLElement("script") }}Indica que o script deve ser executado assíncrono.
autocomplete{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Indica se controles  neste formulário podem por padrão ter seus valores completados automaticamente pelo navegador.
autofocus{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}O elemento deve ser focado automaticamente após a página ser carregada.
autoplay{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}O aúdio ou vídeo deve ser reproduzido assim que possível.
bgcolor{{ HTMLElement("body") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}, {{ HTMLElement("tr") }} +

Cor do plano de fundo do elemento.

+

Nota: Este é um atributo legado. Por favor use a propriedade CSS {{ Cssxref("background-color") }} em vez disso.

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

A largura da borda.

+

Nota: este é um atributo legado. Por favor use a propriedade CSS {{ Cssxref("border") }} em vez disso.

+
buffered{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Contém o intervalo de tempo da mídia que já foi carregada.
challenge{{ HTMLElement("keygen") }}A challenge string that is submitted along with the public key.
charset{{ HTMLElement("meta") }}, {{ HTMLElement("script") }}Declara a codificação dos caracteres da página ou do script.
checked{{ HTMLElement("command") }}, {{ HTMLElement("input") }}Indica se o elemento deve ser checado no carregamento da página.
cite{{ HTMLElement("blockquote") }}, {{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("q") }}Contêm uma URI que aponta para a fonte da citação ou alteração.
classGlobal attributeFrequentemente usado com CSS para estilizar os elementos com propriedades comuns.
code{{ HTMLElement("applet") }}Especifica a URL do arquivo de classe do miniaplicativo que será carregado e executado.
codebase{{ HTMLElement("applet") }}Este atributo fornece a URL absoluta ou relativa do diretório onde os arquivos .class do miniaplicativo são armazenados.
color{{ HTMLElement("basefont") }}, {{ HTMLElement("font") }}, {{ HTMLElement("hr") }} +

Este atributo define a cor do texto usando o nome de uma cor ou uma cor especificada em hexadecimal através do formato #RRGGBB.

+

Nota: este é um atributo legado. Por favor use a propriedade CSS {{ Cssxref("color") }} em vez disso.

+
cols{{ HTMLElement("textarea") }}Define o número de colunas numa area de texto.
colspan{{ HTMLElement("td") }}, {{ HTMLElement("th") }}O atributo colspan define o número de colunas que uma célula deve conter.
content{{ HTMLElement("meta") }}Um valor associado com http-equiv ou name dependendo do contexto.
contenteditableGlobal attributeIndica se o conteúdo do elemento é editável.
contextmenuGlobal attributeDefine o ID de um elemento {{ HTMLElement("menu") }} que servirá como o menu de contexto de um outro elemento.
controls{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Indica se o navegador deve mostrar ou não os controles de reprodução ao usuário.
coords{{ HTMLElement("area") }}Uma escolha de valores especificando as coordenadas da região hot-spot.
data{{ HTMLElement("object") }}Especifica a URL do recurso.
datetime{{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("time") }} +

Indica a data e o horário associados ao elemento.

+
default{{ HTMLElement("track") }}Indica que a faixa deve estar habilitada a não ser que as preferências do usuário indiquem algo diferente.
defer{{ HTMLElement("script") }}Indica que o script deve ser executado após a página ter sido analisada.
dirGlobal attributeDefina a direção do texto. Os valores permitidos são ltr (Esquerda para direita) e rtl (Direita para esquerda)
dirname{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }} 
disabled{{ HTMLElement("button") }}, {{ HTMLElement("command") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indica se o usuário pode ou não interagir com o elemento.
draggableGlobal attributeDefine se o elemento pode ser arrastado.
dropzoneGlobal attributeIndica que o elemento aceita a soltagem de conteúdo nele.
enctype{{ HTMLElement("form") }}Define o tipo de conteúdo da data do formulário quando o method é POST.
for{{ HTMLElement("label") }}, {{ HTMLElement("output") }}Descreve elementos na qual pertencem a este.
form{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indica o formulário que é o proprietário do elemento.
headers{{ HTMLElement("td") }}, {{ HTMLElement("th") }}IDs dos elementos <th> na qual se aplicam a este elemento.
height{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}Nota: Em algumas instâncias, tal como {{ HTMLElement("div") }}, isto é um atributo legado, em cujo caso  a propriedade CSS {{ Cssxref("height") }} deveria ser usado em vez. Em outros casos, assim como {{ HTMLElement("canvas") }}, a altura deve ser especificado com esse atributo.
hiddenGlobal attributeIndica a relevância de um elemento.
high{{ HTMLElement("meter") }}Indica o menor limite da faixa superior.
href{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("link") }} A URL de um recurso ligado.
hreflang{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}Especifica o idioma de um recurso ligado.
http-equiv{{ HTMLElement("meta") }} 
icon{{ HTMLElement("command") }}Especifica uma imagem na qual represente o comando.
idGlobal attributeFrequentemente usado com CSS para estilizar um elemento específico. O valor deste atributo deve ser único.
ismap{{ HTMLElement("img") }}Indica que a imagem é parte de um mapa de imagem "sever-side".
itempropGlobal attribute 
keytype{{ HTMLElement("keygen") }}Especifica o tipo de chave gerada.
kind{{ HTMLElement("track") }}Especifica o tipo de caminho de texto.
label{{ HTMLElement("track") }}Especifica um título "user-releadable" de um caminho de texto.
langGlobal attributeDefine o idioma usado no elemento.
language{{ HTMLElement("script") }}Define o idioma do script usado no elemento.
list{{ HTMLElement("input") }}Identifica uma lista de opções pré definidas para sugerir ao usuário.
loop{{ HTMLElement("audio") }}, {{ HTMLElement("bgsound") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("video") }}Indica se a mídia deveria começar tocando do começo quando ela é finalizada.
low{{ HTMLElement("meter") }}Indica o maior limite da menor distância.
manifest{{ HTMLElement("html") }}Especifica a URL do cache manifest do documento. documento
max{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Indica o valor máximo permitido.
maxlength{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Define o núemro máximo de caracteres permitido no elemento.
media{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}Especifica uma sugestão da mídia para qual recurso ligado foi designado.
method{{ HTMLElement("form") }}Define qual método HTTP usar quando enviar um formulário. Pode ser GET(padrão) ou POST.
min{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}Indica o valor mínimo permitido.
multiple{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Indica se múltiplos valores podem ser inseridos em uma entrada do tipo email ou file.
name{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("map") }}, {{ HTMLElement("meta") }}, {{ HTMLElement("param") }}Nome do elemento. Por exemplo usado pelo servidor para identificar os campos no envio do formulário.
novalidate{{ HTMLElement("form") }}Este atributo indica que o formulário não deveria ser validado quando enviado.
open{{ HTMLElement("details") }}Indica se os detalhes serão mostrados no carregamento da página.
optimum{{ HTMLElement("meter") }}Indica o valor numérico optimal.
pattern{{ HTMLElement("input") }}Define uma espreção regular na qual o valor do elemento será validado de encontro.
ping{{ HTMLElement("a") }}, {{ HTMLElement("area") }} 
placeholder{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Fornece uma sugestão ao usuário de o que pode ser inserido no campo.
poster{{ HTMLElement("video") }}Uma URL indicando uma poster frame para mostrar desde que o usuário toque ou busque.
preload{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Indica se todo o recurso, partes dele ou nada deveria ser pré carregado.
pubdate{{ HTMLElement("time") }} +

Indica se esta data e tempo é a data no mais próximo

+

elemento antecessor{{ HTMLElement("article") }}.

+
radiogroup{{ HTMLElement("command") }} 
readonly{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Indica se o elemento pode ser editado.
rel{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}Especifica o relacionamento do objeto alvo para o objeto ligado.
required{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indica se este elemento é requerido para preencher ou não.
reversed{{ HTMLElement("ol") }}Indica se a lista deveria ser mostrada em uma ordem decrescente em vez de uma crescente.
rows{{ HTMLElement("textarea") }}Define o número de linhas em uma área de texto.
rowspan{{ HTMLElement("td") }}, {{ HTMLElement("th") }}Define o número de linhas que uma célula de tabela deveria abranger mais.
sandbox{{ HTMLElement("iframe") }} 
spellcheckGlobal attributeIndica se o spell de checagem está permitido para o elemento.
scope{{ HTMLElement("th") }} 
scoped{{ HTMLElement("style") }} 
seamless{{ HTMLElement("iframe") }} 
selected{{ HTMLElement("option") }}Define o valor na qual será selecionado no carregamento da página.
shape{{ HTMLElement("a") }}, {{ HTMLElement("area") }} 
size{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Define a largura do elemento (em pixels). Se o elemento de atributo type é text ou password então este é o número de caracteres.
sizes{{ HTMLElement("link") }} 
span{{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }} 
src{{ HTMLElement("audio") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("track") }}, {{ HTMLElement("video") }} URL de um conteúdo incorporável.
srcdoc{{ HTMLElement("iframe") }} 
srclang{{ HTMLElement("track") }} 
start{{ HTMLElement("ol") }}Define o primeiro número se não for 1.
step{{ HTMLElement("input") }} 
styleGlobal attributeDefine estilos CSS na qual ultrapassarão estilos previamente configurados.
summary{{ HTMLElement("table") }} 
tabindexGlobal attributeUltrapassa a ordem de tabulação padrão do navegador e segue o especificado como alternativa.
target{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("form") }} 
titleGlobal attributeTexto a ser mostrado em uma dica quando suspenso sobre um elemento.
type{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("command") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("object") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}, {{ HTMLElement("menu") }}Define o tipo de elemento.
usemap{{ HTMLElement("img") }},  {{ HTMLElement("input") }}, {{ HTMLElement("object") }} 
value{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("li") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("param") }}Define o valor padrão na qual será mostrado no elemento no carregar da página.
width{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}Nota: Em algumas instâncias, tal como {{ HTMLElement("div") }}, este é um atributo legado, no caso da propriedade CSS {{ Cssxref("width") }} deveria ser usado ao em vez. em outros casos, tal como {{ HTMLElement("canvas") }}, a largura deve ser especificada com este atributo.
wrap{{ HTMLElement("textarea") }}Indica se o texto deveria ser enrolado.
+

{{ languages( { "fr": "fr/HTML/Attributs", "en": "en/HTML/Attributes", "ja": "ja/HTML/Attributes" } ) }}

diff --git a/files/pt-br/web/html/block-level_elements/index.html b/files/pt-br/web/html/block-level_elements/index.html new file mode 100644 index 0000000000..3feed31681 --- /dev/null +++ b/files/pt-br/web/html/block-level_elements/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 +--- +

Elementos HTML (Linguagem de marcação de hipertexto) historicamente foram categorizados como “nível de bloco” ou elementos “em linha”. 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.

+ +

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:

+ +

Elementos em nível de bloco

+ +

HTML

+ +
<p>Este parágrafo é um elemento block-level; seu plano de fundo foi colorido para exibir o elemento pai do parágrafo.</p>
+ +

CSS

+ +
p { background-color: #8ABB55; }
+
+ +

{{ EmbedLiveSample('Block-level_Example') }}

+ +

Utilização

+ + + +

Nível-de-bloco vs. em-linha

+ +

Existem algumas diferenças importantes entre os elementos no nível do bloco e os elementos em linha:

+ +
+
Modelo de conteúdo
+
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.
+
Formatação padrão
+
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.
+
+ +

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 categorias de conteúdo. Enquanto a categoria "em linha" corresponde aproximadamente à categoria de conteúdo de frases, 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 conteúdo de fluxo, em HTML5. Existem também categorias adicionais, por exemplo conteúdo interativo.

+ +

Elementos

+ +

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).

+ +
+
+
{{ HTMLElement("address") }}
+
Informação de contato.
+
{{ HTMLElement("article") }} {{ HTMLVersionInline(5) }}
+
Conteúdo do artigo.
+
{{ HTMLElement("aside") }} {{ HTMLVersionInline(5) }}
+
Conteúdo lateral.
+
{{ HTMLElement("blockquote") }}
+
Citação longa ("bloco").
+
{{ HTMLElement("details") }}
+
Widget de divulgação.
+
{{ HTMLElement("dialog") }}
+
Caixa de diálogo.
+
{{ HTMLElement("dd") }}
+
Descreve um termo em uma lista de descrição.
+
{{ HTMLElement("div") }}
+
Divisão de conteúdo.
+
{{ HTMLElement("dl") }}
+
Lista de descrição.
+
{{ HTMLElement("fieldset") }}
+
Rótulo de conjunto de campos.
+
+ +
+
{{ HTMLElement("figcaption") }} {{ HTMLVersionInline(5) }}
+
Legenda da figura.
+
{{ HTMLElement("figure") }} {{ HTMLVersionInline(5) }}
+
Groups media content with a caption (see {{ HTMLElement("figcaption") }}).
+
{{ HTMLElement("footer") }} {{ HTMLVersionInline(5) }}
+
Section or page footer.
+
{{ HTMLElement("form") }}
+
Input form.
+
{{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}
+
Heading levels 1-6.
+
{{ HTMLElement("header") }} {{ HTMLVersionInline(5) }}
+
Section or page header.
+
{{ HTMLElement("hgroup") }} {{ HTMLVersionInline(5) }}
+
Groups header information.
+
{{ HTMLElement("hr") }}
+
Horizontal rule (dividing line).
+
{{ HTMLElement("li") }}
+
List item.
+
{{ HTMLElement("main") }}
+
Contains the central content unique to this document.
+
{{ HTMLElement("nav") }}
+
Contains navigation links.
+
+ +
+
{{ HTMLElement("ol") }}
+
Ordered list.
+
{{ HTMLElement("p") }}
+
Paragraph.
+
{{ HTMLElement("pre") }}
+
Preformatted text.
+
{{ HTMLElement("section") }} {{ HTMLVersionInline(5) }}
+
Section of a web page.
+
{{ HTMLElement("table") }}
+
Table.
+
{{ HTMLElement("tfoot") }}
+
Table footer.
+
{{ HTMLElement("ul") }}
+
Unordered list.
+
{{ HTMLElement("video") }} {{ HTMLVersionInline(5) }}
+
Video player.
+
+
+ +

Veja também

+ + 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 deleted file mode 100644 index ca188eb6f9..0000000000 --- a/files/pt-br/web/html/canvas/a_basic_ray-caster/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: A basic ray-caster -slug: Web/HTML/Canvas/A_basic_ray-caster -translation_of: Web/API/Canvas_API/A_basic_ray-caster ---- -
{{CanvasSidebar}}
- -
-

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 ray-casting.

-
- -

{{EmbedGHLiveSample("canvas-raycaster/index.html", 900, 300)}}

- -

Abrir em uma nova janela

- -

Porquê?

- -

Depois de perceber, para meu deleite, que o elemento <canvas> que eu estava lendo sobre ele não estava apenas próximo de ser suportado pelo Firefox, mas que já estava com suporte na versão atual do Safari, eu tinha que tentar que fazer um pequeno teste.

- -

A visão geral do canvas e o tutorial 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.

- -

 

- -

Como?

- -

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.

- -

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. 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. A altura da fita também é modulada pela distância da câmera para a parede, e é desenhada centrada sobre a linha do horizonte.
-
- O código que eu acabei com é um amálgama regurgitado dos capítulos de raycaster de um velho André LaMotheTricks do livro de Gurus de Programação de Jogos (ISBN: 0672305070), e um jaspe raycaster que encontrei online, filtrado através da minha compulsão de renomear tudo para que faça sentido Para mim, e todos os ajustes que tinham que ser feitos para fazer as coisas funcionarem bem.

- -

 

- -

Resultados

- -

 

- -


- A tela no Safari 2.0.1 apresentou surpreendentemente bem. 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. Firefox 1.5 Beta 1 é ainda mais rápido; Eu posso executar 320 x 240 em 24 fps com 4 pixel slivers. 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. 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.
-
- 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. Mas estou bastante confiante de que todas essas coisas poderiam ser adicionadas com tempo suficiente. A API de tela aceita a cópia de pixels de imagens, portanto, as texturas parecem possíveis. Vou deixar isso para outro artigo, provavelmente de outra pessoa. =)

- -

 

- -

O ray-caster

- -

 

- -


- 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).
-
- 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!
-
- input.js | Level.js | Player.js | RayCaster.html | RayCaster.js | trace.css | trace.js

- -

 

- -

 

- -

 

- -

 

- -

See also

- - diff --git a/files/pt-br/web/html/canvas/index.html b/files/pt-br/web/html/canvas/index.html deleted file mode 100644 index 821909e726..0000000000 --- a/files/pt-br/web/html/canvas/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Canvas -slug: Web/HTML/Canvas -tags: - - API - - Canvas - - Referência(2) -translation_of: Web/API/Canvas_API ---- -

{{CanvasSidebar}}

- -

A Canvas API provê maneiras de desenhar gráficos via JavaScript e via elemento HTML {{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.

- -

A Canvas API foca amplamente em gráficos 2D. A WebGL API, que também usa o elemento <canvas>, desenha gráficos 2D e 3D acelerados por hardware.

- -

Exemplo básico

- -

Este exemplo simples desenha um retângulo verde para um canvas.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -

O método {{domxref("Document.getElementById()")}} pega uma referência para o elemento HTML <canvas>. Em seguida, o método {{domxref("HTMLCanvasElement.getContext()")}} pega o contexto daquele elemento - a coisa sobre a qual o desenho será renderizado.

- -

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.

- -
const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
-
-ctx.fillStyle = 'green';
-ctx.fillRect(10, 10, 150, 100);
-
- -

Resultado

- -

{{ EmbedLiveSample('Exemplo_básico', 700, 180) }}

- -

Referência

- - - -
-

Nota: As interfaces relacionadas ao WebGLRenderingContext são referenciadas sob WebGL.

-
- -

{{domxref("CanvasCaptureMediaStream")}} é uma interface relacionada.

- -

Guias e Tutoriais

- -
-
-
Tutorial Canvas
-
Um tutorial compreensivo abordando o uso básico da API de Canvas e suas funcionalidades avançadas.
-
Mergulhando no Canvas HTML5
-
Uma introdução prática e extensa à API Canvas e WebGL.
-
Guia Canvas
-
Uma referência acessível para a API Canvas.
-
Demonstração: Um ray-caster básico 
-
Uma demonstração de animação ray-tracing usando canvas.
-
Manipulando vídeos usando canvas
-
Combinando {{HTMLElement("video")}} e {{HTMLElement("canvas")}} para manipular dados de vídeo em tempo real.
-
- -

Bibliotecas

- -

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.

- - - -
-

Nota: Veja a WebGL API para bibliotecas 2D e 3D que usam WebGL.

-
- -

Especificações

- -
- - - - - - - - - - - - - - - -
EspecificaçõesEstadoComentário
{{SpecName('HTML WHATWG', '#2dcontext', 'the 2D rendering context')}}{{Spec2('HTML WHATWG')}}
-
- -

Compatibilidade de navegador

- -

Aplicações Mozilla ganharam suporte para <canvas> a partir do Gecko 1.8 (Firefox 1.5). O elemento foi originalmente introduzido pela Apple para o Dashboard OS X e Safari. O Internet Explorer suporta <canvas> quando inclui-se um script do projeto Explorer Canvas, da google. Google Chrome e Opera 9 também suportam <canvas>.

- -

Ver também

- - 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 deleted file mode 100644 index c379684839..0000000000 --- a/files/pt-br/web/html/controlando_verificacao_ortografica_em_formularios_html/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -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 -translation_of_original: Web/HTML/Controlling_spell_checking_in_HTML_forms ---- -

{{ 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. 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.

- -

Por padrão, áreas de texto e documentos  designMode 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.

- -

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.

- -

Se um site deseja recomendar o uso ou não de verificação ortográfica para um elemento <input> específico, ele pode usar o atributo spellcheck, espefcificando o valor true para recomendar o uso da verificação ortográfica ou false para recomendar o não uso.

- -

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 layout.spellcheckDefault para 0. Se a configuração layout.spellcheckDefault  tiver qualquer outro valor, as recomendações serão consideradas.

- -

Você pode codificar um campo de texto linha-única (elemento HTML <input>) habilitando a verificação ortográfica da seguinte forma:

- -
<input type="text" size="50" spellcheck="true">
-
- -

Da mesma forma, você pode desabilitar a verificação ortográfica em uma área de texto (elemento <textarea>) da seguinte forma:

- -
<textarea spellcheck="false"></textarea>
-
- -

Você pode controlar um documento em seu designMode (tipicamente usado para implementar edição de texto rica) setando o atributo spellcheck  no elemento <body> de um documento.

- -

Você também pode aplicar o atributo spellcheck em outros elementos, tais como os elementos <span> e <div>, e nesse caso todos os elementos <input> dentro dessas tags irão herdar esta configuração; elementos <input> que não tem um atributo spellcheck 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.

- -

Por exemplo:

- -
<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">
-
- -

Neste exemplo HTML acima, os dois primeiros campos de texto terão a verificação ortográfica e o terceiro não terá.

- -

{{ h1_gecko_minversion("Controlando o idioma da verificação ortográfica", "9.0") }}

- -

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 lang setado, esse atributo é procurado em cada elemento pai superior até chegar ao elemento raiz do documento.

- -

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 lang="en", o dicionário inglês será automaticamente usado para este elemento.

- -

Por exemplo:

- -
<html lang="pt-BR">
-<body>
-  <textarea></textarea>
-  <textarea lang="en"></textarea>
-  <div lang="ru">
-    <textarea></textarea>
-  </div>
-</body>
-</html>
-
- -

No exemplo HTML acima, o primeiro {{ HTMLElement("textarea") }} terá ortografia checada em Português, o segundo em Inglês e o terceiro em Russo.

- -

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.

diff --git a/files/pt-br/web/html/cors_enabled_image/index.html b/files/pt-br/web/html/cors_enabled_image/index.html new file mode 100644 index 0000000000..5e41b735fe --- /dev/null +++ b/files/pt-br/web/html/cors_enabled_image/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 +--- +

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.

+ +

See CORS settings attributes for details on how the crossorigin attribute is used.

+ +

O que é um "contaminado" canvas?

+ +

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.

+ +

Esta proteção de usuário tem tido dados expostos por uso de informações de imagens de site web remoto sem permissão.

+ +

Exemplo: Armazenando uma imagem de uma origem estrangeira

+ +

 

+ +

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 Configurações Apache Server HTML5 Boilerplate para aproximadamente responder com este cabeçalho de resposta.

+ +
<IfModule mod_setenvif.c>
+    <IfModule mod_headers.c>
+        <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
+            SetEnvIf Origin ":" IS_CORS
+            Header set Access-Control-Allow-Origin "*" env=IS_CORS
+        </FilesMatch>
+    </IfModule>
+</IfModule>
+ +

Dado que está tudo classificado, você permiti salvar àquelas imagens no Armazenamento DOM

+ +
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;
+}
+ +

Compatiibilidade do Browser

+ +

{{ CompatibilityTable() }}

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

Veja também

+ + diff --git a/files/pt-br/web/html/cors_imagens_habilitadas/index.html b/files/pt-br/web/html/cors_imagens_habilitadas/index.html deleted file mode 100644 index 5e41b735fe..0000000000 --- a/files/pt-br/web/html/cors_imagens_habilitadas/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -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 ---- -

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.

- -

See CORS settings attributes for details on how the crossorigin attribute is used.

- -

O que é um "contaminado" canvas?

- -

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.

- -

Esta proteção de usuário tem tido dados expostos por uso de informações de imagens de site web remoto sem permissão.

- -

Exemplo: Armazenando uma imagem de uma origem estrangeira

- -

 

- -

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 Configurações Apache Server HTML5 Boilerplate para aproximadamente responder com este cabeçalho de resposta.

- -
<IfModule mod_setenvif.c>
-    <IfModule mod_headers.c>
-        <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
-            SetEnvIf Origin ":" IS_CORS
-            Header set Access-Control-Allow-Origin "*" env=IS_CORS
-        </FilesMatch>
-    </IfModule>
-</IfModule>
- -

Dado que está tudo classificado, você permiti salvar àquelas imagens no Armazenamento DOM

- -
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;
-}
- -

Compatiibilidade do Browser

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support138{{ CompatNo() }}{{ CompatNo() }}{{ CompatUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -

Veja também

- - diff --git "a/files/pt-br/web/html/dicas_para_criar_p\303\241ginas_html_de_carregamento_r\303\241pido/index.html" "b/files/pt-br/web/html/dicas_para_criar_p\303\241ginas_html_de_carregamento_r\303\241pido/index.html" deleted file mode 100644 index e693b6fed8..0000000000 --- "a/files/pt-br/web/html/dicas_para_criar_p\303\241ginas_html_de_carregamento_r\303\241pido/index.html" +++ /dev/null @@ -1,135 +0,0 @@ ---- -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 ---- -

Estas dicas são baseadas em conhecimento comum e experimentação.

-

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.

-

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.

-

Dicas

-

Reduza o peso da página

-

O peso da página é, de longe, o fator mais importante na performance de seu carregamento.

-

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 inline para arquivos externos pode melhorar a performance de download sem muita necessidade de outras mudanças na estrutura da página.

-

Ferramentas como HTML Tidy 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.

-

Minimize o número de arquivos

-

Reduzir o número de arquivos referenciados por uma página diminui o número de conexões HTTP requeridas para realizar o download da página.

-

Dependendo das configurações de cache do browser, este pode enviar uma requisição If-Modified-Since ao servidor para cada arquivo CSS, JavaScript ou de imagem, perguntando se o arquivo foi modificado desde a última vez que foi baixado.

-

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.

-

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 sprite 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 caching de uma única imagem devem ajudar a reduzir o tempo de carregamento.

-

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 browser deve verificar o momento de modificação para cada arquivo CSS ou JavaScript antes de carregar a página.

-

Reduza pesquisa de domínio

-

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.

-

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.

-

Conteúdo em cache reutilizado

-

Assegure que qualquer conteúdo que possa ser armazenado em cache o seja, e com tempos de expiração adequados.

-

Em especial, atente ao cabeçalho Last-Modified. 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 Last-Modified a páginas estáticas (p. ex.: .html, .css), baseado na data de última modificação armazenada no sistema de arquivos. Com páginas dinâmicas (p. ex:.php, .aspx), isso não pode ser feito, e o cabeçalho não é enviado.

-

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.

-

Mais informações:

-
    -
  1. Get HTTP Condicional para Hackers RSS
    2. -
  2. HTTP 304: Not Modified
    3. -
  3. Sobre o Last-Modified HTTP e ETag
    4. -
-

Estabeleça a ordem dos componentes da página de forma otimizada

-

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.

-

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.

-

Reduza o número de scripts inline

-

Scripts inline 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 parsing está em andamento. Reduzir o número de scripts inline no geral e reduzir o uso de document.write() para a saída de conteúdo pode melhorar o carregamento da página. Use métodos AJAX modernos para manipular o conteúdo da página, ao invés de abordagens antigas baseadas em document.write().

-

Use CSS moderno e marcação validada

-

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.

-

Usar marcações validadas tem outras vantagens. Primeiro, browsers não precisarão realizar correção de erros durante o parsing 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).

-

Além do mais, marcação válida permite o livre uso de outras ferramentas que podem pré-processar páginas web. Por exemplo, HTML Tidy 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.

-

Divida seu conteúdo

-

Layout de tabelas é um método legado que não deve mais ser empregado. Layouts utilizando blocos {{ HTMLElement("div") }} e, no futuro próximo, layout multi-colunas CSS3 ou layout de caixas flexíveis CSS3, devem ser utilizadas ao invés disso.

-

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.

-

Ao invés de realizar aninhamentos profundos como:

-
<TABLE>
-  <TABLE>
-    <TABLE>
-          ...
-    </TABLE>
-  </TABLE>
-</TABLE>
-

use tabelas não-aninhadas ou divs, como em

-
<TABLE>...</TABLE>
-<TABLE>...</TABLE>
-<TABLE>...</TABLE>
-
-

Veja também: Especificações do layout multi-colunas CSS3 e layout de caixas flexíveis CSS3

-

Especifique tamanhos para imagens e tabelas

-

Se o browser 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, height e width devem ser especificadas para imagens, sempre que possível.

-

Tabelas devem usar a combinação CSS selector:property:

-
  table-layout: fixed;
-
-

e devem especificar as larguras das colunas usando as tags HTML COL e COLGROUP.

-

Escolha bem seus requisitos de agente de usuário

-

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 browsers, especialmente nos obsoletos.

-

Idealmente, seus requisitos básicos devem ser baseados em considerações sobre os browsers 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.

-

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 browsers.

-

Exemplo de estrutura de página

-

· HTML

-
-
- · HEAD
-
-
-
-
-
- · LINK ...
- 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.
-
-
-
-
-
-
-
- · SCRIPT ...
- Arquivos JavaScript para funções requeridas durante o carregamento da página, sem qualquer DHTML que só pode ser executado após o carregamento completo.
-
- Minimize o número de arquivos para performance enquanto mantém JavaScript não-relacionado em arquivos separados para manutenção.
-
-
-
-
-
- · BODY
-
- · 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.
-
-
-
-
-
- · SCRIPT ...
- 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.
-
- Minimize o número de arquivos para performance enquanto mantém CSS não-relacionado em arquivos separados para manutenção.
-
- Se uma ou mais imagens forem usadas para efeitos de rollover, você deve pré-carregá-las aqui após o conteúdo da página ter sido baixado.
-
-
-
-

Use async and defer, se possível

-

Faça com que scripts JavaScript sejam compatíveis tanto com async como defer e use async sempre que possível, especialmente se você tiver múltiplas tags de script.

-

Com isso, a página pode parar de renderizar enquanto o JavaScript ainda estiver sendo carregado. Do contrário, o browser não renderizará nada que estiver após as tags de script sem esses atributos.

-

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 browsers. Se você seguir todas as orientações para produzir bom código JavaScript, não há necessidade de alterá-lo.

- - -
-

Informações do Documento Original

- -
-

 

diff --git a/files/pt-br/web/html/element/command/index.html b/files/pt-br/web/html/element/command/index.html deleted file mode 100644 index 99a42fb9db..0000000000 --- a/files/pt-br/web/html/element/command/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: command -slug: Web/HTML/Element/command -translation_of: Web/HTML/Element/command ---- -

Sumário

- -

O elemento command representa um comando que o usuário pode chamar.

- -

Contexto de uso

- - - - - - - - - - - - - - - - - - - - - - - - -
Categorias de conteúdoFlow content, phrasing content
Elementos permitidosNenhum, é um elemento vazio.
Omissão de tagDeve ter uma tag inicial, mas não deve ter uma tag final.
Elementos pais permitidosQualquer elemento que aceite phrasing content.
Documento normativoHTML5, section 4.11.3
- -

Atributos

- -

Como todos ou outros elementos HTML, esse elemento suporta os global attributes.

- -
-
{{ htmlattrdef("checked") }}
-
Indica se o comando está selecionado ou não. Deve ser omitido a não ser que o atributo type seja checkbox ou radio.
-
{{ htmlattrdef("disabled") }}
-
Indica que o elemento não está disponível.
-
{{ htmlattrdef("icon") }}
-
Atribui uma figura para representar o comando.
-
{{ htmlattrdef("label") }}
-
O nome do comando, como será mostrado para o usuário.
-
{{ htmlattrdef("radiogroup") }}
-
Esse atributo dá o nome de um grupo de comandos, com type sendo radio, que vai ser ativado quando o comando for ativado. Esse atributo deve ser omitido a não ser que o atributo type seja radio.
-
{{ htmlattrdef("type") }}
-
Esse atributo indica o tipo do comando. Pode ter somente os seguintes valores: -
    -
  • -

    command ou vazio que é o estado padrão e indica que é um comando normal.

    -
    • -
  • -

    checkbox indica que o comando pode ser alternado utilizando uma caixa de seleção.

    -
    • -
  • -

    radio indica que o comando pode ser alternado utilizando uma radiobutton.

    -
    • -
-
-
- -

Interface do DOM

- -

Esse elemetno implementa a interface HTMLCommandElement.

- -

Exemplos

- -
<command type="command" label="Save" icon="icons/save.png" onclick="save()">
-
- -

Compatibilidade de navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
-
- -
- - - - - - - - - - - - - - - - - - - -
RecursoAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
-
- -

 

- -

{{ languages( { "zh-cn": "zh-cn/HTML/Element/command" } ) }}

diff --git a/files/pt-br/web/html/element/content/index.html b/files/pt-br/web/html/element/content/index.html new file mode 100644 index 0000000000..1a1832de04 --- /dev/null +++ b/files/pt-br/web/html/element/content/index.html @@ -0,0 +1,101 @@ +--- +title: ': The Shadow DOM Content Placeholder element (obsolete)' +slug: Web/HTML/Element/conteúdo +translation_of: Web/HTML/Element/content +--- +
{{Deprecated_header}}
+ +

The HTML <content> element—an obsolete part of the Web Components suite of technologies—was used inside of Shadow DOM as an {{glossary("insertion point")}}, and wasn't meant to be used in ordinary HTML. 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.

+ +
+

Note: 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.

+
+ + + + + + + + + + + + + + + + + + + + + + + + +
Content categoriesTransparent content.
Permitted contentFlow content.
Tag omission{{no_tag_omission}}
Permitted parent elementsAny element that accepts flow content.
DOM interface{{domxref("HTMLContentElement")}}
+ +

Attributes

+ +

This element includes the global attributes.

+ +
+
select
+
A comma-separated list of selectors. These have the same syntax as CSS selectors. They select the content to insert in place of the <content> element.
+
+ +

Example

+ +

Here is a simple example of using the <content> element. It is an HTML file with everything needed in it.

+ +
+

Note: For this code to work, the browser you display it in must support Web Components. See Enabling Web Components in Firefox.

+
+ +
<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>
+
+ +

If you display this in a web browser it should look like the following.

+ +

content example

+ +

Specifications

+ +

This element is no longer defined by any specifications.

+ +

Browser compatibility

+ + + +

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

+ +

See also

+ + + +
{{HTMLRef}}
diff --git "a/files/pt-br/web/html/element/conte\303\272do/index.html" "b/files/pt-br/web/html/element/conte\303\272do/index.html" deleted file mode 100644 index 1a1832de04..0000000000 --- "a/files/pt-br/web/html/element/conte\303\272do/index.html" +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: ': The Shadow DOM Content Placeholder element (obsolete)' -slug: Web/HTML/Element/conteúdo -translation_of: Web/HTML/Element/content ---- -
{{Deprecated_header}}
- -

The HTML <content> element—an obsolete part of the Web Components suite of technologies—was used inside of Shadow DOM as an {{glossary("insertion point")}}, and wasn't meant to be used in ordinary HTML. 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.

- -
-

Note: 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.

-
- - - - - - - - - - - - - - - - - - - - - - - - -
Content categoriesTransparent content.
Permitted contentFlow content.
Tag omission{{no_tag_omission}}
Permitted parent elementsAny element that accepts flow content.
DOM interface{{domxref("HTMLContentElement")}}
- -

Attributes

- -

This element includes the global attributes.

- -
-
select
-
A comma-separated list of selectors. These have the same syntax as CSS selectors. They select the content to insert in place of the <content> element.
-
- -

Example

- -

Here is a simple example of using the <content> element. It is an HTML file with everything needed in it.

- -
-

Note: For this code to work, the browser you display it in must support Web Components. See Enabling Web Components in Firefox.

-
- -
<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>
-
- -

If you display this in a web browser it should look like the following.

- -

content example

- -

Specifications

- -

This element is no longer defined by any specifications.

- -

Browser compatibility

- - - -

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

- -

See also

- -
    -
  • Web Components
    • -
  • {{HTMLElement("shadow")}}, {{HTMLElement("slot")}}, {{HTMLElement("template")}}, {{HTMLElement("element")}}
    • -
- -
{{HTMLRef}}
diff --git a/files/pt-br/web/html/element/figura/index.html b/files/pt-br/web/html/element/figura/index.html deleted file mode 100644 index 309a10c791..0000000000 --- a/files/pt-br/web/html/element/figura/index.html +++ /dev/null @@ -1,193 +0,0 @@ ---- -title:
-slug: Web/HTML/Element/figura -translation_of: Web/HTML/Element/figure ---- -

Resumo

- -

O Elemento HTML <figure> representa o conteúdo independente, frequentemente com uma legenda ({{HTMLElement("figcaption")}}), 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.

- -
-

Notas de uso:

- -
    -
  • Being a sectioning root, the outline of the content of the <figure> element is excluded from the main outline of the document.
    • -
  • Uma legenda pode ser associada com o elemento <figure> inserindo o elemento {{HTMLElement("figcaption")}}  dentro dele (no inicio ou no fim).
    • -
-
- -
    -
  • Content categories Flow content, sectioning root, palpable content.
    • -
  • Permite conteúdoA {{HTMLElement("figcaption")}} element, followed by flow content; or flow content followed by a {{HTMLElement("figcaption")}} element; or flow content.
    • -
  • Omissão de TAGs {{no_tag_omission}}
    • -
  • Permitted parent elements Any element that accepts Flow content.
    • -
  • DOM interface {{domxref("HTMLElement")}}
    • -
- -

Atributos

- -

Este elemento só inclui os atributos globais.

- -

Exemplos

- -

Exemplo 1

- -
<!-- 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>
-
- - -
MDN Logo
- -

 

- - -
MDN Logo -
-

Imagem1. MDN Logo

-
-
- -

 

- -

Example 2

- -
    <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>
-
- -
-
-

Obtenha os detalhes do browser usando navigator

-
- -
          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;
-          }
-
-
- -

Exemplo 3

- -
<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>
-
-
-
- -
-
Edsger Dijkstra :-
- -

"Se o debugging é o processo de remoção de bugs de software, 
- então programação deve ser o processo de colocá-los"

-
- -

Especificações

- - - - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('HTML WHATWG', 'grouping-content.html#the-figure-element', '<figure>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'grouping-content.html#the-figure-element', '<figure>')}}{{Spec2('HTML5 W3C')}} 
- - - -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte Básico8{{CompatGeckoDesktop("2.0")}}9.011.105.1
-
- -
- - - - - - - - - - - - - - - - - - - -
RecursoAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte Básico3.0{{CompatGeckoMobile("2.0")}}9.011.05.1 (iOS 5.0)
-
- -

Veja Também

- -
    -
  • O {{HTMLElement("figcaption")}} elemento.
    • -
- -
{{HTMLRef}}
diff --git a/files/pt-br/web/html/element/figure/index.html b/files/pt-br/web/html/element/figure/index.html new file mode 100644 index 0000000000..309a10c791 --- /dev/null +++ b/files/pt-br/web/html/element/figure/index.html @@ -0,0 +1,193 @@ +--- +title:
+slug: Web/HTML/Element/figura +translation_of: Web/HTML/Element/figure +--- +

Resumo

+ +

O Elemento HTML <figure> representa o conteúdo independente, frequentemente com uma legenda ({{HTMLElement("figcaption")}}), 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.

+ +
+

Notas de uso:

+ +
    +
  • Being a sectioning root, the outline of the content of the <figure> element is excluded from the main outline of the document.
    • +
  • Uma legenda pode ser associada com o elemento <figure> inserindo o elemento {{HTMLElement("figcaption")}}  dentro dele (no inicio ou no fim).
    • +
+
+ +
    +
  • Content categories Flow content, sectioning root, palpable content.
    • +
  • Permite conteúdoA {{HTMLElement("figcaption")}} element, followed by flow content; or flow content followed by a {{HTMLElement("figcaption")}} element; or flow content.
    • +
  • Omissão de TAGs {{no_tag_omission}}
    • +
  • Permitted parent elements Any element that accepts Flow content.
    • +
  • DOM interface {{domxref("HTMLElement")}}
    • +
+ +

Atributos

+ +

Este elemento só inclui os atributos globais.

+ +

Exemplos

+ +

Exemplo 1

+ +
<!-- 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>
+
+ + +
MDN Logo
+ +

 

+ + +
MDN Logo +
+

Imagem1. MDN Logo

+
+
+ +

 

+ +

Example 2

+ +
    <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>
+
+ +
+
+

Obtenha os detalhes do browser usando navigator

+
+ +
          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;
+          }
+
+
+ +

Exemplo 3

+ +
<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>
+
+
+
+ +
+
Edsger Dijkstra :-
+ +

"Se o debugging é o processo de remoção de bugs de software, 
+ então programação deve ser o processo de colocá-los"

+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('HTML WHATWG', 'grouping-content.html#the-figure-element', '<figure>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'grouping-content.html#the-figure-element', '<figure>')}}{{Spec2('HTML5 W3C')}} 
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte Básico8{{CompatGeckoDesktop("2.0")}}9.011.105.1
+
+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte Básico3.0{{CompatGeckoMobile("2.0")}}9.011.05.1 (iOS 5.0)
+
+ +

Veja Também

+ +
    +
  • O {{HTMLElement("figcaption")}} elemento.
    • +
+ +
{{HTMLRef}}
diff --git a/files/pt-br/web/html/element/input/data/index.html b/files/pt-br/web/html/element/input/data/index.html deleted file mode 100644 index 0bb8fb07f8..0000000000 --- a/files/pt-br/web/html/element/input/data/index.html +++ /dev/null @@ -1,430 +0,0 @@ ---- -title: -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 ---- -

Os elementos {{htmlelement("input")}} do tipo date 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 horário. Os tipos de entrada time e datetime-local permitem informar horário e data/hora.

- -

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  <input type="text"> simples.

- -
<input id="date" type="date">
- -

{{ EmbedLiveSample('Basic_example', 600, 40) }}

- -

Entre os navegadores que suportam uma interface personalizada para selecionar datas é o controle de data do Chrome/Opera, que se parece com:

- -

- -

O controle de data do Edge se parece assim:

- -

- -

O controle de data do Firefox se parece assim:

- -

Datepicker UI in firefox

- - - - - - - - - - - - - - - - - - - - - - - - -
{{anch("Value")}}Um {{domxref("DOMString")}} que representa uma data no formato AAAA-MM-DD ou vazio
Eventos{{event("change")}} e {{event("input")}}
Atributos Comuns Suportados{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}} e {{htmlattrxref("step", "input")}}
Atributos IDLlist, value, valueAsDate, valueAsNumber.
Métodos{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}
- -

Valores

- -

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:

- -
<input id="date" type="date" value="2017-06-01">
- -

{{ EmbedLiveSample('Value', 600, 40) }}

- -

Uma coisa para perceber é que o formato da data mostrada difere do value atual— o formato da data mostrada será escolhido baseado na localização definida no navegador do usuário, enquanto que a data em value sempre será formatado como yyyy-mm-dd.

- -

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:

- -
var dateControl = document.querySelector('input[type="date"]');
-dateControl.value = '2017-06-01';
- -

Este código localiza o primeiro elemento {{HTMLElement("input")}} que o type é date e define seu valor para a data 2017-06-01 (1 de junho de 2017).

- -

Atributos adicionais

- -

Além dos atributos disponíveis para todos os elementos {{HTMLElement("input")}}, as caixas de texto de data oferecem os seguintes atributos:

- - - - - - - - - - - - - - - - - - - - - - - - - - -
AtributoDescrição
{{anch("max")}}A maior data aceitável
{{anch("min")}}A menor data aceitável
{{anch("readonly")}}Se o conteúdo da caixa de texto é somente leitura
{{anch("step")}}O intervalo a ser usado, quando clicar nos botões de seta para baixo e para cima, e também para validação
- -

 

- -

Usando caixas de texto de data

- -

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 <input type="date"> por causa do suporte limitado do navegador.

- -

Iremos dar uma olhada em usos básicos e mais complexos de <input type="date">, 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.

- -

Uso básico da data

- -

O uso mais simples de <input type="date"> envolve a combinação de um <input> básico e o elemento {{htmlelement("label")}}, como pode ser visto abaixo:

- -
<form>
-  <div>
-    <label for="diaa">Informe a data do seu aniversário:</label>
-    <input type="date" id="diaa" name="diaa">
-  </div>
-</form>
- -

{{ EmbedLiveSample('Basic_uses_of_date', 600, 40) }}

- -

Definindo data mínima e máxima

- -

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 2017-04-01 e data máxima como 2017-04-30:

- -
<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>
- -

{{ EmbedLiveSample('Setting_maximum_and_minimum_dates', 600, 40) }}

- -

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.

- -
-

Observação: 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.

-
- -

Controlando o tamanho da entrada

- -

<input type="date"> não suporta atributos de tamanho de formulário como  {{htmlattrxref("size", "input")}}. Você poderá recorrer ao CSS para modificar o tamanho.

- -

Validação

- -

Por padrão <input type="date"> 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 text) informar uma data inválida (ex.: o 32 de Abril).

- -

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.

- -

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.

- -

Vamos dar uma olhada em um exemplo — aqui nós definimos datas mínima e máxima e deixamos o campo como obrigatório:

- -
<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>
- -

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:

- -

{{ EmbedLiveSample('Validation', 600, 100) }}

- -

Aqui tem uma captura de tela que mostra o resultado se seu navegador não suporta:

- -

- -

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.

- -
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;
-}
- -
-

Importante: 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).

-
- -

Manipulação do suporte do navegador

- -

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:

- -

- -

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.

- -

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 yyyy-mm-dd. 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:

- -
    -
  • ddmmyyyy
    • -
  • dd/mm/yyyy
    • -
  • mm/dd/yyyy
    • -
  • dd-mm-yyyy
    • -
  • mm-dd-yyyy
    • -
  • Month dd yyyy
    • -
- -

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:

- -
<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>
- -

{{ EmbedLiveSample('Handling_browser_support', 600, 100) }}

- -

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 nnnn-nn-nn, onde n é um número entre 0 e 9. Claro, isto não parará as pessoas de informar datas inválidas ou datas formatadas incorretamente, como yyyy-dd-mm (onde nós precisamos de yyyy-mm-dd). Então continua sendo um problema.

- - - -

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 selecionador de data do jQuery.

- -

Atributos

- -

Beside the attributes listed below, this element can have any of the global attributes.

- -
-
{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}
-
Specifies an "action hint" used to determine how to label the enter key on mobile devices with virtual keyboards. Supported values are go, done, next, search, and send; these automatically get mapped to the appropriate string (and are case-insensitive).
-
{{htmlattrdef("autofocus")}}
-
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 autofocus attribute, which is a Boolean. It cannot be applied if the type attribute is set to hidden (that is, you cannot automatically set focus to a hidden control).
-
{{htmlattrdef("disabled")}}
-
-

This Boolean attribute indicates that the form control is not available for interaction. In particular, the click event will not be dispatched on disabled controls. Also, a disabled control's value isn't submitted with the form.

-
-
{{htmlattrdef("form")}}
-
The form element that the input element is associated with (its form owner). The value of the attribute must be an id of a {{HTMLElement("form")}} element in the same document. If this attribute is not specified, this <input> element must be a descendant of a {{HTMLElement("form")}} element. This attribute enables you to place <input> elements anywhere within a document, not just as descendants of their form elements. An input can only be associated with one form.
-
{{htmlattrdef("formaction")}}
-
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.
-
{{htmlattrdef("formenctype")}}
-
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: -
    -
  • application/x-www-form-urlencoded: The default value if the attribute is not specified.
    • -
  • multipart/form-data: Use this value if you are using an {{HTMLElement("input")}} element with the {{htmlattrxref("type","input")}} attribute set to file.
    • -
  • text/plain
    • -
- -

If this attribute is specified, it overrides the {{htmlattrxref("enctype","form")}} attribute of the element's form owner.

-
-
{{htmlattrdef("formmethod")}}
-
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: -
    -
  • post: The data from the form is included in the body of the form and is sent to the server.
    • -
  • get: The data from the form are appended to the form 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.
    • -
- -

If specified, this attribute overrides the {{htmlattrxref("method","form")}} attribute of the element's form owner.

-
-
{{htmlattrdef("formnovalidate")}}
-
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.
-
{{htmlattrdef("formtarget")}}
-
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 browsing context (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: -
    -
  • _self: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.
    • -
  • _blank: Load the response into a new unnamed browsing context.
    • -
  • _parent: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as _self.
    • -
  • _top: 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 _self.
    • -
-
-
{{htmlattrdef("inputmode")}}
-
A hint to the browser for which keyboard to display. This attribute applies when the value of the type attribute is text, password, email, or url. Possible values are: -
    -
  • verbatim: Alphanumeric, non-prose content such as usernames and passwords.
    • -
  • latin: 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.
    • -
  • latin-name: As latin, but for human names.
    • -
  • latin-prose: As latin, but with more aggressive typing aids. For human-to-human communication such as instant messaging for email.
    • -
  • full-width-latin: As latin-prose, but for the user's secondary languages.
    • -
  • kana: Kana or romaji input, typically hiragana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.
    • -
  • katakana: Katakana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.
    • -
  • numeric: 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">
    • -
  • tel: Telephone input, including asterisk and pound key. Use <input type="tel"> if possible instead.
    • -
  • email: Email input. Use <input type="email"> if possible instead.
    • -
  • url: URL input. Use <input type="url"> if possible instead.
    • -
-
-
{{htmlattrdef("list")}}
-
Identifies a list of pre-defined options to suggest to the user. The value must be the id of a {{HTMLElement("datalist")}} element in the same document. The browser displays only options that are valid values for this input element.
-
{{htmlattrdef("max")}}
-
The maximum value for this item, which must not be less than its minimum (min attribute) value.
-
{{htmlattrdef("min")}}
-
The minimum value for this item, which must not be greater than its maximum (max attribute) value.
-
{{htmlattrdef("name")}}
-
The name of the control, which is submitted with the form data.
-
{{htmlattrdef("readonly")}}
-
This Boolean attribute indicates that the user cannot modify the value of the control.
-
{{htmlattrdef("required")}}
-
This attribute specifies that the user must fill in a value before submitting a form. It cannot be used when the type attribute is hidden, image, or a button type (submit, reset, or button). The {{cssxref(":optional")}} and {{cssxref(":required")}} CSS pseudo-classes will be applied to the field as appropriate.
-
{{htmlattrdef("selectionDirection")}}
-
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.
-
{{htmlattrdef("spellcheck")}}
-
Setting the value of this attribute to true indicates that the element needs to have its spelling and grammar checked. The value default indicates that the element is to act according to a default behavior, possibly based on the parent element's own spellcheck value. The value false indicates that the element should not be checked.
-
{{htmlattrdef("step")}}
-
Works with the min and max attributes to limit the increments at which a numeric or date-time value can be set. It can be the string any or a positive floating point number. If this attribute is not set to any, the control accepts only values at multiples of the step value greater than the minimum.
-
{{htmlattrdef("value")}}
-
The initial value of the control. This attribute is optional.
- Note that when reloading the page, Gecko and IE will ignore the value specified in the HTML source, if the value was changed before the reload.
-
{{htmlattrdef("x-moz-errormessage")}} {{non-standard_inline}}
-
This Mozilla extension allows you to specify the error message to display when a field doesn't successfully validate.
-
- -

Examples

- -

To create a widget to display a date, use:

- -
<input type="date">
- - - -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support2012{{CompatGeckoDesktop(57)}}{{CompatNo}}10.62{{CompatNo}}[1]
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(57)}}{{CompatUnknown}}10.625
-
- -

Veja também

- - diff --git a/files/pt-br/web/html/element/input/date/index.html b/files/pt-br/web/html/element/input/date/index.html new file mode 100644 index 0000000000..0bb8fb07f8 --- /dev/null +++ b/files/pt-br/web/html/element/input/date/index.html @@ -0,0 +1,430 @@ +--- +title: +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 +--- +

Os elementos {{htmlelement("input")}} do tipo date 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 horário. Os tipos de entrada time e datetime-local permitem informar horário e data/hora.

+ +

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  <input type="text"> simples.

+ +
<input id="date" type="date">
+ +

{{ EmbedLiveSample('Basic_example', 600, 40) }}

+ +

Entre os navegadores que suportam uma interface personalizada para selecionar datas é o controle de data do Chrome/Opera, que se parece com:

+ +

+ +

O controle de data do Edge se parece assim:

+ +

+ +

O controle de data do Firefox se parece assim:

+ +

Datepicker UI in firefox

+ + + + + + + + + + + + + + + + + + + + + + + + +
{{anch("Value")}}Um {{domxref("DOMString")}} que representa uma data no formato AAAA-MM-DD ou vazio
Eventos{{event("change")}} e {{event("input")}}
Atributos Comuns Suportados{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}} e {{htmlattrxref("step", "input")}}
Atributos IDLlist, value, valueAsDate, valueAsNumber.
Métodos{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}
+ +

Valores

+ +

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:

+ +
<input id="date" type="date" value="2017-06-01">
+ +

{{ EmbedLiveSample('Value', 600, 40) }}

+ +

Uma coisa para perceber é que o formato da data mostrada difere do value atual— o formato da data mostrada será escolhido baseado na localização definida no navegador do usuário, enquanto que a data em value sempre será formatado como yyyy-mm-dd.

+ +

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:

+ +
var dateControl = document.querySelector('input[type="date"]');
+dateControl.value = '2017-06-01';
+ +

Este código localiza o primeiro elemento {{HTMLElement("input")}} que o type é date e define seu valor para a data 2017-06-01 (1 de junho de 2017).

+ +

Atributos adicionais

+ +

Além dos atributos disponíveis para todos os elementos {{HTMLElement("input")}}, as caixas de texto de data oferecem os seguintes atributos:

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
AtributoDescrição
{{anch("max")}}A maior data aceitável
{{anch("min")}}A menor data aceitável
{{anch("readonly")}}Se o conteúdo da caixa de texto é somente leitura
{{anch("step")}}O intervalo a ser usado, quando clicar nos botões de seta para baixo e para cima, e também para validação
+ +

 

+ +

Usando caixas de texto de data

+ +

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 <input type="date"> por causa do suporte limitado do navegador.

+ +

Iremos dar uma olhada em usos básicos e mais complexos de <input type="date">, 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.

+ +

Uso básico da data

+ +

O uso mais simples de <input type="date"> envolve a combinação de um <input> básico e o elemento {{htmlelement("label")}}, como pode ser visto abaixo:

+ +
<form>
+  <div>
+    <label for="diaa">Informe a data do seu aniversário:</label>
+    <input type="date" id="diaa" name="diaa">
+  </div>
+</form>
+ +

{{ EmbedLiveSample('Basic_uses_of_date', 600, 40) }}

+ +

Definindo data mínima e máxima

+ +

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 2017-04-01 e data máxima como 2017-04-30:

+ +
<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>
+ +

{{ EmbedLiveSample('Setting_maximum_and_minimum_dates', 600, 40) }}

+ +

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.

+ +
+

Observação: 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.

+
+ +

Controlando o tamanho da entrada

+ +

<input type="date"> não suporta atributos de tamanho de formulário como  {{htmlattrxref("size", "input")}}. Você poderá recorrer ao CSS para modificar o tamanho.

+ +

Validação

+ +

Por padrão <input type="date"> 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 text) informar uma data inválida (ex.: o 32 de Abril).

+ +

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.

+ +

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.

+ +

Vamos dar uma olhada em um exemplo — aqui nós definimos datas mínima e máxima e deixamos o campo como obrigatório:

+ +
<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>
+ +

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:

+ +

{{ EmbedLiveSample('Validation', 600, 100) }}

+ +

Aqui tem uma captura de tela que mostra o resultado se seu navegador não suporta:

+ +

+ +

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.

+ +
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;
+}
+ +
+

Importante: 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).

+
+ +

Manipulação do suporte do navegador

+ +

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:

+ +

+ +

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.

+ +

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 yyyy-mm-dd. 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:

+ +
    +
  • ddmmyyyy
    • +
  • dd/mm/yyyy
    • +
  • mm/dd/yyyy
    • +
  • dd-mm-yyyy
    • +
  • mm-dd-yyyy
    • +
  • Month dd yyyy
    • +
+ +

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:

+ +
<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>
+ +

{{ EmbedLiveSample('Handling_browser_support', 600, 100) }}

+ +

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 nnnn-nn-nn, onde n é um número entre 0 e 9. Claro, isto não parará as pessoas de informar datas inválidas ou datas formatadas incorretamente, como yyyy-dd-mm (onde nós precisamos de yyyy-mm-dd). Então continua sendo um problema.

+ + + +

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 selecionador de data do jQuery.

+ +

Atributos

+ +

Beside the attributes listed below, this element can have any of the global attributes.

+ +
+
{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}
+
Specifies an "action hint" used to determine how to label the enter key on mobile devices with virtual keyboards. Supported values are go, done, next, search, and send; these automatically get mapped to the appropriate string (and are case-insensitive).
+
{{htmlattrdef("autofocus")}}
+
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 autofocus attribute, which is a Boolean. It cannot be applied if the type attribute is set to hidden (that is, you cannot automatically set focus to a hidden control).
+
{{htmlattrdef("disabled")}}
+
+

This Boolean attribute indicates that the form control is not available for interaction. In particular, the click event will not be dispatched on disabled controls. Also, a disabled control's value isn't submitted with the form.

+
+
{{htmlattrdef("form")}}
+
The form element that the input element is associated with (its form owner). The value of the attribute must be an id of a {{HTMLElement("form")}} element in the same document. If this attribute is not specified, this <input> element must be a descendant of a {{HTMLElement("form")}} element. This attribute enables you to place <input> elements anywhere within a document, not just as descendants of their form elements. An input can only be associated with one form.
+
{{htmlattrdef("formaction")}}
+
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.
+
{{htmlattrdef("formenctype")}}
+
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: +
    +
  • application/x-www-form-urlencoded: The default value if the attribute is not specified.
    • +
  • multipart/form-data: Use this value if you are using an {{HTMLElement("input")}} element with the {{htmlattrxref("type","input")}} attribute set to file.
    • +
  • text/plain
    • +
+ +

If this attribute is specified, it overrides the {{htmlattrxref("enctype","form")}} attribute of the element's form owner.

+
+
{{htmlattrdef("formmethod")}}
+
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: +
    +
  • post: The data from the form is included in the body of the form and is sent to the server.
    • +
  • get: The data from the form are appended to the form 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.
    • +
+ +

If specified, this attribute overrides the {{htmlattrxref("method","form")}} attribute of the element's form owner.

+
+
{{htmlattrdef("formnovalidate")}}
+
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.
+
{{htmlattrdef("formtarget")}}
+
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 browsing context (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: +
    +
  • _self: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.
    • +
  • _blank: Load the response into a new unnamed browsing context.
    • +
  • _parent: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as _self.
    • +
  • _top: 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 _self.
    • +
+
+
{{htmlattrdef("inputmode")}}
+
A hint to the browser for which keyboard to display. This attribute applies when the value of the type attribute is text, password, email, or url. Possible values are: +
    +
  • verbatim: Alphanumeric, non-prose content such as usernames and passwords.
    • +
  • latin: 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.
    • +
  • latin-name: As latin, but for human names.
    • +
  • latin-prose: As latin, but with more aggressive typing aids. For human-to-human communication such as instant messaging for email.
    • +
  • full-width-latin: As latin-prose, but for the user's secondary languages.
    • +
  • kana: Kana or romaji input, typically hiragana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.
    • +
  • katakana: Katakana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.
    • +
  • numeric: 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">
    • +
  • tel: Telephone input, including asterisk and pound key. Use <input type="tel"> if possible instead.
    • +
  • email: Email input. Use <input type="email"> if possible instead.
    • +
  • url: URL input. Use <input type="url"> if possible instead.
    • +
+
+
{{htmlattrdef("list")}}
+
Identifies a list of pre-defined options to suggest to the user. The value must be the id of a {{HTMLElement("datalist")}} element in the same document. The browser displays only options that are valid values for this input element.
+
{{htmlattrdef("max")}}
+
The maximum value for this item, which must not be less than its minimum (min attribute) value.
+
{{htmlattrdef("min")}}
+
The minimum value for this item, which must not be greater than its maximum (max attribute) value.
+
{{htmlattrdef("name")}}
+
The name of the control, which is submitted with the form data.
+
{{htmlattrdef("readonly")}}
+
This Boolean attribute indicates that the user cannot modify the value of the control.
+
{{htmlattrdef("required")}}
+
This attribute specifies that the user must fill in a value before submitting a form. It cannot be used when the type attribute is hidden, image, or a button type (submit, reset, or button). The {{cssxref(":optional")}} and {{cssxref(":required")}} CSS pseudo-classes will be applied to the field as appropriate.
+
{{htmlattrdef("selectionDirection")}}
+
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.
+
{{htmlattrdef("spellcheck")}}
+
Setting the value of this attribute to true indicates that the element needs to have its spelling and grammar checked. The value default indicates that the element is to act according to a default behavior, possibly based on the parent element's own spellcheck value. The value false indicates that the element should not be checked.
+
{{htmlattrdef("step")}}
+
Works with the min and max attributes to limit the increments at which a numeric or date-time value can be set. It can be the string any or a positive floating point number. If this attribute is not set to any, the control accepts only values at multiples of the step value greater than the minimum.
+
{{htmlattrdef("value")}}
+
The initial value of the control. This attribute is optional.
+ Note that when reloading the page, Gecko and IE will ignore the value specified in the HTML source, if the value was changed before the reload.
+
{{htmlattrdef("x-moz-errormessage")}} {{non-standard_inline}}
+
This Mozilla extension allows you to specify the error message to display when a field doesn't successfully validate.
+
+ +

Examples

+ +

To create a widget to display a date, use:

+ +
<input type="date">
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support2012{{CompatGeckoDesktop(57)}}{{CompatNo}}10.62{{CompatNo}}[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(57)}}{{CompatUnknown}}10.625
+
+ +

Veja também

+ + diff --git a/files/pt-br/web/html/elementos_block-level/index.html b/files/pt-br/web/html/elementos_block-level/index.html deleted file mode 100644 index 3feed31681..0000000000 --- a/files/pt-br/web/html/elementos_block-level/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -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 ---- -

Elementos HTML (Linguagem de marcação de hipertexto) historicamente foram categorizados como “nível de bloco” ou elementos “em linha”. 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.

- -

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:

- -

Elementos em nível de bloco

- -

HTML

- -
<p>Este parágrafo é um elemento block-level; seu plano de fundo foi colorido para exibir o elemento pai do parágrafo.</p>
- -

CSS

- -
p { background-color: #8ABB55; }
-
- -

{{ EmbedLiveSample('Block-level_Example') }}

- -

Utilização

- -
    -
  • Elementos nível de bloco podem aparecer apenas dentro do elemento {{ HTMLElement("body") }} 
    • -
- -

Nível-de-bloco vs. em-linha

- -

Existem algumas diferenças importantes entre os elementos no nível do bloco e os elementos em linha:

- -
-
Modelo de conteúdo
-
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.
-
Formatação padrão
-
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.
-
- -

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 categorias de conteúdo. Enquanto a categoria "em linha" corresponde aproximadamente à categoria de conteúdo de frases, 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 conteúdo de fluxo, em HTML5. Existem também categorias adicionais, por exemplo conteúdo interativo.

- -

Elementos

- -

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).

- -
-
-
{{ HTMLElement("address") }}
-
Informação de contato.
-
{{ HTMLElement("article") }} {{ HTMLVersionInline(5) }}
-
Conteúdo do artigo.
-
{{ HTMLElement("aside") }} {{ HTMLVersionInline(5) }}
-
Conteúdo lateral.
-
{{ HTMLElement("blockquote") }}
-
Citação longa ("bloco").
-
{{ HTMLElement("details") }}
-
Widget de divulgação.
-
{{ HTMLElement("dialog") }}
-
Caixa de diálogo.
-
{{ HTMLElement("dd") }}
-
Descreve um termo em uma lista de descrição.
-
{{ HTMLElement("div") }}
-
Divisão de conteúdo.
-
{{ HTMLElement("dl") }}
-
Lista de descrição.
-
{{ HTMLElement("fieldset") }}
-
Rótulo de conjunto de campos.
-
- -
-
{{ HTMLElement("figcaption") }} {{ HTMLVersionInline(5) }}
-
Legenda da figura.
-
{{ HTMLElement("figure") }} {{ HTMLVersionInline(5) }}
-
Groups media content with a caption (see {{ HTMLElement("figcaption") }}).
-
{{ HTMLElement("footer") }} {{ HTMLVersionInline(5) }}
-
Section or page footer.
-
{{ HTMLElement("form") }}
-
Input form.
-
{{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}
-
Heading levels 1-6.
-
{{ HTMLElement("header") }} {{ HTMLVersionInline(5) }}
-
Section or page header.
-
{{ HTMLElement("hgroup") }} {{ HTMLVersionInline(5) }}
-
Groups header information.
-
{{ HTMLElement("hr") }}
-
Horizontal rule (dividing line).
-
{{ HTMLElement("li") }}
-
List item.
-
{{ HTMLElement("main") }}
-
Contains the central content unique to this document.
-
{{ HTMLElement("nav") }}
-
Contains navigation links.
-
- -
-
{{ HTMLElement("ol") }}
-
Ordered list.
-
{{ HTMLElement("p") }}
-
Paragraph.
-
{{ HTMLElement("pre") }}
-
Preformatted text.
-
{{ HTMLElement("section") }} {{ HTMLVersionInline(5) }}
-
Section of a web page.
-
{{ HTMLElement("table") }}
-
Table.
-
{{ HTMLElement("tfoot") }}
-
Table footer.
-
{{ HTMLElement("ul") }}
-
Unordered list.
-
{{ HTMLElement("video") }} {{ HTMLVersionInline(5) }}
-
Video player.
-
-
- -

Veja também

- - diff --git a/files/pt-br/web/html/favicon/index.html b/files/pt-br/web/html/favicon/index.html deleted file mode 100644 index 6b3bef6490..0000000000 --- a/files/pt-br/web/html/favicon/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: favicon -slug: Web/HTML/favicon ---- -

 

- -

 

- -

Comentário da revisão

- -
-

 

- -

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.

-
- -
-

É necessário revisão?

- -
    -
    • -
    • -
-
- -
-

 

-
- -

Tags

- -

 

diff --git a/files/pt-br/web/html/formatos_midia_suportados/index.html b/files/pt-br/web/html/formatos_midia_suportados/index.html deleted file mode 100644 index 49c0b02fc1..0000000000 --- a/files/pt-br/web/html/formatos_midia_suportados/index.html +++ /dev/null @@ -1,526 +0,0 @@ ---- -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 -translation_of_original: Web/HTML/Supported_media_formats ---- -

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. 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.

- -

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.
-
- 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:

- -
<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>
-
- -

WebM

- -

O formato WebM é baseado em uma versão restrita do container Matroska. 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.
-
- Declaração da Microsoft sobre o porquê o IE9 não possui suporte nativo  para o WebM.
-
- 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 MPEG LA concordou em licenciar estas patentes para a Google sob uma "licença perpétua intransferível, livre de direitos autorais". Isto significa, efetivamente, que todas a patentes conhecidas do formato WebM são licenciadas para todos de graça.
-
- Gecko reconhece os seguintes tipos de arquivos WebM:

- -
-
video/webm
-
Um arquivo de mídia WebM contendo vídeo (e possivelmente áudio também).
-
audio/webm
-
Um arquivo de mídia WebM contendo apenas áudio.
-
- -

Ogg Theora Vorbis

- -

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.
-
- 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).

- -

A situação de patente do Theora é similar com a da WebM.

- -

Você pode ler mais sobre criar méidia com Ogg lendo o Theora Cookbook.

- -

Grecko reconhece os seguintes tipos MIME como arquivos Ogg:

- -
-
audio/ogg
-
Um arquivo Ogg que contem apensa áudio
-
video/ogg
-
Um arquivo Ogg que contem vídeo (e possivelmente áudio)
-
application/ogg
-
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.
-
- -

Ogg Opus

- -

O container Ogg  pode também conter um áudio codificado usando o codec Opus. 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.

- -

Ogg FLAC

- -

O contêiner Ogg pode também conter um áudio codificado usando o codec FLAC. Suporte para ele está disponível no Gecko 51.0 {{geckoRelease ("51.0")}} e versões superiores, somente no desktop.

- -

MP4 H.264 (AAC ou MP3)

- -

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 manipular o perfil utilizado para codificar o MP4.

- -
-

Nota: Codificação MP4 com um  perfil elevado não será executado em um hardware inferior, como o Firefox OS.

-
- -

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 [1, 2], Google [1, 2] e Opera. Contudo, desde que os formatos de direitos livres não são suportados pelo Internet Explorer e Safari, a Mozilla decidiu dar suporte para o formato, e a Google nunca cumpriu sua promessa de remover o suporte para o Chrome.

- -

MP3

- -

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.

- -

WAVE PCM

- -

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".

- -
Nota: Veja RFC 2361 para ver registros do codec WAVE
- -

Gecko reconhece os seguintes tipos MIME em arquivos de áudio WAVE:

- -
    -
  • audio/wave (preferido; não funciona no Chrome)
    • -
  • audio/wav
    • -
  • audio/x-wav
    • -
  • audio/x-pn-wav
    • -
- -

Media Source Extensions (MSE)

- -

Origem da extesão de mídia é 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.
-
- Por exemplo,  você pode implementar MPEG-DASH usando JavaScript durante carregamento da decodificação para MSE.

- -
-

Nota: Time Shifting é o processo de consumo de uma transmissão ao vivo, algum tempo após ter acontecido.

-
- -

Compatibilidade de navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticasChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico3.0{{ CompatGeckoDesktop("1.9.1") }}9.010.503.1
<audio>: PCM em WAVE{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("1.9.1") }}{{ CompatNo() }}10.503.1
<audio>: Vorbis em WebM{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("2.0") }}{{ CompatNo() }}10.603.1 (deve ser instaldo separamente)
<audio>: Streaming Vorbis em WebM via Origem das extensões de mídia{{ CompatUnknown() }}{{ CompatGeckoDesktop("36.0") }} na edição  Nightly/Dev apenas{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
<audio>: Vorbis em Ogg{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("1.9.1") }}{{ CompatNo() }}10.503.1 (deve ser instaldo separamente, e.g. XiphQT)
<audio>: MP3{{ CompatVersionUnknown() }} (Não em Chromium)Partial (Veja abaixo)9.0{{ CompatVersionUnknown() }}3.1
<audio>: MP3 em MP4 -

{{ CompatUnknown() }}

- 		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}
<audio>: AAC em MP4 -

{{ CompatVersionUnknown() }} (Main only) (Não em  Chromium)

- 		-

Partial (Veja abaixo)

- 		9.0{{ CompatVersionUnknown() }}3.1
<audio>: Opus em Ogg27.0{{ CompatGeckoDesktop("15.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
<video>: VP8 e Vorbis em WebM6.0{{ CompatGeckoDesktop("2.0") }}9.0 (deve ser instalado separadamente, e.g. WebM MF)10.603.1 (deve ser instaldo separamente, e.g. Perian)
<video>: VP9 e Opus em WebM29.0{{ CompatGeckoDesktop("28.0") }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}
<video>: Streaming VP9 e Opus/VP8 e Opus em WebM via Origem das extensões de mídia{{ CompatUnknown() }}{{ CompatGeckoDesktop("36.0") }} na edição  Nightly/Dev apenas{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
<video>:  Theora e Vorbis em Ogg{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("1.9.1") }}{{ CompatNo() }}10.503.1 (deve ser instaldo separamente, e.g. XiphQT)
<video>:  H.264 e MP3 em MP4 -

{{ CompatVersionUnknown() }} (Not in Chromium)

- 		Partial (Veja abaixo)9.0{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
<video>: H.264 e AAC em MP4 -

{{ CompatVersionUnknown() }} (Not in Chromium)

- 		Partial (Veja abaixo)9.0{{ CompatVersionUnknown() }}3.1
outro formato{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}3.1 (executa todos os formatos via QuickTime)
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticasAndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE MobileOpera MobileOpera MiniSafari MobileChrome for Android
Suporte básico2.324.01.0.110.011.0Partial (Veja abaixo)3.229.0
<audio>: PCM em WAVE{{ CompatUnknown() }}24.01.0.1{{ CompatNo() }}{{ CompatNo() }}Partial (Veja abaixo)3.2{{ CompatUnknown() }}
<audio>: Vorbis em WebM{{ CompatUnknown() }}24.01.0.1{{ CompatNo() }}11.0Partial (Veja abaixo){{ CompatNo() }}{{ CompatUnknown() }}
<audio>: Streaming Vorbis em WebM via Origem das extensões de mídia{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
<audio>: Vorbis em Ogg{{ CompatUnknown() }}24.01.0.1{{ CompatNo() }}11.0Partial (Veja abaixo){{ CompatNo() }}{{ CompatUnknown() }}
<audio>: MP3{{ CompatUnknown() }}Partial (Veja abaixo)Partial (Veja abaixo)10.0{{ CompatUnknown() }}Partial (Veja abaixo)3.2{{ CompatUnknown() }}
<audio>: MP3 em MP4{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}
<audio>: AAC em MP4{{ CompatUnknown() }}Partial (Veja abaixo)Partial (Veja abaixo)10.0{{ CompatUnknown() }}Partial (Veja abaixo){{ CompatVersionUnknown() }}{{ CompatUnknown() }}
<audio>: Opus em Ogg{{ CompatNo() }}24.0{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}Partial (Veja abaixo){{ CompatNo() }}{{ CompatNo() }}
<video>:  VP8 e Vorbis em WebM2.324.01.0.1{{ CompatNo() }}16.0Partial (Veja abaixo){{ CompatNo() }}29.0
<video>: VP9 and Opus em WebM{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
<video>: Streaming VP9 and Opus/VP8 e Opus em WebM via Origem das extensões de mídia{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
<video>: Theora e Vorbis em Ogg{{ CompatNo() }}24.01.0.1{{ CompatNo() }}{{ CompatNo() }}Partial (Veja abaixo){{ CompatNo() }}{{ CompatNo() }}
<video>:  H.264 e MP3 em MP4Partial (Veja abaixo)24.0Partial (Veja abaixo)10.0Partial since 11.0, full since 16.0Partial (Veja abaixo){{ CompatVersionUnknown() }}29.0
<video>: H.264 e AAC em MP4Partial (Veja abaixo)24.0Partial (Veja abaixo)10.0Partial since 11.0, full since 16.0Partial (Veja abaixo)3.229.0
qualquer outro formato{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -

Notas:

- -
    -
  • AAC é suportado apenas em containers MP4.
    • -
  • 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.
    • -
  • Para o navegador padrão do Android executar vídeo H.264, você precisa fazer mais etapas, como explica Peter Gasston.
    • -
  • No Firefox OS 1.0.1, ao detectar suporte para diferentes formatos  <video> HTMLMediaElement.prototype.canPlayType reporta erroneamente  true 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.
    • -
  • 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:
    • -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PlataformaVersão Firefox
Windows Vista+22.0+
Android20.0+
Firefox OS15.0+
Linux -

26.0+ (depende do codec GStreamer)

-
OS X 10.7+35.0+
- - - -

Veja também

- - diff --git a/files/pt-br/web/html/global_attributes/spellcheck/index.html b/files/pt-br/web/html/global_attributes/spellcheck/index.html new file mode 100644 index 0000000000..c379684839 --- /dev/null +++ b/files/pt-br/web/html/global_attributes/spellcheck/index.html @@ -0,0 +1,69 @@ +--- +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 +translation_of_original: Web/HTML/Controlling_spell_checking_in_HTML_forms +--- +

{{ 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. 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.

+ +

Por padrão, áreas de texto e documentos  designMode 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.

+ +

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.

+ +

Se um site deseja recomendar o uso ou não de verificação ortográfica para um elemento <input> específico, ele pode usar o atributo spellcheck, espefcificando o valor true para recomendar o uso da verificação ortográfica ou false para recomendar o não uso.

+ +

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 layout.spellcheckDefault para 0. Se a configuração layout.spellcheckDefault  tiver qualquer outro valor, as recomendações serão consideradas.

+ +

Você pode codificar um campo de texto linha-única (elemento HTML <input>) habilitando a verificação ortográfica da seguinte forma:

+ +
<input type="text" size="50" spellcheck="true">
+
+ +

Da mesma forma, você pode desabilitar a verificação ortográfica em uma área de texto (elemento <textarea>) da seguinte forma:

+ +
<textarea spellcheck="false"></textarea>
+
+ +

Você pode controlar um documento em seu designMode (tipicamente usado para implementar edição de texto rica) setando o atributo spellcheck  no elemento <body> de um documento.

+ +

Você também pode aplicar o atributo spellcheck em outros elementos, tais como os elementos <span> e <div>, e nesse caso todos os elementos <input> dentro dessas tags irão herdar esta configuração; elementos <input> que não tem um atributo spellcheck 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.

+ +

Por exemplo:

+ +
<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">
+
+ +

Neste exemplo HTML acima, os dois primeiros campos de texto terão a verificação ortográfica e o terceiro não terá.

+ +

{{ h1_gecko_minversion("Controlando o idioma da verificação ortográfica", "9.0") }}

+ +

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 lang setado, esse atributo é procurado em cada elemento pai superior até chegar ao elemento raiz do documento.

+ +

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 lang="en", o dicionário inglês será automaticamente usado para este elemento.

+ +

Por exemplo:

+ +
<html lang="pt-BR">
+<body>
+  <textarea></textarea>
+  <textarea lang="en"></textarea>
+  <div lang="ru">
+    <textarea></textarea>
+  </div>
+</body>
+</html>
+
+ +

No exemplo HTML acima, o primeiro {{ HTMLElement("textarea") }} terá ortografia checada em Português, o segundo em Inglês e o terceiro em Russo.

+ +

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.

diff --git a/files/pt-br/web/html/html5/index.html b/files/pt-br/web/html/html5/index.html deleted file mode 100644 index e39b45444a..0000000000 --- a/files/pt-br/web/html/html5/index.html +++ /dev/null @@ -1,299 +0,0 @@ ---- -title: HTML5 -slug: Web/HTML/HTML5 -tags: - - Desenvolvimento Web - - Guía - - HTML - - HTML5 - - Visão Geral - - Web -translation_of: Web/Guide/HTML/HTML5 ---- -

HTML5 é a mais recente evolução do padrão que define o HTML. O termo representa dois conceitos diferentes:

- -
    -
  • É uma nova versão da linguagem HTML, com novos elementos, atributos, e comportamentos
    • -
  • e um conjunto maior de tecnologias que permite o desenvolvimento de aplicações e web sites mais diversos e poderosos. Este conjunto é chamado HTML5 & friends e muitas vezes abreviado apenas como HTML5.
    • -
- -

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;

- -
    -
  • Semântica: permite você descrever mais precisamente o seu conteúdo.
    • -
  • Conectividade: permite uma comunicação com o servidor de formas modernas e inovadoras.
    • -
  • Offline e armazenamento: Permite que páginas web armazenem dados localmente do lado do cliente e opere de forma offline mais eficientemente.
    • -
  • Multimídia: Viabiliza a utilização de áudio e vídeo de forma primorosa na Web Aberta.
    • -
  • Gráficos e efeitos 2D/3D: viabiliza um leque diversificado de opções de representação gráfica. 
    • -
  • Performance e integração: fornece grande otimização de velocidade e melhor utilização do hardware do computador.
    • -
  • Acesso ao dispositivo: viabiliza a utilização de diversos métodos e dispositivos de entrada e saída.
    • -
  • Estilização: permite aos autores a escrita de temas mais sofisticados.
    • -
- -
- -
- -

 Semântica 

- -
-
Seções e estruturas em HTML
-
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")}}
-
Utilizando áudio e vídeo com HTML5
-
Os elementos {{HTMLElement("audio")}} e {{HTMLElement("video")}} incorporam e permitem manipulação de novos conteúdos multimídia. 
-
Formulários em HTML5 
-
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")}}.
-
Novos elementos semânticos
-
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 elementos válidos do HTML5.
-
Melhorias no {{HTMLElement("iframe")}}
-
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 {{HTMLElement("iframe")}}.
-
​MathML
-
Viabiliza a inserção direta de fórmulas matemáticas no código HTML5.
-
Introdução ao HTML5
-
Este artigo introduz como indicar para o navegador que você está usando HTML5 em sua página ou aplicação web. 
-
HTML5 parser compatível
-
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.
-
- -

Conectividade

- -
-
Web Sockets
-
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.
-
Eventos do servidor
-
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.
-
WebRTC
-
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.
-
- -

Offline e armazenamento

- -
-
Recursos offline: cache de aplicação
-
Firefox possui suporte completo às especificações dos recursos offlines do HTML5. A maioria dos outros navegadores suportam apenas parte deste recurso.
-
Eventos online e offline
-
-

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. 

-
-
WHATWG 
-
Sessão client-side e armazenamento persistente permite que aplicações web armazenem dados de forma estruturada no lado do cliente.
-
IndexedDB
-
É um padrão web para armazenamento de quantidades significativas de dados estruturados no navegador e para alta performace de busca nestes dados, usando índices.
-
Uso de arquivos de aplicações web
-
Foi adicionado ao Gecko 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 tipo file do HTML5. Há também o FileReader.
-
- -

Multimídia

- -
-
Utilizando áudio e vídeo com HTML5
-
Os elementos {{HTMLElement("audio")}} e {{HTMLElement("video")}} incluem e permitem a manipulação de novos conteúdos multimídia.
-
WebRTC
-
Permite conexões entre usuários e controle de videoconferência diretamente no browser, sem necessidade de um plugin ou aplicação externa.
-
API da câmera
-
Permite o uso, manipulação e armazenamento de uma imagem diretamente da câmera do computador.
-
Track e WebVTT
-
O elemento {{HTMLElement("track")}} permite legendas e capítulos. WebVTT é o formato de texto do track {{HTMLElement("track")}}.
-
- -

Gráficos e efeitos 3D

- -
-
Canvas
-
Aprenda sobre o novo elemento {{HTMLElement("canvas")}} e como utilizá-lo para desenhar gráficos e objetos no Firefox.
-
API de texto para {{HTMLElement("canvas")}}
-
O elemento {{HTMLElement("canvas")}} agora dá suporte à  API de texto do HTML5.
-
WebGL
-
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")}}.
-
SVG
-
Um formato de imagens vetoriais baseada em XML que pode ser diretamente embutido no HTML5.
-
- -

Performance e integração

- -
-
Web Workers
-
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.
-
XMLHttpRequest level 2
-
Permite buscar de forma assíncrona 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 Ajax.
-
Motor JIT-compiling para JavaScript
-
A nova e poderosa geração de motores JavaScript é muito mais poderosa, levando para uma maior performance.
-
History API
-
Permite a manipulação do histórico do navegador. Isso é especialmente útil para páginas que carregam novas informações interativas.
-
O atributo contentEditable: Transforme seu website em uma wiki!
-
O HTML5 padronizou o atributo contentEditable. Saiba mais sobre este recurso.
-
Arrastar e soltar
-
A API do HTML5 permite suportar o recurso de arrastar e soltar (dragging and dropping) 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.
-
Foco de gestão em HTML
-
O novo HTML5 activeElement e hasFocus são atributos suportados.
-
Manipuladores de protocolos beseados na web
-
Agora você pode registrar aplicações web com manipuladores de protocolos utilizando o método thenavigator.registerProtocolHandler().
-
requestAnimationFrame
-
Permite o controle de animações de renderização para obter a performance ideal.
-
API Fullscreen
-
Controla o uso de toda a tela para uma página web ou aplicação, sem mostrar a interface de UI do navegador.
-
API bloqueio de ponteiro
-
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.
-
Eventos online e offline
-
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.
-
- -

Acesso à dispositivos

- -
-
Usando a API da câmera
-
É permitido o uso, manipulação, e armazenar imagens através câmeras dos computadores.
-
Eventos touch
-
Manipuladores para reagir a eventos criados por um usuário ao pressionar em telas sensíveis ao toque (touch screens).
-
Utilizando geolocalização
-
Deixa que os navegadores localizem a posição do usuário utilizando a geolocalização.
-
Detectando a orientaçåo do dispositivo
-
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).
-
Pointer Lock API
-
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.
-
- -

Estilização

- -

CSS foi estendido para ser capaz de estilo elementos de uma forma muito mais complexa. Sua extensão, também conhecido como CSS3, 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.

- -
-
Novas caracteristicas dos estilos de background
-
Agora é possível determinar uma sombra à um elemento, usando a propriedade box-shadow e também podemos definir diversos backgrounds para um elemento.
-
More fancy borders
-
Também é possível utilizar imagens para estilizar bordas, usando a propriedade border-image. Bordas arredondadas são suportadas através da propriedade border-radius.
-
Animating your style
-
Utilizando transition para animar diferentes estágios de determinadas propriedades ou usando animation para animar trechos da página sem precisar usar o JavaScript com algum evento vinculado, permitindo total controle sobre movimentação de elementos. 
-
Using CSS Transitions to animate between different states or using CSS Animationsto animate parts of the page without a triggering event, you can now control mobile elements on your page.
-
Typography improvement
-
Authors have better control to reach better typography. Eles podem controlar text-overflow e hyphenation, mas tambem pode adicionar um shadow a ele ou controlar mais precisamente a sua decorations. Tipos de letras personalizadas podem ser baixadas e aplicadas gracas a nova@font-face at-rule.
-
Novos layouts de apresentaçoes
-
A fim de melhorar a flexibilidade dos modelos, foram adicionados, dois novos esquemas: o CSS multi-column layouts e CSS flexible box layout.
-
- - - -

(Alguns outros artigos relacionados com HTML5.)

- -

Introdução ao HTML5

- -
-
Introdução ao HTML5
-
Este artigo introduz como utilizar HTML5 no desenho de site ou de sua aplicação.
-
- -

Elementos do HTML5

- -
-
Lista de tags / elementos do HTML5
-
Esta página contém uma tabela com todos os elementos (tags) baseado no rascunho atual das especificações do HTML5.
-
- -
-
Utilizando audio e video
-
Adicionando suporte aos elementos do HTML5 {{ HTMLElement("audio") }} e {{ HTMLElement("video") }} ao Firefox 3.5.
-
Formulários em HTML5
-
Veja as melhorias para formulários web em HTML5: a API de validação de restrição, vários novos atributos, novos valores para {{ HTMLElement("input") }} atributo {{ htmlattrxref("type", "input") }} e os novo elemento {{ HTMLElement("output") }}.
-
Seções e esboços em HTML5
-
Veja os novos elementos para delinear e seccionar em HTML5: {{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("aside") }} and {{ HTMLElement("hgroup") }}.
-
O elemento {{ HTMLElement("mark") }}
-
Este elemento é usado para marcar em destaque um texto de especial relevância.
-
O elemento {{ HTMLElement("figure") }} e {{ HTMLElement("figcaption") }}
-
Este elemento permite adicionar figuras e ilustrações, com uma eventual legenda, colocado abaixo do texto principal.
-
- -

Suporte Canvas

- -
-
Tutorial Canvas
-
 Apreda sobre o novo elemento {{ HTMLElement("canvas") }} e como desenhar gráficos e outros objetos no Firefox.
-
HTML5 API texto para elemento <canvas>
-
HTML5 API texto agora é suportado pelo {{ HTMLElement("canvas") }}.
-
- -
-

Recursos de aplicações web

-
- -
-
Recursos Offline
-
O Firefox suporta completamente as especificações de HTML5 para  recurso offline. A maioria dos outros navegadores tem algum nível de suporte aos recursos offline.
-
Eventos online e offline
-
O Firefox 3 suporta WHATWG eventos online e offline, que permitem que aplicações e extensões detectem se há ou não uma conexão ativa com Internet, bem como detecta quando a conexão conecta e desconecta.
-
Sessão WHATWG do lado cliente e armazenamento persistente (aka DOM Storage)
-
A sessão do lado cliente e o armazenamento persistente permitem que as aplicações web armazenem dados estruturados no lado  cliente.
-
O atributo contentEditable: transforma seu website em um wiki!
-
O HTML5 tem um atributo padronizado contentEditable. Saiba mais sobre este recurso.
-
Usando arquivos de aplicações web
-
Suporta para a nova HTML5 API de arquivo foi adicionada ao Gecko, tornando possível as aplicações web para acessarem arquivos locais selecionados pelo usuário. Isso inclui suporte para selecionar vários arquivos usando o novo elemento HTML {{ HTMLElement("input") }} do type arquivo de multiplos atributos.
-
- -

Recursos DOM

- -
-
getElementsByClassName
-
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.
-
Arrastar e soltar
-
A HTML5 API drag and drop permite suporte para arrastar e soltar itens dentro e entre web sites. Isto também proporciona uma API simples para uso de extensões e aplicativos baseados em Mozilla.
-
Foco na gestão do HTML
-
Os novos activeElement e hasFocus são atributos suportados pelo HTML5..
-
Manipuladores de protocolo baseado em web
-
Agora você pode registrar uma aplicação web como um manipulador de protocolo usando o método  navigator.registerProtocolHandler().
-
- -

HTML parser

- -

O Gecko é compatível com HTML5 parser—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) }}

- -

Alterações adicionais

- -
    -
  • localName e namespaceURI em documentos HTML agora  se comportam como em documentos XML: localName retorna em minúsculas e  namespaceURI para elementos HTML é "http://www.w3.org/1999/xhtml"
    • -
  • Quando a URI da página muda o identificador de fragmento de documento (a parte depois do caracter "#" (hash)), um novo evento hashchange é enviado para a página. Veja window.onhashchange para mais informação.
    • -
  • Suporte para element.classList para facilitar o manuseio de atributo de classe.
    • -
  • evnto de documento pronto document.onreadystatechange  e document.readyState são propriedades suportadas.
    • -
  • Cores em atributos de apresentação são interpretados de acordo com o HTML5.
    • -
- -

Tecnologias muitas vezes chamado de parte do HTML5 que não são

- -

Estas são muitas vezes consideradas em conjunto com um uso amplo termo de "HTML5", mas não são realmente parte do W3C HTML5 Spec.

- - - -

Veja também

- -

Alterações nas versões do Firefox que afetam os desenvolvedores da Web:

- - - -
-

{{ 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"} ) }}

-
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 deleted file mode 100644 index 465d67760d..0000000000 --- a/files/pt-br/web/html/html5/introduction_to_html5/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Introdução ao HTML5 -slug: Web/HTML/HTML5/Introduction_to_HTML5 -translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 ---- -

HTML5 é 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.

- -

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 página principal do HTML5. Para informação detalhada sobre o suporte de vários navegadores quanto às funcionalidades do HTML5, veja o site CanIUse.

- -

Seu primeiro passo: O doctype do HTML5

- -

O doctype para o HTML5 é muito simples. Para indicar que seu conteúdo HTML usa HTML5, simplesmente use:

- -
<!DOCTYPE html>
-
- -

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.

- -
-

{{ 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"} ) }}

-
- -

 

diff --git a/files/pt-br/web/html/inline_elemente/index.html b/files/pt-br/web/html/inline_elemente/index.html deleted file mode 100644 index 7a5866b243..0000000000 --- a/files/pt-br/web/html/inline_elemente/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Elementos inline -slug: Web/HTML/Inline_elemente -translation_of: Web/HTML/Inline_elements ---- -

Sumário

-

"Inline" é uma categorização dos elementos do HTML, em contraste com os "elementos de bloco". 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:

-
-
- Modelo de conteúdo
-
- Geralmente, elementos inline devem ter somente dados em outros elementos inline.
-
- Formato
-
- Por padrão, os elementos inline não começam em uma nova linha.
-
-

Elementos

-

Listagem dos elementos que são "inline":

- -

Ver também

- diff --git a/files/pt-br/web/html/inline_elements/index.html b/files/pt-br/web/html/inline_elements/index.html new file mode 100644 index 0000000000..7a5866b243 --- /dev/null +++ b/files/pt-br/web/html/inline_elements/index.html @@ -0,0 +1,29 @@ +--- +title: Elementos inline +slug: Web/HTML/Inline_elemente +translation_of: Web/HTML/Inline_elements +--- +

Sumário

+

"Inline" é uma categorização dos elementos do HTML, em contraste com os "elementos de bloco". 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:

+
+
+ Modelo de conteúdo
+
+ Geralmente, elementos inline devem ter somente dados em outros elementos inline.
+
+ Formato
+
+ Por padrão, os elementos inline não começam em uma nova linha.
+
+

Elementos

+

Listagem dos elementos que são "inline":

+ +

Ver também

+ diff --git a/files/pt-br/web/html/microformatos/index.html b/files/pt-br/web/html/microformatos/index.html deleted file mode 100644 index 01e61069a7..0000000000 --- a/files/pt-br/web/html/microformatos/index.html +++ /dev/null @@ -1,444 +0,0 @@ ---- -title: Microformatos -slug: Web/HTML/microformatos -translation_of: Web/HTML/microformats ---- -
{{HTMLSidebar}}
- -

Microformatos (ás vezes abreviado como μF) 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.

- -

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.

- -

Existem bibliotecas de análise para a maioria das linguagens para microformatos2.

- -

Como os Microformatos Funcionam?

- -

Um autor de uma página web pode adicionar microformatos no seu HTML. Por exemplo se ele quer se identificar ele podem utilizar um h-card como:

- -
-
<a class="h-card" href="http://example.com">Joe Bloggs</a>
- -

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 Joe Blogger com uma URL de http://example.com/. O analisador disponibiliza esses dados por meio de APIs que podem ser usadas por diferentes aplicativos.

- -

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: name, url, photo.

-
- -

Prefixos de Microformatos

- -

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. Os dados hierárquicos são representados com microformatos aninhados, normalmente como valores de propriedade.

- -

Todas os nomes de classes de microformatos utilizam prefixos. Os prefixos são  Os prefixos são independentes da sintaxe dos vocabulários, os quais são desenvolvidos separadamente.

- -
    -
  • "h-*" para nome de classes raíz, p.ex "h-card", "h-entry", "h-feed", e várias outras. Essas classes de alto nível normalmente indicam um tipo e o vocabulário esperado de propriedades correspondente. Por exemplo: - -
      -
    • h-card descreve uma pessoa ou uma organização.
      • -
    • h-entry descreve conteúdo on-line em série ou com data marcada como uma postagem de blog.
      • -
    • h-feed descreve um fluxo de dados ou um feed de postagens.
      • -
    • Você pode encontrar vários outros You can find many more vocabulários na wiki de microformatos2.
      • -
    -
    • -
  • "p-*" para propriedades de texto simples, p.ex "p-name", "p-summary" -
      -
    • Análise de texto simples, texto de elemento em geral. Em certos elementos HTML, use atributos especiais primeiro, por exemplo img / alt, abbr / título.
      • -
    -
    • -
  • "u-*" para propriedades URL, p.ex "u-url", "u-photo", "u-logo" -
      -
    • Análise especial necessária: prefer a/href, img/src, object/data etc. atributos sobre o conteúdo do elemento.
      • -
    -
    • -
  • "dt-*" para propriedades de data e hora, p.ex "dt-start", "dt-end", "dt-bday" -
      -
    • Análise especial necessária: value-class-pattern and separate date time value parsing for readability.
      • -
    -
    • -
  • "e-*" para propriedades da árvore de elementos em que toda a hierarquia de elementos contidos é o valor, p.ex "e-content". O prefixo "e-" também pode ser lembrado mnemonicamente como "árvore de elementos", "marcação incorporada", ou "marcação encapsulada".
    • -
- -

Alguns exemplos de microformatos

- -

h-card

- -

O microformato h-card representa uma pessoa ou uma organização.

- -

O valor de cada propriedade é definido no HTML utilizando a propriedade class, qualquer elemento pode receber.

- -

Exemplo de h-card

- -
-
<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>
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriedadeDescrição
p-nameO nome completo/formatado da pessoa ou organização
u-emailendereço de e-mail
u-photouma foto da
u-urlpágina na web ou outra URL representando a pessoa ou a organização
u-uididentificador universal único, de preferência URL canônico
p-street-addressnúmero da rua + enderço
p-localitycidade ou vilarejo
p-country-namenome do país
- -

Exemplo de h-card aninhado

- -
-
<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>
-
- -

JSON analisado:

- -
-
{
-  "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/"]
-    }
-    }]
-  }
-  }]
-}
-
- -

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 <a href>.

- -

h-entry

- -

O microformato h-entry representa um conteúdo em série ou um conteúdo com data marcada na web. h-entry é frequentemente usado com conteúdo destinado a ser distribuído, p.ex postagens em blog.

- -

Exemplo de h-entry como uma postagem em blog:

- -
-
<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>
- -

Propriedades

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriedadeDescrição
p-namenome/título da entrada
p-authorquem escreveu a entrada, h-card opcionalmente incorporado
dt-publishedquando a entrada foi publicada
p-summarybreve resumo da entrada
e-contentconteúdo completo da entrada
- -

Exemplo de h-entry analisado

- -
<div class="h-entry">
-  <p><span class="p-author h-card">
-    <a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106" ><img class="u-photo" src="https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg"/></a>
-    <a class="p-name u-url" href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">Greg McVerry</a></span>
-     Replied to <a class="u-in-reply-to" href="https://developer.mozilla.org/en-US/docs/Web/HTML/microformats">a post on
-   <strong>developer.mozilla.org</strong> </a>:
-  </p>
-   <p class="p-name e-content">Hey thanks for making this microformats resource</p>
-   <p> <a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">Greg McVerry</a>
-  published this <a class="u-url url" href="https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource"><time class="dt-published"
-   datetime="2019-05-31T14:19:09+0000">31 May 2019</time></a></p>
-</div>
- -
-
{
-  "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"
-    }
-
- -

h-feed

- -

O h-feed é um fluxo de dados ou um feed de posts de h-entry, como postagens completas em uma página inicial ou em páginas de arquivo, sumários ou outras listagens de postagens

- -

Exemplo h-feed

- -
-
<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>
-
- -

Propriedades

- - - - - - - - - - - - - - - - -
PropriedadesDescrição
p-namenome do feed
p-authorautor do feed, opcionalmente incorporado com um h-card
- -

Filhos

- - - - - - - - - - - - -
h-entry aninhado
objetos representando os itens do feed
- -

h-event

- -

O h-event é para evento na web. O h-event é frequentemente usado com listagens de eventos e páginas de eventos individuais.

- -
-
<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>
-
- -

Propriedades

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriedadeDescrição
p-namenome do evento (ou título)
p-summarybreve sumário do evento
dt-startdata e hora de início do evento
dt-enddata e hora de termino do evento
p-locationlocal do evento, opcionalmente incorporado com um h-card
- -

Exemplo de h-event analisado

- -
-
<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>
- -
-
{
-  "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"
-    }
-  ],
-
-
- -

See also

- - diff --git a/files/pt-br/web/html/microformats/index.html b/files/pt-br/web/html/microformats/index.html new file mode 100644 index 0000000000..01e61069a7 --- /dev/null +++ b/files/pt-br/web/html/microformats/index.html @@ -0,0 +1,444 @@ +--- +title: Microformatos +slug: Web/HTML/microformatos +translation_of: Web/HTML/microformats +--- +
{{HTMLSidebar}}
+ +

Microformatos (ás vezes abreviado como μF) 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.

+ +

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.

+ +

Existem bibliotecas de análise para a maioria das linguagens para microformatos2.

+ +

Como os Microformatos Funcionam?

+ +

Um autor de uma página web pode adicionar microformatos no seu HTML. Por exemplo se ele quer se identificar ele podem utilizar um h-card como:

+ +
+
<a class="h-card" href="http://example.com">Joe Bloggs</a>
+ +

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 Joe Blogger com uma URL de http://example.com/. O analisador disponibiliza esses dados por meio de APIs que podem ser usadas por diferentes aplicativos.

+ +

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: name, url, photo.

+
+ +

Prefixos de Microformatos

+ +

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. Os dados hierárquicos são representados com microformatos aninhados, normalmente como valores de propriedade.

+ +

Todas os nomes de classes de microformatos utilizam prefixos. Os prefixos são  Os prefixos são independentes da sintaxe dos vocabulários, os quais são desenvolvidos separadamente.

+ +
    +
  • "h-*" para nome de classes raíz, p.ex "h-card", "h-entry", "h-feed", e várias outras. Essas classes de alto nível normalmente indicam um tipo e o vocabulário esperado de propriedades correspondente. Por exemplo: + +
      +
    • h-card descreve uma pessoa ou uma organização.
      • +
    • h-entry descreve conteúdo on-line em série ou com data marcada como uma postagem de blog.
      • +
    • h-feed descreve um fluxo de dados ou um feed de postagens.
      • +
    • Você pode encontrar vários outros You can find many more vocabulários na wiki de microformatos2.
      • +
    +
    • +
  • "p-*" para propriedades de texto simples, p.ex "p-name", "p-summary" +
      +
    • Análise de texto simples, texto de elemento em geral. Em certos elementos HTML, use atributos especiais primeiro, por exemplo img / alt, abbr / título.
      • +
    +
    • +
  • "u-*" para propriedades URL, p.ex "u-url", "u-photo", "u-logo" +
      +
    • Análise especial necessária: prefer a/href, img/src, object/data etc. atributos sobre o conteúdo do elemento.
      • +
    +
    • +
  • "dt-*" para propriedades de data e hora, p.ex "dt-start", "dt-end", "dt-bday" +
      +
    • Análise especial necessária: value-class-pattern and separate date time value parsing for readability.
      • +
    +
    • +
  • "e-*" para propriedades da árvore de elementos em que toda a hierarquia de elementos contidos é o valor, p.ex "e-content". O prefixo "e-" também pode ser lembrado mnemonicamente como "árvore de elementos", "marcação incorporada", ou "marcação encapsulada".
    • +
+ +

Alguns exemplos de microformatos

+ +

h-card

+ +

O microformato h-card representa uma pessoa ou uma organização.

+ +

O valor de cada propriedade é definido no HTML utilizando a propriedade class, qualquer elemento pode receber.

+ +

Exemplo de h-card

+ +
+
<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>
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriedadeDescrição
p-nameO nome completo/formatado da pessoa ou organização
u-emailendereço de e-mail
u-photouma foto da
u-urlpágina na web ou outra URL representando a pessoa ou a organização
u-uididentificador universal único, de preferência URL canônico
p-street-addressnúmero da rua + enderço
p-localitycidade ou vilarejo
p-country-namenome do país
+ +

Exemplo de h-card aninhado

+ +
+
<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>
+
+ +

JSON analisado:

+ +
+
{
+  "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/"]
+    }
+    }]
+  }
+  }]
+}
+
+ +

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 <a href>.

+ +

h-entry

+ +

O microformato h-entry representa um conteúdo em série ou um conteúdo com data marcada na web. h-entry é frequentemente usado com conteúdo destinado a ser distribuído, p.ex postagens em blog.

+ +

Exemplo de h-entry como uma postagem em blog:

+ +
+
<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>
+ +

Propriedades

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriedadeDescrição
p-namenome/título da entrada
p-authorquem escreveu a entrada, h-card opcionalmente incorporado
dt-publishedquando a entrada foi publicada
p-summarybreve resumo da entrada
e-contentconteúdo completo da entrada
+ +

Exemplo de h-entry analisado

+ +
<div class="h-entry">
+  <p><span class="p-author h-card">
+    <a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106" ><img class="u-photo" src="https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg"/></a>
+    <a class="p-name u-url" href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">Greg McVerry</a></span>
+     Replied to <a class="u-in-reply-to" href="https://developer.mozilla.org/en-US/docs/Web/HTML/microformats">a post on
+   <strong>developer.mozilla.org</strong> </a>:
+  </p>
+   <p class="p-name e-content">Hey thanks for making this microformats resource</p>
+   <p> <a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">Greg McVerry</a>
+  published this <a class="u-url url" href="https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource"><time class="dt-published"
+   datetime="2019-05-31T14:19:09+0000">31 May 2019</time></a></p>
+</div>
+ +
+
{
+  "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"
+    }
+
+ +

h-feed

+ +

O h-feed é um fluxo de dados ou um feed de posts de h-entry, como postagens completas em uma página inicial ou em páginas de arquivo, sumários ou outras listagens de postagens

+ +

Exemplo h-feed

+ +
+
<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>
+
+ +

Propriedades

+ + + + + + + + + + + + + + + + +
PropriedadesDescrição
p-namenome do feed
p-authorautor do feed, opcionalmente incorporado com um h-card
+ +

Filhos

+ + + + + + + + + + + + +
h-entry aninhado
objetos representando os itens do feed
+ +

h-event

+ +

O h-event é para evento na web. O h-event é frequentemente usado com listagens de eventos e páginas de eventos individuais.

+ +
+
<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>
+
+ +

Propriedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriedadeDescrição
p-namenome do evento (ou título)
p-summarybreve sumário do evento
dt-startdata e hora de início do evento
dt-enddata e hora de termino do evento
p-locationlocal do evento, opcionalmente incorporado com um h-card
+ +

Exemplo de h-event analisado

+ +
+
<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>
+ +
+
{
+  "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"
+    }
+  ],
+
+
+ +

See also

+ + 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 deleted file mode 100644 index 5da1c3efa2..0000000000 --- a/files/pt-br/web/html/optimizing_your_pages_for_speculative_parsing/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Optimizing your pages for speculative parsing -slug: Web/HTML/Optimizing_your_pages_for_speculative_parsing -translation_of: Glossary/speculative_parsing ---- -

Traditionally in browsers the HTML parser has run on the main thread and has blocked after a </script> 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.

-

This document helps you avoid the kind of things that make speculation fail and slow down the loading of your page.

-

Making speculative loads succeed

-

There's only one rule for making speculative loads of linked scripts, style sheets and images succeed:

-
    -
  • If you use a <base> 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 document.write() or document.createElement().
    • -
-

Avoiding losing tree builder output

-

Speculative tree building fails when document.write() changes the tree builder state such that the speculative state after the </script> tag no longer holds when all the content inserted by document.write() has been parsed. However, only unusual uses of document.write() cause trouble. Here are the things to avoid:

-
    -
  • Don't write unbalanced trees. <script>document.write("<div>");</script> is bad. <script>document.write("<div></div>");</script> is OK.
    • -
  • Don't write an unfinished token. <script>document.write("<div></div");</script> is bad.
    • -
  • Don't finish your writing with a carriage return. <script>document.write("Hello World!\r");</script> is bad. <script>document.write("Hello World!\n");</script> is OK.
    • -
  • Note that writing balanced tags may cause other tags to be inferred in a way that makes the write unbalanced. E.g. <script>document.write("<div></div>");</script> inside the head element will be interpreted as <script>document.write("</head><body><div></div>");</script> which is unbalanced.
    • -
  • Don't let the semicolon of a named character reference be the last thing that is written. Due to a bug in Firefox 4 though 10 (fixed in Firefox 11), <script>document.write("foo&nbsp;");</script> causes a speculation failure. However, <script>document.write("&nbsp;foo");</script> is OK.
    • -
  • Don't format part of a table. <table><script>document.write("<tr><td>Hello World!</td></tr>");</script></table> is bad. However, <script>document.write("<table><tr><td>Hello World!</td></tr></table>");</script> is OK.
    • -
  • TODO: document.write inside other formatting elements.
    • -
diff --git a/files/pt-br/web/html/reference/index.html b/files/pt-br/web/html/reference/index.html new file mode 100644 index 0000000000..f0eda6be3f --- /dev/null +++ b/files/pt-br/web/html/reference/index.html @@ -0,0 +1,25 @@ +--- +title: Referência HTML +slug: Web/HTML/ReferenciaHTML +translation_of: Web/HTML/Reference +--- +
{{HTMLSidebar}}
+ +

Esta referência de HTML descreve todos os elementos e atributos do HTML, incluindo atributos globais que se aplicam a todos elementos.

+ +
+
Referência de elementos do HTML
+
Esta página lista todos os elementos do HTML que são criados usando tags.
+
Referência de atributos do HTML
+
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.
+
Atributos globais
+
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.
+
Tipos de links
+
Em HTML, os tipos de links a seguir indicam o relacionamento entre dois documentos, em que um aponta para o outro usando um elemento <a>, <area> ou <link>.
+
Categorias de conteúdo
+
Todo elemento em HTML é membro de uma ou mais categorias de conteúdo — estas categorias agrupam elementos que compartilham características comuns.
+
+ +

Veja todas as páginas com a tag HTML...

+ +
diff --git a/files/pt-br/web/html/referenciahtml/index.html b/files/pt-br/web/html/referenciahtml/index.html deleted file mode 100644 index f0eda6be3f..0000000000 --- a/files/pt-br/web/html/referenciahtml/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Referência HTML -slug: Web/HTML/ReferenciaHTML -translation_of: Web/HTML/Reference ---- -
{{HTMLSidebar}}
- -

Esta referência de HTML descreve todos os elementos e atributos do HTML, incluindo atributos globais que se aplicam a todos elementos.

- -
-
Referência de elementos do HTML
-
Esta página lista todos os elementos do HTML que são criados usando tags.
-
Referência de atributos do HTML
-
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.
-
Atributos globais
-
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.
-
Tipos de links
-
Em HTML, os tipos de links a seguir indicam o relacionamento entre dois documentos, em que um aponta para o outro usando um elemento <a>, <area> ou <link>.
-
Categorias de conteúdo
-
Todo elemento em HTML é membro de uma ou mais categorias de conteúdo — estas categorias agrupam elementos que compartilham características comuns.
-
- -

Veja todas as páginas com a tag HTML...

- -
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 deleted file mode 100644 index 4577341105..0000000000 --- a/files/pt-br/web/html/using_html5_audio_and_video/index.html +++ /dev/null @@ -1,240 +0,0 @@ ---- -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 -translation_of_original: Web/Guide/HTML/Using_HTML5_audio_and_video ---- -

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.

- -

Incorporando mídia:

- -

Incorporar mídia em documentos HTML é simples:

- -
<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
-  Seu navegador não suporta o elemento <code>video</code>.
-</video>
-
- -

Esse exemplo reproduz uma amostra de vídeo, com controles de reprodução, a partir do site Theora.

- -

Aqui há um exemplo de áudio incorporado em um documento HTML

- -
<audio src="/test/audio.ogg">
-<p>Seu nevegador não suporta o elemento audio.</p>
-</audio>
-
- -

O atributo src pode ser a URL do arquivo de áudio ou o caminho do arquivo no sistema local.

- -
<audio src="audio.ogg" controls autoplay loop>
-<p>Seu navegador não suporta o elemento audio </p>
-</audio>
-
- -

Esse exemplo de código usa atributos do elemento {{ HTMLElement("audio") }}:

- -
    -
  • controls : Mostra os controles padrão para o áudio na página.
    • -
  • autoplay : Faz com que o áudio reproduza automaticamente.
    • -
  • loop : Faz com que o áudio repita automaticamente.
    • -
- -
<audio src="audio.mp3" preload="auto" controls></audio>
-
- -

O atributo preload é usado em elementos audio para carregar arquivos grandes. Ele pode assumir 3 valores:

- -
    -
  • "none" não carrega o arquivo
    • -
  • "auto" carrega o arquivo
    • -
  • "metadata" carrega apenas os meta dados do arquivo
    • -
- -

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:

- -
<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>
-
- -

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 media formats supported by the audio and video elements para detalhes.

- -

Também é possível especificar os codecs que o arquivo de mídia requer; isso permite que o navegador faça escolhas mais inteligentes:

- -
<video controls>
-  <source src="foo.ogg" type="video/ogg; codecs=dirac, speex">
-  Seu navegador não suporta o elemento <code>video</code>.
-</video>
- -

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.

- -

Se o atributo type 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 source é verificado. Se nenhum dos elementps source pode ser utilizado, um evento error é enviado para o elemento video. Se o atributo type 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 source é verificado.

- -

Veja Media events 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 Media formats supported by the audio and video elements.

- -

Controlando a reprodução de mídia

- -

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:

- -
var v = document.getElementsByTagName("video")[0];
-v.play();
-
- -

A primeira linha pega o primeiro elemento video, e a segunda chama o método play() do elemento, como definido na interface {{ interface("nsIDOMHTMLMediaElement") }}, que é utilizada para implementar elementos de mídia

- -

Controlando um reprodutor de áudio para reproduzir, pausar, aumentar e diminuir o volume usando JavaScript é simples.

- -
<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>
-
- -

Parando o download de mídia

- -

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.

- -

Esta é um modo para parar o download imediatamente:

- -
var mediaElement = document.getElementById("myMediaElementID");
-mediaElement.pause();
-mediaElement.src = "";
-
- -

Ao definir o atributo src do elemento de mídia para uma string vazia, o decodificador interno do elemento é destruído, o que para o download.

- - - -

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 currentTime 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.

- -

Você pode usar a propriedade seekable 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.

- -
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
-
- -

Especificando o intervalo de reprodução

- -

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.

- -

O intervalo é especificado usando a sintaxe:

- -
#t=[tempoinicial],[tempofinal]
-
- -

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).

- -

Alguns exemplos:

- -
-
http://foo.com/video.ogg#t=10,20
-
Especifica que o intervalo entre 10 e 20 segundos deve ser reproduzido.
-
http://foo.com/video.ogg#t=,10.5
-
Especifica que o vídeo deve ser reproduzido do início até 10,5 segundos.
-
http://foo.com/video.ogg#t=,02:00:00
-
Especifica que o vídeo deve ser reproduzido do início até 2 horas.
-
http://foo.com/video.ogg#t=60,
-
Especifica que o vídeo deve começar aos 60 segundos e ser reproduzido até o final.
-
- -
-

{{ gecko_callout_heading("9.0") }}

- -

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 Media Fragments URI specification implementada pelo Gecko, e somente pode ser utilizada para especificar a fonte dos elementos media, e não na barra de endereço.

-
- -

Opções alternativas

- -

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.

- -

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.

- -

Utilizando Flash

- -

Você pode utilizar Flash para reproduzir um vídeo no formato Flash caso o elemento {{ HTMLElement("video") }} não seja suportado:

- -
<video src="video.ogv" controls>
-    <object data="flvplayer.swf" type="application/x-shockwave-flash">
-      <param value="flvplayer.swf" name="movie"/>
-    </object>
-</video>
-
- -

Note que você não deve incluir classid na tag object para que outros navegadores além do Internet Explorer sejam compatíveis.

- -

Reproduzindo vídeos em Ogg usando uma applet Java

- -

Existe uma applet Java chamada Cortado 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:

- -
<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>
-
- -

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.

- -

{{ h1_gecko_minversion("Error handling", "2.0") }}

- -

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 error ser enviado ao elemento media, ele é enviado ao elemento filho {{ HTMLElement("source") }} correspondente às fontes em que ocorreram o erro.

- -

Isso permite que você detecte que fonte falhou, o que pode ser útil. Considere esse código 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>
- -

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 error 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.

- -

Detectando quando nenhuma fonte foi carregada

- -

Para detectar que todos os elementos filhos {{ HTMLElement("source") }} falharam, confira os valores do atributo networkState do elemento media. Se esse valor for HTMLMediaElement.NETWORK_NO_SOURCE, você saberá que todas as fontes falharam o carregamento.

- -

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.

- -

Veja também

- - - -

{{ HTML5ArticleTOC() }}

- -
{{ 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" }) }}
-- cgit v1.2.3-54-g00ecf