From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/web/html/applying_color/index.html | 488 +++++++ .../web/html/canvas/a_basic_ray-caster/index.html | 76 ++ files/pt-br/web/html/canvas/index.html | 134 ++ .../index.html | 68 + .../web/html/cors_imagens_habilitadas/index.html | 113 ++ .../index.html" | 135 ++ files/pt-br/web/html/element/a/index.html | 486 +++++++ files/pt-br/web/html/element/abbr/index.html | 155 +++ files/pt-br/web/html/element/acronym/index.html | 109 ++ files/pt-br/web/html/element/address/index.html | 163 +++ files/pt-br/web/html/element/applet/index.html | 133 ++ files/pt-br/web/html/element/area/index.html | 196 +++ files/pt-br/web/html/element/article/index.html | 124 ++ files/pt-br/web/html/element/aside/index.html | 129 ++ files/pt-br/web/html/element/audio/index.html | 301 +++++ files/pt-br/web/html/element/b/index.html | 120 ++ files/pt-br/web/html/element/base/index.html | 138 ++ files/pt-br/web/html/element/bdi/index.html | 118 ++ files/pt-br/web/html/element/bdo/index.html | 106 ++ files/pt-br/web/html/element/big/index.html | 80 ++ files/pt-br/web/html/element/blink/index.html | 102 ++ files/pt-br/web/html/element/blockquote/index.html | 153 +++ files/pt-br/web/html/element/body/index.html | 232 ++++ files/pt-br/web/html/element/br/index.html | 153 +++ files/pt-br/web/html/element/button/index.html | 321 +++++ files/pt-br/web/html/element/canvas/index.html | 130 ++ files/pt-br/web/html/element/caption/index.html | 196 +++ files/pt-br/web/html/element/center/index.html | 69 + files/pt-br/web/html/element/cite/index.html | 149 +++ files/pt-br/web/html/element/code/index.html | 108 ++ files/pt-br/web/html/element/col/index.html | 230 ++++ files/pt-br/web/html/element/command/index.html | 129 ++ .../web/html/element/conte\303\272do/index.html" | 101 ++ files/pt-br/web/html/element/data/index.html | 104 ++ files/pt-br/web/html/element/datalist/index.html | 121 ++ files/pt-br/web/html/element/dd/index.html | 112 ++ files/pt-br/web/html/element/del/index.html | 88 ++ files/pt-br/web/html/element/details/index.html | 114 ++ files/pt-br/web/html/element/dfn/index.html | 141 ++ files/pt-br/web/html/element/dialog/index.html | 167 +++ files/pt-br/web/html/element/dir/index.html | 64 + files/pt-br/web/html/element/div/index.html | 121 ++ files/pt-br/web/html/element/dl/index.html | 180 +++ files/pt-br/web/html/element/dt/index.html | 111 ++ files/pt-br/web/html/element/em/index.html | 117 ++ files/pt-br/web/html/element/embed/index.html | 128 ++ files/pt-br/web/html/element/fieldset/index.html | 407 ++++++ files/pt-br/web/html/element/figcaption/index.html | 90 ++ files/pt-br/web/html/element/figura/index.html | 193 +++ files/pt-br/web/html/element/footer/index.html | 114 ++ files/pt-br/web/html/element/form/index.html | 215 ++++ files/pt-br/web/html/element/head/index.html | 153 +++ files/pt-br/web/html/element/header/index.html | 119 ++ .../web/html/element/heading_elements/index.html | 168 +++ files/pt-br/web/html/element/hgroup/index.html | 125 ++ files/pt-br/web/html/element/hr/index.html | 149 +++ files/pt-br/web/html/element/html/index.html | 139 ++ files/pt-br/web/html/element/i/index.html | 158 +++ files/pt-br/web/html/element/iframe/index.html | 178 +++ files/pt-br/web/html/element/img/index.html | 307 +++++ files/pt-br/web/html/element/index.html | 105 ++ .../pt-br/web/html/element/input/button/index.html | 353 +++++ .../web/html/element/input/checkbox/index.html | 299 +++++ files/pt-br/web/html/element/input/data/index.html | 430 +++++++ files/pt-br/web/html/element/input/index.html | 1360 ++++++++++++++++++++ .../web/html/element/input/password/index.html | 232 ++++ .../pt-br/web/html/element/input/range/index.html | 390 ++++++ files/pt-br/web/html/element/input/time/index.html | 458 +++++++ files/pt-br/web/html/element/ins/index.html | 87 ++ files/pt-br/web/html/element/label/index.html | 143 ++ files/pt-br/web/html/element/legend/index.html | 126 ++ files/pt-br/web/html/element/li/index.html | 177 +++ files/pt-br/web/html/element/link/index.html | 330 +++++ files/pt-br/web/html/element/main/index.html | 152 +++ files/pt-br/web/html/element/map/index.html | 136 ++ files/pt-br/web/html/element/mark/index.html | 137 ++ files/pt-br/web/html/element/marquee/index.html | 102 ++ files/pt-br/web/html/element/meta/index.html | 538 ++++++++ files/pt-br/web/html/element/meter/index.html | 92 ++ files/pt-br/web/html/element/nav/index.html | 133 ++ files/pt-br/web/html/element/nobr/index.html | 26 + files/pt-br/web/html/element/noscript/index.html | 128 ++ files/pt-br/web/html/element/ol/index.html | 261 ++++ files/pt-br/web/html/element/optgroup/index.html | 131 ++ files/pt-br/web/html/element/option/index.html | 122 ++ files/pt-br/web/html/element/output/index.html | 123 ++ files/pt-br/web/html/element/p/index.html | 152 +++ files/pt-br/web/html/element/picture/index.html | 148 +++ files/pt-br/web/html/element/pre/index.html | 191 +++ files/pt-br/web/html/element/progress/index.html | 83 ++ files/pt-br/web/html/element/q/index.html | 116 ++ files/pt-br/web/html/element/rt/index.html | 96 ++ files/pt-br/web/html/element/ruby/index.html | 124 ++ files/pt-br/web/html/element/s/index.html | 127 ++ files/pt-br/web/html/element/script/index.html | 297 +++++ files/pt-br/web/html/element/section/index.html | 168 +++ files/pt-br/web/html/element/select/index.html | 180 +++ files/pt-br/web/html/element/source/index.html | 135 ++ files/pt-br/web/html/element/span/index.html | 106 ++ files/pt-br/web/html/element/strong/index.html | 170 +++ files/pt-br/web/html/element/style/index.html | 177 +++ files/pt-br/web/html/element/summary/index.html | 110 ++ files/pt-br/web/html/element/table/index.html | 447 +++++++ files/pt-br/web/html/element/template/index.html | 198 +++ files/pt-br/web/html/element/textarea/index.html | 262 ++++ files/pt-br/web/html/element/tfoot/index.html | 203 +++ files/pt-br/web/html/element/th/index.html | 234 ++++ files/pt-br/web/html/element/time/index.html | 145 +++ files/pt-br/web/html/element/title/index.html | 93 ++ files/pt-br/web/html/element/track/index.html | 162 +++ files/pt-br/web/html/element/ul/index.html | 186 +++ files/pt-br/web/html/element/var/index.html | 59 + files/pt-br/web/html/element/video/index.html | 348 +++++ files/pt-br/web/html/element/wbr/index.html | 106 ++ .../web/html/elementos_block-level/index.html | 126 ++ files/pt-br/web/html/favicon/index.html | 32 + .../web/html/formatos_midia_suportados/index.html | 525 ++++++++ .../html/global_attributes/accesskey/index.html | 141 ++ .../global_attributes/autocapitalize/index.html | 49 + .../web/html/global_attributes/class/index.html | 108 ++ .../global_attributes/contenteditable/index.html | 77 ++ .../html/global_attributes/data-_star_/index.html | 116 ++ .../web/html/global_attributes/hidden/index.html | 111 ++ .../pt-br/web/html/global_attributes/id/index.html | 115 ++ files/pt-br/web/html/global_attributes/index.html | 479 +++++++ .../web/html/global_attributes/itemprop/index.html | 513 ++++++++ .../web/html/global_attributes/lang/index.html | 89 ++ .../web/html/global_attributes/tabindex/index.html | 127 ++ .../web/html/global_attributes/title/index.html | 139 ++ files/pt-br/web/html/html5/index.html | 299 +++++ .../html/html5/introduction_to_html5/index.html | 23 + files/pt-br/web/html/index.html | 118 ++ files/pt-br/web/html/inline_elemente/index.html | 29 + files/pt-br/web/html/microformatos/index.html | 444 +++++++ .../index.html | 23 + files/pt-br/web/html/preloading_content/index.html | 239 ++++ .../html/quirks_mode_and_standards_mode/index.html | 55 + files/pt-br/web/html/referenciahtml/index.html | 25 + .../html/using_html5_audio_and_video/index.html | 239 ++++ .../html/using_the_application_cache/index.html | 392 ++++++ 140 files changed, 25555 insertions(+) create mode 100644 files/pt-br/web/html/applying_color/index.html create mode 100644 files/pt-br/web/html/canvas/a_basic_ray-caster/index.html create mode 100644 files/pt-br/web/html/canvas/index.html create mode 100644 files/pt-br/web/html/controlando_verificacao_ortografica_em_formularios_html/index.html create mode 100644 files/pt-br/web/html/cors_imagens_habilitadas/index.html create mode 100644 "files/pt-br/web/html/dicas_para_criar_p\303\241ginas_html_de_carregamento_r\303\241pido/index.html" create mode 100644 files/pt-br/web/html/element/a/index.html create mode 100644 files/pt-br/web/html/element/abbr/index.html create mode 100644 files/pt-br/web/html/element/acronym/index.html create mode 100644 files/pt-br/web/html/element/address/index.html create mode 100644 files/pt-br/web/html/element/applet/index.html create mode 100644 files/pt-br/web/html/element/area/index.html create mode 100644 files/pt-br/web/html/element/article/index.html create mode 100644 files/pt-br/web/html/element/aside/index.html create mode 100644 files/pt-br/web/html/element/audio/index.html create mode 100644 files/pt-br/web/html/element/b/index.html create mode 100644 files/pt-br/web/html/element/base/index.html create mode 100644 files/pt-br/web/html/element/bdi/index.html create mode 100644 files/pt-br/web/html/element/bdo/index.html create mode 100644 files/pt-br/web/html/element/big/index.html create mode 100644 files/pt-br/web/html/element/blink/index.html create mode 100644 files/pt-br/web/html/element/blockquote/index.html create mode 100644 files/pt-br/web/html/element/body/index.html create mode 100644 files/pt-br/web/html/element/br/index.html create mode 100644 files/pt-br/web/html/element/button/index.html create mode 100644 files/pt-br/web/html/element/canvas/index.html create mode 100644 files/pt-br/web/html/element/caption/index.html create mode 100644 files/pt-br/web/html/element/center/index.html create mode 100644 files/pt-br/web/html/element/cite/index.html create mode 100644 files/pt-br/web/html/element/code/index.html create mode 100644 files/pt-br/web/html/element/col/index.html create mode 100644 files/pt-br/web/html/element/command/index.html create mode 100644 "files/pt-br/web/html/element/conte\303\272do/index.html" create mode 100644 files/pt-br/web/html/element/data/index.html create mode 100644 files/pt-br/web/html/element/datalist/index.html create mode 100644 files/pt-br/web/html/element/dd/index.html create mode 100644 files/pt-br/web/html/element/del/index.html create mode 100644 files/pt-br/web/html/element/details/index.html create mode 100644 files/pt-br/web/html/element/dfn/index.html create mode 100644 files/pt-br/web/html/element/dialog/index.html create mode 100644 files/pt-br/web/html/element/dir/index.html create mode 100644 files/pt-br/web/html/element/div/index.html create mode 100644 files/pt-br/web/html/element/dl/index.html create mode 100644 files/pt-br/web/html/element/dt/index.html create mode 100644 files/pt-br/web/html/element/em/index.html create mode 100644 files/pt-br/web/html/element/embed/index.html create mode 100644 files/pt-br/web/html/element/fieldset/index.html create mode 100644 files/pt-br/web/html/element/figcaption/index.html create mode 100644 files/pt-br/web/html/element/figura/index.html create mode 100644 files/pt-br/web/html/element/footer/index.html create mode 100644 files/pt-br/web/html/element/form/index.html create mode 100644 files/pt-br/web/html/element/head/index.html create mode 100644 files/pt-br/web/html/element/header/index.html create mode 100644 files/pt-br/web/html/element/heading_elements/index.html create mode 100644 files/pt-br/web/html/element/hgroup/index.html create mode 100644 files/pt-br/web/html/element/hr/index.html create mode 100644 files/pt-br/web/html/element/html/index.html create mode 100644 files/pt-br/web/html/element/i/index.html create mode 100644 files/pt-br/web/html/element/iframe/index.html create mode 100644 files/pt-br/web/html/element/img/index.html create mode 100644 files/pt-br/web/html/element/index.html create mode 100644 files/pt-br/web/html/element/input/button/index.html create mode 100644 files/pt-br/web/html/element/input/checkbox/index.html create mode 100644 files/pt-br/web/html/element/input/data/index.html create mode 100644 files/pt-br/web/html/element/input/index.html create mode 100644 files/pt-br/web/html/element/input/password/index.html create mode 100644 files/pt-br/web/html/element/input/range/index.html create mode 100644 files/pt-br/web/html/element/input/time/index.html create mode 100644 files/pt-br/web/html/element/ins/index.html create mode 100644 files/pt-br/web/html/element/label/index.html create mode 100644 files/pt-br/web/html/element/legend/index.html create mode 100644 files/pt-br/web/html/element/li/index.html create mode 100644 files/pt-br/web/html/element/link/index.html create mode 100644 files/pt-br/web/html/element/main/index.html create mode 100644 files/pt-br/web/html/element/map/index.html create mode 100644 files/pt-br/web/html/element/mark/index.html create mode 100644 files/pt-br/web/html/element/marquee/index.html create mode 100644 files/pt-br/web/html/element/meta/index.html create mode 100644 files/pt-br/web/html/element/meter/index.html create mode 100644 files/pt-br/web/html/element/nav/index.html create mode 100644 files/pt-br/web/html/element/nobr/index.html create mode 100644 files/pt-br/web/html/element/noscript/index.html create mode 100644 files/pt-br/web/html/element/ol/index.html create mode 100644 files/pt-br/web/html/element/optgroup/index.html create mode 100644 files/pt-br/web/html/element/option/index.html create mode 100644 files/pt-br/web/html/element/output/index.html create mode 100644 files/pt-br/web/html/element/p/index.html create mode 100644 files/pt-br/web/html/element/picture/index.html create mode 100644 files/pt-br/web/html/element/pre/index.html create mode 100644 files/pt-br/web/html/element/progress/index.html create mode 100644 files/pt-br/web/html/element/q/index.html create mode 100644 files/pt-br/web/html/element/rt/index.html create mode 100644 files/pt-br/web/html/element/ruby/index.html create mode 100644 files/pt-br/web/html/element/s/index.html create mode 100644 files/pt-br/web/html/element/script/index.html create mode 100644 files/pt-br/web/html/element/section/index.html create mode 100644 files/pt-br/web/html/element/select/index.html create mode 100644 files/pt-br/web/html/element/source/index.html create mode 100644 files/pt-br/web/html/element/span/index.html create mode 100644 files/pt-br/web/html/element/strong/index.html create mode 100644 files/pt-br/web/html/element/style/index.html create mode 100644 files/pt-br/web/html/element/summary/index.html create mode 100644 files/pt-br/web/html/element/table/index.html create mode 100644 files/pt-br/web/html/element/template/index.html create mode 100644 files/pt-br/web/html/element/textarea/index.html create mode 100644 files/pt-br/web/html/element/tfoot/index.html create mode 100644 files/pt-br/web/html/element/th/index.html create mode 100644 files/pt-br/web/html/element/time/index.html create mode 100644 files/pt-br/web/html/element/title/index.html create mode 100644 files/pt-br/web/html/element/track/index.html create mode 100644 files/pt-br/web/html/element/ul/index.html create mode 100644 files/pt-br/web/html/element/var/index.html create mode 100644 files/pt-br/web/html/element/video/index.html create mode 100644 files/pt-br/web/html/element/wbr/index.html create mode 100644 files/pt-br/web/html/elementos_block-level/index.html create mode 100644 files/pt-br/web/html/favicon/index.html create mode 100644 files/pt-br/web/html/formatos_midia_suportados/index.html create mode 100644 files/pt-br/web/html/global_attributes/accesskey/index.html create mode 100644 files/pt-br/web/html/global_attributes/autocapitalize/index.html create mode 100644 files/pt-br/web/html/global_attributes/class/index.html create mode 100644 files/pt-br/web/html/global_attributes/contenteditable/index.html create mode 100644 files/pt-br/web/html/global_attributes/data-_star_/index.html create mode 100644 files/pt-br/web/html/global_attributes/hidden/index.html create mode 100644 files/pt-br/web/html/global_attributes/id/index.html create mode 100644 files/pt-br/web/html/global_attributes/index.html create mode 100644 files/pt-br/web/html/global_attributes/itemprop/index.html create mode 100644 files/pt-br/web/html/global_attributes/lang/index.html create mode 100644 files/pt-br/web/html/global_attributes/tabindex/index.html create mode 100644 files/pt-br/web/html/global_attributes/title/index.html create mode 100644 files/pt-br/web/html/html5/index.html create mode 100644 files/pt-br/web/html/html5/introduction_to_html5/index.html create mode 100644 files/pt-br/web/html/index.html create mode 100644 files/pt-br/web/html/inline_elemente/index.html create mode 100644 files/pt-br/web/html/microformatos/index.html create mode 100644 files/pt-br/web/html/optimizing_your_pages_for_speculative_parsing/index.html create mode 100644 files/pt-br/web/html/preloading_content/index.html create mode 100644 files/pt-br/web/html/quirks_mode_and_standards_mode/index.html create mode 100644 files/pt-br/web/html/referenciahtml/index.html create mode 100644 files/pt-br/web/html/using_html5_audio_and_video/index.html create mode 100644 files/pt-br/web/html/using_the_application_cache/index.html (limited to 'files/pt-br/web/html') diff --git a/files/pt-br/web/html/applying_color/index.html b/files/pt-br/web/html/applying_color/index.html new file mode 100644 index 0000000000..1cd0881566 --- /dev/null +++ b/files/pt-br/web/html/applying_color/index.html @@ -0,0 +1,488 @@ +--- +title: Applying color to HTML elements using CSS +slug: Web/HTML/Applying_color +translation_of: Web/HTML/Applying_color +--- +
{{HTMLRef}}
+ +

