Markdown conversion for pt-BR - Replace - HTML section ⚠️ Do not squash ⚠️

files/pt-br/web/html/block-level_elements/index.md

@@ -0,0 +1,120 @@
+---
+title: Elementos block-level
+slug: Web/HTML/Block-level_elements
+tags:
+  - Desenvolvimento
+  - Guía
+  - HTML
+  - HTML5
+  - Iniciante
+  - Web
+translation_of: Web/HTML/Block-level_elements
+original_slug: Web/HTML/Elementos_block-level
+---
+Elementos HTML **(Linguagem de marcação de hipertexto)** historicamente foram categorizados como “nível de bloco” ou [elementos “em linha”](/pt-BR/docs/HTML/Inline_elements). 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
+
+```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
+
+```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](/pt-BR/docs/HTML/Content_categories). Enquanto a categoria "em linha" corresponde aproximadamente à categoria de [conteúdo de frases](/pt-BR/docs/HTML/Content_categories#Phrasing_content), 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](/pt-BR/docs/HTML/Content_categories#Flow_content), em HTML5. Existem também categorias adicionais, por exemplo [conteúdo interativo](/pt-BR/docs/Web/Guide/HTML/Content_categories#Interactive_content).
+
+## 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
+
+- [Elementos Emlinha](/pt-BR/docs/Web/HTML/Inline_elements "en/HTML/Inline_elements")

files/pt-br/web/html/cors_enabled_image/index.md

@@ -0,0 +1,64 @@
+---
+title: CORS_habilitar_imagens
+slug: Web/HTML/CORS_enabled_image
+tags:
+  - CORS
+  - Canvas problems
+  - Crossorigin
+  - Segurança do Canvas
+translation_of: Web/HTML/CORS_enabled_image
+original_slug: Web/HTML/CORS_imagens_habilitadas
+---
+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](/en/HTML/CORS_settings_attributes "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](https://github.com/h5bp/server-configs-apache/blob/fc379c45f52a09dd41279dbf4e60ae281110a5b0/src/.htaccess#L36-L53) para aproximadamente responder com este cabeçalho de resposta.
+
+```xml
+<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](/pt-BR/docs/Web/Guide/API/DOM/Storage)
+
+```js
+var img = new Image,
+    canvas = document.createElement("canvas"),
+    ctx = canvas.getContext("2d"),
+    src = "http://example.com/image"; // insert image url here
+
+img.crossOrigin = "Anonymous";
+
+img.onload = function() {
+    canvas.width = img.width;
+    canvas.height = img.height;
+    ctx.drawImage( img, 0, 0 );
+    localStorage.setItem( "savedImageData", canvas.toDataURL("image/png") );
+}
+img.src = src;
+// make sure the load event fires for cached images too
+if ( img.complete || img.complete === undefined ) {
+    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
+    img.src = src;
+}
+```
+
+## Veja também
+
+- [Usando imagens de Cross-domínio em WebGL e Chrome 13](http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html)
+- [Especificações HTML - o atributo crossorigin](http://whatwg.org/html#attr-img-crossorigin)