O uso de cores é uma forma fundamental da expressão humana. Crianças experimentam com cores antes mesmo de ter a destreza manual para desenhar. Talvez por isso, a cor é uma das primeiras coisas com a qual as pessoas querem experimentar quando estão aprendendo a desenvolver websites. Com CSS, há muitas maneiras de acrescentar cor nos seus elementos HTML para criar exatamente o visual que você quiser. Esse artigo é um preparativo introduzindo cada uma das formas que a cor CSS pode ser usada no HTML.

+ +

Felizmente, adicionar cor no seu HTML é muito fácil, e você pode colorir praticamente qualquer coisa.

+ +

Vamos passar pela maior parte de tudo que você precisará saber quando usar cor, incluindo uma {{anch("Things that can have color", "lista do que pode ser colorido e quais propriedades CSS estão envolvidas")}}, {{anch("How to describe a color", "como descrever uma cor")}}, e como de fato {{anch("Using color", "usar cores em folhas de estilo e scripts")}}. Também daremos uma olhada em como {{anch("Letting the user picka color", "permitir que o usuário escolha uma cor")}}.

+ +

Então, encerraremos o assunto com uma breve discussão de como {{anch("Using color wisely", "usar cores sabiamente")}}: como selecionar cores apropriadas, tendo em mente as necessidades de pessoas com diferentes capacidades visuais.

+ +

Coisas que podem ter cor

+ +

No nível dos elementos, tudo no HTML pode ter uma cor aplicada. Ao invés, vamos pensar nos tipos de coisas que são desenhadas nos elementos, como texto e bordas e assim por diante. Para cada um deles, veremos uma lista das propriedades CSS que aplicam cor neles.

+ +

Em um nível fundamental, a propriedade {{cssxref("color")}} define a cor do primeiro plano do conteúdo de um elemento HTML. Já a propriedade {{cssxref("background-color")}} define a cor do plano de fundo de um elemento HTML. Essas propriedades podem ser usadas em praticamente qualquer elemento.

+ +

Texto

+ +

Sempre que um elemento é renderizado, essas propriedades são usadas para determinar a cor do texto, seu plano de fundo, e quaisquer decorações no texto.

+ +
+
{{cssxref("color")}}
+
A cor usada para desenhar o texto e quaisquer decorações de texto (como a adição de sublinhados ou tachados e assim por diante).
+
{{cssxref("background-color")}}
+
A cor do plano de fundo do texto.
+
{{cssxref("text-shadow")}}
+
Configura um efeito de sombra aplicado ao texto. Entre as opções para os aspectos da sombra, está a cor base da sombra (que será então desfocada e mesclada com o plano de fundo, com base nos outros parâmetros). Veja {{SectionOnPage("/en-US/docs/Learn/CSS/Styling_text/Fundamentals", "Sombras projetadas em texto")}} para descobrir mais.
+
{{cssxref("text-decoration-color")}}
+
Por padrão, decorações de texto (como sublinhados, tachados, etc) usam a propriedade color para definir suas cores. No entanto, você pode sobrepor esse comportamento e usar uma cor diferente para elas com a propriedade text-decoration-color.
+
{{cssxref("text-emphasis-color")}}
+
A cor usada para desenhar símbolos de ênfase adjacentes a cada caractere no texto. Isso é usado primariamente para desenhar texto para idiomas do Leste Asiático. 
+
{{cssxref("caret-color")}}
+
A cor usada para desenhar o {{Glossary("caret")}} (às vezes referido como o cursor de entrada de texto) dentro do elemento. Isso é útil apenas em elementos editáveis, como {{HTMLElement("input")}} e {{HTMLElement("textarea")}} ou elementos cujo atributo HTML {{htmlattrxref("contenteditable")}} está definido.
+
+ +

Caixas

+ +

Todo elemento é uma caixa com algum tipo de conteúdo, e tem um plano de fundo e uma borda em adição a qualquer conteúdo que a caixa possa ter.

+ +
+
{{anch("Borders")}}
+
Veja a seção {{anch("Borders")}} com uma lista das propriedades CSS que você pode usar para configurar as cores das bordas de uma caixa.
+
{{cssxref("background-color")}}
+
A cor de plano de fundo para usar em áreas do elemento que não têm conteúdo de primeiro plano.
+
{{cssxref("column-rule-color")}}
+
A cor utilizada para desenhar a linha que separa colunas de texto.
+
{{cssxref("outline-color")}}
+
A cor utilizada para desenhar um contorno por fora do elemento. Esse contorno é diferente da borda no sentido de que não há um espaço reservado para ele no documento (portanto, pode sobrepor outros conteúdos). Isso é geralmente usado como um indicador de foco, para mostrar qual elemento receberá eventos de input (entrada de informações).
+
+ +

Bordas

+ +

Qualquer elemento pode ter uma borda desenhada em torno dele. Uma borda básica de elemento é uma linha desenhada em torno dos cantos do conteúdo do elemento. Veja {{SectionOnPage("/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model", "Box properties")}} para aprender sobre a relação entre elementos e suas bordas, e o artigo Estilizando bordas usando CSS para descobrir mais sobre como aplicar estilo em bordas.

+ +

Você pode usar a propriedade abreviada de {{cssxref("border")}}, que permite configurar tudo sobre a borda de uma só vez (incluindo características que não são a cor, como sua largura, estilo (sólido, tracejado, etc), e assim por diante).

+ +
+
{{cssxref("border-color")}}
+
Especifica uma única cor para todos os lados da borda do elemento.
+
{{cssxref("border-left-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, e {{cssxref("border-bottom-color")}}
+
Permite definir a cor do lado correspondente da borda do elemento.
+
{{cssxref("border-block-start-color")}} e {{cssxref("border-block-end-color")}}
+
Com esses, você pode definir a cor usada para desenhar as bordas mais próximas do início e do fim do bloco que essa borda rodeia. Em um modo de escrita da esquerda para a direita (como o português é escrito), o início da borda do bloco é o topo e o final é a base. Isso difere do início e final em linha, que são as bordas esquerda e direita (correspondendo a onde cada linha de texto na caixa começa e termina).
+
{{cssxref("border-inline-start-color")}} e {{cssxref("border-inline-end-color")}}
+
Isso permite que você defina cor para as beiradas da borda mais próxima ao início e fim do começo das linhas de texto dentro da caixa. O lado que será definido depende das propriedades {{cssxref("writing-mode")}}, {{cssxref("direction")}}, e {{cssxref("text-orientation")}}, que normalmente (mas não sempre) são usadas para ajustar a direção do texto com base no idioma exibido. Por exemplo, se o texto da caixa está sendo renderizado da direita para a esquerda, então o border-inline-start-color é aplicado ao lado direito da borda.
+
+ +

Outras formas de usar cor

+ +

CSS não é a única tecnologia web que suporta cor. Há tecnologias de gráficos disponíveis na web que também suportam cor. 

+ +
+
A Canvas API HTML
+
Permite desenhar gráficos 2D rasterizados em um elemento {{HTMLElement("canvas")}}. Veja nosso tutorial Canvas para descobrir mais.
+
SVG (Scalable Vector Graphics)
+
Permite desenhar imagens usando comandos que criam formas, padrões e linhas específicas para produzir uma figura. Comandos SVG são formatados como XML, e podem ser embedados diretamente em uma página web ou colocados na página usando o elemento {{HTMLElement("img")}}, como qualquer outro tipo de imagem.
+
WebGL
+
A Web Graphics Library é uma API OpenGL e ES-based para desenhar gráficos 2D e 3D de alta performance na web. Veja Aprenda WebGL para gráficos 2D e 3D para descobrir mais.
+
+ +

Como descrever uma cor

+ +

Para representar uma cor no CSS, você precisa encontrar uma forma de traduzir o conceito análogo de "cor" em uma forma digital que um computador possa usar. Isso é normalmente feito decompondo a cor em componentes, como a quantidade de cada grupo de cores primárias que se misturam, ou quão brilhante será a cor. Assim,  há diversas formas de descrever uma cor em CSS. 

+ +

Para uma discussão mais detalhada sobre cada tipo de valor de cor, veja a referência para a unidade CSS {{cssxref("<color>")}}.

+ +

Palavras-chave

+ +

Um conjunto de nomes padrão de cores foi definido, permitindo que você use essas palavras-chave em vez de representações numéricas de cores, se você preferir isso e houver uma palavra-chave que represente a exata cor que você quer usar. Palavras-chave de cores incluem as cores primárias e secundárias padrão (como red, blue, ou orange), tons de cinza (de black a white, incluindo cores como darkgray e lightgrey), e uma variedade de outras cores mescladas como lightseagreen, cornflowerblue, e rebeccapurple.

+ +

Veja {{SectionOnPage("/en-US/docs/Web/CSS/color_value", "Palavras-chave de cor", "code")}} para uma lista de todas as palavras-chave de cores disponíveis.

+ +

Valores RGB

+ +

Há três formas de representar uma cor RGB em CSS. 

+ +

Notação hexadecimal em string

+ +

A notação em string hexadecimal representa uma cor usando dígitos hexadecimais correspondentes a cada um dos componentes da cor (vermelho, verde e azul). Um quarto componente também pode ser incluído: o canal alpha (ou opacidade). Cada componente da cor pode ser representado por um número entre 0 e 255 (0x00 and 0xFF) ou, opcionalmente, por um número entre 0 e 15 (0x0 and 0xF). Todos os componentes devem ser especificados usando o mesmo número de dígitos. Se você usar a notação de um dígito, a cor final é computada usando cada dígito do componente duas vezes; ou seja, "#D" se torna "#DD" quando for desenhado.

+ +

Uma cor em notação hexadecimal em string sempre começa com o caractere "#". Depois, vêm os dígitos hexadecimais do código da cor. A string não diferencia maiúsculas de minúsculas.

+ +
+
"#rrggbb"
+
Especifica uma cor totalmente opaca cujo componente vermelho é o número hexadecimal 0xrr, o componente verde é 0xgg, e o componente azul é 0xbb.
+
"#rrggbbaa"
+
Especifica uma cor cujo componente vermelho é o número hexadecimal 0xrr, o componente verde é 0xgg, e o componente azul é 0xbb. O canal alpha é especificado por 0xaa; quanto mais baixo o seu valor, mais translúcida a cor se torna.
+
"#rgb"
+
Specifies a color whose red component is the hexadecimal number 0xrr, green component is 0xgg, and blue component is 0xbb.
+
"#rgba"
+
Especifica uma cor cujo componente vermelho é o número hexadecimal 0xrr, o componente verde é 0xgg, e o componente azul é 0xbb. O canal alpha é especificado por 0xaa; quanto mais baixo o seu valor, mais translúcida a cor se torna.
+
+ +

Por exemplo, você pode representar a cor opaca azul vibrante como "#0000ff" ou "#00f". Para torná-lo 25% opaco, você pode usar "#0000ff44" ou "#00f4".

+ +

Notação funcional RGB

+ +

A notação funcional RGB (Red/Green/Blue), como a notação em string hexadecimal, representa cores usando seus componentes vermelho, verde e azul (assim como, opcionalmente, um componente de canal alpha para opacidade). No entanto, ao invés de usar uma string, a cor é definida usando a função CSS {{cssxref("rgb()")}}. Essa função aceita como parâmetros de entrada os valores dos componentes vermelho, verde e azul e um quarto parâmetro opcional, o valor do canal alpha.

+ +

Valores válidos para cada um desses parâmetros são:

+ +
+
red, green, e blue
+
Cada um deve ser um valor {{cssxref("<integer>")}} (inteiro) entre 0 e 255 (incluso), ou uma {{cssxref("<percentage>")}} (porcentagem) de 0% a 100%.
+
alpha
+
O canal alpha é um número entre 0.0 (totalmente transparente) e 1.0 (totalmente opaco). Você pode também especificar uma porcentagem onde 0% é o mesmo que 0.0 e 100% é o mesmo que 1.0.
+
+ +

Por exemplo, um vermelho vivo que é 50% opaco pode ser representado como rgb(255, 0, 0, 0.5) ou rgb(100%, 0, 0, 50%).

+ +

Notação funcional HSL 

+ +

Designers e artistas frequentemente preferem trabalhar usando o método de cor {{interwiki("wikipedia", "HSL and HSV", "HSL")}} (Hue/Saturation/Luminosity, tradução: "Matiz/Saturação/Luminosidade"). Na web, cores HSL são representadas usando notação funcional HSL. O uso da função CSS hsl() é muito similar ao da função rgb().

+ +
+
HSL color cylinder +
Figura 1. Um cilindro de cor HSL. Hue (matiz) define a cor em si, com base na sua posição ao longo de um círculo que representa as cores do espectro visível. Saturation (saturação) é uma porcentagem que representa sua posição no caminho entre ser um tom de cinza ou ter a maior quantidade possível da matiz dada. Conforme o valor de Luminance ou Lightness (luminosidade) aumenta, a cor transiciona do mais escura possível até o mais clara possível (do preto ao branco). Imagem cortesia do usuário SharkD na Wikipedia, distribuída sob a licença CC BY-SA 3.0.
+
+
+ +

O valor do componente hue/matriz (H) de uma cor HSL é um ângulo partindo do vermelho e passando em círculo pelo amarelo, verde, ciano, azul e magenta (terminando de volta no vermelho em 360°) que identifica qual é a cor base. O valor pode ser especificado em qualquer unidade de {{cssxref("<angle>")}} (ângulo) suportada por CSS, incluindo graus (deg, de "degrees"), radianos (rad, de "radians"), grados (grad, de "gradians") ou revoluções (turn, de "turns"). Mas isso não controla quão vívida ou apagada, ou quão clara ou escura a cor é. 

+ +

O componente saturation/saturação (S) da cor especifica qual porcentagem da cor final é composta pela matiz especificada. O restante é definido pelo nível de cinza fornecido pelo componente luminance/luminosidade (L). 

+ +

Pense como se você fosse criar a cor perfeita de tinta:

+ +
    +
  1. Você começa com uma tinta de base que tenha a intensidade máxima possível de uma cor dada, como o azul mais intenso que pode ser representado pela tela do usuário. Esse é o componente hue/matiz (H): um valor que representa o ângulo no círculo de cor para a matiz vívida que queremos usar como base.
    2. +
  2. Então, seleciona uma tinta na escala de cinza que corresponde a quão clara você quer que a cor seja; essa é a luminance/luminosidade (L). Você quer que seja muito clara e quase branca, ou muito escura e perto do preto, ou algo no meio do caminho? Isso é especificado usando uma porcentagem, onde 0% é perfeitamente preto e 100% é perfeitamente branco (independente da saturação ou matiz). Os valores no meio são a área cinza.
    3. +
  3. Agora que você tem uma tinta cinza e uma cor perfeitamente vívida, você precisa misturar as duas. O componente saturation/saturação (S) da cor indica qual porcentagem da cor final deve ser composta dessa cor perfeitamente vívida. O resto da cor final é feito da tinta cinza que representa a saturação. 
    4. +
+ +

Você também pode opcionalmente incluir um canal alpha, para tornar a cor menos que 100% opaca.

+ +

Aqui estão alguns exemplos de cores na notação HSL: 

+ +
+ + +

{{EmbedLiveSample("hsl-swatches", 300, 260)}}

+
+ +
+

Note que quando você omite a unidade de medida da matiz, é considerado que ela está em graus/degrees (deg).

+
+ +

Usando cor

+ +

Agora que você sabe quais propriedades CSS existentes permitem que você aplique cor a elementos, e quais formatos pode usar para descrever cores, você pode unir ambos para começar a fazer uso delas. Como você pode ter visto na lista em {{anch("Things that can have color")}}, há muitas coisas que podem ser coloridas com CSS. Vejamos este tema por dois lados: usando cor dentro de uma {{Glossary("stylesheet")}}, e adicionando e mudando cor usando código {{Glossary("JavaScript")}} para alterar os estilos dos elementos.

+ +

Especificando cores em folhas de estilo

+ +

A forma mais fácil de aplicar cor a elementos—e a forma que você normalmente fará isso—é simplesmente especificar as cores no CSS que será utilizado para renderizar os elementos. Embora não usaremos cada uma das propriedades mencionadas anteriormente, veremos alguns exemplos. O conceito é o mesmo, onde quer que você aplique a cor.

+ +

Vejamos um exemplo, começando por analisar os resultados que queremos atingir: 

+ +
{{EmbedLiveSample("Specifying_colors_in_stylesheets", 650, 150)}}
+ +

HTML

+ +

O HTML responsável por criar o exemplo acima é mostrado aqui:

+ +
<div class="wrapper">
+  <div class="box boxLeft">
+    <p>
+      This is the first box.
+    </p>
+  </div>
+  <div class="box boxRight">
+    <p>
+      This is the second box.
+    </p>
+  </div>
+</div>
+ +

Esse exemplo é bastante simples, usando uma {{HTMLElement("div")}} para envolver o conteúdo, que consiste de mais duas <div>s, cada uma estilizada diferentemente com um único parágrafo ({{HTMLElement("p")}}) em cada caixa.

+ +

A mágica acontece, como sempre, no CSS; onde aplicamos a cor definirá o layout para o HTML acima.

+ +

CSS

+ +

Vejamos o CSS para criar os resultados acima, uma parte por vez, para que possamos revisar as partes interessantes uma a uma.

+ +
.wrapper {
+  width: 620px;
+  height: 110px;
+  margin: 0;
+  padding: 10px;
+  border: 6px solid mediumturquoise;
+}
+ +

A classe .wrapper é usada para designar estilos à {{HTMLElement("div")}} que envolve todo o resto do nosso conteúdo. Isso estabelece o tamanho do container usando {{cssxref("width")}} e {{cssxref("height")}}, bem como sua {{cssxref("margin")}} e {{cssxref("padding")}}.

+ +

Mais interessante para nossa discussão aqui é o uso da propriedade {{cssxref("border")}} para estabelecer uma borda em torno dos limites externos do elemento. Essa borda é uma linha sólida, com 6 pixels de largura, na cor mediumturquoise.

+ +

Nossas duas caixas coloridas compartilham algumas propriedades em comum, então agora estabelecemos uma classe, .box, que define essas propriedades compartilhadas:

+ +
.box {
+  width: 290px;
+  height: 100px;
+  margin: 0;
+  padding: 4px 6px;
+  font: 28px "Marker Felt", "Zapfino", cursive;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+ +

Em suma, .box estabelece o tamanho de cada caixa, assim como a configuração da fonte usada dentro dela. Também tiramos proveito de CSS Flexbox para centralizar facilmente os conteúdos de cada caixa. Nós habilitamos o modo flex usando {{cssxref("display", "display: flex")}}, e definimos {{cssxref("justify-content")}} e {{cssxref("align-items")}} como center. Então, podemos criar uma classe para cada uma das duas caixas que defina as propriedades que as diferem.

+ +
.boxLeft {
+  float: left;
+  background-color: rgb(245, 130, 130);
+  outline: 2px solid darkred;
+}
+ +

A classe .boxLeft—que, apropriadamente, é usada para estilizar a caixa na esquerda—flutua a caixa para a esquerda, e então configura as cores:

+ + + +
.boxRight {
+  float: right;
+  background-color: hsl(270deg, 50%, 75%);
+  outline: 4px dashed rgb(110, 20, 120);
+  color: hsl(0deg, 100%, 100%);
+  text-decoration: underline wavy #88ff88;
+  text-shadow: 2px 2px 3px black;
+}
+ +

Finalmente, a classe .boxRight descreve as propriedades únicas da caixa que está à direita. A caixa está definida para flutuar à direita, de modo que apareça ao lado da caixa anterior. Então, as seguintes cores são estabelecidas: 

+ + + +

Permitindo que o usuário escolha uma cor

+ +

Há muitas situações em que o seu website pode precisar permitir que o usuário selecione uma cor. Talvez você tenha uma interface de usuário customizável, ou você está implementando um app de desenho. Talvez você tenha texto editável e precise deixar o usuário escolher a cor do texto. Ou talvez seu app permita que o usuário defina cores para pastas ou itens. Apesar de historicamente ter sido necessário implementar o seu próprio {{interwiki("wikipedia", "color picker")}}, o HTML agora suporta que os navegadores forneçam um seletor de cor para seu uso através do elemento {{HTMLElement("input")}}, usando "color" como o valor do seu atributo  {{htmlattrxref("type", "input")}}.

+ +

O elemento <input> representa uma cor apenas na {{anch("Hexadecimal string notation", "notação hexadecimal em string")}} explicada acima.

+ +

Exemplo: Selecionando uma cor

+ +

Vamos observar um exemplo simples em que o usuário pode escolher uma cor. Conforme o usuário ajusta a cor, a borda em torno do exemplo muda para refletir a nova cor. Depois de terminar e escolher a cor final, o valor do seletor de cor é exibido. 

+ +

{{EmbedLiveSample("Example_Picking_a_color", 525, 275)}}

+ +
+

No macOS, você indica que finalizou a seleção da cor fechando a janela do seletor de cor.

+
+ +

HTML

+ +

O HTML aqui cria uma caixa que contém um controle do seletor de cor (com um rótulo criado usando o elemento {{HTMLElement("label")}}) e um elemento de parágrafo vazio ({{HTMLElement("p")}}) no qual será emitido um texto do nosso código JavaScript. 

+ +
<div id="box">
+  <label for="colorPicker">Border color:</label>
+  <input type="color" value="#8888ff" id="colorPicker">
+  <p id="output"></p>
+</div>
+ +

CSS

+ +

O CSS simplesmente estabelece um tamanho para a caixa e alguns estilos básicos para aparência. A borda também é estabelecida com 2 pixels de largura e uma cor que não vai permanecer, cortesia do JavaScript abaixo...

+ +
#box {
+  width: 500px;
+  height: 200px;
+  border: 2px solid rgb(245, 220, 225);
+  padding: 4px 6px;
+  font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif"
+}
+ +

JavaScript

+ +

O script aqui faz a tarefa de atualizar a cor inicial da borda para refletir o valor do seletor de cor. Então, dois event handlers são adicionados para lidar com o input do elemento <input type="color">.

+ +
let colorPicker = document.getElementById("colorPicker");
+let box = document.getElementById("box");
+let output = document.getElementById("output");
+
+box.style.borderColor = colorPicker.value;
+
+colorPicker.addEventListener("input", function(event) {
+  box.style.borderColor = event.target.value;
+}, false);
+
+colorPicker.addEventListener("change", function(event) {
+  output.innerText = "Color set to " + colorPicker.value + ".";
+}, false);
+ +

O evento {{event("input")}} é enviado cada vez que o valor do elemento muda; isto é, cada vez que o usuário ajusta a cor no seletor. Cada vez que esse evento chega, nós configuramos a cor da borda da caixa para refletir o valor atual do seletor de cor. 

+ +

O evento {{event("change")}} é recebido quando o valor do seletor de cor é finalizado. Nós respondemos mudando o conteúdo do elemento <p> com o ID "output" para uma string que descreve a cor finalmente selecionada.

+ +

Usando cor com sabedoria

+ +

Fazer as escolhas certas ao selecionar cores ao criar um website pode ser um processo complicado, especialmente se você não tem uma boa base em arte, design ou pelo menos teoria básica da cor. A escolha incorreta de cor pode tornar seu site pouco atraente, ou pior, deixar o conteúdo ilegível devido a problemas com contraste ou cores conflitantes. Pior ainda, usar as cores incorretas pode tornar seu conteúdo completamente inutilizável por pessoas com certos problemas de visão, especialmente daltonismo. 

+ +

Encontrando as cores certas

+ +

Pensar nas cores corretas pode ser complicado, especialmente sem treinamento em arte ou design. Felizmente, há ferramentas disponíveis que podem te ajudar. Elas não podem substituir a ajuda de um bom designer para tomar essas decisões, mas podem definitivamente te ajudar a começar. 

+ +

Cor de base

+ +

O primeiro passo é escolher sua cor de base. Essa é a cor que de certa forma define seu website ou o assunto do site. Da mesma forma que associamos verde com a bebida {{interwiki("wikipedia", "Mountain Dew")}} e podemos relacionar a cor azul com o céu ou oceano, escolher uma cor base apropriada para representar seu site é um bom lugar para começar. Há muitas formas de selecionar uma cor base; algumas idéias incluem: 

+ + + +

When trying to decide upon a base color, you may find that browser extensions that let you select colors from web content can be particularly handy. Some of these are even specifically designed to help with this sort of work. For example, the web site ColorZilla offers an extension (Chrome / Firefox) that offers an eyedropper tool for picking colors from the web. It can also take averages of the colors of pixels in various sized areas or even a selected area of the page.

+ +
+

The advantage to averaging colors can be that often what looks like a solid color is actually a surprisingly varied number of related colors all used in concert, blending to create a desired effect. Picking just one of these pixels can result in getting a color that on its own looks very out of place.

+
+ +

Fleshing out the palette

+ +

Once you have decided on your base color, there are plenty of online tools that can help you build out a palette of appropriate colors to use along with your base color by applying color theory to your base color to determine appropriate added colors. Many of these tools also support viewing the colors filtered so you can see what they would look like to people with various forms of color blindness. See {{anch("Color and accessibility")}} for a brief explanation of why this matters.

+ +

A few examples (all free to use as of the time this list was last revised):

+ + + +

When designing your palette, be sure to keep in mind that in addition to the colors these tools typically generate, you'll probably also need to add some core neutral colors such as white (or nearly white), black (or nearly black), and some number of shades of gray.

+ +
+

Usually, you are far better off using the smallest number of colors possible. By using color to accentuate rather than adding color to everything on the page, you keep your content easy to read and the colors you do use have far more impact.

+
+ +

Color theory resources

+ +

A full review of color theory is beyond the scope of this article, but there are plenty of articles about color theory available, as well as courses you can find at nearby schools and universities. A couple of useful resources about color theory:

+ +
+
Color Science (Khan Academy in association with Pixar)
+
An online course which introduces concepts such as what color is, how it's percieved, and how to use colors to express ideas. Presented by Pixar artists and designers.
+
{{interwiki("wikipedia", "Color theory")}} on Wikipedia
+
Wikipedia's entry on color theory, which has a lot of great information from a technical perspective. It's not really a resource for helping you with the color sleection process, but is still full of useful information.
+
+ +

Color and accessibility

+ +

There are several ways color can be an {{Glossary("accessibility")}} problem. Improper or careless use of color can result in a web site or app that a percentage of your target audience may not be able to use adequately, resulting in lost traffic, lost business, and possibly even a public relations problem. So it's important to consider your use of color carefully.

+ +

You should do at least basic research into {{interwiki("wikipedia", "color blindness")}}. There are several kinds; the most common is red-green color blindness, which causes people to be unable to differentiate between the colors red and green. There are others, too, ranging from inabilities to tell the difference between certain colors to total inability to see color at all.

+ +
+

The most important rule: never use color as the only way to know something. If, for example, you indicate success or failure of an operation by changing the color of a shape from white to green for success and red for failure, users with red-green color-blindness won't be able to use your site properly. Instead, perhaps use both text and color together, so that everyone can understand what's happening.

+
+ +

For more information about color blindness, see the following articles:

+ + + +

Palette design example

+ +

Let's consider a quick example of selecting an appropriate color palette for a site. Imagine that you're building a web site for a new game that takes place on the planet Mars. So let's do a Google search for photos of Mars. Lots of good examples of Martian coloration there. We carefully avoid the mockups and the photos from movies. And we decide to use a photo taken by one of the Mars landers humanity has parked on the surface over the last few decades, since the game takes place on the planet's surface. We use a color picker tool to select a sample of the color we choose.

+ +

Using an eyedropper tool, we identify a color we like and determine that the color in question is #D79C7A, which is an appropriate rusty orange-red color that's so stereotypical of the Martian surface.

+ +

Having selected our base color, we need to build out our palette. We decide to use Paletteon to come up with the other colors we need. Upon opening Paletton, we see:

+ +

Right after loading Paletton.

+ +

Next, we enter our color's hex code (D79C7A) into the "Base RGB" box at the bottom-left corner of the tool:

+ +

After entering base color

+ +

We now see a monochromatic palette based on the color we picked from the Mars photo. If you need a lot of related colors for some reason, those are likely to be good ones. But what we really want is an accent color. Something that will pop along side the base color. To find that, we click the "add complementary" toggle underneath the menu that lets you select the palette type (currently "Monochromatic"). Paletton computes an appropriate accent color; clicking on the accent color down in the bottom-right corner tells us that this color is #508D7C.

+ +

Now with complementary colors included.

+ +

If you're unhappy with the color that's proposed to you, you can change the color scheme, to see if you find something you like better. For example, if we don't like the proposed greenish-blue color, we can click the Triad color scheme icon, which presents us with the following:

+ +

Triad color scheme selected

+ +

That greyish blue in the top-right looks pretty good. Clicking on it, we find that it's #556E8D. That would be used as the accent color, to be used sparingly to make things stand out, such as in headlines or in the highlighting of tabs or other indicators on the site:

+ +

Triad color scheme selected

+ +

Now we have our base color and our accent. On top of that, we have a few complementary shades of each, just in case we need them for gradients and the like. The colors can then be exported in a number of formats so you can make use of them.

+ +

Once you have these colors, you will probably still need to select appropriate neutral colors. Common design practice is to try to find the sweet spot where there's just enough contrast that the text is crisp and readable but not enough contrast to become harsh for the eyes. It's easy to go too far in one way or another so be sure to get feedback on your colors once you've selected them and have examples of them in use available. If the contrast is too low, your text will tend to be washed out by the background, leaving it unreadable, but if your contrast is too high, the user may find your site garish and unpleasant to look at.

+ +

See also

+ + diff --git a/files/pt-br/web/html/canvas/a_basic_ray-caster/index.html b/files/pt-br/web/html/canvas/a_basic_ray-caster/index.html new file mode 100644 index 0000000000..ca188eb6f9 --- /dev/null +++ b/files/pt-br/web/html/canvas/a_basic_ray-caster/index.html @@ -0,0 +1,76 @@ +--- +title: A basic ray-caster +slug: Web/HTML/Canvas/A_basic_ray-caster +translation_of: Web/API/Canvas_API/A_basic_ray-caster +--- +
{{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 new file mode 100644 index 0000000000..821909e726 --- /dev/null +++ b/files/pt-br/web/html/canvas/index.html @@ -0,0 +1,134 @@ +--- +title: Canvas +slug: Web/HTML/Canvas +tags: + - API + - Canvas + - Referência(2) +translation_of: Web/API/Canvas_API +--- +

{{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 new file mode 100644 index 0000000000..131257026a --- /dev/null +++ b/files/pt-br/web/html/controlando_verificacao_ortografica_em_formularios_html/index.html @@ -0,0 +1,68 @@ +--- +title: Controlando a verificação ortográfica em formulários HTML +slug: Web/HTML/Controlando_verificacao_ortografica_em_formularios_HTML +tags: + - Gerenciamento de configuração + - HTML + - Intermediário +translation_of: Web/HTML/Global_attributes/spellcheck +--- +

{{ 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_imagens_habilitadas/index.html b/files/pt-br/web/html/cors_imagens_habilitadas/index.html new file mode 100644 index 0000000000..5e41b735fe --- /dev/null +++ b/files/pt-br/web/html/cors_imagens_habilitadas/index.html @@ -0,0 +1,113 @@ +--- +title: CORS_habilitar_imagens +slug: Web/HTML/CORS_imagens_habilitadas +tags: + - CORS + - Canvas problems + - Crossorigin + - Segurança do Canvas +translation_of: Web/HTML/CORS_enabled_image +--- +

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" new file mode 100644 index 0000000000..e693b6fed8 --- /dev/null +++ "b/files/pt-br/web/html/dicas_para_criar_p\303\241ginas_html_de_carregamento_r\303\241pido/index.html" @@ -0,0 +1,135 @@ +--- +title: Dicas para criar páginas HTML de carregamento rápido +slug: Web/HTML/Dicas_para_criar_páginas_HTML_de_carregamento_rápido +tags: + - Performance +translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages +--- +

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/a/index.html b/files/pt-br/web/html/element/a/index.html new file mode 100644 index 0000000000..e1445c8ab8 --- /dev/null +++ b/files/pt-br/web/html/element/a/index.html @@ -0,0 +1,486 @@ +--- +title: +slug: Web/HTML/Element/a +tags: + - Conteúdo + - Elemento + - HTML + - Internet + - Rede + - Referencia + - Semántica HTML a nivel de texto + - Web +translation_of: Web/HTML/Element/a +--- +
{{HTMLRef}}
+ +

O elemento <a> em HTML (ou elemento âncora), com o atributo href cria-se um hiperligação nas páginas web, arquivos, endereços de emails, ligações na mesma página ou endereços na URL. O conteúdo dentro de cada <a> precisará indicar o destino do link.

+ +
{{EmbedInteractiveExample("pages/tabbed/a.html")}}
+ + + +

Atributos

+ +

Os atributos do elemento incluem os atributos globais.

+ +
+
{{HTMLAttrDef("download")}}{{HTMLVersionInline(5)}}
+
Leva o usuário a salvar a URL em vez de navegar até ela. Pode ser usado com ou sem um valor:
+
+
    +
  • Sem um valor, o browser irá sugerir um nome de arquivo/extensão, gerado a partir de diversas origens: +
      +
    • O cabeçalho HTTP {{HTTPHeader("Content-Disposition")}}
      • +
    • O segmento final no path (caminho) da URL
      • +
    • The {{Glossary("MIME_type", "media type")}} (from the ({{HTTPHeader("Content-Type")}} header, the start of a data: URL, or {{domxref("Blob.type")}} for a blob: URL)
      • +
    +
    • +
  • A definição de um valor o sugere como o nome do arquivo. Caracteres / e \ são convertidos para underscores (_).Arquivos de sistema talvez proibam alguns caracteres em nomes de arquivos, então o navegador irá ajustar o nome sugerido caso necessário.  
    • +
+ +
Notes: + +
    +
  • download somente funciona para URLs de mesma origem , ou os esquemas blob: e data:
    • +
  • Se  Content-Disposition tiver um diferente filename (nome do arquivo) que download,  o cabeçalho tem prioridade. (Se Content-Disposition: inline, Firefox prioriza o cabeçalho enquanto o Chrome escolhe download.)
    • +
+
+
+
{{HTMLAttrDef("href")}}
+
+

A URL para a qual o hiperlink aponta. Links não se restrigem a URLs baseadas no protocolo HTTP — eles podem utilizar qualquer tipo de URL suportado pelos browsers:

+ +
    +
  • Sections of a page with fragment URLs(Seções de página com fragmentos URL)
    • +
  • Pieces of media files with media fragments (Pedaços de arquivos de mídia com fragmentos da própria mídia)
    • +
  • Números de telefone com tel: URLs
    • +
  • Email addresses with(Endereço de email com) mailto: URLs
    • +
  • Alguns navegadores talvez não aguentem certos arranjos em URL, para isso os websites fazem uso do registerProtocolHandler()
    • +
+
+
{{HTMLAttrDef("hreflang")}}
+
Hints at the human language of the linked URL. No built-in functionality. Allowed values are the same as the global lang attribute.
+
{{HTMLAttrDef("ping")}}
+
Uma lista de URLs separadas por espaços. Quando o link é seguido, o brrowser enviará requisições {{HTTPMethod("POST")}} com o corpo PING para as URLs. Typically for tracking.
+
{{HTMLAttrDef("referrerpolicy")}}{{Experimental_Inline}}
+
Quanto do referrer para ser enviado quando acessar o link. Acesse  Referrer-Policy para possíveis valores e seus efeitos.
+
{{HTMLAttrDef("rel")}}
+
The relationship of the linked URL as space-separated link types.
+
{{HTMLAttrDef("target")}}
+
Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>). The following keywords have special meanings for where to load the URL: +
    +
  • _self: No atual contexto de pesquisa. (Default)
    • +
  • _blank: Normalmente uma nova aba, porém usuários podem configurar seus navegadores para abrir em uma nova janela.
    • +
  • _parent: the parent browsing context of the current one. If no parent, behaves as _self.
    • +
  • _top: the topmost browsing context (the "highest" context that’s an ancestor of the current one). If no ancestors, behaves as _self.
    • +
+ +
+

Note: Quando usando target, adicione rel="noreferrer noopener" para evitar "exploit" para window.opener API;

+
+ +
+

Note: Linking to another page with target="_blank" will run the new page in the same process as your page. If the new page executes JavaScript, your page's performance may suffer. This can also be avoided by using rel="noreferrer noopener".

+
+
+
{{HTMLAttrDef("type")}}
+
Hints at the linked URL’s format with a {{Glossary("MIME type")}}. No built-in functionality.
+
+ +

Obsolete attributes

+ +
+
{{HTMLAttrDef("charset")}}{{Obsolete_Inline("HTML5")}}
+
Hinted at the {{Glossary("character encoding")}} of the linked URL. +
+

Note: This attribute is obsolete and should not be used by authors. Use the HTTP {{HTTPHeader("Content-Type")}} header on the linked URL.

+
+
+
{{HTMLAttrDef("coords")}}{{Obsolete_Inline("HTML5")}}
+
Used with the shape attribute. A comma-separated list of coordinates.
+
{{HTMLAttrDef("name")}}{{Obsolete_Inline("HTML5")}}
+
Was required to define a possible target location in a page. In HTML 4.01, id and name could both be used on <a>, as long as they had identical values. +
+

Note: Use the global attribute {{HTMLAttrxRef("id")}} instead.

+
+
+
{{HTMLAttrDef("rev")}}{{Obsolete_Inline("HTML5")}}
+
Specified a reverse link; the opposite of the rel attribute. Deprecated for being very confusing.
+
{{HTMLAttrDef("shape")}}{{Obsolete_Inline("HTML5")}}
+
The shape of the hyperlink’s region in an image map. +
Note: Use the {{HTMLElement("area")}} element for image maps instead.
+
+
+ +

Properties

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Content categoriesFlow content, phrasing content, interactive content, palpable content.
Permitted contentTransparent, containing either flow content (excluding interactive content) or phrasing content.
Tag omission{{no_tag_omission}}
Permitted parentsAny element that accepts phrasing content, or any element that accepts flow content, but not other <a> elements.
Implicit ARIA role{{ARIARole("link")}} when href attribute is present, otherwise no corresponding role
Permitted ARIA roles +

When href attribute is present:

+ +
    +
  • {{ARIARole("button")}}
    • +
  • {{ARIARole("checkbox")}}
    • +
  • {{ARIARole("menuitem")}}
    • +
  • {{ARIARole("menuitemcheckbox")}}
    • +
  • {{ARIARole("menuitemradio")}}
    • +
  • {{ARIARole("option")}}
    • +
  • {{ARIARole("radio")}}
    • +
  • {{ARIARole("switch")}}
    • +
  • {{ARIARole("tab")}}
    • +
  • {{ARIARole("treeitem")}}
    • +
+ +

When href attribute is not present:

+ +
    +
  • any
    • +
+
DOM interface{{DOMxRef("HTMLAnchorElement")}}
+ +

Examples

+ +

Linking to an absolute URL

+ +

HTML

+ +
<a href="https://www.mozilla.com">
+  Mozilla
+</a>
+ +

Result

+ +

{{EmbedLiveSample('Linking_to_an_absolute_URL')}}

+ +

Linking to relative URLs

+ +

HTML

+ +
<a href="//example.com">Scheme-relative URL</a>
+<a href="/en-US/docs/Web/HTML">Origin-relative URL</a>
+<a href="./p">Directory-relative URL</a>
+
+ + + +

Result

+ +

{{EmbedLiveSample('Linking_to_relative_URLs')}}

+ +

Linking to an element on the same page

+ +
<!-- <a> element links to the section below -->
+<p><a href="#Section_further_down">
+  Jump to the heading below
+</a></p>
+
+<!-- Heading to link to -->
+<h2 id="Section_further_down">Section further down</h2>
+
+ +
+

Note: You can use href="#top" or the empty fragment (href="#") to link to the top of the current page, as defined in the HTML specification.

+
+ +

Linking to an email address

+ +

To create links that open in the user's email program to let them send a new message, use the mailto: scheme:

+ +
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
+ +

For details about mailto: URLs, such as including a subject or body, see Email links or {{RFC(6068)}}.

+ +

Linking to telephone numbers

+ +
<a href="tel:+49.157.0156">+49 157 0156</a>
+<a href="tel:+1(555)5309">(555) 5309</a>
+ +

tel: link behavior varies with device capabilities:

+ + + +

See {{RFC(3966)}} for syntax, additional features, and other details about the tel: URL scheme.

+ +

Using the download attribute to save a <canvas> as a PNG

+ +

To save a {{HTMLElement("canvas")}} element’s contents as an image, you can create a link with a download attribute and the canvas data as a data: URL:

+ + + +
HTML
+ +
<p>Paint by holding down the mouse button and moving it.
+  <a href="" download="my_painting.png">Download my painting</a>
+</p>
+
+<canvas width="300" height="300"></canvas>
+
+ +
CSS
+ +
html {
+  font-family: sans-serif;
+}
+canvas {
+  background: #fff;
+  border: 1px dashed;
+}
+a {
+  display: inline-block;
+  background: #69c;
+  color: #fff;
+  padding: 5px 10px;
+}
+ +
JavaScript
+ +
var canvas = document.querySelector('canvas'),
+    c = canvas.getContext('2d');
+c.fillStyle = 'hotpink';
+
+function draw(x, y) {
+  if (isDrawing) {
+    c.beginPath();
+    c.arc(x, y, 10, 0, Math.PI*2);
+    c.closePath();
+    c.fill();
+  }
+}
+
+canvas.addEventListener('mousemove', event =>
+  draw(event.offsetX, event.offsetY)
+);
+canvas.addEventListener('mousedown', () => isDrawing = true);
+canvas.addEventListener('mouseup', () => isDrawing = false);
+
+document.querySelector('a').addEventListener('click', event =>
+  event.target.href = canvas.toDataURL()
+);
+
+ +
Result
+ +

{{EmbedLiveSample('Example_painting_app_with_save_link', '100%', '400')}}

+ +

Security and privacy

+ +

<a> elements can have consequences for users’ security and privacy. See Referer header: privacy and security concerns for information.

+ +

Using target="_blank" without rel="noreferrer" and rel="noopener" makes the website vulnerable to {{domxref("window.opener")}} API exploitation attacks (vulnerability description).

+ +

Accessibility

+ +

Strong link text

+ +

The content inside a link should indicate where the link goes, even out of context.

+ +

Inaccessible, weak link text

+ +

A sadly common mistake is to only link the words “click here” or “here”:

+ +
<p>
+  Learn more about our products <a href="/products">here</a>.
+</p>
+
+ +

Strong link text

+ +

Luckily, this is an easy fix, and it’s actually shorter than the inaccessible version!

+ +
<p>
+  Learn more <a href="/products">about our products</a>.
+</p>
+ +

Assistive software have shortcuts to list all links on a page. However, strong link text benefits all users — the “list all links” shortcut emulates how sighted users quickly scan pages.

+ +

onclick events

+ +

Anchor elements are often abused as fake buttons by setting their href to # or javascript:void(0) to prevent the page from refreshing, then listening for their click events .

+ +

These bogus href values cause unexpected behavior when copying/dragging links, opening links in a new tab/window, bookmarking, or when JavaScript is loading, errors, or is disabled. They also convey incorrect semantics to assistive technologies, like screen readers.

+ +

Use a {{HTMLElement("button")}} instead. In general, you should only use a hyperlink for navigation to a real URL.

+ + + +

Links that open in a new tab/window via target="_blank", or links that point to a download file should indicate what will happen when the link is followed.

+ +

People experiencing low vision conditions, navigating with the aid of screen reading technology, or with cognitive concerns may be confused when a new tab, window, or application opens unexpectedly. Older screen-reading software may not even announce the behavior.

+ + + +
<a target="_blank" href="https://www.wikipedia.org">
+  Wikipedia (opens in new tab)
+</a>
+
+ + + +
<a href="2017-annual-report.ppt">
+  2017 Annual Report (PowerPoint)
+</a>
+
+ +

If an icon is used to signify link behavior, make sure it has {{HTMLAttrxRef("alt", "img", "alt text", "true")}}:

+ +
<a  target="_blank" href="https://www.wikipedia.org">
+  Wikipedia
+  <img alt="(opens in new tab)" src="newtab.svg">
+</a>
+
+<a href="2017-annual-report.ppt">
+  2017 Annual Report
+  <img alt="(PowerPoint file)" src="ppt-icon.svg">
+</a>
+ + + + + +

A skip link is a link placed as early as possible in {{HTMLElement("body")}} content that points to the beginning of the page's main content. Usually, CSS hides a skip link offscreen until focused.

+ +
<body>
+  <a href="#content">Skip to main content</a>
+
+  <header>
+    …
+  </header>
+
+  <main id="content"> <!-- The skip link jumps to here -->
+
+ +
.skip-link {
+  position: absolute;
+  top: -3em;
+  background: #fff;
+}
+.skip-link:focus {
+  top: 0;
+}
+ +

Skip links let keyboard users bypass content repeated throughout multiple pages, such as header navigation.

+ +

Skip links are especially useful for people who navigate with the aid of assistive technology such as switch control, voice command, or mouth sticks/head wands, where the act of moving through repetitive links can be laborious.

+ + + +

Size and proximity

+ +

Size

+ +

Interactive elements, like links, should provide an area large enough that it is easy to activate them. This helps a variety of people, including those with motor control issues and those using imprecise inputs such as a touchscreen. A minimum size of 44×44 CSS pixels is recommended.

+ +

Text-only links in prose content are exempt from this requirement, but it’s still a good idea to make sure enough text is hyperlinked to be easily activated.

+ + + +

Proximity

+ +

Interactive elements, like links, placed in close visual proximity should have space separating them. Spacing helps people with motor control issues, who may otherwise accidentally activate the wrong interactive content.

+ +

Spacing may be created using CSS properties like {{CSSxRef("margin")}}.

+ + + +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Referrer Policy", "#referrer-policy-delivery-referrer-attribute", "referrer attribute")}}{{Spec2("Referrer Policy")}}Added the referrerpolicy attribute.
{{SpecName("HTML WHATWG", "textlevel-semantics.html#the-a-element", "<a>")}}{{Spec2("HTML WHATWG")}}
{{SpecName("HTML5 W3C", "textlevel-semantics.html#the-a-element", "<a>")}}{{Spec2("HTML5 W3C")}}
{{SpecName("HTML4.01", "struct/links.html#h-12.2", "<a>")}}{{Spec2("HTML4.01")}}
+ +

Browser compatibility

+ + + +

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

+ +

See also

+ + diff --git a/files/pt-br/web/html/element/abbr/index.html b/files/pt-br/web/html/element/abbr/index.html new file mode 100644 index 0000000000..a5336e70ec --- /dev/null +++ b/files/pt-br/web/html/element/abbr/index.html @@ -0,0 +1,155 @@ +--- +title: +slug: Web/HTML/Element/abbr +tags: + - Elemento + - HTML + - Internet + - Rede + - Referencia + - Semántica HTML a nivel de texto + - Web + - abbr + - abreviação + - acrônimo + - definições + - semántica +translation_of: Web/HTML/Element/abbr +--- +

Sumário

+ +

O Elemento HTML <abbr> (ou Elemento de Abreviação HTML) representa uma abreviação e opcionalmente fornece uma descrição completa para ela. Se presente, o atributo title deve conter a descrição completa e apenas ela.

+ +
+

Nota de uso: Quando presente, o número gramatical (singular/plural) do texto no atributo title deve ser correspondente ao do conteúdo do elemento <abbr>. Isso também deve ocorrer no caso das linguagens com mais de dois números gramaticais (por exemplo, em árabe não há somente palavras no singular e plural, mas tem também uma categoria dual).

+
+ + + +

Atributos

+ +

Este elemento inclui apenas os atributos globais.

+ +

Use o atributo title para definir a descrição completa da abreviação. Muitos navegadores exibem a descrição quando passa-se o mouse por cima da abreviação.

+ +

Estilo padrão

+ +

O propósito deste elemento é meramente a conveniência de autores e todos os navegadores mostram ele como um elemento dentro de uma linha ({{cssxref('display')}}: inline) por padrão, embora o estilo aplicado sobre ele seja diferente entre diferentes navegadores:

+ + + +

É fortemente recomendado que autores web não confiem no estilo padrão. Note que este elemento não é suportado pelo Internet Explorer anterior ao IE7. Como tais versões do IE também não permitem que se aplique estilo para elementos desconhecidos, o seguinte script é necessário para permitir isso:

+ +
<!--[if lte IE 6]>
+  <script>
+    document.createElement("abbr");
+  </script>
+<![endif]-->
+ +

Exemplo

+ +
<p>Obama é presidente dos <abbr title="Estados Unidos da América">EUA</abbr></p>
+
+ +

Resultado

+ +

Obama é presidente dos EUA

+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoEstadoComentário
{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-abbr-element', '<abbr>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'the-abbr-element.html#the-abbr-element', '<abbr>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '<abbr>')}}{{Spec2('HTML4.01')}} 
+ +

Compatibilidade de navegadores

+ +

{{CompatibilityTable}}

+ +

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

+ +
+ + + + + + + + + + + + + + + + + + + +
FuncionalidadeChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico2.0{{CompatGeckoDesktop(1.0)}}7.01.3{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FuncionalidadeAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Veja também

+ + + +
{{HTMLRef}}
diff --git a/files/pt-br/web/html/element/acronym/index.html b/files/pt-br/web/html/element/acronym/index.html new file mode 100644 index 0000000000..ae9d1d4e71 --- /dev/null +++ b/files/pt-br/web/html/element/acronym/index.html @@ -0,0 +1,109 @@ +--- +title: +slug: Web/HTML/Element/acronym +tags: + - Elemento + - HTML + - Internet + - Obsoleto + - Rede + - Referencia + - Web +translation_of: Web/HTML/Element/acronym +--- +
{{obsolete_header}}
+ +

Resumo

+ +

O Elemento HTML Acrônimo (<acronym>) permite à autores claramente indicar que uma seqüência de caracteres compõe um acrônimo ou uma abreviação de uma palavra.

+ +
+

Nota de uso: Este elemento foi removido no HTML5 e não deve ser usado mais. Ao invés dele, desenvolvedores devem usar o elemento {{HTMLElement("abbr")}}.

+
+ +

Atributos

+ +

Este elemento não possui qualquer outro atributo além dos atributos globais, comuns à todos os elementos.

+ +

Interface DOM

+ +

Este elemento implementa a interface {{domxref('HTMLElement')}}.

+ +
Nota de implementação: Após o Gecko 1.9.2 inclusive, Firefox implementa a interface {{domxref('HTMLSpanElement')}} para este elemento.
+ +

Exemplo

+ +
<p>A <acronym title="World Wide Web">WWW</acronym> é somente um dos componentes da Internet.</p>
+
+ +

Estilo padrão

+ +

Embo is purely for the convenira o propósito desta tag seja meramente a conveniência dos autores, seu estilo padrão varia entre diferentes navegadores:

+ +
    +
  • Alguns navegadores, como o Internet Explorer, não criam qualquer estilo diferente do de um elemento {{HTMLElement("span")}}.
    • +
  • Opera, Firefox, e alguns outros adicionam um sublinhado pontilhado no conteúdo do elemento.
    • +
  • Alguns poucos navegadores não somente adicionam um sublinhado pontilhado, mas também colocam o conteúdo em versalete (small caps); para evitar este estilo, adicione algo como {{cssxref('font-variant')}}: none no CSS que cuida deste caso.
    • +
+ +

É portanto fortemente recomendado que autores web não confiem no estilo padrão do navegador para este elemento.

+ +

Compatibilidade de navegadores

+ +

{{CompatibilityTable}}

+ +

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

+ +
+ + + + + + + + + + + + + + + + + + + +
FuncionalidadeChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FuncionalidadeAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
+
+ +

Ver também

+ +
    +
  • O elemento HTML {{HTMLElement("abbr")}}
    • +
+ +
{{HTMLRef}}
diff --git a/files/pt-br/web/html/element/address/index.html b/files/pt-br/web/html/element/address/index.html new file mode 100644 index 0000000000..ea65bf24d4 --- /dev/null +++ b/files/pt-br/web/html/element/address/index.html @@ -0,0 +1,163 @@ +--- +title:
+slug: Web/HTML/Element/address +tags: + - Autor + - Contato + - Elemento + - Email + - Endereço + - Endereço de Email + - HTML + - Informação de Contato + - Referencia + - Seções HTML + - Web +translation_of: Web/HTML/Element/address +--- +

Resumo

+ +

O elemento HTML <address> fornece informações de contato para seu ancestral {{HTMLElement("article")}} ou {{HTMLElement("body")}} mais próximo; no segundo caso, ele se aplica ao documento inteiro.

+ +

A informação de contato fornecida por um conteúdo do elemento <address> pode tomar qualquer forma que é apropriada para o contexto, e pode incluir qualquer tipo de informação de contato necessária, como endereço físico, URL, email, telefone, mídia social, coordenadas geográficas, por aí vai. Deve incluir o nome da pessoa, grupo, ou organização para qual as informações de contato se referem.

+ +

<address> pode ser usado em uma variedade de contextos, como fornecer informação de contato de uma empresa no header da página, ou indicar o autor de um artigo incluindo um elemento <address> dentro do {{HTMLElement("article")}}.

+ +
    +
  • Categoria de conteúdo Conteúdo de fluxo, conteúdo palpável.
    • +
  • Conteúdo permitidoConteúdo de fluxo, mas sem nenhum elemento <address> aninhado, e sem conteúdo de cabeçalho ({{HTMLElement("hgroup")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}), e nem conteúdo de seção como ({{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}), e sem{{HTMLElement("header")}} ou o elemento {{HTMLElement("footer")}}.
    • +
  • Omissão de tag {{no_tag_omission}}
    • +
  • Elementos-pai permitidos Qualquer elemento que aceite conteúdo de fluxo, exceto os elementos <address> (de acordo com o princípio lógico da simetria, se a tag <address>, como pai, não pode ter elemento <address> como filho, então o mesmo conteúdo <address> não pode ter tag <address> como pai).
    • +
  •  
    • +
  • Regras ARIA permitidas Nenhuma
    • +
  • Interface DOM {{domxref("HTMLElement")}}. Antes do Gecko 2.0 (Firefox 4), Gecko implementava este elemento usando a interface {{domxref("HTMLSpanElement")}}
    • +
+ +

Atributos

+ +

Este elemento inclui somente os atributos globais.

+ +

Notas de uso

+ +
    +
  • Para representar um endereço arbitrário, um que não é relacionado à informação para contato, use um elemento {{HTMLElement("p")}} ao invés do elemento <address>.
    • +
  • Este elemento não deve conter mais informação além da informação de contato, como uma data de publicação (a qual pertence ao elemento {{HTMLElement("time")}}).
    • +
  • Tipicamente um elemento <address> pode ser posicionado dentro do elemento {{HTMLElement("footer")}} da seção atual, se houver um.
    • +
+ +

Exemplo

+ +
  <address>
+    Voce pode contatar o autor em <a href="http://www.somedomain.com/contact">www.somedomain.com</a>.<br>
+    Se encontrar qualquer bug, por favor <a href="mailto:webmaster@somedomain.com">contate o administrador do site</a>.<br>
+    Você tambem pode querer nos visitar:<br>
+    Mozilla Foundation<br>
+    1981 Landings Drive<br>
+    Building K<br>
+    Mountain View, CA 94043-0801<br>
+    USA
+  </address>
+
+ +

Resultado

+ +
Voce pode contatar o autor em www.somedomain.com.
+Se encontrar qualquer bug, por favor contate o administrador do site.
+Você tambem pode querer nos visitar:
+Mozilla Foundation
+1981 Landings Drive
+Building K
+Mountain View, CA 94043-0801
+USA
+ +
 
+ +

Embora o elemento address exiba o texto com o mesmo estilo padrão que os elementos {{HTMLElement("i")}} ou {{HTMLElement("em")}}, ele é mais apropriado de ser usado quando se lida com informação de contato, já que ele fornece informação semântica adicional.

+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoEstadoComentário
{{SpecName('HTML WHATWG', 'sections.html#the-address-element', '<address>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'sections.html#the-address-element', '<address>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/global.html#h-7.5.6', '<address>')}}{{Spec2('HTML4.01')}} 
+ +

Compatibilidade de Navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FuncionalidadeChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.7")}}1.05.121.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FuncionalidadeAndroidFirefox Mobile (Gecko)IE MobileOpera MiniOpera MobileSafari Mobile
Suporte básico{{CompatVersionUnknown}}{{CompatGeckoMobile("1.7")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Ver também

+ +
    +
  • Outros elementos relacionados à seção: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("footer")}}, {{HTMLElement("section")}}, {{HTMLElement("header")}};
    • +
  • Seções e delineamento de um documento HTML5.
    • +
diff --git a/files/pt-br/web/html/element/applet/index.html b/files/pt-br/web/html/element/applet/index.html new file mode 100644 index 0000000000..c43ac84884 --- /dev/null +++ b/files/pt-br/web/html/element/applet/index.html @@ -0,0 +1,133 @@ +--- +title: +slug: Web/HTML/Element/applet +translation_of: Web/HTML/Element/applet +--- +
+ {{obsolete_header}}
+

Resumo

+

The HTML Applet Element (<applet>) identifies the inclusion of a Java applet.

+
+

Usage note: This element has been removed in HTML5 and shouldn't be used anymore. Instead web developers should use the more generic {{HTMLElement("object")}} element.

+
+

Atributos

+
+
+ {{htmlattrdef("align")}}
+
+ This attribute is used to position the applet on the page relative to content that might flow around it. The HTML 4.01 specification defines values of bottom, left, middle, right, and top, whereas Microsoft and Netscape also might support absbottom, absmiddle, baseline, center, and texttop.
+
+ {{htmlattrdef("alt")}}
+
+ This attribute causes a descriptive text alternate to be displayed on browsers that do not support Java. Page designers should also remember that content enclosed within the <applet> element may also be rendered as alternative text.
+
+ {{htmlattrdef("archive")}}
+
+ This attribute refers to an archived or compressed version of the applet and its associated class files, which might help reduce download time.
+
+ {{htmlattrdef("code")}}
+
+ This attribute specifies the URL of the applet's class file to be loaded and executed. Applet filenames are identified by a .class filename extension. The URL specified by code might be relative to the codebase attribute.
+
+ {{htmlattrdef("codebase")}}
+
+ This attribute gives the absolute or relative URL of the directory where applets' .class files referenced by the code attribute are stored.
+
+ {{htmlattrdef("datafld")}}
+
+ This attribute, supported by Internet Explorer 4 and higher, specifies the column name from the data source object that supplies the bound data. This attribute might be used to specify the various {{HTMLElement("param")}} elements passed to the Java applet.
+
+ {{htmlattrdef("datasrc")}}
+
+ Like datafld, this attribute is used for data binding under Internet Explorer 4. It indicates the id of the data source object that supplies the data that is bound to the {{HTMLElement("param")}} elements associated with the applet.
+
+ {{htmlattrdef("height")}}
+
+ This attribute specifies the height, in pixels, that the applet needs.
+
+ {{htmlattrdef("hspace")}}
+
+ This attribute specifies additional horizontal space, in pixels, to be reserved on either side of the applet.
+
+ {{htmlattrdef("mayscript")}}
+
+ In the Netscape implementation, this attribute allows access to an applet by programs in a scripting language embedded in the document.
+
+ {{htmlattrdef("name")}}
+
+ This attribute assigns a name to the applet so that it can be identified by other resources; particularly scripts.
+
+ {{htmlattrdef("object")}}
+
+ This attribute specifies the URL of a serialized representation of an applet.
+
+ {{htmlattrdef("src")}}
+
+ As defined for Internet Explorer 4 and higher, this attribute specifies a URL for an associated file for the applet. The meaning and use is unclear and not part of the HTML standard.
+
+ {{htmlattrdef("vspace")}}
+
+ This attribute specifies additional vertical space, in pixels, to be reserved above and below the applet.
+
+ {{htmlattrdef("width")}}
+
+ This attribute specifies in pixels the width that the applet needs.
+
+

Exemplo

+
<applet code="game.class" align="left" archive="game.zip" height="250" width="350">
+  <param name="difficulty" value="easy">
+  <b>Sorry, you need Java to play this game.</b>
+</applet>
+
+

Compatibilidade dos navegadores

+

{{CompatibilityTable}}

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

Notas

+

The W3C specification does not encourage the use of <applet> and prefers the use of the {{HTMLElement("object")}} tag. Under the strict definition of HTML 4.01, this element is deprecated and entirely obsolete in HTML5.

+
+ {{HTMLRef}}
diff --git a/files/pt-br/web/html/element/area/index.html b/files/pt-br/web/html/element/area/index.html new file mode 100644 index 0000000000..3301dcec3c --- /dev/null +++ b/files/pt-br/web/html/element/area/index.html @@ -0,0 +1,196 @@ +--- +title: +slug: Web/HTML/Element/area +translation_of: Web/HTML/Element/area +--- +

Resumo

+ +

O HTML <area> elemento define uma região hot-spot em uma imagem, e, opcionalmente, associa-lo com um {{Glossary ("Hyperlink", "link de hipertexto")}}. Este elemento é usado somente dentro de um {{HTMLElement ("map")}} elemento.

+ + + +

Atributos

+ +

Este elemento inclui os  atributos globais .

+ +
+
{{Htmlattrdef ("accesskey")}} {{HTMLVersionInline ("4")}} só, {{obsolete_inline ("5.0")}}
+
Especifica um acelerador de navegação pelo teclado para o elemento. Pressionando ALT ou uma chave semelhante, em associação com o caractere especificado seleciona a forma de controle correlacionada com a seqüência de teclas. Os projetistas de página são avisados ​​para evitar sequências de teclas já vinculados aos navegadores. Este atributo é global desde HTML5.
+
+ +
+
{{Htmlattrdef ("alt")}}
+
Uma alternativa seqüência de texto para exibir em navegadores que não exibem imagens. O texto deve ser formulada de modo a que apresenta o usuário com o mesmo tipo de escolha como a imagem iria oferecer quando exibido sem o texto alternativo. Em HTML4, este atributo é necessário, mas pode ser uma string vazia (""). Em HTML5, este atributo é necessário apenas se o href atributo é usado.
+
+ +
+
{{Htmlattrdef ("coords")}}
+
Um conjunto de valores que especificam as coordenadas da região de hot-spot. O número e o significado dos valores dependem do valor especificado para a forma de atributo. Para um rect forma ou retângulo, o coords valor é de dois pares x, y: left, top, right, e bottom. Para um círculo forma, o valor é x, y, r onde x, y é um par especificando o centro do círculo e r é um valor para o raio. Para um poli ou polígono <forma, o valor é um conjunto de pares x, y de cada ponto no polígono: X1, Y1, X2, Y2, x3, y3, e assim por diante. Em HTML4, os valores são números de pixels ou porcentagens, se um sinal de porcentagem (%) é anexado; em HTML5, os valores são números de pixels CSS.
+
{{Htmlattrdef ("download")}} {{HTMLVersionInline ("5")}}
+
Este atributo, se presente, indica que o autor tem a intenção que o hiperlink seja usado para o download de um recurso. Consulte {{HTMLElement ("a")}} para uma descrição completa da {{htmlattrxref ("download", "a")}} atributo.
+
+ +
+
{{Htmlattrdef ("href")}}
+
A meta de hyperlink para a área. Seu valor é uma URL válida. Em HTML4, quer este atributo ou o nohref atributo deve estar presente no elemento. Em HTML5, este atributo pode ser omitido; em caso afirmativo, o elemento de área não representa um hiperlink.
+
+ +
+
{{Htmlattrdef ("hreflang")}} {{HTMLVersionInline ("5")}}
+
Indica o idioma do recurso ligado. Os valores permitidos são determinados por BCP47 . Utilize este atributo somente se a href atributo está presente.
+
+ +
+
{{Htmlattrdef ("name")}} {{HTMLVersionInline ("4")}} só, {{obsolete_inline ("5.0")}}
+
Defina um nome para a área clicável de modo que possa ser programado por navegadores mais antigos.
+
+ +
+
{{Htmlattrdef ("media")}} {{HTMLVersionInline ("5")}}
+
Uma dica da mídia para o qual o recurso ligado foi projetado, por exemplo impressão e tela . Se omitido, o padrão é tudo . Utilize este atributo somente se a href atributo está presente.
+
+ +
+
{{Htmlattrdef ("nohref")}} {{HTMLVersionInline ("4")}} só, {{obsolete_inline ("5.0")}}
+
Indica que não existe hyperlink para a área associada. Ou este atributo ou a href atributo deve estar presente no elemento.
+
+
+

Nota de Uso: Este atributo é obsoleto em HTML5, em vez omitindo o atributo href é suficiente.

+
+
+
+ +
+
{{Htmlattrdef ("rel")}} {{HTMLVersionInline ("5")}}
+
Para âncoras contendo o href atributo, este atributo especifica a relação do objeto de destino para o objeto link. O valor é uma lista de valores de relacionamento, separados por vírgulas. Os valores e sua semântica será registrado por alguma autoridade que poderia ter significado para o autor do documento. A relação padrão, se nenhum outro é dado, é nula. Utilize este atributo somente se a href atributo está presente.
+
{{Htmlattrdef ("shape")}}
+
A forma do ponto de acesso associado. As especificações para colar 5 e HTML 4 definem os valores rect , que define uma região rectangular; círculo , o qual define uma região circular; poli , que define um polígono; e padrão , o que indica toda a região além de quaisquer formas definidas. Muitos navegadores, principalmente o Internet Explorer 4 e superior, apoio circ , polígono , e retângulo como valores válidos para forma ; estes valores são {{Non-standard_inline}}.
+
+ +
+
{{Htmlattrdef ("tabindex")}} {{HTMLVersionInline ("4")}} só, {{obsolete_inline ("5.0")}}
+
Um valor numérico que especifica a posição da área definida na ordem de tabulação browser. Este atributo é global em HTML5.
+
+ +
+
{{Htmlattrdef ("target")}}
+
Este atributo especifica onde exibir o recurso ligado. Em HTML4, este é o nome de, ou uma palavra-chave para um quadro. Em HTML5, que é um nome ou palavra-chave para um contexto de navegação (por exemplo, aba, janela ou quadro embutido). As seguintes palavras-chave têm significados especiais: +
    +
  • _self : Carregar a resposta no mesmo quadro HTML4 (ou contexto de navegação HTML5), como o atual. Este valor é o padrão se o atributo não é especificado.
    • +
  • _blank : Coloque a resposta em uma nova janela sem nome HTML4 ou contexto de navegação HTML5.
    • +
  • _parent : Carregar a resposta para o pai HMTL4 conjunto de quadros do quadro atual ou HTML5 pai contexto de navegação do atual. Se não houver nenhum pai, esta opção se comporta da mesma maneira que _self .
    • +
  • _top : Em HTML4: Carregar a resposta para a janela completa, originais, cancelando todos os outros quadros. Em HTML5: Carregar a resposta para o contexto de navegação de nível superior (ou seja, o contexto de navegação que é um ancestral do atual, e não tem pai). Se não houver nenhum pai, esta opção se comporta da mesma maneira que _self .
    • +
+ Utilize este atributo somente se a href atributo está presente.
+
{{Htmlattrdef ("type")}}
+
Este atributo especifica o tipo de mídia na forma de um tipo MIME para o destino do link. Geralmente, este é fornecido informações estritamente como consultivo; no entanto, no futuro, um navegador pode adicionar um pequeno ícone para os tipos de multimédia. Por exemplo, um navegador pode adicionar um pequeno ícone de alto-falante quando o tipo está definido para áudio / wav. Para obter uma lista completa de tipos MIME reconhecidos, consulte http://www.w3.org/TR/html4/references.html # REF-MIMETYPES . Utilize este atributo somente se a href atributo está presente.
+
+ +

Exemplo

+ +
<mapa name="primary">
+  <area shape="circle" coords="200,250,25" href="another.htm" />
+  <area shape="default" nohref />
+</map>
+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoEstadoComentário
{{SpecName ('HTML WHATWG', 'a-map-element.html # da-area-elemento', '<area>')}}{{Spec2 ('HTML WHATWG')}} 
{{SpecName ('HTML5 W3C', 'incorporado-content-0.html # da-area-elemento', '<area>')}}{{Spec2 ('HTML5 W3C')}} 
{{SpecName ('HTML4.01', 'struct / objects.html # h-13.6.1', '<area>')}}{{Spec2 ('HTML4.01')}} 
+ +

Compatibilidade do navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaCromoFirefox (Gecko)Internet ExplorerÓperaSafári
Suporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndróideFirefox Mobile (Gecko)IE MobileOpera MiniOpera MobileSafari Mobile
Suporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Notas

+ +

De acordo com o HTML 3.2, 4.0 e 5 especificações, a tag de fechamento </ área> é proibido.

+ +

A especificação XHTML 1.0 requer uma barra: <area /> .

+ +

Os ID , classe e estilo atributos têm o mesmo significado que os atributos essenciais definidas na especificação HTML 4, mas somente Netscape e Microsoft defini-los.

+ +

Netscape 1 de nível não entendem o alvo atributo que se refere aos quadros.

+ +

HTML 3.2 define apenas alt , coords , href , nohref e shape .

+ +

{{HTMLRef}}

diff --git a/files/pt-br/web/html/element/article/index.html b/files/pt-br/web/html/element/article/index.html new file mode 100644 index 0000000000..cff322b0cb --- /dev/null +++ b/files/pt-br/web/html/element/article/index.html @@ -0,0 +1,124 @@ +--- +title: article (artigo) +slug: Web/HTML/Element/article +translation_of: Web/HTML/Element/article +--- +

Resumo

+ +

O Elemento HTML Article (<article>) representa uma composição independente em um documento, página, aplicação, ou site, ou que é destinado a ser distribuido de forma independente ou reutilizável, por exemplo, em sindicação. Este poderia ser o post de um fórum, um artigo de revista ou jornal, um post de um blog, um comentário enviado por um usuário, um gadget ou widget interativos, ou qualquer outra forma de conteúdo independente.

+ +
+

Notas de uso:

+ +
    +
  • Quando um elemento <article> está aninhado, o elemento interior representa um artigo relacionado com o elemento exterior. Por exemplo, os comentários do post de um blog podem ser elementos <article> aninhados em <article> representando o post do blog.
    • +
  • Informações sobre o autor de um elemento <article> podem ser fornecidas através do elemento {{ HTMLElement("address") }} ,mas ele não se aplica aos elementos <article> aninhados.
    • +
  • A data e hora de publicação de um elemento <article> pode ser descrita usando o atributo {{ htmlattrxref("pubdate", "time") }} de um elemento {{ HTMLElement("time") }}.
    • +
+
+ +

Contexto de uso

+ + + + + + + + + + + + + + + + + + + + +
Conteúdo permitidoFlow content
Omissão de tagNenhuma, tanto tag de início quanto de fim são obrigatórias
Elementos pai permitidos +

Qualquer elemento que aceita flow content. Note-se que um elemento <article> não pode ser descendente de um elemento {{ HTMLElement("address") }}.

+
Documento normativoHTML5, section 4.4.4
+ +

Atributos

+ +

Este elemento não possui outros elementos se não os global attributes, comuns a todos os elementos.

+ +

Interface DOM

+ +

Este elemento implementa a interface HTMLElement .

+ +

Exemplos

+ +
<article>
+  <h4>Um artigo realmente impressionante</h4>
+  <p>Lotes de texto incrível.</p>
+</article>
+
+ +

Resultado

+ +
<article> +

Um artigo realmente impressionante

+ +

Lotes de texto incrível.

+</article>
+ +

Compatibilidade

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte Básico5{{ CompatGeckoDesktop("2.0") }}9.011.104.1
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte Básico2.2{{ CompatGeckoMobile("2.0") }}9.011.05.0 (iOS 4.2)
+
+ +

Veja também

+ +
    +
  • Outros elementos de seção relacionados: {{ HTMLElement("body") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("section") }}, {{ HTMLElement("aside") }}, {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}, {{ HTMLElement("hgroup") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("address") }}
    • +
  • Sections and outlines of an HTML5 document.
    • +
diff --git a/files/pt-br/web/html/element/aside/index.html b/files/pt-br/web/html/element/aside/index.html new file mode 100644 index 0000000000..629f66e439 --- /dev/null +++ b/files/pt-br/web/html/element/aside/index.html @@ -0,0 +1,129 @@ +--- +title: