diff --git a/files/pt-br/conflicting/web/api/htmlslotelement/index.md b/files/pt-br/conflicting/web/api/htmlslotelement/index.md index d9566b1b167308..2d9461787d26e9 100644 --- a/files/pt-br/conflicting/web/api/htmlslotelement/index.md +++ b/files/pt-br/conflicting/web/api/htmlslotelement/index.md @@ -15,7 +15,7 @@ A interface do **`HTMLContentElement`** representa um {{HTMLElement("content")}} _Esta interface herda as propriedades de {{domxref("HTMLElement")}}._ - {{domxref("HTMLContentElement.select")}} - - : é um {{domxref("DOMString")}} que reflete o {{ htmlattrxref("select", "content") }} attributo HTML . O valor é uma lista de vírgula separada dos seletores CSS que selecionam o conteúdo para inserir em lugar do elemento ``. + - : é um {{domxref("DOMString")}} que reflete o [`select`](/pt-BR/docs/Web/HTML/Element/content#select) attributo HTML . O valor é uma lista de vírgula separada dos seletores CSS que selecionam o conteúdo para inserir em lugar do elemento ``. ## Méthodos diff --git a/files/pt-br/glossary/caret/index.md b/files/pt-br/glossary/caret/index.md index bf141429cd813e..4ff12542fa4c7e 100644 --- a/files/pt-br/glossary/caret/index.md +++ b/files/pt-br/glossary/caret/index.md @@ -6,7 +6,7 @@ original_slug: Glossario/caret Um **caret** (às vezes chamado de "cursor de texto") é um indicador exibido na tela para indicar onde a entrada de texto será inserida. A maioria das interfaces de usuário representam o caret usando uma linha vertical fina ou uma caixa do tamanho de um caractere que pisca, mas isso pode variar. Este ponto do texto é chamado de **ponto de inserção.** A palavra "_careta_" diferencia o ponto de inserção de texto do cursor do mouse. -Na web, um caret é usado para representar o ponto de inserção em {{HTMLElement("input")}} e {{HTMLElement("textarea")}} elementos, bem como quaisquer elementos cujo atributo {{htmlattrxref("contenteditable")}} está definido, permitindo assim que o conteúdo do elemento seja editado pelo usuário. +Na web, um caret é usado para representar o ponto de inserção em {{HTMLElement("input")}} e {{HTMLElement("textarea")}} elementos, bem como quaisquer elementos cujo atributo [`contenteditable`](/pt-BR/docs/Web/HTML/Global_attributes#contenteditable) está definido, permitindo assim que o conteúdo do elemento seja editado pelo usuário. ## Saiba Mais @@ -29,4 +29,4 @@ Esses elementos fornecem campos de entrada de texto ou caixas e, portanto, fazem - [``](/pt-BR/docs/Web/HTML/Element/input/number), [``](/pt-BR/docs/Web/HTML/Element/input/range) - [``](/pt-BR/docs/Web/HTML/Element/input/email), [``](/pt-BR/docs/Web/HTML/Element/input/tel) e [``](/pt-BR/docs/Web/HTML/Element/input/url) - {{HTMLElement("textarea")}} -- Qualquer elemento com seu conjunto de atributo {{htmlattrxref ("contenteditable")}}. +- Qualquer elemento com seu conjunto de atributo [`contenteditable`](/pt-BR/docs/Web/HTML/Global_attributes#contenteditable). diff --git a/files/pt-br/learn/accessibility/html/index.md b/files/pt-br/learn/accessibility/html/index.md index fd8d3e1c9c10dd..82695b9737d041 100644 --- a/files/pt-br/learn/accessibility/html/index.md +++ b/files/pt-br/learn/accessibility/html/index.md @@ -336,7 +336,7 @@ Adicionar tais vantagens de volta leva um pouco de trabalho (você pode ver um e
E em mim!
``` -Basicamente, o atributo {{htmlattrxref ("tabindex")}} destina-se principalmente a permitir que elementos tabulares tenham uma ordem de tabulação personalizada (especificada em ordem numérica positiva), em vez de apenas serem tabulados em sua ordem de origem padrão. Isso é quase sempre uma má ideia, pois pode causar grandes confusões. Use-o somente se você realmente precisar, por exemplo, se o layout mostrar coisas em uma ordem visual muito diferente do código-fonte, e você quiser fazer as coisas funcionarem mais logicamente. Existem duas outras opções para `tabindex`: +Basicamente, o atributo [`tabindex`](/pt-BR/docs/Web/HTML/Global_attributes#tabindex) destina-se principalmente a permitir que elementos tabulares tenham uma ordem de tabulação personalizada (especificada em ordem numérica positiva), em vez de apenas serem tabulados em sua ordem de origem padrão. Isso é quase sempre uma má ideia, pois pode causar grandes confusões. Use-o somente se você realmente precisar, por exemplo, se o layout mostrar coisas em uma ordem visual muito diferente do código-fonte, e você quiser fazer as coisas funcionarem mais logicamente. Existem duas outras opções para `tabindex`: - `tabindex="0"` — conforme indicado acima, esse valor permite que elementos que normalmente não podem ser tabulados se tornem tabeláveis. Este é o valor mais útil do `tabindex`. - `tabindex="-1"` — isso permite que elementos normalmente não tabuláveis recebam foco de maneira programática, por exemplo, via JavaScript, ou como alvo de links. diff --git a/files/pt-br/learn/css/building_blocks/cascade_and_inheritance/index.md b/files/pt-br/learn/css/building_blocks/cascade_and_inheritance/index.md index db9ea16cae88eb..fd1083f3d2ce74 100644 --- a/files/pt-br/learn/css/building_blocks/cascade_and_inheritance/index.md +++ b/files/pt-br/learn/css/building_blocks/cascade_and_inheritance/index.md @@ -170,7 +170,7 @@ Vamos agora dar uma olhada em como o navegador calculará a especificidade. Já A quantidade de especificidade que um seletor tem é medida usando quatro valores (ou componentes) diferentes, que podem ser considerados como milhares, centenas, dezenas e uns - quatro dígitos únicos em quatro colunas: -1. **Thousands**: marque um nesta coluna se a declaração estiver dentro de um atributo {{htmlattrxref ("style")}}, também conhecido como estilos embutidos. Essas declarações não têm seletores, portanto, sua especificidade é sempre simplesmente 1000. +1. **Thousands**: marque um nesta coluna se a declaração estiver dentro de um atributo [`style`](/pt-BR/docs/Web/HTML/Global_attributes#style), também conhecido como estilos embutidos. Essas declarações não têm seletores, portanto, sua especificidade é sempre simplesmente 1000. 2. **Hundreds**: marque um nesta coluna para cada seletor de ID contido no seletor geral. 3. **Tens**: marque um nesta coluna para cada seletor de classe, seletor de atributo ou pseudoclasse contido no seletor geral. 4. **Ones**: marque um nesta coluna para cada seletor de elemento ou pseudoelemento contido dentro do seletor geral. @@ -185,7 +185,7 @@ A tabela a seguir mostra alguns exemplos isolados para colocá-lo no clima. Expe | `h1 + p::first-letter` | 0 | 0 | 0 | 3 | 0003 | | `li > a[href*="en-US"] > .inline-warning` | 0 | 0 | 2 | 2 | 0022 | | `#identifier` | 0 | 1 | 0 | 0 | 0100 | -| No selector, with a rule inside an element's {{htmlattrxref("style")}} attribute | 1 | 0 | 0 | 0 | 1000 | +| No selector, with a rule inside an element's [`style`](/pt-BR/docs/Web/HTML/Global_attributes#style) attribute | 1 | 0 | 0 | 0 | 1000 | Antes de prosseguirmos, vejamos um exemplo em ação. @@ -213,7 +213,7 @@ Vamos examinar isso para ver o que está acontecendo - tente remover algumas das 1. Você verá que os valores da terceira regra {{cssxref ("color")}} e {{cssxref ("padding")}} foram aplicados, mas o {{cssxref ("background-color")}} não foram?. Por quê? Na verdade, todos os três devem ser aplicados, porque as regras posteriores na ordem de origem geralmente substituem as regras anteriores. 2. No entanto, as regras acima vencem, porque os seletores de classe têm uma especificidade mais alta do que os seletores de elemento. -3. Ambos elementos tem {{htmlattrxref("class")}} de `better (melhor)`, mas o segundo tem um **id** {{htmlattrxref("id")}} que é mais forte. Como os IDs têm uma especificidade ainda maior do que as classes (você só pode ter um elemento com cada ID exclusivo em uma página, mas muitos elementos com a mesma classe - os seletores de ID são muito específicos no que se destinam), a cor de fundo vermelha e A borda preta de 1 pixel deve ser aplicada ao segundo elemento, com o primeiro elemento recebendo a cor de fundo cinza, e sem borda, conforme especificado pela classe. +3. Ambos elementos tem [`class`](/pt-BR/docs/Web/HTML/Global_attributes#class) de `better (melhor)`, mas o segundo tem um **id** [`id`](/pt-BR/docs/Web/HTML/Global_attributes#id) que é mais forte. Como os IDs têm uma especificidade ainda maior do que as classes (você só pode ter um elemento com cada ID exclusivo em uma página, mas muitos elementos com a mesma classe - os seletores de ID são muito específicos no que se destinam), a cor de fundo vermelha e A borda preta de 1 pixel deve ser aplicada ao segundo elemento, com o primeiro elemento recebendo a cor de fundo cinza, e sem borda, conforme especificado pela classe. 4. O segundo elemento obtém a cor de fundo vermelha, mas sem borda. Por quê? Por causa da declaração! Important na segunda regra - incluindo isso depois de border: none significa que essa declaração vai superar o valor de border na regra anterior, embora o ID tenha uma especificidade mais alta. > **Nota:** A única maneira de sobrescrever essa declaração! Importante seria incluir outra declaração! Importante em uma declaração com a mesma especificidade posteriormente na ordem de origem, ou uma com uma especificidade mais alta. diff --git a/files/pt-br/learn/forms/basic_native_form_controls/index.md b/files/pt-br/learn/forms/basic_native_form_controls/index.md index a76a9669b9688a..101e3c87049056 100644 --- a/files/pt-br/learn/forms/basic_native_form_controls/index.md +++ b/files/pt-br/learn/forms/basic_native_form_controls/index.md @@ -53,16 +53,16 @@ Text {{htmlelement("input")}} fields are the most basic form widgets. They are a All text fields share some common behaviors: -- They can be marked as {{htmlattrxref("readonly","input")}} (the user cannot modify the input value) or even {{htmlattrxref("disabled","input")}} (the input value is never sent with the rest of the form data). -- They can have a {{htmlattrxref("placeholder","input")}}; this is text that appears inside the text input box that describes the purpose of the box briefly. -- They can be constrained in {{htmlattrxref("size","input")}} (the physical size of the box) and [length](/pt-BR/docs/HTML/Element/input#attr-maxlength) (the maximum number of characters that can be entered into the box). +- They can be marked as [`readonly`](/pt-BR/docs/Web/HTML/Element/input#readonly) (the user cannot modify the input value) or even [`disabled`](/pt-BR/docs/Web/HTML/Element/input#disabled) (the input value is never sent with the rest of the form data). +- They can have a [`placeholder`](/pt-BR/docs/Web/HTML/Element/input#placeholder); this is text that appears inside the text input box that describes the purpose of the box briefly. +- They can be constrained in [`size`](/pt-BR/docs/Web/HTML/Element/input#size) (the physical size of the box) and [length](/pt-BR/docs/HTML/Element/input#attr-maxlength) (the maximum number of characters that can be entered into the box). - They can benefit from [spell checking](/pt-BR/docs/HTML/Element/input#attr-spellcheck), if the browser supports it. > **Nota:** The {{htmlelement("input")}} element is special because it can be almost anything. By simply setting its `type` attribute, it can change radically, and it is used for creating most types of form widget including single line text fields, controls without text input, time and date controls, and buttons. However, there are some exceptions, like {{htmlelement("textarea")}} for multi-line inputs. Take careful note of these as you read the article. ### Single line text fields -A single line text field is created using an {{HTMLElement("input")}} element whose {{htmlattrxref("type","input")}} attribute value is set to `text` (also, if you don't provide the {{htmlattrxref("type","input")}} attribute, `text` is the default value). The value `text` for this attribute is also the fallback value if the value you specify for the {{htmlattrxref("type","input")}} attribute is unknown by the browser (for example if you specify `type="date"` and the browser doesn't support native date pickers). +A single line text field is created using an {{HTMLElement("input")}} element whose [`type`](/pt-BR/docs/Web/HTML/Element/input#type) attribute value is set to `text` (also, if you don't provide the [`type`](/pt-BR/docs/Web/HTML/Element/input#type) attribute, `text` is the default value). The value `text` for this attribute is also the fallback value if the value you specify for the [`type`](/pt-BR/docs/Web/HTML/Element/input#type) attribute is unknown by the browser (for example if you specify `type="date"` and the browser doesn't support native date pickers). > **Nota:** You can find examples of all the single line text field types on GitHub at [single-line-text-fields.html](https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/single-line-text-fields.html) ([see it live also](https://mdn.github.io/learning-area/html/forms/native-form-widgets/single-line-text-fields.html)). @@ -76,11 +76,11 @@ Single line text fields have only one true constraint: if you type text with lin ![Screenshots of single line text fields on several platforms.](/files/4273/all-single-line-text-field.png) -HTML5 enhances the basic single line text field by adding special values for the {{htmlattrxref("type","input")}} attribute. Those values still turn an {{HTMLElement("input")}} element into a single line text field but they add a few extra constraints and features to the field. +HTML5 enhances the basic single line text field by adding special values for the [`type`](/pt-BR/docs/Web/HTML/Element/input#type) attribute. Those values still turn an {{HTMLElement("input")}} element into a single line text field but they add a few extra constraints and features to the field. #### E-mail address field -This type of field is set with the value `email` for the {{htmlattrxref("type","input")}} attribute: +This type of field is set with the value `email` for the [`type`](/pt-BR/docs/Web/HTML/Element/input#type) attribute: ```html @@ -90,7 +90,7 @@ When this `type` is used, the user is required to type a valid e-mail address in ![An invalid email input showing the message Please enter an email address.](email-invalid.png) -It's also possible to let the user type several e-mail addresses into the same input (separated by commas) by including the {{htmlattrxref("multiple","input")}} attribute. +It's also possible to let the user type several e-mail addresses into the same input (separated by commas) by including the [`multiple`](/pt-BR/docs/Web/HTML/Element/input#multiple) attribute. On some devices (especially on mobile), a different virtual keypad might be presented that is more suitable for entering email addresses. @@ -98,7 +98,7 @@ On some devices (especially on mobile), a different virtual keypad might be pres #### Password field -This type of field is set using the value `password` for the {{htmlattrxref("type","input")}} attribute: +This type of field is set using the value `password` for the [`type`](/pt-BR/docs/Web/HTML/Element/input#type) attribute: ```html @@ -112,7 +112,7 @@ Modern browsers recognize the security implications of sending form data over an #### Search field -This type of field is set by using the value `search` for the {{htmlattrxref("type","input")}} attribute: +This type of field is set by using the value `search` for the [`type`](/pt-BR/docs/Web/HTML/Element/input#type) attribute: ```html @@ -124,7 +124,7 @@ The main difference between a text field and a search field is how the browser s #### Phone number field -This type of field is set using `tel` as the value of the {{htmlattrxref("type","input")}} attribute: +This type of field is set using `tel` as the value of the [`type`](/pt-BR/docs/Web/HTML/Element/input#type) attribute: ```html @@ -134,7 +134,7 @@ Due to the wide variety of phone number formats around the world, this type of f #### URL field -This type of field is set using the value `url` for the {{htmlattrxref("type","input")}} attribute: +This type of field is set using the value `url` for the [`type`](/pt-BR/docs/Web/HTML/Element/input#type) attribute: ```html @@ -164,9 +164,9 @@ The main difference between a textarea and a regular single line text field is t | Attribute name | Default value | Description | | ------------------------------------------------ | ------------- | --------------------------------------------------------------------------- | -| {{htmlattrxref("cols","textarea")}} | `20` | The visible width of the text control, in average character widths. | -| {{htmlattrxref("rows","textarea")}} | | The number of visible text lines for the control. | -| {{htmlattrxref("wrap","textarea")}} | `soft` | Indicates how the control wraps text. Possible values are: `hard` or `soft` | +| [`cols`](/pt-BR/docs/Web/HTML/Element/textarea#cols) | `20` | The visible width of the text control, in average character widths. | +| [`rows`](/pt-BR/docs/Web/HTML/Element/textarea#rows) | | The number of visible text lines for the control. | +| [`wrap`](/pt-BR/docs/Web/HTML/Element/textarea#wrap) | `soft` | Indicates how the control wraps text. Possible values are: `hard` or `soft` | Note that the {{HTMLElement("textarea")}} element is written a bit differently from the {{HTMLElement("input")}} element. The {{HTMLElement("input")}} element is an empty element, which means that it cannot contain any child elements. On the other hand, the {{HTMLElement("textarea")}} element is a regular element that can contain text content children. @@ -193,7 +193,7 @@ A select box is created with a {{HTMLElement("select")}} element with one or mor ``` -If required, the default value for the select box can be set using the {{htmlattrxref("selected","option")}} attribute on the desired {{HTMLElement("option")}} element — this option is then preselected when the page loads. The {{HTMLElement("option")}} elements can also be nested inside {{HTMLElement("optgroup")}} elements to create visually associated groups of values: +If required, the default value for the select box can be set using the [`selected`](/pt-BR/docs/Web/HTML/Element/option#selected) attribute on the desired {{HTMLElement("option")}} element — this option is then preselected when the page loads. The {{HTMLElement("option")}} elements can also be nested inside {{HTMLElement("optgroup")}} elements to create visually associated groups of values: ```html ` element) using the {{htmlattrxref("list","input")}} attribute. +The data list is then bound to a text field (usually an `` element) using the [`list`](/pt-BR/docs/Web/HTML/Element/input#list) attribute. Once a data list is affiliated with a form widget, its options are used to auto-complete text entered by the user; typically, this is presented to the user as a drop-down box listing possible matches for what they've typed into the input. @@ -257,7 +257,7 @@ Once a data list is affiliated with a form widget, its options are used to auto- ``` -> **Nota:** According to [the HTML specification](https://www.w3.org/TR/html5/common-input-element-attributes.html#attr-input-list), the {{htmlattrxref("list","input")}} attribute and the {{HTMLElement("datalist")}} element can be used with any kind of widget requiring a user input. However, it is unclear how it should work with controls other than text (color or date for example), and different browsers behave differently from case to case. Because of that, be cautious using this feature with anything but text fields. +> **Nota:** According to [the HTML specification](https://www.w3.org/TR/html5/common-input-element-attributes.html#attr-input-list), the [`list`](/pt-BR/docs/Web/HTML/Element/input#list) attribute and the {{HTMLElement("datalist")}} element can be used with any kind of widget requiring a user input. However, it is unclear how it should work with controls other than text (color or date for example), and different browsers behave differently from case to case. Because of that, be cautious using this feature with anything but text fields. ![Screenshots of datalist on several platforms.](/files/4593/all-datalist.png) @@ -294,9 +294,9 @@ Browsers that support the {{HTMLElement("datalist")}} element will ignore all th ## Checkable items -Checkable items are widgets whose state you can change by clicking on them. There are two kinds of checkable item: the check box and the radio button. Both use the {{htmlattrxref("checked","input")}} attribute to indicate whether the widget is checked by default or not. +Checkable items are widgets whose state you can change by clicking on them. There are two kinds of checkable item: the check box and the radio button. Both use the [`checked`](/pt-BR/docs/Web/HTML/Element/input#checked) attribute to indicate whether the widget is checked by default or not. -It's worth noting that these widgets do not behave exactly like other form widgets. For most form widgets, once the form is submitted all widgets that have a {{htmlattrxref("name","input")}} attribute are sent, even if no value has been filled out. In the case of checkable items, their values are sent only if they are checked. If they are not checked, nothing is sent, not even their name. +It's worth noting that these widgets do not behave exactly like other form widgets. For most form widgets, once the form is submitted all widgets that have a [`name`](/pt-BR/docs/Web/HTML/Element/input#name) attribute are sent, even if no value has been filled out. In the case of checkable items, their values are sent only if they are checked. If they are not checked, nothing is sent, not even their name. > **Nota:** You can find the examples from this section on GitHub as [checkable-items.html](https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/checkable-items.html) ([see it live also](https://mdn.github.io/learning-area/html/forms/native-form-widgets/checkable-items.html)). @@ -306,7 +306,7 @@ You also need to provide values for these kinds of inputs inside the `value` att ### Check box -A check box is created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value `checkbox`. +A check box is created using the {{HTMLElement("input")}} element with its [`type`](/pt-BR/docs/Web/HTML/Element/input#type) attribute set to the value `checkbox`. ```html @@ -318,13 +318,13 @@ Including the `checked` attribute makes the checkbox checked automatically when ### Radio button -A radio button is created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value `radio`. +A radio button is created using the {{HTMLElement("input")}} element with its [`type`](/pt-BR/docs/Web/HTML/Element/input#type) attribute set to the value `radio`. ```html ``` -Several radio buttons can be tied together. If they share the same value for their {{htmlattrxref("name","input")}} attribute, they will be considered to be in the same group of buttons. Only one button in a given group may be checked at the same time; this means that when one of them is checked all the others automatically get unchecked. When the form is sent, only the value of the checked radio button is sent. If none of them are checked, the whole pool of radio buttons is considered to be in an unknown state and no value is sent with the form. +Several radio buttons can be tied together. If they share the same value for their [`name`](/pt-BR/docs/Web/HTML/Element/input#name) attribute, they will be considered to be in the same group of buttons. Only one button in a given group may be checked at the same time; this means that when one of them is checked all the others automatically get unchecked. When the form is sent, only the value of the checked radio button is sent. If none of them are checked, the whole pool of radio buttons is considered to be in an unknown state and no value is sent with the form. ```html
@@ -361,7 +361,7 @@ Within HTML forms, there are three kinds of button: > **Nota:** You can find the examples from this section on GitHub as [button-examples.html](https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/button-examples.html) ([see it live also](https://mdn.github.io/learning-area/html/forms/native-form-widgets/button-examples.html)). -A button is created using a {{HTMLElement("button")}} element or an {{HTMLElement("input")}} element. It's the value of the {{htmlattrxref("type","input")}} attribute that specifies what kind of button is displayed: +A button is created using a {{HTMLElement("button")}} element or an {{HTMLElement("input")}} element. It's the value of the [`type`](/pt-BR/docs/Web/HTML/Element/input#type) attribute that specifies what kind of button is displayed: ### submit @@ -410,12 +410,12 @@ In this section we cover those widgets that let users input complex or unusual d ### Numbers -Widgets for numbers are created with the {{HTMLElement("input")}} element, with its {{htmlattrxref("type","input")}} attribute set to the value `number`. This control looks like a text field but allows only floating-point numbers, and usually provides some buttons to increase or decrease the value of the widget. +Widgets for numbers are created with the {{HTMLElement("input")}} element, with its [`type`](/pt-BR/docs/Web/HTML/Element/input#type) attribute set to the value `number`. This control looks like a text field but allows only floating-point numbers, and usually provides some buttons to increase or decrease the value of the widget. It's also possible to: -- Constrain the value by setting the {{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} attributes. -- Specify the amount by which the increase and decrease buttons change the widget's value by setting the {{htmlattrxref("step","input")}} attribute. +- Constrain the value by setting the [`min`](/pt-BR/docs/Web/HTML/Element/input#min) and [`max`](/pt-BR/docs/Web/HTML/Element/input#max) attributes. +- Specify the amount by which the increase and decrease buttons change the widget's value by setting the [`step`](/pt-BR/docs/Web/HTML/Element/input#step) attribute. #### Example @@ -431,7 +431,7 @@ This creates a number widget whose value is restricted to any value between 1 an Another way to pick a number is to use a slider. Visually speaking, sliders are less accurate than text fields, therefore they are used to pick a number whose exact value is not necessarily important. -A slider is created by using the {{HTMLElement("input")}} with its {{htmlattrxref("type","input")}} attribute set to the value `range`. It's important to properly configure your slider; to that end, it's highly recommended that you set the {{htmlattrxref("min","input")}}, {{htmlattrxref("max","input")}}, and {{htmlattrxref("step","input")}} attributes. +A slider is created by using the {{HTMLElement("input")}} with its [`type`](/pt-BR/docs/Web/HTML/Element/input#type) attribute set to the value `range`. It's important to properly configure your slider; to that end, it's highly recommended that you set the [`min`](/pt-BR/docs/Web/HTML/Element/input#min), [`max`](/pt-BR/docs/Web/HTML/Element/input#max), and [`step`](/pt-BR/docs/Web/HTML/Element/input#step) attributes. #### Example @@ -470,7 +470,7 @@ Here we store references to the range input and the span in two variables, then Gathering date and time values has traditionally been a nightmare for web developers. HTML5 brings some enhancements here by providing a special control to handle this specific kind of data. -A date and time control is created using the {{HTMLElement("input")}} element and an appropriate value for the {{htmlattrxref("type","input")}} attribute, depending on whether you wish to collect dates, times, or both. +A date and time control is created using the {{HTMLElement("input")}} element and an appropriate value for the [`type`](/pt-BR/docs/Web/HTML/Element/input#type) attribute, depending on whether you wish to collect dates, times, or both. #### `datetime-local` @@ -504,7 +504,7 @@ This creates a widget to display and pick a week number and its year. ``` -All date and time control can be constrained using the {{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} attributes. +All date and time control can be constrained using the [`min`](/pt-BR/docs/Web/HTML/Element/input#min) and [`max`](/pt-BR/docs/Web/HTML/Element/input#max) attributes. ```html @@ -517,7 +517,7 @@ Warning — The date and time widgets don't have the deepest support. At the mom Colors are always a bit difficult to handle. There are many ways to express them: RGB values (decimal or hexadecimal), HSL values, keywords, etc. The color widget lets users pick a color in both textual and visual ways. -A color widget is created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value `color`. +A color widget is created using the {{HTMLElement("input")}} element with its [`type`](/pt-BR/docs/Web/HTML/Element/input#type) attribute set to the value `color`. ```html @@ -535,7 +535,7 @@ There are a few other widgets that cannot be easily classified due to their very HTML forms are able to send files to a server; this specific action is detailed in the article [Sending and retrieving form data](/pt-BR/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data). The file picker widget is how the user can choose one or more files to send. -To create a file picker widget, you use the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to `file`. The types of files that are accepted can be constrained using the {{htmlattrxref("accept","input")}} attribute. In addition, if you want to let the user pick more than one file, you can do so by adding the {{htmlattrxref("multiple","input")}} attribute. +To create a file picker widget, you use the {{HTMLElement("input")}} element with its [`type`](/pt-BR/docs/Web/HTML/Element/input#type) attribute set to `file`. The types of files that are accepted can be constrained using the [`accept`](/pt-BR/docs/Web/HTML/Element/input#accept) attribute. In addition, if you want to let the user pick more than one file, you can do so by adding the [`multiple`](/pt-BR/docs/Web/HTML/Element/input#multiple) attribute. #### Example @@ -547,7 +547,7 @@ In this example, a file picker is created that requests graphic image files. The ### Hidden content -It's sometimes convenient for technical reasons to have pieces of data that are sent with a form but not displayed to the user. To do this, you can add an invisible element in your form. Use an {{HTMLElement("input")}} with its {{htmlattrxref("type","input")}} attribute set to the value `hidden`. +It's sometimes convenient for technical reasons to have pieces of data that are sent with a form but not displayed to the user. To do this, you can add an invisible element in your form. Use an {{HTMLElement("input")}} with its [`type`](/pt-BR/docs/Web/HTML/Element/input#type) attribute set to the value `hidden`. If you create such an element, it's required to set its `name` and `value` attributes: @@ -559,7 +559,7 @@ If you create such an element, it's required to set its `name` and `value` attri The **image button** control is one which is displayed exactly like an {{HTMLElement("img")}} element, except that when the user clicks on it, it behaves like a submit button (see above). -An image button is created using an {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value `image`. This element supports exactly the same set of attributes as the {{HTMLElement("img")}} element, plus all the attributes supported by other form buttons. +An image button is created using an {{HTMLElement("input")}} element with its [`type`](/pt-BR/docs/Web/HTML/Element/input#type) attribute set to the value `image`. This element supports exactly the same set of attributes as the {{HTMLElement("img")}} element, plus all the attributes supported by other form buttons. ```html @@ -567,8 +567,8 @@ An image button is created using an {{HTMLElement("input")}} element with its {{ If the image button is used to submit the form, this widget doesn't submit its value; instead the X and Y coordinates of the click on the image are submitted (the coordinates are relative to the image, meaning that the upper-left corner of the image represents the coordinate 0, 0). The coordinates are sent as two key/value pairs: -- The X value key is the value of the {{htmlattrxref("name","input")}} attribute followed by the string "_.x_". -- The Y value key is the value of the {{htmlattrxref("name","input")}} attribute followed by the string "_.y_". +- The X value key is the value of the [`name`](/pt-BR/docs/Web/HTML/Element/input#name) attribute followed by the string "_.x_". +- The Y value key is the value of the [`name`](/pt-BR/docs/Web/HTML/Element/input#name) attribute followed by the string "_.y_". So for example when you click on the image of this widget, you are sent to a URL like the following: @@ -584,7 +584,7 @@ Meters and progress bars are visual representations of numeric values. #### Progress -A progress bar represents a value that changes over time up to a maximum value specified by the {{htmlattrxref("max","progress")}} attribute. Such a bar is created using a {{ HTMLElement("progress")}} element. +A progress bar represents a value that changes over time up to a maximum value specified by the [`max`](/pt-BR/docs/Web/HTML/Element/progress#max) attribute. Such a bar is created using a {{ HTMLElement("progress")}} element. ```html 75/100 @@ -596,19 +596,19 @@ The content inside the {{HTMLElement("progress")}} element is a fallback for bro #### Meter -A meter bar represents a fixed value in a range delimited by a {{htmlattrxref("min","meter")}} and a {{htmlattrxref("max","meter")}} value. This value is visualy rendered as a bar, and to know how this bar looks, we compare the value to some other set values: +A meter bar represents a fixed value in a range delimited by a [`min`](/pt-BR/docs/Web/HTML/Element/meter#min) and a [`max`](/pt-BR/docs/Web/HTML/Element/meter#max) value. This value is visualy rendered as a bar, and to know how this bar looks, we compare the value to some other set values: -- The {{htmlattrxref("low","meter")}} and {{htmlattrxref("high","meter")}} values divide the range in three parts: +- The [`low`](/pt-BR/docs/Web/HTML/Element/meter#low) and [`high`](/pt-BR/docs/Web/HTML/Element/meter#high) values divide the range in three parts: - - The lower part of the range is between the {{htmlattrxref("min","meter")}} and {{htmlattrxref("low","meter")}} values (including those values). - - The medium part of the range is between the {{htmlattrxref("low","meter")}} and {{htmlattrxref("high","meter")}} values (excluding those values). - - The higher part of the range is between the {{htmlattrxref("high","meter")}} and {{htmlattrxref("max","meter")}} values (including those values). + - The lower part of the range is between the [`min`](/pt-BR/docs/Web/HTML/Element/meter#min) and [`low`](/pt-BR/docs/Web/HTML/Element/meter#low) values (including those values). + - The medium part of the range is between the [`low`](/pt-BR/docs/Web/HTML/Element/meter#low) and [`high`](/pt-BR/docs/Web/HTML/Element/meter#high) values (excluding those values). + - The higher part of the range is between the [`high`](/pt-BR/docs/Web/HTML/Element/meter#high) and [`max`](/pt-BR/docs/Web/HTML/Element/meter#max) values (including those values). -- The {{htmlattrxref("optimum","meter")}} value defines the optimum value for the {{HTMLElement("meter")}} element. In conjuction with the {{htmlattrxref("low","meter")}} and {{htmlattrxref("high","meter")}} value, it defines which part of the range is prefered: +- The [`optimum`](/pt-BR/docs/Web/HTML/Element/meter#optimum) value defines the optimum value for the {{HTMLElement("meter")}} element. In conjuction with the [`low`](/pt-BR/docs/Web/HTML/Element/meter#low) and [`high`](/pt-BR/docs/Web/HTML/Element/meter#high) value, it defines which part of the range is prefered: - - If the {{htmlattrxref("optimum","meter")}} value is in the lower part of the range, the lower range is considered to be the prefered part, the medium range is considered to be the average part and the higher range is considered to be the worst part. - - If the {{htmlattrxref("optimum","meter")}} value is in the medium part of the range, the lower range is considered to be an average part, the medium range is considered to be the prefered part and the higher range is considered to be average as well. - - If the {{htmlattrxref("optimum","meter")}} value is in the higher part of the range, the lower range is considered to be the worst part, the medium range is considered to be the average part and the higher range is considered to be the prefered part. + - If the [`optimum`](/pt-BR/docs/Web/HTML/Element/meter#optimum) value is in the lower part of the range, the lower range is considered to be the prefered part, the medium range is considered to be the average part and the higher range is considered to be the worst part. + - If the [`optimum`](/pt-BR/docs/Web/HTML/Element/meter#optimum) value is in the medium part of the range, the lower range is considered to be an average part, the medium range is considered to be the prefered part and the higher range is considered to be average as well. + - If the [`optimum`](/pt-BR/docs/Web/HTML/Element/meter#optimum) value is in the higher part of the range, the lower range is considered to be the worst part, the medium range is considered to be the average part and the higher range is considered to be the prefered part. All browsers that implement the {{HTMLElement("meter")}} element use those values to change the color of the meter bar: diff --git a/files/pt-br/learn/forms/form_validation/index.md b/files/pt-br/learn/forms/form_validation/index.md index e5bb97b07668e7..0a0162346979c8 100644 --- a/files/pt-br/learn/forms/form_validation/index.md +++ b/files/pt-br/learn/forms/form_validation/index.md @@ -105,7 +105,7 @@ Para começar, faça uma cópia de `fruit-start.html` em um novo diretório em s ### O atributo obrigatório -O recurso de validação HTML5 mais simples de usar é o atributo {{htmlattrxref("required", "input")}} — se você quiser tornar uma entrada obrigatória, você pode marcar o elemento usando este atributo. Quando este atributo estiver definido, o formulário não será enviado (e exibirá uma mensagem de erro) quando a entrada estiver vazia (a entrada também será considerada inválida). +O recurso de validação HTML5 mais simples de usar é o atributo [`required`](/pt-BR/docs/Web/HTML/Element/input#required) — se você quiser tornar uma entrada obrigatória, você pode marcar o elemento usando este atributo. Quando este atributo estiver definido, o formulário não será enviado (e exibirá uma mensagem de erro) quando a entrada estiver vazia (a entrada também será considerada inválida). Adicione um atributo `required` à sua entrada, conforme mostrado abaixo: @@ -135,7 +135,7 @@ Isso faz com que a entrada tenha uma borda tracejada vermelha brilhante quando f ### Validando com uma expressão regular -Outro recurso de validação muito comum é o atributo {{htmlattrxref("pattern", "input")}} que espera uma [Expressão Regular](/pt-BR/docs/JavaScript/Guide/Regular_Expressions) como seu valor. Uma expressão regular (regex) é um padrão que pode ser usado para identificar combinações de caracteres em strings de texto, então elas são ideais para validação de formulários (assim como uma variedade de outros usos em JavaScript) +Outro recurso de validação muito comum é o atributo [`pattern`](/pt-BR/docs/Web/HTML/Element/input#pattern) que espera uma [Expressão Regular](/pt-BR/docs/JavaScript/Guide/Regular_Expressions) como seu valor. Uma expressão regular (regex) é um padrão que pode ser usado para identificar combinações de caracteres em strings de texto, então elas são ideais para validação de formulários (assim como uma variedade de outros usos em JavaScript) Regexes são bastante complexas e não pretendemos ensiná-las exaustivamente neste artigo. Abaixo estão alguns exemplos para dar uma ideia básica de como eles funcionam: @@ -171,15 +171,15 @@ Neste exemplo, o elemento {{HTMLElement("input")}} aceita um dos dois valores po Neste ponto, tente alterar o valor dentro do atributo `pattern` para igualar alguns dos exemplos que você viu anteriormente e veja como isso afeta os valores que você pode inserir para tornar o valor de entrada válido. Tente escrever alguns dos seus próprios, e veja como você se sai! Tente torná-los relacionados a frutas sempre que possível, para que seus exemplos façam sentido! -> **Nota:** Alguns tipos de elemento {{HTMLElement("input")}} não precisam de um atributo {{htmlattrxref("pattern","input")}} para serem validados. Especificar o tipo `email`, por exemplo, valida o valor inserido em relação a uma expressão regular que corresponde a um endereço de e-mail bem formado (ou uma lista de endereços de e-mail separados por vírgula se tiver o {{htmlattrxref("multiple","input")}} atributo). Como outro exemplo, os campos com o tipo `url` requerem automaticamente um URL devidamente formado. +> **Nota:** Alguns tipos de elemento {{HTMLElement("input")}} não precisam de um atributo [`pattern`](/pt-BR/docs/Web/HTML/Element/input#pattern) para serem validados. Especificar o tipo `email`, por exemplo, valida o valor inserido em relação a uma expressão regular que corresponde a um endereço de e-mail bem formado (ou uma lista de endereços de e-mail separados por vírgula se tiver o [`multiple`](/pt-BR/docs/Web/HTML/Element/input#multiple) atributo). Como outro exemplo, os campos com o tipo `url` requerem automaticamente um URL devidamente formado. -> **Nota:** O elemento {{HTMLElement("textarea")}} não suporta o atributo {{htmlattrxref("pattern","input")}}. +> **Nota:** O elemento {{HTMLElement("textarea")}} não suporta o atributo [`pattern`](/pt-BR/docs/Web/HTML/Element/input#pattern). ### Restringindo o comprimento de suas entradas -Todos os campos de texto criados por {{HTMLElement("input")}} ou {{HTMLElement("textarea")}} podem ser restringidos em tamanho usando {{htmlattrxref("minlength","input")}} e {{ htmlattrxref("maxlength","input")}} atributos. Um campo é inválido se seu valor for menor que o valor {{htmlattrxref("minlength","input")}} ou maior que o valor {{htmlattrxref("maxlength","input")}}. Os navegadores geralmente não permitem que o usuário digite um valor maior do que o esperado nos campos de texto, mas é útil ter esse controle refinado disponível. +Todos os campos de texto criados por {{HTMLElement("input")}} ou {{HTMLElement("textarea")}} podem ser restringidos em tamanho usando [`minlength`](/pt-BR/docs/Web/HTML/Element/input#minlength) e [`maxlength`](/pt-BR/docs/Web/HTML/Element/input#maxlength) atributos. Um campo é inválido se seu valor for menor que o valor [`minlength`](/pt-BR/docs/Web/HTML/Element/input#minlength) ou maior que o valor [`maxlength`](/pt-BR/docs/Web/HTML/Element/input#maxlength). Os navegadores geralmente não permitem que o usuário digite um valor maior do que o esperado nos campos de texto, mas é útil ter esse controle refinado disponível. -Para campos numéricos (ou seja, ``), os atributos {{htmlattrxref("min","input")}} e {{htmlattrxref("max","input")}} também fornecem uma restrição de validação. Se o valor do campo for menor que o atributo {{htmlattrxref("min","input")}} ou maior que o atributo {{htmlattrxref("max","input")}}, o campo será inválido. +Para campos numéricos (ou seja, ``), os atributos [`min`](/pt-BR/docs/Web/HTML/Element/input#min) e [`max`](/pt-BR/docs/Web/HTML/Element/input#max) também fornecem uma restrição de validação. Se o valor do campo for menor que o atributo [`min`](/pt-BR/docs/Web/HTML/Element/input#min) ou maior que o atributo [`max`](/pt-BR/docs/Web/HTML/Element/input#max), o campo será inválido. Vejamos outro exemplo. Crie uma nova cópia do arquivo [fruit-start.html](https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html). @@ -222,7 +222,7 @@ Aqui está o exemplo rodando ao vivo: {{EmbedLiveSample("Constraining_the_length_of_your_entries", "100%", 100)}} -> **Nota:** `` (e outros tipos, como `range`) também podem receber um atributo {{htmlattrxref("step", "input")}}, que especifica o que incrementar o valor aumentará ou diminuirá quando os controles de entrada forem usados (como os botões numéricos para cima e para baixo). +> **Nota:** `` (e outros tipos, como `range`) também podem receber um atributo [`step`](/pt-BR/docs/Web/HTML/Element/input#step), que especifica o que incrementar o valor aumentará ou diminuirá quando os controles de entrada forem usados (como os botões numéricos para cima e para baixo). ### Exemplo completo @@ -417,7 +417,7 @@ Vamos ver como usar essa API para criar mensagens de erro personalizadas. Primei ``` -Este formulário simples usa o atributo {{htmlattrxref("novalidate","form")}} para desativar a validação automática do navegador; isso permite que nosso script assuma o controle sobre a validação. No entanto, isso não desativa o suporte para a API de validação de restrição nem a aplicação da pseudoclasse CSS {{cssxref(":valid")}}, {{cssxref(":invalid")}}, {{cssxref( ":in-range")}} e {{cssxref(":out-of-range")}} classes. Isso significa que, embora o navegador não verifique automaticamente a validade do formulário antes de enviar seus dados, você ainda pode fazer isso sozinho e estilizar o formulário de acordo. +Este formulário simples usa o atributo [`novalidate`](/pt-BR/docs/Web/HTML/Element/form#novalidate) para desativar a validação automática do navegador; isso permite que nosso script assuma o controle sobre a validação. No entanto, isso não desativa o suporte para a API de validação de restrição nem a aplicação da pseudoclasse CSS {{cssxref(":valid")}}, {{cssxref(":invalid")}}, {{cssxref( ":in-range")}} e {{cssxref(":out-of-range")}} classes. Isso significa que, embora o navegador não verifique automaticamente a validade do formulário antes de enviar seus dados, você ainda pode fazer isso sozinho e estilizar o formulário de acordo. O atributo [`aria-live`](/pt-BR/docs/Accessibility/ARIA/ARIA_Live_Regions) garante que nossa mensagem de erro personalizada seja apresentada a todos, incluindo aqueles que usam tecnologias assistivas, como leitores de tela. diff --git a/files/pt-br/learn/forms/sending_and_retrieving_form_data/index.md b/files/pt-br/learn/forms/sending_and_retrieving_form_data/index.md index 6370fb222dac91..b0f9e7ea56e428 100644 --- a/files/pt-br/learn/forms/sending_and_retrieving_form_data/index.md +++ b/files/pt-br/learn/forms/sending_and_retrieving_form_data/index.md @@ -20,9 +20,9 @@ No lado do cliente, um formulário HTML é nada mais do que uma maneira convenie ### No lado do cliente: definindo como enviar os dados -O elemento {{HTMLElement("form")}} define como os dados serão enviados. Todos os seus atributos são projetados para permitir que você configure o pedido a ser enviado quando um usuário acessa um botão de envio. Os dois atributos mais importantes são:{{htmlattrxref("action","form")}} e {{htmlattrxref("method","form")}}. +O elemento {{HTMLElement("form")}} define como os dados serão enviados. Todos os seus atributos são projetados para permitir que você configure o pedido a ser enviado quando um usuário acessa um botão de envio. Os dois atributos mais importantes são:[`action`](/pt-BR/docs/Web/HTML/Element/form#action) e [`method`](/pt-BR/docs/Web/HTML/Element/form#method). -#### o atributo {{htmlattrxref("action","form")}} +#### o atributo [`action`](/pt-BR/docs/Web/HTML/Element/form#action) Este atributo define para onde os dados são enviados. Seu valor deve ser um URL válido. Se esse atributo não for fornecido, os dados serão enviados para o URL da página que contém o formulário. @@ -46,15 +46,15 @@ Quando especificado sem atributos, como abaixo, o atributo {{HTMLElement("form")
``` -Muitas páginas mais antigas usam a seguinte notação para indicar que os dados devem ser enviados para a mesma página que contém o formulário; Isso era necessário porque até HTML5, o atributo {{htmlattrxref ( "action", "form")}} era obrigatório. Isso não é mais necessário. +Muitas páginas mais antigas usam a seguinte notação para indicar que os dados devem ser enviados para a mesma página que contém o formulário; Isso era necessário porque até HTML5, o atributo [`action`](/pt-BR/docs/Web/HTML/Element/form#action) era obrigatório. Isso não é mais necessário. ```html ``` -> **Nota:** **Nota: É possível especificar um URL que use o protocolo HTTPS (HTTP seguro). Quando você fizer isso, os dados são criptografados junto com o resto da solicitação, mesmo se o formulário em si é hospedado em uma página insegura acessada usando HTTP. Por outro lado, se o formulário estiver hospedado na página segura, mas você especificar um URL HTTP inseguro com o atributo {{htmlattrxref ( "action", "form")}}, todos os navegadores exibirão um aviso de segurança para o usuário cada vez que Tente enviar dados porque os dados não serão criptografados.** +> **Nota:** **Nota: É possível especificar um URL que use o protocolo HTTPS (HTTP seguro). Quando você fizer isso, os dados são criptografados junto com o resto da solicitação, mesmo se o formulário em si é hospedado em uma página insegura acessada usando HTTP. Por outro lado, se o formulário estiver hospedado na página segura, mas você especificar um URL HTTP inseguro com o atributo [`action`](/pt-BR/docs/Web/HTML/Element/form#action), todos os navegadores exibirão um aviso de segurança para o usuário cada vez que Tente enviar dados porque os dados não serão criptografados.** -#### o atributo {{htmlattrxref("method","form")}} +#### o atributo [`method`](/pt-BR/docs/Web/HTML/Element/form#method) Este atributo define como os dados são enviados. o [HTTP protocol](/pt-BR/docs/HTTP) @@ -183,14 +183,14 @@ Vale a pena notar que mesmo usando essas estruturas, trabalhar com formulários Arquivos são um caso especial com formulários HTML. Eles são dados binários - ou considerados como tal - onde todos os outros dados são dados de texto. Porque HTTP é um protocolo de texto, há requisitos especiais para manipular dados binários. -### o {{htmlattrxref("enctype","form")}} atributo +### o [`enctype`](/pt-BR/docs/Web/HTML/Element/form#enctype) atributo Esse atributo permite especificar o valor do cabeçalho HTTP Content-Type. Este cabeçalho é muito importante porque informa ao servidor que tipo de dados está sendo enviado. Por padrão, seu valor é application / x-www-form-urlencoded. Em termos humanos, isso significa: "Este é o formulário de dados que foi codificado em forma de URL." Mas se você quiser enviar arquivos, você precisa fazer duas coisas: -- Colocou o {{htmlattrxref("method","form")}} Atributo para POST porque o conteúdo do arquivo não pode ser colocado dentro de um parâmetro de URL usando um formulário. -- Defina o valor de {{htmlattrxref("enctype","form")}} Para multipart / form-data porque os dados serão divididos em várias partes, uma para cada arquivo mais uma para o texto do corpo do formulário que pode ser enviado com eles. +- Colocou o [`method`](/pt-BR/docs/Web/HTML/Element/form#method) Atributo para POST porque o conteúdo do arquivo não pode ser colocado dentro de um parâmetro de URL usando um formulário. +- Defina o valor de [`enctype`](/pt-BR/docs/Web/HTML/Element/form#enctype) Para multipart / form-data porque os dados serão divididos em várias partes, uma para cada arquivo mais uma para o texto do corpo do formulário que pode ser enviado com eles. Por exemplo: @@ -201,7 +201,7 @@ Por exemplo:
``` -> **Nota:** **Nota: Alguns navegadores suportam**{{htmlattrxref("multiple","input")}} Atributo no {{HTMLElement("input")}} Elemento para enviar mais de um arquivo com apenas um elemento de entrada. Como o servidor lida com esses arquivos realmente depende da tecnologia usada no servidor. Como mencionado anteriormente, usando um quadro fará sua vida muito mais fácil. +> **Nota:** **Nota: Alguns navegadores suportam**[`multiple`](/pt-BR/docs/Web/HTML/Element/input#multiple) Atributo no {{HTMLElement("input")}} Elemento para enviar mais de um arquivo com apenas um elemento de entrada. Como o servidor lida com esses arquivos realmente depende da tecnologia usada no servidor. Como mencionado anteriormente, usando um quadro fará sua vida muito mais fácil. > **Aviso:** **Aviso: Muitos servidores são configurados com um limite de tamanho para arquivos e solicitações HTTP, a fim de evitar abusos. É importante verificar esse limite com o administrador do servidor antes de enviar um arquivo.** diff --git a/files/pt-br/learn/html/introduction_to_html/advanced_text_formatting/index.md b/files/pt-br/learn/html/introduction_to_html/advanced_text_formatting/index.md index 22d0b760f03b74..425d825d1b228a 100644 --- a/files/pt-br/learn/html/introduction_to_html/advanced_text_formatting/index.md +++ b/files/pt-br/learn/html/introduction_to_html/advanced_text_formatting/index.md @@ -185,7 +185,7 @@ O elemento de citação — `` — é "destinado a citações curtas que não ### Citações -O conteúdo do atributo {{htmlattrxref("cite","blockquote")}} parece útil, mas, infelizmente, navegadores, leitores de tela etc. não fazem muito uso dele. Não há como fazer com que o navegador exiba o conteúdo de `cite`, sem escrever sua própria solução usando JavaScript ou CSS. Se você deseja disponibilizar a fonte da citação na página, uma maneira melhor de marcá-la é colocar o elemento {{htmlelement("cite")}} próximo ao elemento quote. Isso realmente tem o objetivo de conter o nome da fonte da citação — ou seja, o nome do livro ou o nome da pessoa que disse a citação — mas não há razão para que você não possa vincular o texto dentro de `` à citação fonte de alguma forma: +O conteúdo do atributo [`cite`](/pt-BR/docs/Web/HTML/Element/blockquote#cite) parece útil, mas, infelizmente, navegadores, leitores de tela etc. não fazem muito uso dele. Não há como fazer com que o navegador exiba o conteúdo de `cite`, sem escrever sua própria solução usando JavaScript ou CSS. Se você deseja disponibilizar a fonte da citação na página, uma maneira melhor de marcá-la é colocar o elemento {{htmlelement("cite")}} próximo ao elemento quote. Isso realmente tem o objetivo de conter o nome da fonte da citação — ou seja, o nome do livro ou o nome da pessoa que disse a citação — mas não há razão para que você não possa vincular o texto dentro de `` à citação fonte de alguma forma: ```html

According to the @@ -279,7 +279,7 @@ window.addEventListener("load", drawOutput); ## Abreviações -Outro elemento bastante comum que você encontrará ao olhar na Web é o {{htmlelement("abbr")}} — usado para contornar uma abreviação ou sigla e fornecer uma expansão completa do termo (incluído em um atributo {{htmlattrxref("title")}}.) Vejamos alguns exemplos +Outro elemento bastante comum que você encontrará ao olhar na Web é o {{htmlelement("abbr")}} — usado para contornar uma abreviação ou sigla e fornecer uma expansão completa do termo (incluído em um atributo [`title`](/pt-BR/docs/Web/HTML/Global_attributes#title).) Vejamos alguns exemplos ```

Usamos HTML para estruturar nossos documentos da web.

diff --git a/files/pt-br/learn/html/introduction_to_html/creating_hyperlinks/index.md b/files/pt-br/learn/html/introduction_to_html/creating_hyperlinks/index.md index f5f18d569143f2..3f51ad578501a2 100644 --- a/files/pt-br/learn/html/introduction_to_html/creating_hyperlinks/index.md +++ b/files/pt-br/learn/html/introduction_to_html/creating_hyperlinks/index.md @@ -49,7 +49,7 @@ A página inicial da BBC, por exemplo, contém um grande número de links que ap ## Anatomia de um link -Um link básico é criado envolvendo o texto (ou outro conteúdo, veja [Block level links](#block_level_links)) que você quer transformar em um link dentro de um elemento {{htmlelement("a")}}, e dando-lhe um atributo {{htmlattrxref("href", "a")}}, (também conhecido como **Hypertext Reference**, ou **target**) que conterá o endereço da Web para o qual você deseja que o link aponte. +Um link básico é criado envolvendo o texto (ou outro conteúdo, veja [Block level links](#block_level_links)) que você quer transformar em um link dentro de um elemento {{htmlelement("a")}}, e dando-lhe um atributo [`href`](/pt-BR/docs/Web/HTML/Element/a#href), (também conhecido como **Hypertext Reference**, ou **target**) que conterá o endereço da Web para o qual você deseja que o link aponte. ```html

Estou criando um link para @@ -280,7 +280,7 @@ Na sua forma mais comum, um `mailto:` simplesmente indica o endereço de e-mail Isso resulta em um _link_ que se parece com isto: [Enviar e-mail para lugar nenhum.](mailto:nowhere@mozilla.org) -Na verdade, o endereço de e-mail é opcional. Se você deixar de fora (ou seja, seu {{htmlattrxref("href", "a")}} for simplesmente "mailto:"), uma nova janela de e-mail de saída será aberta pelo aplicativo de e-mail do usuário sem um destinatário. Isso geralmente é útil como "Compartilhar" _links_ que os usuários podem clicar para enviar um e-mail para um endereço escolhido. +Na verdade, o endereço de e-mail é opcional. Se você deixar de fora (ou seja, seu [`href`](/pt-BR/docs/Web/HTML/Element/a#href) for simplesmente "mailto:"), uma nova janela de e-mail de saída será aberta pelo aplicativo de e-mail do usuário sem um destinatário. Isso geralmente é útil como "Compartilhar" _links_ que os usuários podem clicar para enviar um e-mail para um endereço escolhido. ### Especificando detalhes diff --git a/files/pt-br/learn/html/introduction_to_html/debugging_html/index.md b/files/pt-br/learn/html/introduction_to_html/debugging_html/index.md index 9f00f47b8267e8..6292cc67b02c01 100644 --- a/files/pt-br/learn/html/introduction_to_html/debugging_html/index.md +++ b/files/pt-br/learn/html/introduction_to_html/debugging_html/index.md @@ -91,7 +91,7 @@ O próprio HTML não sofre de erros de sintaxe porque os navegadores o analisam - Os elementos {{htmlelement("p","parágrafo")}} e {{htmlelement("li","item da lista")}} não possuem _tags_ de fechamento. Olhando a imagem acima, isso não parece ter afetado muito a renderização do HTML já que é fácil deduzir onde um elemento deveria terminar e outro, começar. - O primeiro elemento {{htmlelement("strong")}} não possui _tag_ de fechamento. Isto é um pouco mais problemático porque não é necessariamente fácil determinar onde um elemento deveria terminar. Assim, todo o resto do texto foi fortemente enfatizado. - Essa seção foi aninhada incorretamente: `negrito negrito sublinhado? O que é isso?`. Não é fácil dizer como esse trecho foi interpretado por causa do problema anterior. - - O valor do atributo {{htmlattrxref("href","a")}} não tem as aspas de fechamento. Isso parece ter causado o maior problema — o _link_ não foi renderizado. + - O valor do atributo [`href`](/pt-BR/docs/Web/HTML/Element/a#href) não tem as aspas de fechamento. Isso parece ter causado o maior problema — o _link_ não foi renderizado. 5. Agora vamos dar uma olhada no HTML que o navegador renderizou, comparando-o com o nosso código fonte. Para fazer isso, usaremos as ferramentas de desenvolvimento oferecidas pelo navegador. Se você não está familiarizado com estas ferramentas, dê uma olhadinha nesse tutorial: [O que são as ferramentas de desenvolvimento do navegador](/pt-BR/docs/Learn/Common_questions/What_are_browser_developer_tools). 6. No inspetor DOM, você pode ver como o HTML renderizado fica: ![The HTML inspector in Firefox, with our example's paragraph highlighted, showing the text "What causes errors in HTML?" Here you can see that the paragraph element has been closed by the browser.](html-inspector.png) diff --git a/files/pt-br/learn/html/introduction_to_html/document_and_website_structure/index.md b/files/pt-br/learn/html/introduction_to_html/document_and_website_structure/index.md index 86aab035398327..03bea9541324cf 100644 --- a/files/pt-br/learn/html/introduction_to_html/document_and_website_structure/index.md +++ b/files/pt-br/learn/html/introduction_to_html/document_and_website_structure/index.md @@ -181,7 +181,7 @@ Reserve um tempo para examinar o código e entendê-lo - os comentários dentro ### Elementos de layout não-semânticos -Às vezes, você se depara numa situação em que não consegue encontrar um elemento semântico ideal para agrupar alguns itens ou agrupar algum conteúdo. Nesses momentos, convém agrupar um conjunto de elementos para afetá-los todos como uma única entidade com alguns {{glossary("CSS")}} ou {{glossary("JavaScript")}}. Para casos como esses, HTML oferece os elementos {{HTMLElement("div")}} e {{HTMLElement("span")}}. Você deve usá-los preferencialmente com um atributo {{htmlattrxref('class')}} adequado, para fornecer a eles algum tipo de rótulo para que possam ser facilmente referenciados. +Às vezes, você se depara numa situação em que não consegue encontrar um elemento semântico ideal para agrupar alguns itens ou agrupar algum conteúdo. Nesses momentos, convém agrupar um conjunto de elementos para afetá-los todos como uma única entidade com alguns {{glossary("CSS")}} ou {{glossary("JavaScript")}}. Para casos como esses, HTML oferece os elementos {{HTMLElement("div")}} e {{HTMLElement("span")}}. Você deve usá-los preferencialmente com um atributo [`class`](/pt-BR/docs/Web/HTML/Global_attributes#class) adequado, para fornecer a eles algum tipo de rótulo para que possam ser facilmente referenciados. {{HTMLElement("span")}} é um elemento não-semântico embutido, que você deve usar apenas se não conseguir pensar em um elemento de texto semântico melhor para agrupar seu conteúdo ou se não quiser adicionar um significado específico. Por exemplo: diff --git a/files/pt-br/learn/html/introduction_to_html/getting_started/index.md b/files/pt-br/learn/html/introduction_to_html/getting_started/index.md index 4f3f129d49411c..c4143535379a92 100644 --- a/files/pt-br/learn/html/introduction_to_html/getting_started/index.md +++ b/files/pt-br/learn/html/introduction_to_html/getting_started/index.md @@ -401,7 +401,7 @@ textarea.onkeyup = function(){ ### Atributos boleanos -Às vezes você verá atributos escritos sem valores — isso é permitido nos chamados atributos boleanos, e eles podem ter somente um valor, que é geralmente o mesmo nome do atributo. Por exemplo, o atributo {{htmlattrxref("disabled", "input")}} você pode atribuir para os elementos de entrada de formulários, se desejar que estes estejam desativados (acinzentados), para que o usuário não possa inserir nenhum dado neles. +Às vezes você verá atributos escritos sem valores — isso é permitido nos chamados atributos boleanos, e eles podem ter somente um valor, que é geralmente o mesmo nome do atributo. Por exemplo, o atributo [`disabled`](/pt-BR/docs/Web/HTML/Element/input#disabled) você pode atribuir para os elementos de entrada de formulários, se desejar que estes estejam desativados (acinzentados), para que o usuário não possa inserir nenhum dado neles. ``` diff --git a/files/pt-br/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md b/files/pt-br/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md index 051a31e7de4e51..da55f40a6f7529 100644 --- a/files/pt-br/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md +++ b/files/pt-br/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md @@ -116,7 +116,7 @@ To embed an SVG via an {{htmlelement("img")}} element, you just need to referenc ### Troubleshooting and cross-browser support -For browsers that don't support SVG (IE 8 and below, Android 2.3 and below), you could reference a PNG or JPG from your `src` attribute and use a {{htmlattrxref("srcset", "img")}} attribute (which only recent browsers recognize) to reference the SVG. This being the case, only supporting browsers will load the SVG — older browsers will load the PNG instead: +For browsers that don't support SVG (IE 8 and below, Android 2.3 and below), you could reference a PNG or JPG from your `src` attribute and use a [`srcset`](/pt-BR/docs/Web/HTML/Element/img#srcset) attribute (which only recent browsers recognize) to reference the SVG. This being the case, only supporting browsers will load the SVG — older browsers will load the PNG instead: ```html triangle with equal sides diff --git a/files/pt-br/learn/html/multimedia_and_embedding/images_in_html/index.md b/files/pt-br/learn/html/multimedia_and_embedding/images_in_html/index.md index 9af041431d6135..dc014d9c297fff 100644 --- a/files/pt-br/learn/html/multimedia_and_embedding/images_in_html/index.md +++ b/files/pt-br/learn/html/multimedia_and_embedding/images_in_html/index.md @@ -267,7 +267,7 @@ Uma solução melhor, é usar os elementos do HTML5 {{htmlelement("figure")}} e O elemento {{htmlelement("figcaption")}} informa aos navegadores e à tecnologia de assistência que a legenda descreve o outro conteúdo do elemento {{htmlelement("figure")}}. -> **Nota:** Do ponto de vista da acessibilidade, legendas e {{htmlattrxref('alt','img')}} texto têm papéis distintos. As legendas beneficiam até as pessoas que podem ver a imagem, enquanto {{htmlattrxref('alt','img')}} texto fornece a mesma funcionalidade que uma imagem ausente. Portanto, legendas e `alt` texto não deve apenas dizer a mesma coisa, porque ambos aparecem quando a imagem desaparece. Tente desativar as imagens no seu navegador e veja como fica. +> **Nota:** Do ponto de vista da acessibilidade, legendas e [`alt`](/pt-BR/docs/Web/HTML/Element/img#alt) texto têm papéis distintos. As legendas beneficiam até as pessoas que podem ver a imagem, enquanto [`alt`](/pt-BR/docs/Web/HTML/Element/img#alt) texto fornece a mesma funcionalidade que uma imagem ausente. Portanto, legendas e `alt` texto não deve apenas dizer a mesma coisa, porque ambos aparecem quando a imagem desaparece. Tente desativar as imagens no seu navegador e veja como fica. Uma figura não precisa ser uma imagem. É uma unidade de conteúdo independente que: diff --git a/files/pt-br/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md b/files/pt-br/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md index aa467fe3939787..9170a13425fcaa 100644 --- a/files/pt-br/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md +++ b/files/pt-br/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md @@ -279,7 +279,7 @@ Você deseja que os atacantes tenham a menor quantidade possível de poder para Conteúdo fora de uma sandbox pode fazer muito mais que o esperado (executar JavaScript, submeter forms, criar novas janelas no navegador, etc.) Por padrão, você deve impor todas as restrições disponíveis utilizando o atributo`sandbox` sem parâmetros, como mostrado em nosso exemplo anterior. -Se absolutamente necessário, você pode adicionar permissões uma a uma (dentro do valor do atributo`sandbox=""`) — veja em {{htmlattrxref('sandbox','iframe')}} as referências de entrada para todas as opções disponíveis. Uma nota importante é que você _nunca_ deve adicionar ambos `allow-scripts` e `allow-same-origin` no atributo de sandbox — neste caso, conteúdo incorporado pode burlar a política de segurança de mesmo destino que impede sites de executarem scripts, e utilizar JavaScript para desativar o sandboxing completamente. +Se absolutamente necessário, você pode adicionar permissões uma a uma (dentro do valor do atributo`sandbox=""`) — veja em [`sandbox`](/pt-BR/docs/Web/HTML/Element/iframe#sandbox) as referências de entrada para todas as opções disponíveis. Uma nota importante é que você _nunca_ deve adicionar ambos `allow-scripts` e `allow-same-origin` no atributo de sandbox — neste caso, conteúdo incorporado pode burlar a política de segurança de mesmo destino que impede sites de executarem scripts, e utilizar JavaScript para desativar o sandboxing completamente. > **Nota:** Sandboxing não fornece nenhuma proteção se atacantes puderem enganar os usuários para que visitem conteúdo malicioso diretamete (fora de um `iframe`). Se existir qualquer chance que certo conteúdo possa ser malicioso (exemplo, conteúdo gerado por usuários), por favor forneça-o em um {{glossary("domain")}} diferente de seu site principal. @@ -301,13 +301,13 @@ If you find yourself needing to embed plugin content, this is the kind of inform | | {{htmlelement("embed")}} | {{htmlelement("object")}} | | --------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | -| {{glossary("URL")}} of the embedded content | {{htmlattrxref('src','embed')}} | {{htmlattrxref('data','object')}} | -| _accurate_ {{glossary("MIME type", 'media type')}} of the embedded content | {{htmlattrxref('type','embed')}} | {{htmlattrxref('type','object')}} | -| height and width (in CSS pixels) of the box controlled by the plugin | {{htmlattrxref('height','embed')}} {{htmlattrxref('width','embed')}} | {{htmlattrxref('height','object')}} {{htmlattrxref('width','object')}} | +| {{glossary("URL")}} of the embedded content | [`src`](/pt-BR/docs/Web/HTML/Element/embed#src) | [`data`](/pt-BR/docs/Web/HTML/Element/object#data) | +| _accurate_ {{glossary("MIME type", 'media type')}} of the embedded content | [`type`](/pt-BR/docs/Web/HTML/Element/embed#type) | [`type`](/pt-BR/docs/Web/HTML/Element/object#type) | +| height and width (in CSS pixels) of the box controlled by the plugin | [`height`](/pt-BR/docs/Web/HTML/Element/embed#height) [`width`](/pt-BR/docs/Web/HTML/Element/embed#width) | [`height`](/pt-BR/docs/Web/HTML/Element/object#height) [`width`](/pt-BR/docs/Web/HTML/Element/object#width) | | names and values, to feed the plugin as parameters | ad hoc attributes with those names and values | single-tag {{htmlelement("param")}} elements, contained within `` | | independent HTML content as fallback for an unavailable resource | not supported (`` is obsolete) | contained within `<object>`, after `<param>` elements | -> **Nota:** `<object>` requires a `data` attribute, a `type` attribute, or both. If you use both, you may also use the {{htmlattrxref('typemustmatch','object')}} attribute (only implemented in Firefox, as of this writing). `typemustmatch` keeps the embedded file from running unless the `type` attribute provides the correct media type. `typemustmatch` can therefore confer significant security benefits when you're embedding content from a different {{glossary("origin")}} (it can keep attackers from running arbitrary scripts through the plugin). +> **Nota:** `<object>` requires a `data` attribute, a `type` attribute, or both. If you use both, you may also use the [`typemustmatch`](/pt-BR/docs/Web/HTML/Element/object#typemustmatch) attribute (only implemented in Firefox, as of this writing). `typemustmatch` keeps the embedded file from running unless the `type` attribute provides the correct media type. `typemustmatch` can therefore confer significant security benefits when you're embedding content from a different {{glossary("origin")}} (it can keep attackers from running arbitrary scripts through the plugin). Here's an example that uses the {{htmlelement("embed")}} element to embed a Flash movie (see this [live on Github](http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html), and [check the source code](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html) too): diff --git a/files/pt-br/learn/html/multimedia_and_embedding/responsive_images/index.md b/files/pt-br/learn/html/multimedia_and_embedding/responsive_images/index.md index dd3d121b02e7d0..331c04a6e71248 100644 --- a/files/pt-br/learn/html/multimedia_and_embedding/responsive_images/index.md +++ b/files/pt-br/learn/html/multimedia_and_embedding/responsive_images/index.md @@ -10,7 +10,7 @@ Neste artigo nós iremos aprender sobre o conceito de imagens responsivas —ima | Pré-requisitos: | Você deve ter visto a [introdução ao HTML](/pt-BR/docs/Learn/HTML/Introduction_to_HTML) e como [adicionar imagens estáticas numa página web](/pt-BR/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML). | | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Objetivo: | Aprender como usar funcionalidades como {{htmlattrxref("srcset", "img")}} e o elemento {{htmlelement("picture")}} para implementar soluções de imagens responsivas em websites. | +| Objetivo: | Aprender como usar funcionalidades como [`srcset`](/pt-BR/docs/Web/HTML/Element/img#srcset) e o elemento {{htmlelement("picture")}} para implementar soluções de imagens responsivas em websites. | ## Por que imagens responsivas? @@ -38,7 +38,7 @@ Você pode pensar que imagens vetorizadas resolveria estes problemas, e elas res Este tipo de problema não existe quando a web começou a existir, no começo dos anos 1990 - naquele tempo somente desktops e laptops navegavam a Web, então engenheiros de navegadores e programadores nem pensavam em implementar soluções. _Tecnologias de imagens responsivas_ foram implementadas recentemente para resolver os problemas indicados acima, permitindo a você oferecer ao navegador vários arquivos de imagens, todas mostrando a mesma coisa mas contendo diferente número de pixels (mudança de resolução), ou diferentes imagens para diferente espaços de alocação (direção de arte). -> **Nota:** As novas funcionalidades discutidas neste artigo — {{htmlattrxref("srcset", "img")}}/{{htmlattrxref("sizes", "img")}}/{{htmlelement("picture")}} — são todas suportadas nas versões atuais de navegadores mobile e desktop (incluindo Microsoft Edge, embora não suportada pelo Internet Explorer). +> **Nota:** As novas funcionalidades discutidas neste artigo — [`srcset`](/pt-BR/docs/Web/HTML/Element/img#srcset)/[`sizes`](/pt-BR/docs/Web/HTML/Element/img#sizes)/{{htmlelement("picture")}} — são todas suportadas nas versões atuais de navegadores mobile e desktop (incluindo Microsoft Edge, embora não suportada pelo Internet Explorer). ## Como você faz para criar imagens responsivas? @@ -52,7 +52,7 @@ Então, qual é o problema que nós queremos resolver com mudança de resoluçã <img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy"> ``` -Nós podemos, entretanto, usar dois novos atributos — {{htmlattrxref("srcset", "img")}} e {{htmlattrxref("sizes", "img")}} —para fornecer várias fontes adicionais juntamente com sugestões para ajudar o navegador a pegar a correta. Você pode ver um exemplo disso no nosso exemplo [responsive.html](http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html) no Github (ver também [o código fonte](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/responsive.html)): +Nós podemos, entretanto, usar dois novos atributos — [`srcset`](/pt-BR/docs/Web/HTML/Element/img#srcset) e [`sizes`](/pt-BR/docs/Web/HTML/Element/img#sizes) —para fornecer várias fontes adicionais juntamente com sugestões para ajudar o navegador a pegar a correta. Você pode ver um exemplo disso no nosso exemplo [responsive.html](http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html) no Github (ver também [o código fonte](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/responsive.html)): ```html <img srcset="elva-fairy-320w.jpg 320w, @@ -97,7 +97,7 @@ Então, com estes atributos no lugar, o navegador irá: E é isto! Então neste ponto, se um navegador suportado com uma largurar de 480px carregar a página, a condição (`max-width: 480px`) será verdadeira, então o slot `440px` será escolhido, então o `elva-fairy-480w.jpg` será carregada, como a largura inerente (`480w`) é a mais próxima de `440px`. A imagem de 800px é 128KB no disco enquanto que a versão de 480px é somente 63KB - economizando 65KB. Agora imagine se fosse uma página que tivesse várias imagens. Usando esta técnica poderia economizar os dados de usuários de celular. -Navegadores antigos que não suportam estas funcionalidades serão ignorados, seguiremos e carregaremos a imagem definida no atributo {{htmlattrxref("src", "img")}} como normal. +Navegadores antigos que não suportam estas funcionalidades serão ignorados, seguiremos e carregaremos a imagem definida no atributo [`src`](/pt-BR/docs/Web/HTML/Element/img#src) como normal. > **Nota:** No {{htmlelement("head")}} do documento você encontrará a linha `<meta name="viewport" content="width=device-width">`: isto força navegadores de celular adotar a largura real para carregar páginas web (alguns navegadores mobile mentem sobre sua largura da janela, e em vez carregam páginas em uma largura grante e então encolhem a página carregada, o que é de muita ajuda para imagens e design responsivos. Nós iremos ensinar mais sobre isso em um módulo futuro). @@ -205,7 +205,7 @@ Para esse exercício, nós estamos esperando que você seja corajoso e vá sozin Isto é um geral sobre imagens responsivas - nós esperamos que você tenha aproveitado estas novas técnicas. Recapitulando, há dois problemas que nós discutimos aqui: - **Direção de Arte:** O problema consiste em apresentar imagens cortadas para diferentes layouts - por exemplo, uma imagem panorâmica mostrada completa em um layout desktop, e uma imagem retrato mostrando o objeto principal ampliado em um layout mobile. Isto pode ser resolvido usando o elemento {{htmlelement("picture")}}. -- **Mudança de resolução:** O problema é apresentar arquivos menores de imagens para dispositivos estreitos, porque eles não precisam de imagens gigantes como em computadores - e também, opcionalmente, que você quer apresentar imagens de diferentes resoluções para alta e baixa densidades de tela. Isto pode resolver usando [vector graphics](/pt-BR/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web) (imagens SVG), e os atributos {{htmlattrxref("srcset", "img")}} e {{htmlattrxref("sizes", "img")}}. +- **Mudança de resolução:** O problema é apresentar arquivos menores de imagens para dispositivos estreitos, porque eles não precisam de imagens gigantes como em computadores - e também, opcionalmente, que você quer apresentar imagens de diferentes resoluções para alta e baixa densidades de tela. Isto pode resolver usando [vector graphics](/pt-BR/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web) (imagens SVG), e os atributos [`srcset`](/pt-BR/docs/Web/HTML/Element/img#srcset) e [`sizes`](/pt-BR/docs/Web/HTML/Element/img#sizes). Isto também encerra o módulo [Multimedia and embedding](/pt-BR/docs/Learn/HTML/Multimedia_and_embedding)! A única coisa para fazer agora é seguir e tentar nosso teste de multimídia, e ver como você está. Se divirta. diff --git a/files/pt-br/learn/html/multimedia_and_embedding/video_and_audio_content/index.md b/files/pt-br/learn/html/multimedia_and_embedding/video_and_audio_content/index.md index e793b7e18dc2c7..25487f87ee1010 100644 --- a/files/pt-br/learn/html/multimedia_and_embedding/video_and_audio_content/index.md +++ b/files/pt-br/learn/html/multimedia_and_embedding/video_and_audio_content/index.md @@ -68,9 +68,9 @@ O elemento {{htmlelement("video")}} permite incorporar um vídeo com muita facil Os recursos da nota são: -- {{htmlattrxref("src","video")}} +- [`src`](/pt-BR/docs/Web/HTML/Element/video#src) - : Da mesma maneira que para o elemento {{htmlelement("img")}}, O atributo `src` contém um caminho para o vídeo que você deseja incorporar. Funciona exatamente da mesma maneira. -- {{htmlattrxref("controls","video")}} +- [`controls`](/pt-BR/docs/Web/HTML/Element/video#controls) - : Os usuários devem poder controlar a reprodução de vídeo e áudio (isso é especialmente crítico para pessoas que possuem [epilepsy](https://pt.wikipedia.org/wiki/Epilepsia).) Você deve usar o atributo `controls` para incluir a própria interface de controle do navegador ou criar sua interface usando o apropriado [JavaScript API](/pt-BR/docs/Web/API/HTMLMediaElement). No mínimo, a interface deve incluir uma maneira de iniciar e parar a mídia e ajustar o volume. - O parágrafo dentro do `<video>` tags - : Isso é chamado de **conteúdo alternativo** - será exibido se o navegador que acessa a página não suportar o elemento `<video>`, permitindo fornecer um substituto para navegadores mais antigos. Isso pode ser o que você quiser; nesse caso, fornecemos um link direto para o arquivo de vídeo, para que o usuário possa acessá-lo de alguma forma, independentemente do navegador que estiver usando. @@ -127,7 +127,7 @@ Então, como fazemos isso? Dê uma olhada no seguinte [exemplo atualizado](https Aqui nós tiramos o atributo `src` (source) do {{HTMLElement("video")}} tag, mas incluímos os elementos {{htmlelement("source")}} que apontam para suas próprias fontes. Nesse caso, o navegador passará pelo elemento {{HTMLElement("source")}} e reproduza o primeiro que ele possui o codec para suportar. A inclusão de fontes WebM e MP4 deve ser suficiente para reproduzir seu vídeo na maioria das plataformas e navegadores atualmente. -Cada elemento `<source>` também tem um atributo {{htmlattrxref("type", "source")}}. Isso é opcional, mas é recomendável que você os inclua - eles contêm o {{glossary("MIME type","MIME types")}} dos arquivos de vídeo, e os navegadores podem lê-los e pular imediatamente os vídeos que não entendem. Se não estiverem incluídos, os navegadores carregarão e tentarão reproduzir cada arquivo até encontrar um que funcione, consumindo ainda mais tempo e recursos. +Cada elemento `<source>` também tem um atributo [`type`](/pt-BR/docs/Web/HTML/Element/source#type). Isso é opcional, mas é recomendável que você os inclua - eles contêm o {{glossary("MIME type","MIME types")}} dos arquivos de vídeo, e os navegadores podem lê-los e pular imediatamente os vídeos que não entendem. Se não estiverem incluídos, os navegadores carregarão e tentarão reproduzir cada arquivo até encontrar um que funcione, consumindo ainda mais tempo e recursos. > **Nota:** Consulte o nosso [guia sobre tipos e formatos de mídias](/pt-BR/docs/Web/Media/Formats) (inglês) para obter ajuda na seleção dos melhores contêineres e codecs para suas necessidades, bem como procurar os tipos MIME certos para especificar cada @@ -149,17 +149,17 @@ Isso nos dará uma saída parecida com esta: ![A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!](extra-video-features.png)Os novos recursos são: -- {{htmlattrxref("width","video")}} and {{htmlattrxref("height","video")}} +- [`width`](/pt-BR/docs/Web/HTML/Element/video#width) and [`height`](/pt-BR/docs/Web/HTML/Element/video#height) - : Você pode controlar o tamanho do vídeo com esses atributos ou com {{Glossary("CSS")}}. Nos dois casos, os vídeos mantêm sua proporção largura-altura nativa - conhecida como **proporção de tela**. Se a proporção não for mantida pelos tamanhos definidos, o vídeo aumentará para preencher o espaço horizontalmente, e o espaço não preenchido receberá apenas uma cor sólida de fundo por padrão. -- {{htmlattrxref("autoplay","video")}} +- [`autoplay`](/pt-BR/docs/Web/HTML/Element/video#autoplay) - : Faz com que o áudio ou o vídeo comece a ser reproduzido imediatamente, enquanto o restante da página está sendo carregado. É aconselhável não usar vídeo (ou áudio) de reprodução automática em seus sites, porque os usuários podem achar isso realmente irritante. -- {{htmlattrxref("loop","video")}} +- [`loop`](/pt-BR/docs/Web/HTML/Element/video#loop) - : Faz com que o vídeo (ou áudio) comece a ser reproduzido novamente sempre que terminar. Isso também pode ser irritante, portanto, use apenas se for realmente necessário. -- {{htmlattrxref("muted","video")}} +- [`muted`](/pt-BR/docs/Web/HTML/Element/video#muted) - : Faz com que a mídia seja reproduzida com o som desativado por padrão. -- {{htmlattrxref("poster","video")}} +- [`poster`](/pt-BR/docs/Web/HTML/Element/video#poster) - : O URL de uma imagem que será exibida antes da reprodução do vídeo. Destina-se a ser usado para uma tela inicial ou tela de publicidade. -- {{htmlattrxref("preload","video")}} +- [`preload`](/pt-BR/docs/Web/HTML/Element/video#preload) - : Usado para armazenar arquivos grandes em buffer; pode levar um dos três valores: @@ -257,7 +257,7 @@ This is the second. Para que isso seja exibido juntamente com a reprodução de mídia HTML, você precisa: 1. Salve-o como um arquivo `.vtt` em um local adequado. -2. Vincule ao arquivo `.vtt` com o elemento {{htmlelement ("track")}}. `<track>` deve ser colocado dentro de `<audio>` ou `<video>`, mas depois de todos os elementos `<source>`. Use o atributo {{htmlattrxref ("kind", "track")}} para especificar se as pistas são `subtitles`, `captions,`ou `descriptions`. Além disso, use {{htmlattrxref ("srclang", "track")}} para informar ao navegador em que idioma você escreveu as legendas. +2. Vincule ao arquivo `.vtt` com o elemento {{htmlelement ("track")}}. `<track>` deve ser colocado dentro de `<audio>` ou `<video>`, mas depois de todos os elementos `<source>`. Use o atributo [`kind`](/pt-BR/docs/Web/HTML/Element/track#kind) para especificar se as pistas são `subtitles`, `captions,`ou `descriptions`. Além disso, use [`srclang`](/pt-BR/docs/Web/HTML/Element/track#srclang) para informar ao navegador em que idioma você escreveu as legendas. Aqui está um exemplo: diff --git a/files/pt-br/mdn/writing_guidelines/writing_style_guide/index.md b/files/pt-br/mdn/writing_guidelines/writing_style_guide/index.md index d8f0e1c4e3f479..3dfb0e176430a5 100644 --- a/files/pt-br/mdn/writing_guidelines/writing_style_guide/index.md +++ b/files/pt-br/mdn/writing_guidelines/writing_style_guide/index.md @@ -132,8 +132,6 @@ There are various specific rules to follow when writing about HTML elements, in - : Use the [`HTMLElement`](https://github.com/mdn/yari/blob/main/kumascript/macros/HTMLElement.ejs) macro, which creates a link to the page for that element. For example, writing \\{{HTMLElement("title")}} produces "{{HTMLElement("title")}}". If you don't want to create a link, **enclose the name in angle brackets** and use "Code (inline)" style (e.g., `<title>`). - Attribute names - : Use **bold face**. -- Attribute definitions - - : Use the [`htmlattrdef`](https://github.com/mdn/yari/blob/main/kumascript/macros/htmlattrdef.ejs) macro (e.g., \\{{htmlattrdef("type")}}) for the definition term, so that it can be linked to from other pages, then use the [`htmlattrxref`](https://github.com/mdn/yari/blob/main/kumascript/macros/htmlattrxref.ejs) macro (e.g., \\{{htmlattrxref("attr","element")}}) to reference attribute definitions. - Attribute values - : Use "Code (inline)" style, and do not use quotation marks around strings, unless needed by the syntax of a code sample. E.g.: When the **type** attribute of an `<input>` element is set to `email` or `tel` ... - Labeling attributes diff --git a/files/pt-br/mozilla/firefox/releases/49/index.md b/files/pt-br/mozilla/firefox/releases/49/index.md index 792468b4427d6e..03ba2e3baf287b 100644 --- a/files/pt-br/mozilla/firefox/releases/49/index.md +++ b/files/pt-br/mozilla/firefox/releases/49/index.md @@ -35,12 +35,12 @@ Instale Firefox Developer Edition](https://www.mozilla.org/firefox/developer/) F ### HTML - Adicionado suporte para estes elementros: {{HTMLElement("details")}} e {{HTMLElement("summary")}} ({{bug(1226455)}}). -- O {{htmlattrxref("pattern", "input")}} atribuido para {{HTMLElement("input")}} agora usa o parâmetro `'u'` no JavaScript base {{jsxref("RegExp")}} ({{bug(1227906)}}). -- Para corresponder a uma mudança específica, de um valor inválido {{htmlattrxref("kind", "track")}} atributo do elemento {{HTMLElement('track')}} é agora tratado como `"metadata"` ao invés de`"subtitles"` ({{bug(1269712)}}). -- O atributo {{htmlattrxref("sandbox", "iframe")}} do elemento {{HTMLElement("iframe")}} agora suporta os valores 'allow-popups-to-escape-sandbox' e 'allow-modals' ({{bug(1190641)}}). +- O [`pattern`](/pt-BR/docs/Web/HTML/Element/input#pattern) atribuido para {{HTMLElement("input")}} agora usa o parâmetro `'u'` no JavaScript base {{jsxref("RegExp")}} ({{bug(1227906)}}). +- Para corresponder a uma mudança específica, de um valor inválido [`kind`](/pt-BR/docs/Web/HTML/Element/track#kind) atributo do elemento {{HTMLElement('track')}} é agora tratado como `"metadata"` ao invés de`"subtitles"` ({{bug(1269712)}}). +- O atributo [`sandbox`](/pt-BR/docs/Web/HTML/Element/iframe#sandbox) do elemento {{HTMLElement("iframe")}} agora suporta os valores 'allow-popups-to-escape-sandbox' e 'allow-modals' ({{bug(1190641)}}). - Suporte para atributos microdata e a Microdata API foram removidas ({{bug(909633)}}). -- O atributo {{htmlattrxref("referrerpolicy", "a")}} do elemento {{HTMLElement("a")}} agora suporta esses atributos `'no-referrer-when-downgrade`' e `'origin-when-cross-origin'` ({{bug(1178337)}}). -- O {{htmlattrxref("form", "label")}} que é atributo do elemento {{HTMLElement("label")}} foi removido. A propriedade {{domxref("HTMLLabelElement.form")}} ainda existe, mas agora retorna o formulário na qual o controle do label's está associado , se houver um controle (e se esse controle for associado ao formulário) ({{bug(1268852)}}). +- O atributo [`referrerpolicy`](/pt-BR/docs/Web/HTML/Element/a#referrerpolicy) do elemento {{HTMLElement("a")}} agora suporta esses atributos `'no-referrer-when-downgrade`' e `'origin-when-cross-origin'` ({{bug(1178337)}}). +- O [`form`](/pt-BR/docs/Web/HTML/Element/label#form) que é atributo do elemento {{HTMLElement("label")}} foi removido. A propriedade {{domxref("HTMLLabelElement.form")}} ainda existe, mas agora retorna o formulário na qual o controle do label's está associado , se houver um controle (e se esse controle for associado ao formulário) ({{bug(1268852)}}). ### CSS diff --git a/files/pt-br/mozilla/firefox/releases/50/index.md b/files/pt-br/mozilla/firefox/releases/50/index.md index da62ff3bb25380..1a894347f6ea3e 100644 --- a/files/pt-br/mozilla/firefox/releases/50/index.md +++ b/files/pt-br/mozilla/firefox/releases/50/index.md @@ -14,7 +14,7 @@ Nenhuma mudança. ### HTML -- For compatibility purposes, the non-standard {{HTMLattrxref("webkitdirectory", "input")}} attribute of the {{HTMLElement("input")}} element, as well as the property {{domxref("HTMLInputElement.webkitDirectory")}} property, have been implemented ({{bug(1258489)}}). +- For compatibility purposes, the non-standard [`webkitdirectory`](/pt-BR/docs/Web/HTML/Element/input#webkitdirectory) attribute of the {{HTMLElement("input")}} element, as well as the property {{domxref("HTMLInputElement.webkitDirectory")}} property, have been implemented ({{bug(1258489)}}). - The default style of {{HTMLElement("bdo")}} now has a {{cssxref("unicode-bidi")}} with the `isolate-override` value ({{bug(1249497)}}). ### CSS @@ -89,7 +89,7 @@ _No change._ ## Networking -- The {{htmlattrxref("ping", "a")}} attribute of {{htmlelement("a")}} element is now abiding by the [`connect-src`](/pt-BR/docs/Web/Security/CSP/CSP_policy_directives#connect-src) [CSP 1.1 policy directive](/pt-BR/docs/Web/Security/CSP/CSP_policy_directives) ({{bug(1100181)}}). +- The [`ping`](/pt-BR/docs/Web/HTML/Element/a#ping) attribute of {{htmlelement("a")}} element is now abiding by the [`connect-src`](/pt-BR/docs/Web/Security/CSP/CSP_policy_directives#connect-src) [CSP 1.1 policy directive](/pt-BR/docs/Web/Security/CSP/CSP_policy_directives) ({{bug(1100181)}}). - Support of the [`sandbox`](/pt-BR/docs/Web/Security/CSP/CSP_policy_directives#sandbox) [CSP](/pt-BR/docs/Web/Security/CSP) directive has been added ({{bug(671389)}}). ## Segurança diff --git a/files/pt-br/orphaned/web/api/htmlelement/contextmenu/index.md b/files/pt-br/orphaned/web/api/htmlelement/contextmenu/index.md index 5f401f9d8dffdf..7f4d6251a6daec 100644 --- a/files/pt-br/orphaned/web/api/htmlelement/contextmenu/index.md +++ b/files/pt-br/orphaned/web/api/htmlelement/contextmenu/index.md @@ -6,7 +6,7 @@ original_slug: Web/API/HTMLElement/contextMenu {{APIRef("HTML DOM")}}{{deprecated_header()}} -A propriedade **`HTMLElement.contextMenu`** refere-se ao menu de contexo atribuído aum elemento usando o {{htmlattrxref("contextmenu")}} atributo. O menu em sí é criado usando o {{HTMLElement("menu")}} elemento. +A propriedade **`HTMLElement.contextMenu`** refere-se ao menu de contexo atribuído aum elemento usando o [`contextmenu`](/pt-BR/docs/Web/HTML/Global_attributes#contextmenu) atributo. O menu em sí é criado usando o {{HTMLElement("menu")}} elemento. ## Sintaxe @@ -29,6 +29,6 @@ contextMenu.firstElementChild.label = "New label"; ## Veja também -- {{htmlattrxref("contextmenu")}} +- [`contextmenu`](/pt-BR/docs/Web/HTML/Global_attributes#contextmenu) - {{HTMLElement("menu")}} - {{HTMLElement("menuitem")}} diff --git a/files/pt-br/orphaned/web/http/feature_policy/using_feature_policy/index.md b/files/pt-br/orphaned/web/http/feature_policy/using_feature_policy/index.md index 72b420bd59463e..987c9f6725b03a 100644 --- a/files/pt-br/orphaned/web/http/feature_policy/using_feature_policy/index.md +++ b/files/pt-br/orphaned/web/http/feature_policy/using_feature_policy/index.md @@ -39,7 +39,7 @@ Funcionalidade são definidas para cada uma ter uma lista de permissão padrão, Feature Policy provides two ways to specify policies to control features: - The {{httpheader('Feature-Policy')}} HTTP header. -- The {{htmlattrxref("allow", "iframe")}} attribute on {{htmlelement("iframe")}}s. +- The [`allow`](/pt-BR/docs/Web/HTML/Element/iframe#allow) attribute on {{htmlelement("iframe")}}s. The primary difference between the HTTP header and the `allow` attribute is that the allow attribute only controls features within an iframe. The header controls features in the response and any embedded content within the page. diff --git a/files/pt-br/web/api/canvas_api/tutorial/using_images/index.md b/files/pt-br/web/api/canvas_api/tutorial/using_images/index.md index 5b53e46017d08d..b482d635dede6f 100644 --- a/files/pt-br/web/api/canvas_api/tutorial/using_images/index.md +++ b/files/pt-br/web/api/canvas_api/tutorial/using_images/index.md @@ -42,7 +42,7 @@ We can obtain a reference to images on the same page as the canvas by using one ### Using images from other domains -Using the {{htmlattrxref("crossorigin", "img")}} attribute of an {{HTMLElement("img")}} element (reflected by the {{domxref("HTMLImageElement.crossOrigin")}} property), you can request permission to load an image from another domain for use in your call to `drawImage()`. If the hosting domain permits cross-domain access to the image, the image can be used in your canvas without tainting it; otherwise using the image will [taint the canvas](/pt-BR/docs/HTML/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F). +Using the [`crossorigin`](/pt-BR/docs/Web/HTML/Element/img#crossorigin) attribute of an {{HTMLElement("img")}} element (reflected by the {{domxref("HTMLImageElement.crossOrigin")}} property), you can request permission to load an image from another domain for use in your call to `drawImage()`. If the hosting domain permits cross-domain access to the image, the image can be used in your canvas without tainting it; otherwise using the image will [taint the canvas](/pt-BR/docs/HTML/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F). ### Using other canvas elements diff --git a/files/pt-br/web/api/document/anchors/index.md b/files/pt-br/web/api/document/anchors/index.md index 31b31df0a742d2..149bfb5b3ea694 100644 --- a/files/pt-br/web/api/document/anchors/index.md +++ b/files/pt-br/web/api/document/anchors/index.md @@ -76,7 +76,7 @@ function init() { ## Notas -Por motivos de compatibilidade, o conjunto de âncoras retornadas por `anchors` contém apenas as âncoras criadas com o atributo `name`, não incluindo as âncoras criadas com o atributo {{ htmlattrxref("id") }}. +Por motivos de compatibilidade, o conjunto de âncoras retornadas por `anchors` contém apenas as âncoras criadas com o atributo `name`, não incluindo as âncoras criadas com o atributo [`id`](/pt-BR/docs/Web/HTML/Global_attributes#id). ## Especificações diff --git a/files/pt-br/web/api/domstringmap/index.md b/files/pt-br/web/api/domstringmap/index.md index 04069d387bbec5..3db19b6c12da41 100644 --- a/files/pt-br/web/api/domstringmap/index.md +++ b/files/pt-br/web/api/domstringmap/index.md @@ -5,7 +5,7 @@ slug: Web/API/DOMStringMap {{ APIRef("HTML DOM") }} -Usado pelo atributo HTML {{ htmlattrxref("dataset") }} para representar atributos próprios adicionados ao elemento. +Usado pelo atributo HTML [`dataset`](/pt-BR/docs/Web/HTML/Global_attributes#dataset) para representar atributos próprios adicionados ao elemento. ## Visão Geral do Método @@ -70,4 +70,4 @@ void removeProp( ## Veja também - {{ domxref("HTMLElement.dataset") }} -- {{ htmlattrxref("dataset") }} +- [`dataset`](/pt-BR/docs/Web/HTML/Global_attributes#dataset) diff --git a/files/pt-br/web/api/element/classlist/index.md b/files/pt-br/web/api/element/classlist/index.md index c6e7741486f3e5..cf32d9002a75f9 100644 --- a/files/pt-br/web/api/element/classlist/index.md +++ b/files/pt-br/web/api/element/classlist/index.md @@ -57,7 +57,7 @@ div.classList.remove("foo", "bar"); | Especificações | Status | Comentário | | ---------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------------------------------------------------------- | -| {{SpecName("HTML WHATWG", "dom.html#dom-classlist", "Element.classList")}} | {{Spec2("HTML WHATWG")}} | Observe dentro da especificação HTML relacionada ao {{htmlattrxref("class")}} attribute. | +| {{SpecName("HTML WHATWG", "dom.html#dom-classlist", "Element.classList")}} | {{Spec2("HTML WHATWG")}} | Observe dentro da especificação HTML relacionada ao [`class`](/pt-BR/docs/Web/HTML/Global_attributes#class) attribute. | | {{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}} | {{Spec2("DOM WHATWG")}} | Definição inicial | | {{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}} | {{Spec2("DOM4")}} | | diff --git a/files/pt-br/web/api/element/setattribute/index.md b/files/pt-br/web/api/element/setattribute/index.md index 3764f4a54892e5..843cd3b53a004b 100644 --- a/files/pt-br/web/api/element/setattribute/index.md +++ b/files/pt-br/web/api/element/setattribute/index.md @@ -18,7 +18,7 @@ element.setAttribute(name, value); ## Exemplo -No seguinte exemplo, `setAttribute()` é usado para definir o atributo {{htmlattrxref("disabled")}} em {{htmlelement("button")}}, desabilitado-o. +No seguinte exemplo, `setAttribute()` é usado para definir o atributo [`disabled`](/pt-BR/docs/Web/HTML/Global_attributes#disabled) em {{htmlelement("button")}}, desabilitado-o. ```html <button>Hello World</button> diff --git a/files/pt-br/web/api/html_drag_and_drop_api/index.md b/files/pt-br/web/api/html_drag_and_drop_api/index.md index be9b5c27245611..0fc35c7d7b5b24 100644 --- a/files/pt-br/web/api/html_drag_and_drop_api/index.md +++ b/files/pt-br/web/api/html_drag_and_drop_api/index.md @@ -57,7 +57,7 @@ Esta seção dispõe de um resumo das etapas básicas para adicionar a funcional ### Identificando o que é arrastável _(draggable)_ -Para fazer um elemento se tornar arrastável, é necessária a adição de um atributo {{htmlattrxref("draggable")}} além da adição do manipulador de eventos global {{domxref("GlobalEventHandlers.ondragstart","ondragstart")}}, conforme descrito no exemplo a seguir +Para fazer um elemento se tornar arrastável, é necessária a adição de um atributo [`draggable`](/pt-BR/docs/Web/HTML/Global_attributes#draggable) além da adição do manipulador de eventos global {{domxref("GlobalEventHandlers.ondragstart","ondragstart")}}, conforme descrito no exemplo a seguir ``` function dragstart_handler(ev) { diff --git a/files/pt-br/web/api/htmlcanvaselement/height/index.md b/files/pt-br/web/api/htmlcanvaselement/height/index.md index f8972be42f15ca..1fcf9538ffafb5 100644 --- a/files/pt-br/web/api/htmlcanvaselement/height/index.md +++ b/files/pt-br/web/api/htmlcanvaselement/height/index.md @@ -5,7 +5,7 @@ slug: Web/API/HTMLCanvasElement/height {{APIRef("Canvas API")}} -A propriedade **`HTMLCanvasElement.height`** é um `inteiro` positivo que reflete o atributo {{htmlattrxref("height", "canvas")}} do elemento HTML {{HTMLElement("canvas")}} interpretado em pixels no CSS. Quando o atributo não é especificado, ou se for definido como um valor inválido, como um `inteiro` negativo, o valor padrão de `150` será usado. +A propriedade **`HTMLCanvasElement.height`** é um `inteiro` positivo que reflete o atributo [`height`](/pt-BR/docs/Web/HTML/Element/canvas#height) do elemento HTML {{HTMLElement("canvas")}} interpretado em pixels no CSS. Quando o atributo não é especificado, ou se for definido como um valor inválido, como um `inteiro` negativo, o valor padrão de `150` será usado. Essa é uma de duas propriedades, que controla o tamanho do canvas, sendo a outra {{domxref("HTMLCanvasElement.width")}}. diff --git a/files/pt-br/web/api/htmlcanvaselement/index.md b/files/pt-br/web/api/htmlcanvaselement/index.md index 7e2c4a6bec5772..5b010a68b179ee 100644 --- a/files/pt-br/web/api/htmlcanvaselement/index.md +++ b/files/pt-br/web/api/htmlcanvaselement/index.md @@ -14,11 +14,11 @@ The **`HTMLCanvasElement`** interface provides properties and methods for manipu _Inherits properties from its parent,_ _{{domxref("HTMLElement")}}._ - {{domxref("HTMLCanvasElement.height")}} - - : Is a positive `integer` reflecting the {{htmlattrxref("height", "canvas")}} HTML attribute of the {{HTMLElement("canvas")}} element interpreted in CSS pixels. When the attribute is not specified, or if it is set to an invalid value, like a negative, the default value of `150` is used. + - : Is a positive `integer` reflecting the [`height`](/pt-BR/docs/Web/HTML/Element/canvas#height) HTML attribute of the {{HTMLElement("canvas")}} element interpreted in CSS pixels. When the attribute is not specified, or if it is set to an invalid value, like a negative, the default value of `150` is used. - {{domxref("HTMLCanvasElement.mozOpaque")}} {{non-standard_inline}} - - : Is a {{jsxref("Boolean")}} reflecting the {{htmlattrxref("moz-opaque", "canvas")}} HTML attribute of the {{HTMLElement("canvas")}} element. It lets the canvas know whether or not translucency will be a factor. If the canvas knows there's no translucency, painting performance can be optimized. + - : Is a {{jsxref("Boolean")}} reflecting the [`moz-opaque`](/pt-BR/docs/Web/HTML/Element/canvas#moz-opaque) HTML attribute of the {{HTMLElement("canvas")}} element. It lets the canvas know whether or not translucency will be a factor. If the canvas knows there's no translucency, painting performance can be optimized. - {{domxref("HTMLCanvasElement.width")}} - - : Is a positive `integer` reflecting the {{htmlattrxref("width", "canvas")}} HTML attribute of the {{HTMLElement("canvas")}} element interpreted in CSS pixels. When the attribute is not specified, or if it is set to an invalid value, like a negative, the default value of `300` is used. + - : Is a positive `integer` reflecting the [`width`](/pt-BR/docs/Web/HTML/Element/canvas#width) HTML attribute of the {{HTMLElement("canvas")}} element interpreted in CSS pixels. When the attribute is not specified, or if it is set to an invalid value, like a negative, the default value of `300` is used. - {{domxref("HTMLCanvasElement.mozPrintCallback")}}{{non-standard_inline}} - : Is a `function` that is Initially null, Web content can set this to a JavaScript function that will be called if the page is printed. This function can then redraw the canvas at a higher resolution that is suitable for the printer being used. [See this blog post.](https://blog.mozilla.org/labs/2012/09/a-new-way-to-control-printing-output/) diff --git a/files/pt-br/web/api/htmlinputelement/index.md b/files/pt-br/web/api/htmlinputelement/index.md index 4dd41b50d1eaae..188c47e4f94cb0 100644 --- a/files/pt-br/web/api/htmlinputelement/index.md +++ b/files/pt-br/web/api/htmlinputelement/index.md @@ -80,22 +80,22 @@ Algumas propriedades se aplicam apenas a tipos de elemento de entrada que suport - {{domxref("HTMLInputElement.formAction", "formAction")}} - - : `string`: **Retorna / Define** o atributo [`formaction`](/pt-BR/docs/Web/HTML/Element/Input#formaction) do elemento, contendo a URL de um programa que processa as informações enviadas pelo elemento. Isso substitui o atributo {{ htmlattrxref("action", "form") }} do formulário pai. + - : `string`: **Retorna / Define** o atributo [`formaction`](/pt-BR/docs/Web/HTML/Element/Input#formaction) do elemento, contendo a URL de um programa que processa as informações enviadas pelo elemento. Isso substitui o atributo [`action`](/pt-BR/docs/Web/HTML/Element/form#action) do formulário pai. - {{domxref("HTMLInputElement.formEnctype", "formEnctype")}} - - : `string`: **Retorna / Define** o atributo [`formenctype`](/pt-BR/docs/Web/HTML/Element/Input#formenctype) do elemento, contendo o tipo de conteúdo que é usado para enviar o formulário para o servidor. Isso substitui o atributo {{ htmlattrxref("enctype", "form") }} do formulário pai. + - : `string`: **Retorna / Define** o atributo [`formenctype`](/pt-BR/docs/Web/HTML/Element/Input#formenctype) do elemento, contendo o tipo de conteúdo que é usado para enviar o formulário para o servidor. Isso substitui o atributo [`enctype`](/pt-BR/docs/Web/HTML/Element/form#enctype) do formulário pai. - {{domxref("HTMLInputElement.formMethod", "formMethod")}} - - : `string`: **Retorna / Define** o atributo [`formmethod`](/pt-BR/docs/Web/HTML/Element/Input#formmethod) do elemento, contendo o método HTTP que o navegador usa para enviar a forma. Isso substitui o atributo {{ htmlattrxref("method", "form") }} do formulário pai. + - : `string`: **Retorna / Define** o atributo [`formmethod`](/pt-BR/docs/Web/HTML/Element/Input#formmethod) do elemento, contendo o método HTTP que o navegador usa para enviar a forma. Isso substitui o atributo [`method`](/pt-BR/docs/Web/HTML/Element/form#method) do formulário pai. - {{domxref("HTMLInputElement.formNoValidate", "formNoValidate")}} - - : `boolean`: **Retorna / Define** o atributo [`formnovalidate`](/pt-BR/docs/Web/HTML/Element/Input#formnovalidate) do elemento, indicando que o formulário não deve ser validado quando ele é submetido. Isso substitui o atributo {{ htmlattrxref("novalidate", "form") }} do formulário pai. + - : `boolean`: **Retorna / Define** o atributo [`formnovalidate`](/pt-BR/docs/Web/HTML/Element/Input#formnovalidate) do elemento, indicando que o formulário não deve ser validado quando ele é submetido. Isso substitui o atributo [`novalidate`](/pt-BR/docs/Web/HTML/Element/form#novalidate) do formulário pai. - {{domxref("HTMLInputElement.formTarget", "formTarget")}} - - : `string`: **Retorna / Define** o atributo [`formtarget`](/pt-BR/docs/Web/HTML/Element/Input#formtarget) do elemento, contendo um nome ou palavra-chave indicando onde exibir o resposta recebida após o envio do formulário. Isso substitui o atributo {{ htmlattrxref("target", "form") }} do formulário pai. + - : `string`: **Retorna / Define** o atributo [`formtarget`](/pt-BR/docs/Web/HTML/Element/Input#formtarget) do elemento, contendo um nome ou palavra-chave indicando onde exibir o resposta recebida após o envio do formulário. Isso substitui o atributo [`target`](/pt-BR/docs/Web/HTML/Element/form#target) do formulário pai. ### Propriedades de instância que se aplicam a qualquer tipo de elemento de entrada que não esteja oculto diff --git a/files/pt-br/web/api/htmloptionelement/index.md b/files/pt-br/web/api/htmloptionelement/index.md index 19a549e3b0df34..a2037863ac79f7 100644 --- a/files/pt-br/web/api/htmloptionelement/index.md +++ b/files/pt-br/web/api/htmloptionelement/index.md @@ -15,14 +15,14 @@ _Inherits properties from its parent, {{domxref("HTMLElement")}}._ | Name | Type | Description | | ------------------------------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `defaultSelected` | {{domxref("Boolean")}} | Contains the initial value of the {{htmlattrxref("selected", "option")}} HTML attribute, indicating whether the option is selected by default or not. | -| `disabled` | {{domxref("Boolean")}} | Reflects the value of the {{htmlattrxref("disabled", "option")}} HTML attribute, which indicates that the option is unavailable to be selected. An option can also be disabled if it is a child of an {{HTMLElement("optgroup")}} element that is disabled. | +| `defaultSelected` | {{domxref("Boolean")}} | Contains the initial value of the [`selected`](/pt-BR/docs/Web/HTML/Element/option#selected) HTML attribute, indicating whether the option is selected by default or not. | +| `disabled` | {{domxref("Boolean")}} | Reflects the value of the [`disabled`](/pt-BR/docs/Web/HTML/Element/option#disabled) HTML attribute, which indicates that the option is unavailable to be selected. An option can also be disabled if it is a child of an {{HTMLElement("optgroup")}} element that is disabled. | | `form`{{readonlyInline}} | {{domxref("HTMLFormElement")}} | If the option is a descendent of a {{HTMLElement("select")}} element, then this property has the same value as the `form` property of the corresponding {{DomXref("HTMLSelectElement")}} object; otherwise, it is `null`. | | `index`{{readonlyInline}} | `long` | The position of the option within the list of options it belongs to, in tree-order. If the option is not part of a list of options, like when it is part of the {{HTMLElement("datalist")}} element, the value is `0`. | -| `label` | {{domxref("DOMString")}} | Reflects the value of the {{htmlattrxref("label", "option")}} HTML attribute, which provides a label for the option. If this attribute isn't specifically set, reading it returns the element's text content. | +| `label` | {{domxref("DOMString")}} | Reflects the value of the [`label`](/pt-BR/docs/Web/HTML/Element/option#label) HTML attribute, which provides a label for the option. If this attribute isn't specifically set, reading it returns the element's text content. | | `selected` | {{domxref("Boolean")}} | Indicates whether the option is currently selected. | | `text` | {{domxref("DOMString")}} | Contains the text content of the element. | -| `value` | {{domxref("DOMString")}} | Reflects the value of the {{htmlattrxref("value", "option")}} HTML attribute, if it exists; otherwise reflects value of the {{domxref("Node.textContent")}} property. | +| `value` | {{domxref("DOMString")}} | Reflects the value of the [`value`](/pt-BR/docs/Web/HTML/Element/option#value) HTML attribute, if it exists; otherwise reflects value of the {{domxref("Node.textContent")}} property. | ## Methods diff --git a/files/pt-br/web/api/htmlselectelement/index.md b/files/pt-br/web/api/htmlselectelement/index.md index 807146de596c43..c7516bf29ce3eb 100644 --- a/files/pt-br/web/api/htmlselectelement/index.md +++ b/files/pt-br/web/api/htmlselectelement/index.md @@ -14,9 +14,9 @@ The **`HTMLSelectElement`** interface represents a {{HTMLElement("select")}} HTM _This interface inherits the properties of {{domxref("HTMLElement")}}, and of {{domxref("Element")}} and {{domxref("Node")}}._ - {{domxref("HTMLSelectElement.autofocus")}} - - : A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("autofocus", "select")}} HTML attribute, which indicates whether the control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form-associated element in a document can have this attribute specified. + - : A {{jsxref("Boolean")}} reflecting the [`autofocus`](/pt-BR/docs/Web/HTML/Element/select#autofocus) HTML attribute, which indicates whether the control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form-associated element in a document can have this attribute specified. - {{domxref("HTMLSelectElement.disabled")}} - - : A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("disabled", "select")}} HTML attribute, which indicates whether the control is disabled. If it is disabled, it does not accept clicks. + - : A {{jsxref("Boolean")}} reflecting the [`disabled`](/pt-BR/docs/Web/HTML/Element/select#disabled) HTML attribute, which indicates whether the control is disabled. If it is disabled, it does not accept clicks. - {{domxref("HTMLSelectElement.form")}}{{ReadOnlyInline}} - : An {{domxref("HTMLFormElement")}} referencing the form that this element is associated with. If the element is not associated with of a {{HTMLElement("form")}} element, then it returns `null`. - {{domxref("HTMLSelectElement.labels")}}{{ReadOnlyInline}} @@ -24,19 +24,19 @@ _This interface inherits the properties of {{domxref("HTMLElement")}}, and of {{ - {{domxref("HTMLSelectElement.length")}} - : An `unsigned long` The number of {{HTMLElement("option")}} elements in this `select` element. - {{domxref("HTMLSelectElement.multiple")}} - - : A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("multiple", "select")}} HTML attribute, which indicates whether multiple items can be selected. + - : A {{jsxref("Boolean")}} reflecting the [`multiple`](/pt-BR/docs/Web/HTML/Element/select#multiple) HTML attribute, which indicates whether multiple items can be selected. - {{domxref("HTMLSelectElement.name")}} - - : A {{domxref("DOMString")}} reflecting the {{htmlattrxref("name", "select")}} HTML attribute, containing the name of this control used by servers and DOM search functions. + - : A {{domxref("DOMString")}} reflecting the [`name`](/pt-BR/docs/Web/HTML/Element/select#name) HTML attribute, containing the name of this control used by servers and DOM search functions. - {{domxref("HTMLSelectElement.options")}}{{ReadOnlyInline}} - : An {{domxref("HTMLOptionsCollection")}} representing the set of {{HTMLElement("option")}} elements contained by this element. - {{domxref("HTMLSelectElement.required")}} - - : A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("required", "select")}} HTML attribute, which indicates whether the user is required to select a value before submitting the form. + - : A {{jsxref("Boolean")}} reflecting the [`required`](/pt-BR/docs/Web/HTML/Element/select#required) HTML attribute, which indicates whether the user is required to select a value before submitting the form. - {{domxref("HTMLSelectElement.selectedIndex")}} - : A `long` reflecting the index of the first selected {{HTMLElement("option")}} element. The value `-1` indicates no element is selected. - {{domxref("HTMLSelectElement.selectedOptions")}}{{ReadOnlyInline}} - : An {{domxref("HTMLCollection")}} representing the set of {{HTMLElement("option")}} elements that are selected. - {{domxref("HTMLSelectElement.size")}} - - : A `long` reflecting the {{htmlattrxref("size", "select")}} HTML attribute, which contains the number of visible items in the control. The default is 1, unless `multiple` is true, in which case it is 4. + - : A `long` reflecting the [`size`](/pt-BR/docs/Web/HTML/Element/select#size) HTML attribute, which contains the number of visible items in the control. The default is 1, unless `multiple` is true, in which case it is 4. - {{domxref("HTMLSelectElement.type")}}{{ReadOnlyInline}} - : A {{domxref("DOMString")}} represeting the form control's type. When `multiple` is `true`, it returns `"select-multiple"`; otherwise, it returns `"select-one"`. - {{domxref("HTMLSelectElement.validationMessage")}}{{ReadOnlyInline}} diff --git a/files/pt-br/web/api/selection/index.md b/files/pt-br/web/api/selection/index.md index 37fb1c72eef48b..0830275758ee9f 100644 --- a/files/pt-br/web/api/selection/index.md +++ b/files/pt-br/web/api/selection/index.md @@ -133,7 +133,7 @@ Outras palavras chaves usadas nesta seção. - anchor - : O anchor de uma seleção é o ponto inicial da seleção. Quando a seleção é feita com um mouse, é onde o botão do mouse é inicialmente pressionado. Quando o usuário altera a seleção usando o mouse ou teclado, o anchor não move. - Elemento editável - - : Um elemento editável — i.e. um elemento HTML com o atributo {{htmlattrxref("contenteditable")}} definido, ou o HTML filho de um documento estiver com o {{DOMxRef("Document.designMode", "designMode")}} habilitado. + - : Um elemento editável — i.e. um elemento HTML com o atributo [`contenteditable`](/pt-BR/docs/Web/HTML/Global_attributes#contenteditable) definido, ou o HTML filho de um documento estiver com o {{DOMxRef("Document.designMode", "designMode")}} habilitado. - foco de uma seleção - : O foco da seleção é o ponto final da seleção. Quando feita a seleção com um mouse, o focus é onde o botão do mouse foi solto. Quando o usuário muda a seleção usando o mouse ou teclado, o focus é o final da seleção que move. **Nota:** Não é o mesmo que o elemento selecionado do documento, como retornado em {{DOMxRef("document.activeElement")}}. - intervalo diff --git a/files/pt-br/web/api/validitystate/index.md b/files/pt-br/web/api/validitystate/index.md index a68899902197a1..995e271c606a8f 100644 --- a/files/pt-br/web/api/validitystate/index.md +++ b/files/pt-br/web/api/validitystate/index.md @@ -17,23 +17,23 @@ Para cada uma das propriedades Booleanas abaixo, caso retorne **`true`**, isso i - {{domxref("ValidityState.customError")}} {{ReadOnlyInline}} - : É um {{jsxref("Boolean")}} informando se o elemento possui uma mensagem de validação definida por `setCustomValidity()` para um valor não vázio. - {{domxref("ValidityState.patternMismatch")}} {{ReadOnlyInline}} - - : É um {{jsxref("Boolean")}} informando se o valor não combina com o padrão ({{htmlattrxref("pattern", "input")}}) especificado. + - : É um {{jsxref("Boolean")}} informando se o valor não combina com o padrão ([`pattern`](/pt-BR/docs/Web/HTML/Element/input#pattern)) especificado. - {{domxref("ValidityState.rangeOverflow")}} {{ReadOnlyInline}} - - : É um {{jsxref("Boolean")}} informando se o valor é maior do que o máximo especificado pelo atributo {{htmlattrxref("max", "input")}}. + - : É um {{jsxref("Boolean")}} informando se o valor é maior do que o máximo especificado pelo atributo [`max`](/pt-BR/docs/Web/HTML/Element/input#max). - {{domxref("ValidityState.rangeUnderflow")}} {{ReadOnlyInline}} - - : É um {{jsxref("Boolean")}} informando se o valor é menor do que o mínimo especificado pelo atributo {{htmlattrxref("min", "input")}}. + - : É um {{jsxref("Boolean")}} informando se o valor é menor do que o mínimo especificado pelo atributo [`min`](/pt-BR/docs/Web/HTML/Element/input#min). - {{domxref("ValidityState.stepMismatch")}} {{ReadOnlyInline}} - - : É um {{jsxref("Boolean")}} informando se o valor não segue a regra definida pelo atributo {{htmlattrxref("step", "input")}}. + - : É um {{jsxref("Boolean")}} informando se o valor não segue a regra definida pelo atributo [`step`](/pt-BR/docs/Web/HTML/Element/input#step). - {{domxref("ValidityState.tooLong")}} {{ReadOnlyInline}} - : É um {{jsxref("Boolean")}} informando se o valor ultrapassa o especificado pelo atributo `maxlength` para {{domxref("HTMLInputElement")}} ou {{domxref("HTMLTextAreaElement")}}. _**OBS:** Isso nunca será `true` em navegadores como o Firefox, pois a inserção de valores não é permitida ao alcançar o valor definido em `maxlength`._ - {{domxref("ValidityState.tooShort")}} {{ReadOnlyInline}} - : É um {{jsxref("Boolean")}} informando se o valor não corresponde ao especificado no atributo `minlength` para {{domxref("HTMLInputElement")}} ou {{domxref("HTMLTextAreaElement")}}. - {{domxref("ValidityState.typeMismatch")}} {{ReadOnlyInline}} - - : É um {{jsxref("Boolean")}} informando se o valor não corresponde ao tipo de entrada definida. (Um exemplo é quando {{htmlattrxref("type", "input")}} é `email` ou `url`). + - : É um {{jsxref("Boolean")}} informando se o valor não corresponde ao tipo de entrada definida. (Um exemplo é quando [`type`](/pt-BR/docs/Web/HTML/Element/input#type) é `email` ou `url`). - {{domxref("ValidityState.valid")}} {{ReadOnlyInline}} - : É um {{jsxref("Boolean")}} informando se o elemento é completamente válido. - {{domxref("ValidityState.valueMissing")}} {{ReadOnlyInline}} - - : É um {{jsxref("Boolean")}} informando que o elemento tem o atributo {{htmlattrxref("required", "input")}}, mas não tem {{htmlattrxref("value", "input")}}. + - : É um {{jsxref("Boolean")}} informando que o elemento tem o atributo [`required`](/pt-BR/docs/Web/HTML/Element/input#required), mas não tem [`value`](/pt-BR/docs/Web/HTML/Element/input#value). ## Especificações diff --git a/files/pt-br/web/api/web_audio_api/simple_synth/index.md b/files/pt-br/web/api/web_audio_api/simple_synth/index.md index f2dcd1825f1260..f98720e68ae7bb 100644 --- a/files/pt-br/web/api/web_audio_api/simple_synth/index.md +++ b/files/pt-br/web/api/web_audio_api/simple_synth/index.md @@ -49,7 +49,7 @@ Primeiro criamos o `<div>` para conter a barra de opções, para ser personaliza </div> ``` -Especificamos um valor padrão de 0.5, e provemos um elemento {{HTMLElement("datalist")}} no qual é conectado ao range usando o atributo {{htmlattrxref("name")}} para achar uma lista de opções cujo ID encaixa; nesse caso, o conjunto de informações é nomeado de `"volume"`. isso nos permite prover um conjunto de valores comuns e strings especiais que o browser pode de forma opcional escolher mostrar de alguma maneira; e então atribuimos nomes aos valores 0.0 ("Mute") e 1.0 ("100%"). +Especificamos um valor padrão de 0.5, e provemos um elemento {{HTMLElement("datalist")}} no qual é conectado ao range usando o atributo [`name`](/pt-BR/docs/Web/HTML/Global_attributes#name) para achar uma lista de opções cujo ID encaixa; nesse caso, o conjunto de informações é nomeado de `"volume"`. isso nos permite prover um conjunto de valores comuns e strings especiais que o browser pode de forma opcional escolher mostrar de alguma maneira; e então atribuimos nomes aos valores 0.0 ("Mute") e 1.0 ("100%"). ##### A seleção de forma de onda @@ -467,7 +467,7 @@ function createKey(note, octave, freq) { } ``` -Após criar os elementos representando as teclas e seus rótulos, nós configuramos o elemento das teclas ao configurar sua classe para "key" (Que estabelece a aparência). Então adicionamos atributos {{htmlattrxref("data-*")}} que contém a string da oitava da nota (attribute `data-octave`), representando a nota a ser tocada (attribute `data-note`), e frequência (attribute `data-frequency`) em Hertz. Isso irá nos permitir facilmente pegar informação conforme necessário ao cuidar de eventos. +Após criar os elementos representando as teclas e seus rótulos, nós configuramos o elemento das teclas ao configurar sua classe para "key" (Que estabelece a aparência). Então adicionamos atributos [`data-*`](/pt-BR/docs/Web/HTML/Global_attributes#data-*) que contém a string da oitava da nota (attribute `data-octave`), representando a nota a ser tocada (attribute `data-note`), e frequência (attribute `data-frequency`) em Hertz. Isso irá nos permitir facilmente pegar informação conforme necessário ao cuidar de eventos. ### Fazendo música @@ -521,7 +521,7 @@ function notePressed(event) { Começamos checando se o botão esquerdo do mouse é pressionado, por dois motivos. Primeiro, queremos que apenas o botão esquerdo acione as notas. Segundo, e mais importante, estamos usando isso para cuidar do {{event("mouseover")}} para casos onde o usuário arrasta de tecla a tecla, e só queremos tocar uma nota se o mouse estiver pressionado quando entrar no elemento. -Se o botão do mouse estiver de fato sendo pressionado, recebemos o atributo de tecla pressionada {{htmlattrxref("dataset")}} ; isso torna fácil o acesso das informações de atributo customizadas no elemento. Procuramos por um atributo `data-pressed` ; caso não haja um(o que indica que a nota não está tocando ainda), chamamos `playTone()` para começar a tocar a nota, passando no valor dos elementos do atributo `data-frequency`. O valor retornado do oscilador é guardado no `oscList` para refêrencia futura, e `data-pressed` é colocado como `yes` para indicar que a nota está tocando para que não iniciemos novamente na próxima vez que isso for chamado. +Se o botão do mouse estiver de fato sendo pressionado, recebemos o atributo de tecla pressionada [`dataset`](/pt-BR/docs/Web/HTML/Global_attributes#dataset) ; isso torna fácil o acesso das informações de atributo customizadas no elemento. Procuramos por um atributo `data-pressed` ; caso não haja um(o que indica que a nota não está tocando ainda), chamamos `playTone()` para começar a tocar a nota, passando no valor dos elementos do atributo `data-frequency`. O valor retornado do oscilador é guardado no `oscList` para refêrencia futura, e `data-pressed` é colocado como `yes` para indicar que a nota está tocando para que não iniciemos novamente na próxima vez que isso for chamado. #### Parando um tom diff --git a/files/pt-br/web/api/web_components/index.md b/files/pt-br/web/api/web_components/index.md index a9533edf9975c2..a00a4e551524a4 100644 --- a/files/pt-br/web/api/web_components/index.md +++ b/files/pt-br/web/api/web_components/index.md @@ -56,7 +56,7 @@ A abordagem básica para se implementar um componente web geralmente se parece c - : The following extensions are defined: - - O atributo HTML global {{htmlattrxref("is")}}: Permite especificar que um elemento HTML padrão deve se comportar como um elemento built-in customizado registrado. + - O atributo HTML global [`is`](/pt-BR/docs/Web/HTML/Global_attributes#is): Permite especificar que um elemento HTML padrão deve se comportar como um elemento built-in customizado registrado. - A opção "is" do método {{domxref("Document.createElement()")}}: Permite criar uma instância de um elemento HTML standard que se comporta como um determinado elemento built-in customizado registrado. - CSS pseudo-classes @@ -72,7 +72,7 @@ A abordagem básica para se implementar um componente web geralmente se parece c - : Pseudo-elementos relacionados especificamente a elementos customizados: - - {{cssxref("::part")}}: Representa qualquer elemento dentro de uma [shadow tree](/pt-BR/docs/Web/Web_Components/Using_shadow_DOM) que tenha um atributo {{HTMLAttrxRef("part")}} correspondente. + - {{cssxref("::part")}}: Representa qualquer elemento dentro de uma [shadow tree](/pt-BR/docs/Web/Web_Components/Using_shadow_DOM) que tenha um atributo [`part`](/pt-BR/docs/Web/HTML/Global_attributes#part) correspondente. ### Shadow DOM diff --git a/files/pt-br/web/api/web_components/using_custom_elements/index.md b/files/pt-br/web/api/web_components/using_custom_elements/index.md index 8ae6e09e001817..354023932d6405 100644 --- a/files/pt-br/web/api/web_components/using_custom_elements/index.md +++ b/files/pt-br/web/api/web_components/using_custom_elements/index.md @@ -50,7 +50,7 @@ Você aprenderá mais sobre eles na seção [Using the lifecycle callbacks](#usi Existem dois tipos de custom elements: - **Autonomous custom elements** são autonômos — eles não herdam de elementos HTML padrão. Você os usa em uma página, literalmente escrevendo-os como um elemento HTML. Por exemplo `<popup-info>`, ou `document.createElement("popup-info")`. -- **Customized built-in elements** herdam de elementos HTML básicos. Para criar um deles, você deve especificar qual elemento eles estendem (como implícito nos exemplos acima), e eles são usados escrevendo o elemento básico, mas especificando o nome do elemento personalizado no atributo {{htmlattrxref("is")}} (ou propriedade). Por exemplo `<p is="word-count">`, ou `document.createElement("p", { is: "word-count" })`. +- **Customized built-in elements** herdam de elementos HTML básicos. Para criar um deles, você deve especificar qual elemento eles estendem (como implícito nos exemplos acima), e eles são usados escrevendo o elemento básico, mas especificando o nome do elemento personalizado no atributo [`is`](/pt-BR/docs/Web/HTML/Global_attributes#is) (ou propriedade). Por exemplo `<p is="word-count">`, ou `document.createElement("p", { is: "word-count" })`. ## Trabalhando com alguns exemplos simples diff --git a/files/pt-br/web/api/webrtc_api/simple_rtcdatachannel_sample/index.md b/files/pt-br/web/api/webrtc_api/simple_rtcdatachannel_sample/index.md index ff8ff4a95f21ac..ae83a941b57233 100644 --- a/files/pt-br/web/api/webrtc_api/simple_rtcdatachannel_sample/index.md +++ b/files/pt-br/web/api/webrtc_api/simple_rtcdatachannel_sample/index.md @@ -235,7 +235,7 @@ Quando o usuário pressiona o botão "Enviar", o método sendMessage() que estab } ``` -Primeiro, o texto da mensagem é obtido dos atributos do elemento de _input_ {{htmlattrxref("value", "input")}} . Isso é enviado para o ponto remoto, ligando para {{domxref("RTCDataChannel.send", "sendChannel.send()")}}. E está tudo aí! O resto deste método é apenas um pouco de açúcar para experiência do usuário - a caixa de entrada é esvaziada e re-focada para que o usuário comece imediatamente a digitar outra mensagem. +Primeiro, o texto da mensagem é obtido dos atributos do elemento de _input_ [`value`](/pt-BR/docs/Web/HTML/Element/input#value) . Isso é enviado para o ponto remoto, ligando para {{domxref("RTCDataChannel.send", "sendChannel.send()")}}. E está tudo aí! O resto deste método é apenas um pouco de açúcar para experiência do usuário - a caixa de entrada é esvaziada e re-focada para que o usuário comece imediatamente a digitar outra mensagem. ### Recebendo mensagens diff --git a/files/pt-br/web/api/window/error_event/index.md b/files/pt-br/web/api/window/error_event/index.md index 00b4091a234ca4..1a9643ced731a9 100644 --- a/files/pt-br/web/api/window/error_event/index.md +++ b/files/pt-br/web/api/window/error_event/index.md @@ -43,7 +43,7 @@ element.onerror = function(event) { ... } ## Notas -Quando um erro de sintaxe**(?)** ocorre em um script, carregado de uma [origem diferente](/pt-BR/docs/Web/Security/Same-origin_policy), os detalhes do erro de sintaxe não são reportados para previnir vazamento de informações (veja {{bug("363897")}}). Ao invés de exibir simplesmente **`"Script error." (erro de script)`**, este comportamento pode ser sobrescrito em alguns navegadores usando o atributo `{{htmlattrxref("crossorigin","script")}}` no {{HTMLElement("script")}} e tendo o servidor enviado os cabeçalhos HTTP CORS apropriados. Uma solução alternativa é isolar o "Script error." e manipulá-lo sabendo que o detalhe do erro é visível somente no console do navegador e não acessível através do JavaScript. +Quando um erro de sintaxe**(?)** ocorre em um script, carregado de uma [origem diferente](/pt-BR/docs/Web/Security/Same-origin_policy), os detalhes do erro de sintaxe não são reportados para previnir vazamento de informações (veja {{bug("363897")}}). Ao invés de exibir simplesmente **`"Script error." (erro de script)`**, este comportamento pode ser sobrescrito em alguns navegadores usando o atributo [`crossorigin`](/pt-BR/docs/Web/HTML/Element/script#crossorigin) no {{HTMLElement("script")}} e tendo o servidor enviado os cabeçalhos HTTP CORS apropriados. Uma solução alternativa é isolar o "Script error." e manipulá-lo sabendo que o detalhe do erro é visível somente no console do navegador e não acessível através do JavaScript. ```js window.onerror = function (msg, url, lineNo, columnNo, error) { diff --git a/files/pt-br/web/css/_colon_fullscreen/index.md b/files/pt-br/web/css/_colon_fullscreen/index.md index bd410489c19e20..e1b03d1de62cb3 100644 --- a/files/pt-br/web/css/_colon_fullscreen/index.md +++ b/files/pt-br/web/css/_colon_fullscreen/index.md @@ -70,4 +70,4 @@ When the document _is_ in full-screen mode, the following CSS applies instead, s - {{cssxref(":not")}} - {{cssxref("::backdrop")}} - DOM API: {{ domxref("Element.requestFullscreen()") }}, {{ domxref("Document.exitFullscreen()") }}, {{ domxref("Document.fullscreenElement") }} -- {{HTMLAttrXRef("allowfullscreen", "iframe")}} attribute +- [`allowfullscreen`](/pt-BR/docs/Web/HTML/Element/iframe#allowfullscreen) attribute diff --git a/files/pt-br/web/css/_colon_optional/index.md b/files/pt-br/web/css/_colon_optional/index.md index 3892a59711eb83..ca282608d988b5 100644 --- a/files/pt-br/web/css/_colon_optional/index.md +++ b/files/pt-br/web/css/_colon_optional/index.md @@ -5,7 +5,7 @@ slug: Web/CSS/:optional {{ CSSRef }} -A [pseudo-classe](/pt-BR/docs/Web/CSS/Pseudo-classes) [CSS](/pt-BR/docs/Web/CSS) **`:optional`** representa qualquer elemento {{HTMLElement("input")}}, {{HTMLElement("select")}}, ou {{HTMLElement("textarea")}} que não contenha o atributo {{ htmlattrxref("required", "input") }}. +A [pseudo-classe](/pt-BR/docs/Web/CSS/Pseudo-classes) [CSS](/pt-BR/docs/Web/CSS) **`:optional`** representa qualquer elemento {{HTMLElement("input")}}, {{HTMLElement("select")}}, ou {{HTMLElement("textarea")}} que não contenha o atributo [`required`](/pt-BR/docs/Web/HTML/Element/input#required). ```css /* Selects qualquer <input> opcional */ @@ -28,7 +28,7 @@ Veja {{cssxref(":invalid")}} como exemplo. ## Referências de acessibilidade -Se um [formulário](/pt-BR/docs/Web/HTML/Element/form) contém {{htmlelement("input")}} opcionais, inputs requeridos devem ser indicados utilizando o atriuto {{ htmlattrxref("required", "input") }}. Isto garantirá que usuários que navegam com tecnologia de acessibilidade, como um leitor de tela, possam entender quais entradas devem ter o conteúdo validado para submeter o formulário com êxito. +Se um [formulário](/pt-BR/docs/Web/HTML/Element/form) contém {{htmlelement("input")}} opcionais, inputs requeridos devem ser indicados utilizando o atriuto [`required`](/pt-BR/docs/Web/HTML/Element/input#required). Isto garantirá que usuários que navegam com tecnologia de acessibilidade, como um leitor de tela, possam entender quais entradas devem ter o conteúdo validado para submeter o formulário com êxito. Entradas requeridas devem ser indicadas visualmente, utilizando um tratamento que não seja apenas a cor para passar o significado. Usualmente, textos descritivos e/ou um ícone são utilizados. diff --git a/files/pt-br/web/css/_colon_out-of-range/index.md b/files/pt-br/web/css/_colon_out-of-range/index.md index f99b3a3cc4a57c..be815a18bf7fcf 100644 --- a/files/pt-br/web/css/_colon_out-of-range/index.md +++ b/files/pt-br/web/css/_colon_out-of-range/index.md @@ -5,7 +5,7 @@ slug: Web/CSS/:out-of-range {{CSSRef}} -A [pseudo classe](/pt-BR/docs/CSS/Pseudo-classes) de [CSS](/pt-BR/docs/Web/CSS) **`:out-of-range`** representa um elemento de {{htmlelement("entrada")}} cujo valor atual esta fora dos limites especificados pelo {{htmlattrxref("min", "entrada")}} e {{htmlattrxref("max","entrada")}} atributos +A [pseudo classe](/pt-BR/docs/CSS/Pseudo-classes) de [CSS](/pt-BR/docs/Web/CSS) **`:out-of-range`** representa um elemento de {{htmlelement("entrada")}} cujo valor atual esta fora dos limites especificados pelo [`min`](/pt-BR/docs/Web/HTML/Element/entrada#min) e [`max`](/pt-BR/docs/Web/HTML/Element/entrada#max) atributos ```css /* Selecione qualquer <entrada>, mas somente quando estiver dentros dos diff --git a/files/pt-br/web/css/_colon_read-write/index.md b/files/pt-br/web/css/_colon_read-write/index.md index ed3fd3436cf791..a48ea368f17212 100644 --- a/files/pt-br/web/css/_colon_read-write/index.md +++ b/files/pt-br/web/css/_colon_read-write/index.md @@ -50,7 +50,7 @@ Você pode encontrar o código fonte completo em [readonly-confirmation.html](ht ### Estilizar controle não formal de read-write. -Este seletor não seleciona apenas {{htmlElement("input")}}/{{htmlElement("textarea")}} elementos - ele selecionará qualquer elemento que possa ser editado pelo usuário, como um {{htmlelement("p")}} elemento com {{htmlattrxref("contenteditable")}} definido sobre ele. +Este seletor não seleciona apenas {{htmlElement("input")}}/{{htmlElement("textarea")}} elementos - ele selecionará qualquer elemento que possa ser editado pelo usuário, como um {{htmlelement("p")}} elemento com [`contenteditable`](/pt-BR/docs/Web/HTML/Global_attributes#contenteditable) definido sobre ele. ```html <p contenteditable>Este parágrafo é editável; é read-write.</p> @@ -92,4 +92,4 @@ p:read-write { ## Veja também - {{cssxref(":read-only")}} -- Atributo HTML {{htmlattrxref("contenteditable")}}. +- Atributo HTML [`contenteditable`](/pt-BR/docs/Web/HTML/Global_attributes#contenteditable). diff --git a/files/pt-br/web/css/_colon_required/index.md b/files/pt-br/web/css/_colon_required/index.md index afe02d6a1ea1ed..8fa7afb25efa5f 100644 --- a/files/pt-br/web/css/_colon_required/index.md +++ b/files/pt-br/web/css/_colon_required/index.md @@ -5,7 +5,7 @@ slug: Web/CSS/:required {{ CSSRef }} -A [pseudo-classe](/pt-BR/docs/Web/CSS/Pseudo-classes) [CSS](/pt-BR/docs/Web/CSS) **`:required`** representa qualquer {{HTMLElement("input")}}, {{HTMLElement("select")}}, ou {{HTMLElement("textarea")}} contendo o atributo {{ htmlattrxref("required", "input") }}. +A [pseudo-classe](/pt-BR/docs/Web/CSS/Pseudo-classes) [CSS](/pt-BR/docs/Web/CSS) **`:required`** representa qualquer {{HTMLElement("input")}}, {{HTMLElement("select")}}, ou {{HTMLElement("textarea")}} contendo o atributo [`required`](/pt-BR/docs/Web/HTML/Element/input#required). ```css /* Seleciona qualquer <input> requerido */ @@ -28,7 +28,7 @@ Veja {{cssxref(":invalid")}} como exemplo. ## Preocupações com acessibilidade -Elementos {{htmlelement("input")}} obrigatórios devem ter o atributo {{ htmlattrxref("required", "input") }} atribuídos. Isso garante que pessoas que navegam com auxílio de recursos de acessibilidade, como o leitor de tela, possam entender quais campos precisam ter conteúdos válidos para garantir a submissão dos dados . +Elementos {{htmlelement("input")}} obrigatórios devem ter o atributo [`required`](/pt-BR/docs/Web/HTML/Element/input#required) atribuídos. Isso garante que pessoas que navegam com auxílio de recursos de acessibilidade, como o leitor de tela, possam entender quais campos precisam ter conteúdos válidos para garantir a submissão dos dados . Se o formulário também possui campos [opcionais](/pt-BR/docs/Web/CSS/:optional), entradas requeridas devem ser indicadas visualmente usando um tratamento que não seja apenas a cor para passar o significado. Usualmente, textos descritivos e/ou um ícone são utilizados. diff --git a/files/pt-br/web/css/_colon_target/index.md b/files/pt-br/web/css/_colon_target/index.md index aa4040255b004f..4f70aff0efe423 100644 --- a/files/pt-br/web/css/_colon_target/index.md +++ b/files/pt-br/web/css/_colon_target/index.md @@ -5,7 +5,7 @@ slug: Web/CSS/:target {{CSSRef}} -A [pseudo-classe CSS](/pt-BR/docs/Web/CSS/Pseudo-classes) **`:target`** representa um único elemento (o elemento alvo) com uma {{htmlattrxref("id")}} correspondente ao fragmento da URL. +A [pseudo-classe CSS](/pt-BR/docs/Web/CSS/Pseudo-classes) **`:target`** representa um único elemento (o elemento alvo) com uma [`id`](/pt-BR/docs/Web/HTML/Global_attributes#id) correspondente ao fragmento da URL. ```css /* Seleciona um elemento com a ID correspondente ao fragmento da URL */ diff --git a/files/pt-br/web/css/css_colors/applying_color/index.md b/files/pt-br/web/css/css_colors/applying_color/index.md index f7effd28bc5266..6ca0e570185bd8 100644 --- a/files/pt-br/web/css/css_colors/applying_color/index.md +++ b/files/pt-br/web/css/css_colors/applying_color/index.md @@ -36,7 +36,7 @@ Sempre que um elemento é renderizado, essas propriedades são usadas para deter - {{cssxref("text-emphasis-color")}} - : A cor a ser usada ao desenhar símbolos de ênfase adjacentes a cada caractere no texto. Isso é usado principalmente ao desenhar texto para idiomas do Leste Asiático. - {{cssxref("caret-color")}} - - : A cor a ser usada ao desenhar o {{Glossary("caret")}} (às vezes chamado de cursor de entrada de texto) dentro do elemento. Isso só é útil em elementos que são editáveis, como {{HTMLElement("input")}} e {{HTMLElement("textarea")}} ou elementos cujo atributo HTML {{htmlattrxref("contenteditable")}} está definido. + - : A cor a ser usada ao desenhar o {{Glossary("caret")}} (às vezes chamado de cursor de entrada de texto) dentro do elemento. Isso só é útil em elementos que são editáveis, como {{HTMLElement("input")}} e {{HTMLElement("textarea")}} ou elementos cujo atributo HTML [`contenteditable`](/pt-BR/docs/Web/HTML/Global_attributes#contenteditable) está definido. ### Caixas @@ -329,7 +329,7 @@ Finalmente, a classe `.boxRight` descreve as propriedades únicas da caixa que ## Deixando o usuário escolher uma cor -Há muitas situações em que seu site pode precisar permitir que o usuário selecione uma cor. Talvez você tenha uma interface de usuário personalizável ou esteja implementando um aplicativo de desenho. Talvez você tenha texto editável e precise deixar o usuário escolher a cor do texto. Ou talvez seu aplicativo permita que o usuário atribua cores a pastas ou itens. Embora historicamente tenha sido necessário implementar seu próprio [seletor de cores](https://en.wikipedia.org/wiki/Color_picker), o HTML agora oferece suporte para navegadores fornecerem um para seu uso por meio do {{HTMLElement("input" )}}, usando `"color"` como o valor de seu atributo {{htmlattrxref("type", "input")}}. +Há muitas situações em que seu site pode precisar permitir que o usuário selecione uma cor. Talvez você tenha uma interface de usuário personalizável ou esteja implementando um aplicativo de desenho. Talvez você tenha texto editável e precise deixar o usuário escolher a cor do texto. Ou talvez seu aplicativo permita que o usuário atribua cores a pastas ou itens. Embora historicamente tenha sido necessário implementar seu próprio [seletor de cores](https://en.wikipedia.org/wiki/Color_picker), o HTML agora oferece suporte para navegadores fornecerem um para seu uso por meio do {{HTMLElement("input" )}}, usando `"color"` como o valor de seu atributo [`type`](/pt-BR/docs/Web/HTML/Element/input#type). O elemento `<input>` representa uma cor apenas na [notação de string hexadecimal](#hexadecimal_string_notation) abordada acima. diff --git a/files/pt-br/web/css/flex-direction/index.md b/files/pt-br/web/css/flex-direction/index.md index 143cc44f2f9c29..752eda1a1eb616 100644 --- a/files/pt-br/web/css/flex-direction/index.md +++ b/files/pt-br/web/css/flex-direction/index.md @@ -9,7 +9,7 @@ A propriedade [CSS](/pt-BR/docs/Web/CSS) **`flex-direction`** define como os ite {{EmbedInteractiveExample("pages/css/flex-direction.html")}} -Observe que os valores `row` e `row-reverse` são afetados pela direcionalidade do contêiner flexível. Se seu atributo {{HTMLAttrxRef("dir")}} for **`ltr`**, **`row`** representa o eixo horizontal orientado da esquerda para a direita, e `row-reverse` está orientado da direita para esquerda; Se seu atributo **`rtl`**, **`row`** representa o eixo orientado da direita para a esquerda e `row-reverse` da esquerda para a direita. +Observe que os valores `row` e `row-reverse` são afetados pela direcionalidade do contêiner flexível. Se seu atributo [`dir`](/pt-BR/docs/Web/HTML/Global_attributes#dir) for **`ltr`**, **`row`** representa o eixo horizontal orientado da esquerda para a direita, e `row-reverse` está orientado da direita para esquerda; Se seu atributo **`rtl`**, **`row`** representa o eixo orientado da direita para a esquerda e `row-reverse` da esquerda para a direita. ## Syntax diff --git a/files/pt-br/web/css/id_selectors/index.md b/files/pt-br/web/css/id_selectors/index.md index 4133c340cf6e11..1e9a339799c266 100644 --- a/files/pt-br/web/css/id_selectors/index.md +++ b/files/pt-br/web/css/id_selectors/index.md @@ -5,7 +5,7 @@ slug: Web/CSS/ID_selectors {{CSSRef("Selectors")}} -Em um documento HTML, os seletores de ID do CSS selecionam um elemento baseado no conteúdo de seu atributo {{htmlattrxref("ID")}}, o qual deve ser exatamente igual ao valor dado ao seletor. +Em um documento HTML, os seletores de ID do CSS selecionam um elemento baseado no conteúdo de seu atributo [`ID`](/pt-BR/docs/Web/HTML/Global_attributes#ID), o qual deve ser exatamente igual ao valor dado ao seletor. ## Sintaxe diff --git a/files/pt-br/web/html/content_categories/index.md b/files/pt-br/web/html/content_categories/index.md index 4c7e59d1d5788f..5563f2d754aeff 100644 --- a/files/pt-br/web/html/content_categories/index.md +++ b/files/pt-br/web/html/content_categories/index.md @@ -31,7 +31,7 @@ Alguns outros elementos pertencem a essa categoria, mas somente se uma condiçã - {{HTMLElement("area")}}, se for um descendente de um elemento {{HTMLElement("map")}} - {{HTMLElement("link")}}, se o atributo **[itemprop](/pt-BR/docs/HTML/Global_attributes#attr-itemprop)** estiver presente - {{HTMLElement("meta")}}, se o atributo **[itemprop](/pt-BR/docs/HTML/Global_attributes#attr-itemprop)** estiver presente -- {{HTMLElement("style")}}, se o atributo {{htmlattrxref("scoped","style")}} estiver presente +- {{HTMLElement("style")}}, se o atributo [`scoped`](/pt-BR/docs/Web/HTML/Element/style#scoped) estiver presente ### Conteúdo de seccionamento @@ -73,12 +73,12 @@ O conteúdo embutido importa outro recurso ou insere conteúdo de uma outra ling O conteúdo interativo inclui elementos que são especificamente desenvolvidos para a interação do usuário. Os elementos que pertencem a essa categoria incluem: {{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, e {{HTMLElement("textarea")}}. Alguns elementos pertencem a essa categoria somente sob condições específicas: -- {{HTMLElement("audio")}}, se o atributo {{htmlattrxref("controls", "audio")}} estiver presente -- {{HTMLElement("img")}}, se o atributo {{htmlattrxref("usemap", "img")}} estiver presente -- {{HTMLElement("input")}}, se o atributo {{htmlattrxref("type", "input")}} não estiver no modo escondido -- {{HTMLElement("menu")}}, se o atributo {{htmlattrxref("type", "menu")}} estiver no modo barra de ferramentas -- {{HTMLElement("object")}}, se o atributo {{htmlattrxref("usemap", "object")}} estiver presente -- {{HTMLElement("video")}}, se o atributo {{htmlattrxref("controls", "video")}} estiver presente +- {{HTMLElement("audio")}}, se o atributo [`controls`](/pt-BR/docs/Web/HTML/Element/audio#controls) estiver presente +- {{HTMLElement("img")}}, se o atributo [`usemap`](/pt-BR/docs/Web/HTML/Element/img#usemap) estiver presente +- {{HTMLElement("input")}}, se o atributo [`type`](/pt-BR/docs/Web/HTML/Element/input#type) não estiver no modo escondido +- {{HTMLElement("menu")}}, se o atributo [`type`](/pt-BR/docs/Web/HTML/Element/menu#type) estiver no modo barra de ferramentas +- {{HTMLElement("object")}}, se o atributo [`usemap`](/pt-BR/docs/Web/HTML/Element/object#usemap) estiver presente +- {{HTMLElement("video")}}, se o atributo [`controls`](/pt-BR/docs/Web/HTML/Element/video#controls) estiver presente ### Conteúdo associado ao **form** diff --git a/files/pt-br/web/html/cors_enabled_image/index.md b/files/pt-br/web/html/cors_enabled_image/index.md index 00700675303f3e..68f5598e30c018 100644 --- a/files/pt-br/web/html/cors_enabled_image/index.md +++ b/files/pt-br/web/html/cors_enabled_image/index.md @@ -4,7 +4,7 @@ slug: Web/HTML/CORS_enabled_image original_slug: Web/HTML/CORS_imagens_habilitadas --- -The HTML specification introduces a {{ htmlattrxref("crossorigin", "img") }} attribute for images that, in combination with an appropriate {{Glossary("CORS")}} header, allows images defined by the {{ HTMLElement("img") }} element that are loaded from foreign origins to be used in canvas as if they were being loaded from the current origin. +The HTML specification introduces a [`crossorigin`](/pt-BR/docs/Web/HTML/Element/img#crossorigin) 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](/pt-BR/HTML/CORS_settings_attributes) for details on how the `crossorigin` attribute is used. diff --git a/files/pt-br/web/html/element/a/index.md b/files/pt-br/web/html/element/a/index.md index 79c7ffe850fec2..d781746a80e5e0 100644 --- a/files/pt-br/web/html/element/a/index.md +++ b/files/pt-br/web/html/element/a/index.md @@ -77,7 +77,7 @@ Os atributos do elemento incluem os [atributos globais](/pt-BR/docs/Web/HTML/Glo - : 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. + > **Note:** Use the global attribute [`id`](/pt-BR/docs/Web/HTML/Global_attributes#id) instead. - {{HTMLAttrDef("rev")}} - : Specified a reverse link; the opposite of [the `rel` attribute](#rel). Deprecated for being very confusing. @@ -381,7 +381,7 @@ People experiencing low vision conditions, navigating with the aid of screen rea <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")}}: +If an icon is used to signify link behavior, make sure it has [alt text](/pt-BR/docs/Web/HTML/Element/img#alt): ```html <a target="_blank" href="https://www.wikipedia.org"> diff --git a/files/pt-br/web/html/element/area/index.md b/files/pt-br/web/html/element/area/index.md index 9808f52da09a67..5cc7019f5c778d 100644 --- a/files/pt-br/web/html/element/area/index.md +++ b/files/pt-br/web/html/element/area/index.md @@ -24,7 +24,7 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes). - {{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")}} - - : 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. + - : 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 [`download`](/pt-BR/docs/Web/HTML/Element/a#download) 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")}} diff --git a/files/pt-br/web/html/element/article/index.md b/files/pt-br/web/html/element/article/index.md index 3011b141668dac..29b7f0a270f4ef 100644 --- a/files/pt-br/web/html/element/article/index.md +++ b/files/pt-br/web/html/element/article/index.md @@ -11,7 +11,7 @@ O _Elemento HTML Article_ (\<article>) representa uma composição independente > > - 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") }}. +> - A data e hora de publicação de um elemento `<article>` pode ser descrita usando o atributo [`pubdate`](/pt-BR/docs/Web/HTML/Element/time#pubdate) de um elemento {{ HTMLElement("time") }}. ## Contexto de uso diff --git a/files/pt-br/web/html/element/button/index.md b/files/pt-br/web/html/element/button/index.md index 96aa225cc183d0..bd40489c43a931 100644 --- a/files/pt-br/web/html/element/button/index.md +++ b/files/pt-br/web/html/element/button/index.md @@ -27,21 +27,21 @@ Esse elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes). - : Esse atributo booleano indica que o usuário não poderá interagir com o botão. Se esse atributo não for especificado, o botão herdará a configuração do elemento que o contém, por exemplo {{HTMLElement("fieldset")}}, se não existir nenhum elemento com o atributo **disabled** definido, então o botão estará habilitado. - Firefox irá, diferente de outros navegadores, por padrão, [persiste com o estado dinâmico desativado](http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) de um {{HTMLElement("button")}} sob as páginas carregadas. Use o atributo {{htmlattrxref("autocomplete","button")}} para controlar esse recurso. + Firefox irá, diferente de outros navegadores, por padrão, [persiste com o estado dinâmico desativado](http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) de um {{HTMLElement("button")}} sob as páginas carregadas. Use o atributo [`autocomplete`](/pt-BR/docs/Web/HTML/Element/button#autocomplete) para controlar esse recurso. - {{htmlattrdef("form")}} - : O elemento de formulário que o botão está associado (é o _formulário proprietário_). O valor do atributo deve ser o atributo **id** de um elemento {{HTMLElement("form")}} no mesmo documento. Se esse atributo não for especificado, o elemento `<button>` deve ser descendente de um elemento de formulário. Esse atributo permite que você coloque elementos `<button>` em qualquer lugar do documento, não apenas como descendente de seus elementos {{HTMLElement("form")}}. - {{htmlattrdef("formaction")}} - - : A URI de um programa que processa a informação submetida pelo botão. Se especificado, ele sobrescreve o atributo {{htmlattrxref("action","form")}} do formulário proprietário do botão. + - : A URI de um programa que processa a informação submetida pelo botão. Se especificado, ele sobrescreve o atributo [`action`](/pt-BR/docs/Web/HTML/Element/form#action) do formulário proprietário do botão. - {{htmlattrdef("formenctype")}} - : Se o botão é um botão de envio, esse atributo especifica o tipo de conteúdo que é usado para enviar o formulário para o servidor; Possíveis valores são: - `application/x-www-form-urlencoded`: O valor padrão se o atributo não está especificado. - - `multipart/form-data`: Use esse valor se você está usando um elemento {{HTMLElement("input")}} com o atributo {{htmlattrxref("type","input")}} definido para o `arquivo`. + - `multipart/form-data`: Use esse valor se você está usando um elemento {{HTMLElement("input")}} com o atributo [`type`](/pt-BR/docs/Web/HTML/Element/input#type) definido para o `arquivo`. - `text/plain` - Se esse atributo fro especificado, ele sobrescreve o atributo {{htmlattrxref("enctype","form")}} do formulário proprietário do botão. + Se esse atributo fro especificado, ele sobrescreve o atributo [`enctype`](/pt-BR/docs/Web/HTML/Element/form#enctype) do formulário proprietário do botão. - {{htmlattrdef("formmethod")}} @@ -50,13 +50,13 @@ Esse elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes). - `post`: Os dados obtidos do formulário são incluídos em seu corpo e enviados para o servidor. - `get`: Os dados obtidos do formulário são anexados aos atributos URI do **formulário**, com uma '?' como separador, e o resultado URI é enviado para o servidor. Use esse método quando o formulário não possui efeitos colaterais e contém apenas caracteres ASCII. - Se especificado, esse atributo sobrescreve o atributo {{htmlattrxref("method","form")}} do formulário proprietário do botão. + Se especificado, esse atributo sobrescreve o atributo [`method`](/pt-BR/docs/Web/HTML/Element/form#method) do formulário proprietário do botão. - {{htmlattrdef("formnovalidate")}} - - : Se o botão é um botão de envio, esse atributo Booleano especifica que o formulário não é para ser validado quando submetido. Se esse atributo for especificado, ele sobrescreve o atributo {{htmlattrxref("novalidate","form")}} do formulário proprietário do botão. + - : Se o botão é um botão de envio, esse atributo Booleano especifica que o formulário não é para ser validado quando submetido. Se esse atributo for especificado, ele sobrescreve o atributo [`novalidate`](/pt-BR/docs/Web/HTML/Element/form#novalidate) do formulário proprietário do botão. - {{htmlattrdef("formtarget")}} - - : Se o botão é um botão de envio, esse atributo é um nome ou palavra-chave indicando onde exibir a resposta que é recebida após o envio do formulário. Esse é um nome de, ou palavra-chave para, um _contexto de navegação_ (por exemplo, uma aba, janela ou quadro embutido). Se esse atributo é especificado, ele sobrescreve o atributo {{htmlattrxref("target", "form")}} do formulário proprietário do botão. As seguintes palavras-chaves possuem significados especiais: + - : Se o botão é um botão de envio, esse atributo é um nome ou palavra-chave indicando onde exibir a resposta que é recebida após o envio do formulário. Esse é um nome de, ou palavra-chave para, um _contexto de navegação_ (por exemplo, uma aba, janela ou quadro embutido). Se esse atributo é especificado, ele sobrescreve o atributo [`target`](/pt-BR/docs/Web/HTML/Element/form#target) do formulário proprietário do botão. As seguintes palavras-chaves possuem significados especiais: - `_self`: Carrega a resposta no mesmo contexto navegação como o atual. Esse valor é o padrão se o atributo não é especificado. - `_blank`: Carrega a resposta em um contexto de navegação sem nome. @@ -112,7 +112,7 @@ Esse bug foi corrigido no IE8. Firefox adicionará, com propósitos de acessibilidade, uma pequena borda pontinhada e um botão focado. Essa borda será declarada por meio de CSS, no estilo do navegador, mas você pode sobrescreve-lo se necessário para adicionar seu próprio estilo de foco usando `button{{cssxref("::-moz-focus-inner")}} { }` -Firefox irá, diferente de outros navegadores, por padrão, [persistir o estado dinâmico desativado](http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) de um {{HTMLElement("button")}} sob o carregamento das páginas. Definindo o valor do atributo {{htmlattrxref("autocomplete","button")}} para `off` desabilita esse recurso. See {{bug(654072)}}. +Firefox irá, diferente de outros navegadores, por padrão, [persistir o estado dinâmico desativado](http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) de um {{HTMLElement("button")}} sob o carregamento das páginas. Definindo o valor do atributo [`autocomplete`](/pt-BR/docs/Web/HTML/Element/button#autocomplete) para `off` desabilita esse recurso. See {{bug(654072)}}. Firefox <35 para Android define um padrão {{ cssxref("background-image") }} gradiente em todos os botões (see {{bug(763671)}}). Isso pode ser desabilitado usando `background-image: none`. diff --git a/files/pt-br/web/html/element/cite/index.md b/files/pt-br/web/html/element/cite/index.md index 422004742be466..5d6a3aa76bb13a 100644 --- a/files/pt-br/web/html/element/cite/index.md +++ b/files/pt-br/web/html/element/cite/index.md @@ -64,7 +64,7 @@ Este elemento inclui apenas [atributos globais](/pt-BR/docs/HTML/Global_attribut - Um trabalho criativo deve conter a citação de um livro,um documento,um ensaio,um poema,um filme,um programa de televisão,um video game,uma escultura,uma pintura,uma produção cinematográfica,um jogo,uma opera,um musical,uma exibição,um relatório de um caso legal,um programa de computador,um website,uma página da web,um post de um blog ou comentário,um post em um forum ou um comentário no mesmo,um tweet,uma obra ou discurso,etc. - O W3C específica alguns estados para referenciar um trabalho criativo que deve incluir o nome do autor,enquanto a WHATWG declarou que não deve ser incluso o nome do autor sob nenhuma circustância. -- Use o atributo {{htmlattrxref("cite", "blockquote")}} em um elemento {{HTMLElement("blockquote")}} ou {{HTMLElement("q")}} para referenciar uma fonte online. +- Use o atributo [`cite`](/pt-BR/docs/Web/HTML/Element/blockquote#cite) em um elemento {{HTMLElement("blockquote")}} ou {{HTMLElement("q")}} para referenciar uma fonte online. - Para evitar que o itálico padrão do estilo seja usado pelo elemento \<cite> use a propiedade {{cssxref("font-style")}} do CSS. ## Exemplo diff --git a/files/pt-br/web/html/element/col/index.md b/files/pt-br/web/html/element/col/index.md index dd3028040588a7..43c30228a99922 100644 --- a/files/pt-br/web/html/element/col/index.md +++ b/files/pt-br/web/html/element/col/index.md @@ -32,7 +32,7 @@ O elemento **HTML `<col>`** define uma tabela contendo colunas e sendo utilizada {{HTMLElement("colgroup")}} only, though it can be implicitly defined as its start tag is not mandatory. The {{HTMLElement("colgroup")}} must not have a - {{htmlattrxref("span", "colgroup")}} attribute. + <a href="/pt-BR/docs/Web/HTML/Element/colgroup#span"><code>span</code></a> attribute. </td> </tr> <tr> @@ -58,17 +58,17 @@ This element includes the [global attributes](/pt-BR/docs/HTML/Global_attributes - `center`, centering the content in the cell - `right`, aligning the content to the right of the cell - `justify`, inserting spaces into the textual content so that the content is justified in the cell - - `char`, aligning the textual content on a special character with a minimal offset, defined by the {{htmlattrxref("char", "col")}} and {{htmlattrxref("charoff", "col")}} attributes {{unimplemented_inline(2212)}}. + - `char`, aligning the textual content on a special character with a minimal offset, defined by the [`char`](/pt-BR/docs/Web/HTML/Element/col#char) and [`charoff`](/pt-BR/docs/Web/HTML/Element/col#charoff) attributes {{unimplemented_inline(2212)}}. - If this attribute is not set, its value is inherited from the {{htmlattrxref("align", "colgroup")}} of the {{HTMLElement("colgroup")}} element this `<col>` element belongs too. If there are none, the `left` value is assumed. + If this attribute is not set, its value is inherited from the [`align`](/pt-BR/docs/Web/HTML/Element/colgroup#align) of the {{HTMLElement("colgroup")}} element this `<col>` element belongs too. If there are none, the `left` value is assumed. > **Note:**Do not use this attribute as it is obsolete (not supported) in the latest standard.- To achieve the same effect as the `left`, `center`, `right` or `justify` values: > > - Do not try to set the {{cssxref("text-align")}} property on a selector giving a {{HTMLElement("col")}} element. Because {{HTMLElement("td")}} elements are not descendant of the {{HTMLElement("col")}} element, they won't inherit it. - > - If the table doesn't use a {{htmlattrxref("colspan", "td")}} attribute, use the `td:nth-child(an+b)` CSS selector. Set `a` to zero and `b`to the position of the column in the table, e.g. `td:nth-child(2) { text-align: right; }` to right-align the second column. - > - If the table does use a {{htmlattrxref("colspan", "td")}} attribute, the effect can be achieved by combining adequate CSS attribute selectors like `[colspan=n]`, though this is not trivial. + > - If the table doesn't use a [`colspan`](/pt-BR/docs/Web/HTML/Element/td#colspan) attribute, use the `td:nth-child(an+b)` CSS selector. Set `a` to zero and `b`to the position of the column in the table, e.g. `td:nth-child(2) { text-align: right; }` to right-align the second column. + > - If the table does use a [`colspan`](/pt-BR/docs/Web/HTML/Element/td#colspan) attribute, the effect can be achieved by combining adequate CSS attribute selectors like `[colspan=n]`, though this is not trivial. > - > - To achieve the same effect as the `char` value, in CSS3, you can use the value of the {{htmlattrxref("char", "col")}} as the value of the {{cssxref("text-align")}} property {{unimplemented_inline}}. + > - To achieve the same effect as the `char` value, in CSS3, you can use the value of the [`char`](/pt-BR/docs/Web/HTML/Element/col#char) as the value of the {{cssxref("text-align")}} property {{unimplemented_inline}}. - {{htmlattrdef("bgcolor")}} {{Non-standard_inline}} @@ -88,9 +88,9 @@ This element includes the [global attributes](/pt-BR/docs/HTML/Global_attributes - {{htmlattrdef("char")}} {{Deprecated_inline}} - - : This attribute is used to set the character to align the cells in a column on. Typical values for this include a period (.) when attempting to align numbers or monetary values. If {{htmlattrxref("align", "col")}} is not set to `char`, this attribute is ignored. + - : This attribute is used to set the character to align the cells in a column on. Typical values for this include a period (.) when attempting to align numbers or monetary values. If [`align`](/pt-BR/docs/Web/HTML/Element/col#align) is not set to `char`, this attribute is ignored. - > **Note:**Do not use this attribute as it is obsolete (and not supported) in the latest standard. To achieve the same effect as the {{htmlattrxref("char", "col")}}, in CSS3, you can use the character set using the {{htmlattrxref("char", "col")}} attribute as the value of the {{cssxref("text-align")}} property {{unimplemented_inline}}. + > **Note:**Do not use this attribute as it is obsolete (and not supported) in the latest standard. To achieve the same effect as the [`char`](/pt-BR/docs/Web/HTML/Element/col#char), in CSS3, you can use the character set using the [`char`](/pt-BR/docs/Web/HTML/Element/col#char) attribute as the value of the {{cssxref("text-align")}} property {{unimplemented_inline}}. - {{htmlattrdef("charoff")}} {{Deprecated_inline}} @@ -112,8 +112,8 @@ This element includes the [global attributes](/pt-BR/docs/HTML/Global_attributes > **Note:**Do not use this attribute as it is obsolete (and not supported) in the latest standard:- Do not try to set the {{cssxref("vertical-align")}} property on a selector giving a {{HTMLElement("col")}} element. Because {{HTMLElement("td")}} elements are not descendant of the {{HTMLElement("col")}} element, they won't inherit it. > - > - If the table doesn't use a {{htmlattrxref("colspan", "td")}} attribute, use the `td:nth-child(an+b)` CSS selector where a is the total number of the columns in the table and b is the ordinal position of the column in the table. Only after this selector the {{cssxref("vertical-align")}} property can be used. - > - If the table does use a {{htmlattrxref("colspan", "td")}} attribute, the effect can be achieved by combining adequate CSS attribute selectors like `[colspan=n]`, though this is not trivial. + > - If the table doesn't use a [`colspan`](/pt-BR/docs/Web/HTML/Element/td#colspan) attribute, use the `td:nth-child(an+b)` CSS selector where a is the total number of the columns in the table and b is the ordinal position of the column in the table. Only after this selector the {{cssxref("vertical-align")}} property can be used. + > - If the table does use a [`colspan`](/pt-BR/docs/Web/HTML/Element/td#colspan) attribute, the effect can be achieved by combining adequate CSS attribute selectors like `[colspan=n]`, though this is not trivial. - {{htmlattrdef("width")}} - : This attribute specifies a default width for each column in the current column group. In addition to the standard pixel and percentage values, this attribute might take the special form `0*`, which means that the width of each column in the group should be the minimum width necessary to hold the column's contents. Relative widths such as `0.5*` also can be used. diff --git a/files/pt-br/web/html/element/datalist/index.md b/files/pt-br/web/html/element/datalist/index.md index c33e811a6533c1..3929830f28fe7c 100644 --- a/files/pt-br/web/html/element/datalist/index.md +++ b/files/pt-br/web/html/element/datalist/index.md @@ -53,5 +53,5 @@ Inclua este polyfill para fornecer suporte para navegadores mais antigos e atual ## Veja também -- O elemento {{ HTMLElement("input") }}, especialmente seu atributo {{ htmlattrxref("list", "input") }}; +- O elemento {{ HTMLElement("input") }}, especialmente seu atributo [`list`](/pt-BR/docs/Web/HTML/Element/input#list); - O elemento {{ HTMLElement("option") }}. diff --git a/files/pt-br/web/html/element/dfn/index.md b/files/pt-br/web/html/element/dfn/index.md index eb68e5614465fd..9ccb9ed1595742 100644 --- a/files/pt-br/web/html/element/dfn/index.md +++ b/files/pt-br/web/html/element/dfn/index.md @@ -12,7 +12,7 @@ O elemento **HTML `<dfn>` **(ou _Elemento Definição_ _HTML_) representa uma in > - O valor exato do termo a ser definido é determinado pelas seguintes regras: > > 1. Se o elemento \<dfn> tiver um atributo title, então o termo é o valor deste atributo. -> 2. Senão, se contiver somente um elemento {{HTMLElement("abbr")}} com um atributo {{htmlattrxref("title", "abbr")}}, então o termo é o valor deste atributo. +> 2. Senão, se contiver somente um elemento {{HTMLElement("abbr")}} com um atributo [`title`](/pt-BR/docs/Web/HTML/Element/abbr#title), então o termo é o valor deste atributo. > 3. Caso contrário, o conteúdo do texto do elemento `<dfn>` é o termo a ser definido. - _[Categorias de conteúdo](/pt-BR/docs/HTML/Content_categories)_ [Conteúdo de fluxo](/pt-BR/docs/HTML/Content_categories#Flow_content), [Conteúdo de fraseamento](/pt-BR/docs/HTML/Content_categories#Phrasing_content), conetúdo palpável. diff --git a/files/pt-br/web/html/element/dir/index.md b/files/pt-br/web/html/element/dir/index.md index 9550b09cd07e34..3ed311f1439965 100644 --- a/files/pt-br/web/html/element/dir/index.md +++ b/files/pt-br/web/html/element/dir/index.md @@ -32,7 +32,7 @@ Como todos os outros elementos HTML, este elemento suporta os [global attributes - A propriedade {{cssxref('list-style')}}, útil para escolher a maneira como o ordinal é exibido. - [CSS counters](/pt-BR/docs/CSS_Counters), útil para lidar com listas aninhadas complexas. - - A propriedade {{Cssxref('line-height')}}, útil para simular o atributo obsoleto {{htmlattrxref("compact", "dir")}}. + - A propriedade {{Cssxref('line-height')}}, útil para simular o atributo obsoleto [`compact`](/pt-BR/docs/Web/HTML/Element/dir#compact). - A propriedade {{cssxref('margin')}}, útil para controlar o recuo da lista. {{HTMLSidebar}} diff --git a/files/pt-br/web/html/element/form/index.md b/files/pt-br/web/html/element/form/index.md index 2eb6347ca80616..8c36e7d9070c4e 100644 --- a/files/pt-br/web/html/element/form/index.md +++ b/files/pt-br/web/html/element/form/index.md @@ -23,13 +23,13 @@ Este elemento inclue os [Atributos global](/pt-BR/docs/HTML/Global_attributes). - : A comma-separated list of content types that the server accepts. - > **Note:** **Usage note:** This attribute has been removed in HTML5 and should no longer be used. Instead, use the {{htmlattrxref("accept", "input")}} attribute of the specific {{HTMLElement("input")}} element. + > **Note:** **Usage note:** This attribute has been removed in HTML5 and should no longer be used. Instead, use the [`accept`](/pt-BR/docs/Web/HTML/Element/input#accept) attribute of the specific {{HTMLElement("input")}} element. - {{htmlattrdef("accept-charset")}} - : A list of character encodings that the server accepts. The list can be delimited by spaces or commas. The browser uses in the order in which they are listed. The default value is the reserved string "UNKNOWN", in which case the encoding corresponds to the encoding of the document containing the form element. HTML 4: In previous versions of HTML, the different character encodings could be delimited by spaces or commas. This is no longer the case in HTML5, where only spaces are correct. - {{htmlattrdef("action")}} - - : The URI of a program that processes the information submitted via the form. This value can be overridden by a {{htmlattrxref("formaction", "button")}} attribute on a {{HTMLElement("button")}} or {{HTMLElement("input")}} element. + - : The URI of a program that processes the information submitted via the form. This value can be overridden by a [`formaction`](/pt-BR/docs/Web/HTML/Element/button#formaction) attribute on a {{HTMLElement("button")}} or {{HTMLElement("input")}} element. - {{htmlattrdef("autocomplete")}} - : Indicates whether controls in this form can by default have their values automatically completed by the browser. This setting can be overridden by an `autocomplete` attribute on an element belonging to the form. Possible values are: @@ -47,7 +47,7 @@ Este elemento inclue os [Atributos global](/pt-BR/docs/HTML/Global_attributes). - `multipart/form-data`: Use this value if you are using an {{HTMLElement("input")}} element with the `type` attribute set to "file". - `text/plain (HTML5)` - This value can be overridden by a {{htmlattrxref("formenctype", "button")}} attribute on a {{HTMLElement("button")}} or {{HTMLElement("input")}} element. + This value can be overridden by a [`formenctype`](/pt-BR/docs/Web/HTML/Element/button#formenctype) attribute on a {{HTMLElement("button")}} or {{HTMLElement("input")}} element. - {{htmlattrdef("method")}} @@ -56,12 +56,12 @@ Este elemento inclue os [Atributos global](/pt-BR/docs/HTML/Global_attributes). - `post`: Corresponds to the HTTP [POST method](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5) ; the data from the form is included in the body of the form and is sent to the server. - `get`: Corresponds to the HTTP [GET method](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3); the data from the form are appended to the `action` attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters. - This value can be overridden by a {{htmlattrxref("formmethod", "button")}} attribute on a {{HTMLElement("button")}} or {{HTMLElement("input")}} element. + This value can be overridden by a [`formmethod`](/pt-BR/docs/Web/HTML/Element/button#formmethod) attribute on a {{HTMLElement("button")}} or {{HTMLElement("input")}} element. - {{htmlattrdef("name")}} - : The name of the form. In HTML 4 its use is deprecated (`id` should be used instead). It must be unique among the forms in a document and not the empty string in HTML 5. - {{htmlattrdef("novalidate")}} - - : This Boolean attribute indicates that the form is not to be validated when it is submitted. If this attribute is missing (and therefore the form is validated), this default setting can be overridden by a {{htmlattrxref("formnovalidate", "button")}} attribute on a {{HTMLElement("button")}} or {{HTMLElement("input")}} element belonging to the form. + - : This Boolean attribute indicates that the form is not to be validated when it is submitted. If this attribute is missing (and therefore the form is validated), this default setting can be overridden by a [`formnovalidate`](/pt-BR/docs/Web/HTML/Element/button#formnovalidate) attribute on a {{HTMLElement("button")}} or {{HTMLElement("input")}} element belonging to the form. - {{htmlattrdef("target")}} - : A name or keyword indicating where to display the response that is received after submitting the form. In HTML 4, this is the name of, or a keyword for, a frame. In HTML5, it is a name of, or keyword for, a _browsing context_ (for example, tab, window, or inline frame). The following keywords have special meanings: @@ -72,7 +72,7 @@ Este elemento inclue os [Atributos global](/pt-BR/docs/HTML/Global_attributes). - `_top`: HTML 4: Load the response into the full, original window, canceling all other frames. HTML5: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as `_self`. - _iframename_: The response is displayed in a named {{HTMLElement("iframe")}}. - HTML5: This value can be overridden by a {{htmlattrxref("formtarget", "button")}} attribute on a {{HTMLElement("button")}} or {{HTMLElement("input")}} element. + HTML5: This value can be overridden by a [`formtarget`](/pt-BR/docs/Web/HTML/Element/button#formtarget) attribute on a {{HTMLElement("button")}} or {{HTMLElement("input")}} element. ## Exemplos diff --git a/files/pt-br/web/html/element/head/index.md b/files/pt-br/web/html/element/head/index.md index cf6d1e7d1762d9..70f2e606d22dd4 100644 --- a/files/pt-br/web/html/element/head/index.md +++ b/files/pt-br/web/html/element/head/index.md @@ -22,7 +22,7 @@ O elemento **HTML `<head>` providencia informações gerais** (metadados) sobre <td> <p>Se o elemento é um {{HTMLElement("iframe")}}</p> <p> - {{htmlattrxref("srcdoc", "iframe")}}, ou se a informação + <a href="/pt-BR/docs/Web/HTML/Element/iframe#srcdoc"><code>srcdoc</code></a>, ou se a informação do título está sendo avaliada desde um nivel alto do protocolo, zero ou mais elementos de conteúdo de metadados. </p> diff --git a/files/pt-br/web/html/element/img/index.md b/files/pt-br/web/html/element/img/index.md index c2fb360be62963..65170188f7f8f9 100644 --- a/files/pt-br/web/html/element/img/index.md +++ b/files/pt-br/web/html/element/img/index.md @@ -19,7 +19,7 @@ O **elemento** **HTML `<img>` **(or _HTML Image Element_) representa a inserçã > **Note:** **Usage note:** > Navegadores nem sempre exibem a imagem referenciada pelo elemento. Este é o caso para navegadores não gráficos (incluindo aqueles usados por pessoas com deficiência de visão), ou se o usuário optar por não exibir imagens ou se o navegador não conseguir exibir a imagem porque é inválido ou um tipo não suportado. Nesses casos, o navegador pode substituir a imagem pelo texto definido no atributo **alt** deste elemento. -- _[Content categories](/pt-BR/docs/HTML/Content_categories)_ [Flow content](/pt-BR/docs/HTML/Content_categories#Flow_content), [phrasing content](/pt-BR/docs/HTML/Content_categories#Phrasing_content), embedded content, palpable content. If the element has a {{htmlattrxref("usemap", "img")}} attribute, it also is a part of the interactive content category. +- _[Content categories](/pt-BR/docs/HTML/Content_categories)_ [Flow content](/pt-BR/docs/HTML/Content_categories#Flow_content), [phrasing content](/pt-BR/docs/HTML/Content_categories#Phrasing_content), embedded content, palpable content. If the element has a [`usemap`](/pt-BR/docs/Web/HTML/Element/img#usemap) attribute, it also is a part of the interactive content category. - _Permitted content_ None, it is an {{Glossary("empty element")}}. - _Tag omission_ Must have a start tag and must not have an end tag. - _Permitted parent elements_ Any element that accepts embedded content. @@ -58,12 +58,12 @@ Este Elemeto inlcui o [atributo global](/pt-BR/docs/Web/HTML/Global_attributes). - : This Boolean attribute indicates that the image is part of a server-side map. If so, the precise coordinates of a click are sent to the server. - > **Note:** **Usage note:** This attribute is allowed only if the `<img>` element is a descendant of an {{htmlelement("a")}} element with a valid {{htmlattrxref("href","a")}} attribute. + > **Note:** **Usage note:** This attribute is allowed only if the `<img>` element is a descendant of an {{htmlelement("a")}} element with a valid [`href`](/pt-BR/docs/Web/HTML/Element/a#href) attribute. - {{htmlattrdef("longdesc")}} {{deprecated_inline}} - - : A link to a more detailed description of the image. Possible values are a {{glossary("URL")}} or an element {{htmlattrxref("id")}}. + - : A link to a more detailed description of the image. Possible values are a {{glossary("URL")}} or an element [`id`](/pt-BR/docs/Web/HTML/Global_attributes#id). - {{htmlattrdef("name")}} {{deprecated_inline}} - - : A name for the element. Use the {{htmlattrxref("id")}} attribute instead. + - : A name for the element. Use the [`id`](/pt-BR/docs/Web/HTML/Global_attributes#id) attribute instead. - {{htmlattrdef("src")}} - : Image URL, this attribute is obligatory for the `<img>` element. On browsers supporting **srcset**, **src** is ignored if this one is provided. - {{htmlattrdef("srcset")}} @@ -183,7 +183,7 @@ Quando o atributo `alt` não estiver presente em uma imagem, alguns programas le ### O atributo title -O atributo {{htmlattrxref("title")}} não é um substituto aceitável para o atributo `alt`. Além disso, evite duplicar o valor do atributo `alt` no atributo `title` para uma mesma imagem. Isso pode fazer com que alguns programas leitores de tela narrem duas vezes a descrição, o que pode criar uma experiência confusa para usuários. +O atributo [`title`](/pt-BR/docs/Web/HTML/Global_attributes#title) não é um substituto aceitável para o atributo `alt`. Além disso, evite duplicar o valor do atributo `alt` no atributo `title` para uma mesma imagem. Isso pode fazer com que alguns programas leitores de tela narrem duas vezes a descrição, o que pode criar uma experiência confusa para usuários. Evite usar o atributo `title` como uma forma suplementar de legenda para a descrição do `alt`. Caso a imagem precise de uma legenda, prefisa os elementos [`figure`](/pt-BR/docs/Web/HTML/Element/figure) e [`figcaption`](/pt-BR/docs/Web/HTML/Element/figcaption). diff --git a/files/pt-br/web/html/element/index.md b/files/pt-br/web/html/element/index.md index 13cfa2bdbbddab..7df36dd7390069 100644 --- a/files/pt-br/web/html/element/index.md +++ b/files/pt-br/web/html/element/index.md @@ -174,7 +174,7 @@ Estes elementos são usados para se criar e manipular dados em tabelas. | {{HTMLElement("tbody")}} | Encapsulates a set of table rows ({{HTMLElement("tr")}} elements), indicating that they comprise the body of the table ({{HTMLElement("table")}}). | | {{HTMLElement("td")}} | Defines a cell of a table that contains data. It participates in the _table model_. | | {{HTMLElement("tfoot")}} | O **`<tfoot>`** é um **elemento HTML** que define um conjunto de linhas as quais farão parte do rodapé de uma tabela HTML | -| {{HTMLElement("th")}} | O **elemento HTML `<th>`** define uma célula cabeçalho do grupo de células de sua tabela. A exatidão natural deste grupo é definida pelos atributos {{htmlattrxref("scope", "th")}} e {{htmlattrxref("headers", "th")}}. | +| {{HTMLElement("th")}} | O **elemento HTML `<th>`** define uma célula cabeçalho do grupo de células de sua tabela. A exatidão natural deste grupo é definida pelos atributos [`scope`](/pt-BR/docs/Web/HTML/Element/th#scope) e [`headers`](/pt-BR/docs/Web/HTML/Element/th#headers). | | {{HTMLElement("thead")}} | Defines a set of rows defining the head of the columns of the table. | | {{HTMLElement("tr")}} | Defines a row of cells in a table. The row's cells can then be established using a mix of {{HTMLElement("td")}} (data cell) and {{HTMLElement("th")}} (header cell) elements. | diff --git a/files/pt-br/web/html/element/input/button/index.md b/files/pt-br/web/html/element/input/button/index.md index 2e65f073e9aef7..7a61707b0e1973 100644 --- a/files/pt-br/web/html/element/input/button/index.md +++ b/files/pt-br/web/html/element/input/button/index.md @@ -28,8 +28,8 @@ Elementos {{HTMLElement("input")}} do tipo **`button`** são renderizados como u <tr> <td><strong>Atributos comuns suportados</strong></td> <td> - {{htmlattrxref("type", "input")}}, e - {{htmlattrxref("value", "input")}} + <a href="/pt-BR/docs/Web/HTML/Element/input#type"><code>type</code></a>, e + <a href="/pt-BR/docs/Web/HTML/Element/input#value"><code>value</code></a> </td> </tr> <tr> @@ -45,7 +45,7 @@ Elementos {{HTMLElement("input")}} do tipo **`button`** são renderizados como u ## Value -Seu atributo {{htmlattrxref("value", "input")}} de um elemento `<input type="button">` contém uma {{domxref("DOMString")}} que é usado como uma etiqueta (label) de um botão +Seu atributo [`value`](/pt-BR/docs/Web/HTML/Element/input#value) de um elemento `<input type="button">` contém uma {{domxref("DOMString")}} que é usado como uma etiqueta (label) de um botão ```html <input type="button" value="Click Me"> @@ -99,7 +99,7 @@ O script recebe uma referência para o objeto {{domxref("HTMLInputElement")}} re ### Adicionando atalhos de teclados aos botões -Keyboard shortcuts, also known as access keys and keyboard equivalents, let the user trigger a button using a key or combination of keys on the keyboard. To add a keyboard shortcut to a button — just as you would with any {{HTMLElement("input")}} for which it makes sense — you use the {{htmlattrxref("accesskey")}} global attribute. +Keyboard shortcuts, also known as access keys and keyboard equivalents, let the user trigger a button using a key or combination of keys on the keyboard. To add a keyboard shortcut to a button — just as you would with any {{HTMLElement("input")}} for which it makes sense — you use the [`accesskey`](/pt-BR/docs/Web/HTML/Global_attributes#accesskey) global attribute. In this example, <kbd>s</kbd> is specified as the access key (you'll need to press <kbd>s</kbd> plus the particular modifier keys for your browser/OS combination; see [accesskey](/pt-BR/docs/Web/HTML/Global_attributes/accesskey) for a useful list of those). @@ -133,7 +133,7 @@ function updateButton() { ### Desativando e ativando um botão -To disable a button, simply specify the {{htmlattrxref("disabled")}} global attribute on it, like so: +To disable a button, simply specify the [`disabled`](/pt-BR/docs/Web/HTML/Global_attributes#disabled) global attribute on it, like so: ```html <input type="button" value="Disable me" disabled> @@ -191,7 +191,7 @@ function disableButton() { {{EmbedLiveSample("Hidden_code_2", 650, 60)}} -> **Note:** Firefox will, unlike other browsers, by default, [persist the dynamic disabled state](http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) of a {{HTMLElement("button")}} across page loads. Use the {{htmlattrxref("autocomplete","button")}} attribute to control this feature. +> **Note:** Firefox will, unlike other browsers, by default, [persist the dynamic disabled state](http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) of a {{HTMLElement("button")}} across page loads. Use the [`autocomplete`](/pt-BR/docs/Web/HTML/Element/button#autocomplete) attribute to control this feature. ## Validação diff --git a/files/pt-br/web/html/element/input/checkbox/index.md b/files/pt-br/web/html/element/input/checkbox/index.md index dee8904f9c27fa..619bf2a22d9d22 100644 --- a/files/pt-br/web/html/element/input/checkbox/index.md +++ b/files/pt-br/web/html/element/input/checkbox/index.md @@ -28,7 +28,7 @@ slug: Web/HTML/Element/input/checkbox </tr> <tr> <td><strong>Atributos comuns suportados</strong></td> - <td>{{htmlattrxref ("checked", "input")}}</td> + <td><a href="/pt-BR/docs/Web/HTML/Element/input#checked"><code>checked</code></a></td> </tr> <tr> <td><strong>Atributos IDL</strong></td> diff --git a/files/pt-br/web/html/element/input/date/index.md b/files/pt-br/web/html/element/input/date/index.md index 9def226ee6f0f1..7866c27e9f9a14 100644 --- a/files/pt-br/web/html/element/input/date/index.md +++ b/files/pt-br/web/html/element/input/date/index.md @@ -44,10 +44,10 @@ O controle de data do Firefox se parece assim: <tr> <td><strong>Atributos Comuns Suportados</strong></td> <td> - {{htmlattrxref("autocomplete", "input")}}, - {{htmlattrxref("list", "input")}}, - {{htmlattrxref("readonly", "input")}} e - {{htmlattrxref("step", "input")}} + <a href="/pt-BR/docs/Web/HTML/Element/input#autocomplete"><code>autocomplete</code></a>, + <a href="/pt-BR/docs/Web/HTML/Element/input#list"><code>list</code></a>, + <a href="/pt-BR/docs/Web/HTML/Element/input#readonly"><code>readonly</code></a> e + <a href="/pt-BR/docs/Web/HTML/Element/input#step"><code>step</code></a> </td> </tr> <tr> @@ -70,7 +70,7 @@ O controle de data do Firefox se parece assim: ## Valores -Um {{domxref("DOMString")}} representa o valor data informada na entrada. Você pode definir o valor padrão para a entrada incluindo uma data dentro do atributo {{htmlattrxref("value", "input")}}, como: +Um {{domxref("DOMString")}} representa o valor data informada na entrada. Você pode definir o valor padrão para a entrada incluindo uma data dentro do atributo [`value`](/pt-BR/docs/Web/HTML/Element/input#value), como: ```html <input id="date" type="date" value="2017-06-01"> @@ -123,7 +123,7 @@ O uso mais simples de `<input type="date">` envolve a combinação de um `<input ### Definindo data mínima e máxima -Você pode usar os atributos {{htmlattrxref("min", "input")}} e {{htmlattrxref("max", "input")}} para restringir as datas que podem ser escolhidas pelo usuário. No próximo exemplo nós definimos uma data mínima como `2017-04-01` e data máxima como `2017-04-30`: +Você pode usar os atributos [`min`](/pt-BR/docs/Web/HTML/Element/input#min) e [`max`](/pt-BR/docs/Web/HTML/Element/input#max) para restringir as datas que podem ser escolhidas pelo usuário. No próximo exemplo nós definimos uma data mínima como `2017-04-01` e data máxima como `2017-04-30`: ```html <form> @@ -138,19 +138,19 @@ Você pode usar os atributos {{htmlattrxref("min", "input")}} e {{htmlattrxref(" O resultado aqui será apenas que as dias de Abril de 2017 serão selecionados — apenas a parte "dias" do texto será editável e datas fora de Abril não serão rolados na ferramenta de seleção de data. -> **Note:** **Observação**: Você deve conhecer o uso do atributo {{htmlattrxref("step", "input")}} para variar o número de dias pulados cada vez que a data é incrementada (ex.: talvez você queira deixar que os Sábados sejam selecionáveis). Contudo, isto não parece funcionar eficiente de qualquer implementação em tempo de escrita. +> **Note:** **Observação**: Você deve conhecer o uso do atributo [`step`](/pt-BR/docs/Web/HTML/Element/input#step) para variar o número de dias pulados cada vez que a data é incrementada (ex.: talvez você queira deixar que os Sábados sejam selecionáveis). Contudo, isto não parece funcionar eficiente de qualquer implementação em tempo de escrita. ### Controlando o tamanho da entrada -`<input type="date">` não suporta atributos de tamanho de formulário como {{htmlattrxref("size", "input")}}. Você poderá recorrer ao [CSS](/pt-BR/docs/Web/CSS) para modificar o tamanho. +`<input type="date">` não suporta atributos de tamanho de formulário como [`size`](/pt-BR/docs/Web/HTML/Element/input#size). Você poderá recorrer ao [CSS](/pt-BR/docs/Web/CSS) para modificar o tamanho. ## Validação Por padrão `<input type="date">` não aplica nenhuma validação de entrada de valores. As implementações da interface geralmente não deixam você informar nada que não seja uma data — o que é útil — mas você pode continuar deixando o campo vazio ou (em navegadores onde a entrada converte para o tipo `text`) informar uma data inválida (ex.: o 32 de Abril). -Se você usa {{htmlattrxref("min", "input")}} e {{htmlattrxref("max", "input")}} para restringir datas disponíveis (ver [Definindo data mínima e máxima](#definindo_data_mínima_e_máxima)), os navegadores suportados mostrarão um erro se você tentar submeter uma data fora da faixa. Contudo, você terá que verificar os resultados para ter certeza que o valor está entre estas datas, uma vez que são aplicadas apenas se o selecionador de data for totalmente suportado pelo dispositivo do usuário. +Se você usa [`min`](/pt-BR/docs/Web/HTML/Element/input#min) e [`max`](/pt-BR/docs/Web/HTML/Element/input#max) para restringir datas disponíveis (ver [Definindo data mínima e máxima](#definindo_data_mínima_e_máxima)), os navegadores suportados mostrarão um erro se você tentar submeter uma data fora da faixa. Contudo, você terá que verificar os resultados para ter certeza que o valor está entre estas datas, uma vez que são aplicadas apenas se o selecionador de data for totalmente suportado pelo dispositivo do usuário. -Adicionalmente, você pode usar o atributo {{htmlattrxref("required", "input")}} para tornar o preenchimento da data obrigatório — novamente, um erro será mostrado se você tentar submeter um campo de data vazia. Isto, finalmente, deve funcionar em muitos navegadores. +Adicionalmente, você pode usar o atributo [`required`](/pt-BR/docs/Web/HTML/Element/input#required) para tornar o preenchimento da data obrigatório — novamente, um erro será mostrado se você tentar submeter um campo de data vazia. Isto, finalmente, deve funcionar em muitos navegadores. Vamos dar uma olhada em um exemplo — aqui nós definimos datas mínima e máxima e deixamos o campo como obrigatório: @@ -219,7 +219,7 @@ O segundo problema é mais sério que os anterirores; como mencionamos antes, co - `mm-dd-yyyy` - `Month dd yyyy` -Um jeito de contornar isso é colocar um atributo {{htmlattrxref("pattern", "input")}} na caixa de texto de data. Sempre que a caixa de texto de data não usá-lo, a caixa de texto devolverá um erro. Por exemplo, tente ver o que o seguinte exemplo faz num navegador sem suporte: +Um jeito de contornar isso é colocar um atributo [`pattern`](/pt-BR/docs/Web/HTML/Element/input#pattern) na caixa de texto de data. Sempre que a caixa de texto de data não usá-lo, a caixa de texto devolverá um erro. Por exemplo, tente ver o que o seguinte exemplo faz num navegador sem suporte: ```html <form> @@ -279,16 +279,16 @@ Beside the attributes listed below, this element can have any of the [global att - {{htmlattrdef("form")}} - : The form element that the input element is associated with (its _form owner_). The value of the attribute must be an **id** of a {{HTMLElement("form")}} element in the same document. If this attribute is not specified, this `<input>` element must be a descendant of a {{HTMLElement("form")}} element. This attribute enables you to place `<input>` elements anywhere within a document, not just as descendants of their form elements. An input can only be associated with one form. - {{htmlattrdef("formaction")}} - - : The URI of a program that processes the information submitted by the input element, if it is a submit button or image. If specified, it overrides the {{htmlattrxref("action","form")}} attribute of the element's form owner. + - : The URI of a program that processes the information submitted by the input element, if it is a submit button or image. If specified, it overrides the [`action`](/pt-BR/docs/Web/HTML/Element/form#action) attribute of the element's form owner. - {{htmlattrdef("formenctype")}} - : If the input element is a submit button or image, this attribute specifies the type of content that is used to submit the form to the server. Possible values are: - `application/x-www-form-urlencoded`: The default value if the attribute is not specified. - - `multipart/form-data`: Use this value if you are using an {{HTMLElement("input")}} element with the {{htmlattrxref("type","input")}} attribute set to `file`. + - `multipart/form-data`: Use this value if you are using an {{HTMLElement("input")}} element with the [`type`](/pt-BR/docs/Web/HTML/Element/input#type) attribute set to `file`. - `text/plain` - If this attribute is specified, it overrides the {{htmlattrxref("enctype","form")}} attribute of the element's form owner. + If this attribute is specified, it overrides the [`enctype`](/pt-BR/docs/Web/HTML/Element/form#enctype) attribute of the element's form owner. - {{htmlattrdef("formmethod")}} @@ -297,13 +297,13 @@ Beside the attributes listed below, this element can have any of the [global att - `post`: The data from the form is included in the body of the form and is sent to the server. - `get`: The data from the form are appended to the **form** attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters. - If specified, this attribute overrides the {{htmlattrxref("method","form")}} attribute of the element's form owner. + If specified, this attribute overrides the [`method`](/pt-BR/docs/Web/HTML/Element/form#method) attribute of the element's form owner. - {{htmlattrdef("formnovalidate")}} - - : If the input element is a submit button or image, this Boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the {{htmlattrxref("novalidate","form")}} attribute of the element's form owner. + - : If the input element is a submit button or image, this Boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the [`novalidate`](/pt-BR/docs/Web/HTML/Element/form#novalidate) attribute of the element's form owner. - {{htmlattrdef("formtarget")}} - - : If the input element is a submit button or image, this attribute is a name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a _browsing context_ (for example, tab, window, or inline frame). If this attribute is specified, it overrides the {{htmlattrxref("target", "form")}} attribute of the elements's form owner. The following keywords have special meanings: + - : If the input element is a submit button or image, this attribute is a name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a _browsing context_ (for example, tab, window, or inline frame). If this attribute is specified, it overrides the [`target`](/pt-BR/docs/Web/HTML/Element/form#target) attribute of the elements's form owner. The following keywords have special meanings: - `_self`: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified. - `_blank`: Load the response into a new unnamed browsing context. diff --git a/files/pt-br/web/html/element/input/index.md b/files/pt-br/web/html/element/input/index.md index bc06fab7b510ae..444505cbf57c0d 100644 --- a/files/pt-br/web/html/element/input/index.md +++ b/files/pt-br/web/html/element/input/index.md @@ -6,7 +6,7 @@ slug: Web/HTML/Element/input O **elemento HTML `<input>`** é usado para criar controles interativos para formulários baseados na web para receber dados do usuário. A semântica de um `<input>` varia consideravelmente dependendo do valor de seu atributo `type`. - _[Categorias de conteúdo](/pt-BR/docs/HTML/Categorias_de_conteúdo)_ [Conteúdo de fluxo](/pt-BR/docs/HTML/Categorias_de_conteúdo#Conteúdo_de_fluxo), listado, enviável, resetável, elemento associado a formulário, [conteúdo fraseado](/pt-BR/docs/HTML/Categorias_de_conteúdo#Conteúdo_fraseado). - Se o atributo {{htmlattrxref("type", "input")}} não tiver o valor `hidden`, elemento rotulável, conteúdo palpável. + Se o atributo [`type`](/pt-BR/docs/Web/HTML/Element/input#type) não tiver o valor `hidden`, elemento rotulável, conteúdo palpável. - _Conteúdo permitido_ Nenhum, este é um {{Glossary("elemento vazio")}}. - _Omissão de tags_ Deve ter uma tag de abertura e não deve ter uma tag de fechamento. - _Elementos pais permitidos_ Qualquer elemento que aceite [conteúdo fraseado](/pt-BR/docs/HTML/Categorias_de_conteúdo#Conteúdo_fraseado). @@ -80,7 +80,7 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Atributos_globais). - `off`: O usuário deve inserir explicitamente um valor neste campo a cada uso, ou o documento implementa seu próprio método de autocompletar; o navegador não completa a entrada automaticamente. - `on`: O navegador pode completar automaticamente o valor baseado em valores que o usuário inseriu no passado. - Se o atributo **autocomplete** não está especificado num elemento `<input>`, o navegador usa o valor do atributo **autocomplete** do formulário dono do `<input>`. O formulário dono deste `<input>` é o elemento `<form>` que contém este `<input>` ou o elemento `<form>` cujo **id** é referenciado pelo atributo **form** do elemento `<input>`. Para mais informações, veja o atributo {{htmlattrxref("autocomplete", "form")}} no elemento {{HTMLElement("form")}}. + Se o atributo **autocomplete** não está especificado num elemento `<input>`, o navegador usa o valor do atributo **autocomplete** do formulário dono do `<input>`. O formulário dono deste `<input>` é o elemento `<form>` que contém este `<input>` ou o elemento `<form>` cujo **id** é referenciado pelo atributo **form** do elemento `<input>`. Para mais informações, veja o atributo [`autocomplete`](/pt-BR/docs/Web/HTML/Element/form#autocomplete) no elemento {{HTMLElement("form")}}. O atributo **autocomplete** também controla se o Firefox vai, ao contrário de outros navegadores, [persistir o estado dinâmico de desabilitado e marcado (se aplicável)](http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) de um {{HTMLElement("input")}} entre carregamentos de página. A funcionalidade de persistir é habilitada por padrão. Definir o valor do atributo **autocomplete** para `off` desabilita esta funcionalidade; isto funciona mesmo quando o atributo **autocomplete** não se aplica ao {{HTMLElement("input")}} por causa de seu **type**. Veja {{bug(654072)}}. @@ -99,27 +99,27 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Atributos_globais). - : Quando o valor do atributo **type** é `radio` ou `checkbox`, a presença deste atributo booleano indica que o controle é selecionado por padrão; caso contrário, este atributo é ignorado. - O Firefox vai, por padrão, ao contrário de outros navegadores, [persistir o estado dinâmico de marcado](http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) de um {{HTMLElement("input")}} entre carregamentos de página. Use o atributo {{htmlattrxref("autocomplete","input")}} para controlar esta funcionalidade. + O Firefox vai, por padrão, ao contrário de outros navegadores, [persistir o estado dinâmico de marcado](http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) de um {{HTMLElement("input")}} entre carregamentos de página. Use o atributo [`autocomplete`](/pt-BR/docs/Web/HTML/Element/input#autocomplete) para controlar esta funcionalidade. - {{htmlattrdef("disabled")}} - : Este atributo booleano indica que o controle de formulário não está disponível para interação. Em particular o evento `click` [não será disparado](https://html.spec.whatwg.org/multipage/forms.html#enabling-and-disabling-form-controls:-the-disabled-attribute) em controles desabilitados. Além disso, o valor de um controle desabilitado não é enviado com o formulário. - O Firefox vai, por padrão, ao contrário de outros navegadores, [persistir o estado dinâmico de desabilitado](http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) de um {{HTMLElement("input")}} entre carregamentos de página. Use o atributo {{htmlattrxref("autocomplete","input")}} para controlar esta funcionalidade. + O Firefox vai, por padrão, ao contrário de outros navegadores, [persistir o estado dinâmico de desabilitado](http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) de um {{HTMLElement("input")}} entre carregamentos de página. Use o atributo [`autocomplete`](/pt-BR/docs/Web/HTML/Element/input#autocomplete) para controlar esta funcionalidade. - {{htmlattrdef("form")}} - : O elemento `<form>` ao qual o elemento `<input>` está associado (seu _formulário dono_). O valor do atributo deve ser um **id** de um elemento {{HTMLElement("form")}}. Este atributo permite que você coloque elementos `<input>` em qualquer lugar num documento, não apenas como descendentes de seus elementos `<form>`. Um `<input>` só pode estar associado a um único formulário. - {{htmlattrdef("formaction")}} - - : A URI de um programa que processa a informação enviada pelo elemento, se ele for um botão ou uma imagem de envio de formulário. Se especificado, ele sobrescreve o atributo {{htmlattrxref("action","form")}} do formulário dono do elemento. + - : A URI de um programa que processa a informação enviada pelo elemento, se ele for um botão ou uma imagem de envio de formulário. Se especificado, ele sobrescreve o atributo [`action`](/pt-BR/docs/Web/HTML/Element/form#action) do formulário dono do elemento. - {{htmlattrdef("formenctype")}} - : Se o elemento for um botão ou uma imagem de envio de formulário, este atributo especifica o tipo de conteúdo que deve ser usado para enviar o formulário para o servidor. Os valores possíveis são: - `application/x-www-form-urlencoded`: O valor padrão se o atributo não for especificado. - - `multipart/form-data`: Use este valor se você estiver usando um elemento {{HTMLElement("input")}} com o atributo {{htmlattrxref("type","input")}} definido como `file`. + - `multipart/form-data`: Use este valor se você estiver usando um elemento {{HTMLElement("input")}} com o atributo [`type`](/pt-BR/docs/Web/HTML/Element/input#type) definido como `file`. - `text/plain` - Se este atributo for especificado, ele sobrescreve o atributo {{htmlattrxref("enctype","form")}} do formulário dono do elemento. + Se este atributo for especificado, ele sobrescreve o atributo [`enctype`](/pt-BR/docs/Web/HTML/Element/form#enctype) do formulário dono do elemento. - {{htmlattrdef("formmethod")}} @@ -128,13 +128,13 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Atributos_globais). - `post`: Os dados do formulário são incluídos no corpo do formulário e enviados para o servidor. - `get`: Os dados do formulário são acrescentados ao URI do atributo **form**, com um '?' como separador, e o URI resultante é enviado ao servidor. Use este método quando o formulário não tem efeitos colaterais e contém somente caracteres ASCII. - Se especificado, este atributo sobrescreve o atributo {{htmlattrxref("method","form")}} do formulário dono do elemento. + Se especificado, este atributo sobrescreve o atributo [`method`](/pt-BR/docs/Web/HTML/Element/form#method) do formulário dono do elemento. - {{htmlattrdef("formnovalidate")}} - - : Se o elemento for um botão ou uma imagem de envio de formulário, este atributo booleano especifica que o formulário não deve ser validado quando enviado. Se especificado, este atributo sobrescreve o atributo {{htmlattrxref("novalidate","form")}} do formulário dono do elemento. + - : Se o elemento for um botão ou uma imagem de envio de formulário, este atributo booleano especifica que o formulário não deve ser validado quando enviado. Se especificado, este atributo sobrescreve o atributo [`novalidate`](/pt-BR/docs/Web/HTML/Element/form#novalidate) do formulário dono do elemento. - {{htmlattrdef("formtarget")}} - - : Se o elemento for um botão ou uma imagem de envio de formulário, este atributo é um nome ou palavra-chave indicando onde mostrar a resposta recebida após a submissão do formulário. Este é o nome de, ou palavra-chave para, um _contexto de navegação_ (por exemplo aba, janela ou frame inline). Se especificado, este atributo sobrescreve o atributo {{htmlattrxref("target", "form")}} do formulário dono do elemento. As seguintes palavras-chave têm significado especial: + - : Se o elemento for um botão ou uma imagem de envio de formulário, este atributo é um nome ou palavra-chave indicando onde mostrar a resposta recebida após a submissão do formulário. Este é o nome de, ou palavra-chave para, um _contexto de navegação_ (por exemplo aba, janela ou frame inline). Se especificado, este atributo sobrescreve o atributo [`target`](/pt-BR/docs/Web/HTML/Element/form#target) do formulário dono do elemento. As seguintes palavras-chave têm significado especial: - `_self`: Carrega a resposta nom mesmo contexto de navegação que o atual. Este é o valor padrão se o atributo não for especificado. - `_blank`: Carrega a resposta num novo contexto de navegação anônimo. @@ -257,7 +257,7 @@ Note, no entanto, que isso não é padronizado e não terá efeito em outros nav ### Usando o mozactionhint no Firefox mobile -Você pode usar o atributo {{htmlattrxref("mozactionhint", "input")}} para especificar o texto para o rótulo da tecla Enter no teclado virtual quando seu formulário é exibido no Firefox mobile. Por exemplo, para ter um rótulo "Próximo", você pode fazer o seguinte: +Você pode usar o atributo [`mozactionhint`](/pt-BR/docs/Web/HTML/Element/input#mozactionhint) para especificar o texto para o rótulo da tecla Enter no teclado virtual quando seu formulário é exibido no Firefox mobile. Por exemplo, para ter um rótulo "Próximo", você pode fazer o seguinte: ```html <input type="text" mozactionhint="next" name="sometext" /> diff --git a/files/pt-br/web/html/element/input/password/index.md b/files/pt-br/web/html/element/input/password/index.md index 6b0cd5f8e9d5b3..9a5808a3af8b7d 100644 --- a/files/pt-br/web/html/element/input/password/index.md +++ b/files/pt-br/web/html/element/input/password/index.md @@ -30,15 +30,15 @@ Os detalhes de como o processo de inserção do texto funciona podem variar depe <tr> <td><strong>Atributos comuns suportados</strong></td> <td> - {{htmlattrxref("autocomplete", "input")}}, - {{htmlattrxref("inputmode", "input")}}, - {{htmlattrxref("maxlength", "input")}}, - {{htmlattrxref("minlength", "input")}}, - {{htmlattrxref("pattern", "input")}}, - {{htmlattrxref("placeholder", "input")}}, - {{htmlattrxref("readonly", "input")}}, - {{htmlattrxref("required", "input")}}, e - {{htmlattrxref("size", "input")}} + <a href="/pt-BR/docs/Web/HTML/Element/input#autocomplete"><code>autocomplete</code></a>, + <a href="/pt-BR/docs/Web/HTML/Element/input#inputmode"><code>inputmode</code></a>, + <a href="/pt-BR/docs/Web/HTML/Element/input#maxlength"><code>maxlength</code></a>, + <a href="/pt-BR/docs/Web/HTML/Element/input#minlength"><code>minlength</code></a>, + <a href="/pt-BR/docs/Web/HTML/Element/input#pattern"><code>pattern</code></a>, + <a href="/pt-BR/docs/Web/HTML/Element/input#placeholder"><code>placeholder</code></a>, + <a href="/pt-BR/docs/Web/HTML/Element/input#readonly"><code>readonly</code></a>, + <a href="/pt-BR/docs/Web/HTML/Element/input#required"><code>required</code></a>, e + <a href="/pt-BR/docs/Web/HTML/Element/input#size"><code>size</code></a> </td> </tr> <tr> @@ -62,9 +62,9 @@ Os detalhes de como o processo de inserção do texto funciona podem variar depe ## Valor -O atributo {{htmlattrxref("value", "input")}} contém uma {{domxref("DOMString")}} cujo valor é o conteúdo atual do controle de edição de texto usado para a inserção da senha. Se o usuário ainda não digitou nada, esse valor é uma string vazia (`""`). Se a propriedade {{htmlattrxref("required")}} for especificada, então a caixa de edição de senha precisa conter um valor que não seja uma string vazia para ser válida. +O atributo [`value`](/pt-BR/docs/Web/HTML/Element/input#value) contém uma {{domxref("DOMString")}} cujo valor é o conteúdo atual do controle de edição de texto usado para a inserção da senha. Se o usuário ainda não digitou nada, esse valor é uma string vazia (`""`). Se a propriedade [`required`](/pt-BR/docs/Web/HTML/Global_attributes#required) for especificada, então a caixa de edição de senha precisa conter um valor que não seja uma string vazia para ser válida. -Se o atributo {{htmlattrxref("pattern", "input")}} for especificado, o conteúdo de um controle `"password"` só é considerado válido se o valor passar na validação; veja [Validação](#validação) para mais informações. +Se o atributo [`pattern`](/pt-BR/docs/Web/HTML/Element/input#pattern) for especificado, o conteúdo de um controle `"password"` só é considerado válido se o valor passar na validação; veja [Validação](#validação) para mais informações. > **Note:** Os caracteres de quebra de linha _line feed_ (U+000A) e _carriage return_ (U+000D) não são permitidos em valores de `"password"`. Quando o valor de um campo de senha é definido, os caracteres acima são removidos do valor. @@ -85,7 +85,7 @@ Aqui vemos o mais básico dos campos de senha, juntamente com um rótulo para el ### Permitindo preenchimento automático -Para permitir que o gerenciador de senhas do usuário digite a senha automaticamente, especifique o atributo {{htmlattrxref("autocomplete", "input")}}. Para senhas, o valor dele deve ser geralmente um dos seguintes: +Para permitir que o gerenciador de senhas do usuário digite a senha automaticamente, especifique o atributo [`autocomplete`](/pt-BR/docs/Web/HTML/Element/input#autocomplete). Para senhas, o valor dele deve ser geralmente um dos seguintes: - `"on"` - : Permite que o navegador ou um gerenciador de senhas preencha automaticamente o campo de senha. Esse valor não é tão informativo quanto `"current-password"` ou `"new-password"`. @@ -105,7 +105,7 @@ Para permitir que o gerenciador de senhas do usuário digite a senha automaticam ### Tornando a senha obrigatória -Para dizer ao navegador do usuário que o campo de senha precisa ter um valor válido antes do formulário ser enviado, basta adicionar o atributo booleano {{htmlattrxref("required", "input")}}. +Para dizer ao navegador do usuário que o campo de senha precisa ter um valor válido antes do formulário ser enviado, basta adicionar o atributo booleano [`required`](/pt-BR/docs/Web/HTML/Element/input#required). ```html <label for="senhaUsuario">Senha: </label> @@ -117,7 +117,7 @@ Para dizer ao navegador do usuário que o campo de senha precisa ter um valor v ### Especificando um modo de inserção -Se as suas regras de sintaxe recomendadas (ou obrigatórias) para a senha poderiam obter vantagem de uma interface de digitação diferente da de um teclado padrão, você pode usar o atributo {{htmlattrxref("inputmode", "input")}} para pedir por uma interface específica. O caso de uso mais óbvio para isso é o de a senha precisar ser numérica (como um PIN). Dispositivos móveis com teclados virtuais, por exemplo, podem optar por mostrar um teclado numérico ao invés de um teclado completo, facilitando a digitação da senha. +Se as suas regras de sintaxe recomendadas (ou obrigatórias) para a senha poderiam obter vantagem de uma interface de digitação diferente da de um teclado padrão, você pode usar o atributo [`inputmode`](/pt-BR/docs/Web/HTML/Element/input#inputmode) para pedir por uma interface específica. O caso de uso mais óbvio para isso é o de a senha precisar ser numérica (como um PIN). Dispositivos móveis com teclados virtuais, por exemplo, podem optar por mostrar um teclado numérico ao invés de um teclado completo, facilitando a digitação da senha. ```html <label for="pin">PIN: </label> @@ -128,7 +128,7 @@ Se as suas regras de sintaxe recomendadas (ou obrigatórias) para a senha poderi ### Definindo restrições de tamanho -Como de praxe, você pode usar os atributos {{htmlattrxref("minlength", "input")}} e {{htmlattrxref("maxlength", "input")}} para estabelecer os tamanhos mínimo e máximo aceitáveis para a senha. Este exemplo continua o anterior, agora especificando que o PIN do usuário deva ter pelo menos quatro dígitos e não passe de oito dígitos. O atributo {{htmlattrxref("size", "input")}} é usado para garantir que o campo de senha aceite no máximo oito caracteres. +Como de praxe, você pode usar os atributos [`minlength`](/pt-BR/docs/Web/HTML/Element/input#minlength) e [`maxlength`](/pt-BR/docs/Web/HTML/Element/input#maxlength) para estabelecer os tamanhos mínimo e máximo aceitáveis para a senha. Este exemplo continua o anterior, agora especificando que o PIN do usuário deva ter pelo menos quatro dígitos e não passe de oito dígitos. O atributo [`size`](/pt-BR/docs/Web/HTML/Element/input#size) é usado para garantir que o campo de senha aceite no máximo oito caracteres. ```html <label for="pin">PIN:</label> @@ -166,7 +166,7 @@ Você também pode usar {{domxref("HTMLInputElement.selectionStart", "selectionS ## Validação -Se seu aplicativo tiver restrições de conjuntos de caracteres ou qualquer outro requisito para o conteúdo da senha digitada, você pode usar o atributo {{htmlattrxref("pattern", "input")}} para estabelecer que uma expressão regular seja usada para garantir automaticamente que as senhas cumpram com esses requisitos. +Se seu aplicativo tiver restrições de conjuntos de caracteres ou qualquer outro requisito para o conteúdo da senha digitada, você pode usar o atributo [`pattern`](/pt-BR/docs/Web/HTML/Element/input#pattern) para estabelecer que uma expressão regular seja usada para garantir automaticamente que as senhas cumpram com esses requisitos. Neste exemplo, são válidos apenas valores consistindo de no mínimo quatro e no máximo oito dígitos hexadecimais. @@ -199,9 +199,9 @@ Este exemplo aceita apenas valores que correspondam ao formato de um [Cadastro d <span id="atual"></span> ``` -Ele usa um padrão {{htmlattrxref("pattern", "input")}} que limita o valor digitado a strings que representem números de CPF no formato válido. O padrão aceita tanto valores separados por pontos (".") e hífen ("-") como apenas os números. +Ele usa um padrão [`pattern`](/pt-BR/docs/Web/HTML/Element/input#pattern) que limita o valor digitado a strings que representem números de CPF no formato válido. O padrão aceita tanto valores separados por pontos (".") e hífen ("-") como apenas os números. -O modo de inserção em {{htmlattrxref("inputmode", "input")}} está definido como `"number"` para indicar a dispositivos com teclados virtuais que eles devem mostrar um teclado numérico para uma digitação mais fácil. Os atributos {{htmlattrxref("minlength", "input")}} e {{htmlattrxref("maxlength", "input")}} foram definidos como 11 e 14, respectivamente, de forma a aceitar valores com no mínimo 11 e no máximo 14 caracteres (o primeiro para valores sem os caracteres separadores e o último para valores com esses caracteres). O atributo {{htmlattrxref("required", "input")}} é usado para indicar que este campo precisa ter um valor válido. Por fim, {{htmlattrxref("autocomplete", "input")}} foi definido como `"off"` para evitar que gerenciadores de senhas tentem usar ou definir o valor dele, já que ele não é nem mesmo uma senha. +O modo de inserção em [`inputmode`](/pt-BR/docs/Web/HTML/Element/input#inputmode) está definido como `"number"` para indicar a dispositivos com teclados virtuais que eles devem mostrar um teclado numérico para uma digitação mais fácil. Os atributos [`minlength`](/pt-BR/docs/Web/HTML/Element/input#minlength) e [`maxlength`](/pt-BR/docs/Web/HTML/Element/input#maxlength) foram definidos como 11 e 14, respectivamente, de forma a aceitar valores com no mínimo 11 e no máximo 14 caracteres (o primeiro para valores sem os caracteres separadores e o último para valores com esses caracteres). O atributo [`required`](/pt-BR/docs/Web/HTML/Element/input#required) é usado para indicar que este campo precisa ter um valor válido. Por fim, [`autocomplete`](/pt-BR/docs/Web/HTML/Element/input#autocomplete) foi definido como `"off"` para evitar que gerenciadores de senhas tentem usar ou definir o valor dele, já que ele não é nem mesmo uma senha. Obviamente, apenas essa expressão regular não garante um CPF realmente válido, já que a validação deste tipo de número exige cálculos adicionais. [Confira este artigo](https://www.devmedia.com.br/validar-cpf-com-javascript/23916) para ver exatamente como garantir um número de CPF válido. diff --git a/files/pt-br/web/html/element/input/range/index.md b/files/pt-br/web/html/element/input/range/index.md index 844ae92046749d..69132c2c49397c 100644 --- a/files/pt-br/web/html/element/input/range/index.md +++ b/files/pt-br/web/html/element/input/range/index.md @@ -35,11 +35,11 @@ Se o navegador do usuário não suportar o tipo `"range"`, este será tratado co <tr> <td><strong>Supported Common Attributes</strong></td> <td> - {{htmlattrxref("autocomplete", "input")}}, - {{htmlattrxref("list", "input")}}, - {{htmlattrxref("max", "input")}}, - {{htmlattrxref("min", "input")}}, e - {{htmlattrxref("step", "input")}} + <a href="/pt-BR/docs/Web/HTML/Element/input#autocomplete"><code>autocomplete</code></a>, + <a href="/pt-BR/docs/Web/HTML/Element/input#list"><code>list</code></a>, + <a href="/pt-BR/docs/Web/HTML/Element/input#max"><code>max</code></a>, + <a href="/pt-BR/docs/Web/HTML/Element/input#min"><code>min</code></a>, e + <a href="/pt-BR/docs/Web/HTML/Element/input#step"><code>step</code></a> </td> </tr> <tr> @@ -60,7 +60,7 @@ Se o navegador do usuário não suportar o tipo `"range"`, este será tratado co ## Value -O atributo {{htmlattrxref("value", "input")}} contém uma {{domxref("DOMString")}} que conte uma representação dos números selecionados em string. O valor nunca é uma string vazia (`""`). O valor padrão está entre o mínimo e o máximo especificados, a menos que o valor máximo seja menor que o mínimo, caso em que o padrão é definido como o atributo de valor mínimo. O algoritmo que determina o valor padrão é: +O atributo [`value`](/pt-BR/docs/Web/HTML/Element/input#value) contém uma {{domxref("DOMString")}} que conte uma representação dos números selecionados em string. O valor nunca é uma string vazia (`""`). O valor padrão está entre o mínimo e o máximo especificados, a menos que o valor máximo seja menor que o mínimo, caso em que o padrão é definido como o atributo de valor mínimo. O algoritmo que determina o valor padrão é: ```js defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min @@ -84,7 +84,7 @@ Como regra geral, se o usuário tiver maior probabilidade de se interessar por p ### Especificando o mínimo e o máximo -Por padrão, o mínimo é 0 e o máximo é 100. Se não é o que você precisa, voce pode facilmente especificar limites diferentes alterando os valores dos atributos {{htmlattrxref("min", "input")}} e/ou {{htmlattrxref("max", "input")}}. Este pode ser um valor inteiro. +Por padrão, o mínimo é 0 e o máximo é 100. Se não é o que você precisa, voce pode facilmente especificar limites diferentes alterando os valores dos atributos [`min`](/pt-BR/docs/Web/HTML/Element/input#min) e/ou [`max`](/pt-BR/docs/Web/HTML/Element/input#max). Este pode ser um valor inteiro. Por exemplo, para pedir ao usuário um valor entre -10 e 10, você pode usar: @@ -96,7 +96,7 @@ Por exemplo, para pedir ao usuário um valor entre -10 e 10, você pode usar: ### Definindo a escala entre valores -Por padrão, a escala entre o mínimo e o máximo é 1, significando que este sempre é um valor inteiro. você pode alterar o atributo {{htmlattrxref("step")}} para controlar esta escala. Por exemplo, se você precisa de um valor de duas casas decimais entre os valores 5 e 10, voce deve definir o valor de `step` para 0.01: +Por padrão, a escala entre o mínimo e o máximo é 1, significando que este sempre é um valor inteiro. você pode alterar o atributo [`step`](/pt-BR/docs/Web/HTML/Global_attributes#step) para controlar esta escala. Por exemplo, se você precisa de um valor de duas casas decimais entre os valores 5 e 10, voce deve definir o valor de `step` para 0.01: ```html <input type="range" min="5" max="10" step="0.01"> @@ -104,7 +104,7 @@ Por padrão, a escala entre o mínimo e o máximo é 1, significando que este se {{EmbedLiveSample("Granularity_sample1", 600, 40)}} -Se você deseja aceitar um valor independente das casas decimais, voce pode especificar o valor `"any"` para o atributo {{htmlattrxref("step", "input")}}: +Se você deseja aceitar um valor independente das casas decimais, voce pode especificar o valor `"any"` para o atributo [`step`](/pt-BR/docs/Web/HTML/Element/input#step): ```html <input type="range" min="0" max="3.14" step="any"> @@ -116,7 +116,7 @@ Este exemplo permite ao usuário selecionar qualquer valor entre 0 e π sem qual ### Adicionando marcas de mapeamento e etiquetas -As especificações do HTML oferece aos navegadores uma certa flexibilidade sobre como apresentar o controle deslizante. Em parte alguma esta flexibilidade é mais aparente do que no mapeamento de marcas e, menos ainda, na etiqueta. A especificação descreve como adicionar pontos personalizados ao controle usando o atributo {{htmlattrxref("list", "input")}} e o elemento {{HTMLElement("datalist")}} , mas não tem requisitos nem padronizações para marcações ou mesmo pontos ao longo do controle deslizante. +As especificações do HTML oferece aos navegadores uma certa flexibilidade sobre como apresentar o controle deslizante. Em parte alguma esta flexibilidade é mais aparente do que no mapeamento de marcas e, menos ainda, na etiqueta. A especificação descreve como adicionar pontos personalizados ao controle usando o atributo [`list`](/pt-BR/docs/Web/HTML/Element/input#list) e o elemento {{HTMLElement("datalist")}} , mas não tem requisitos nem padronizações para marcações ou mesmo pontos ao longo do controle deslizante. #### Modelo de controle do range @@ -124,7 +124,7 @@ Uma vez que os navegadores têm essa flexibilidade e, até à data, nenhum supor ##### Um controle sem o atributo -Isto é o que você obtem se não especificar o atributo {{htmlattrxref("list", "input")}} , ou se o navegador não oferece suporte. +Isto é o que você obtem se não especificar o atributo [`list`](/pt-BR/docs/Web/HTML/Element/input#list) , ou se o navegador não oferece suporte. <table class="standard-table"> <tbody> @@ -147,7 +147,7 @@ Isto é o que você obtem se não especificar o atributo {{htmlattrxref("list", ##### Um controle com o Atributo -Este controle está usando um atributo `list` especificando o ID de uma {{HTMLElement("datalist")}} que define uma serie de marcações no controle. Há 11 deles, de modo que há um 0% bem como a adição de 10% em cada próximo. Cada ponto representa usando um elemento {{HTMLElement("option")}} com propriedade {{htmlattrxref("value", "option")}} definido para o valor do intervalo no qual uma marca deve ser desenhada. +Este controle está usando um atributo `list` especificando o ID de uma {{HTMLElement("datalist")}} que define uma serie de marcações no controle. Há 11 deles, de modo que há um 0% bem como a adição de 10% em cada próximo. Cada ponto representa usando um elemento {{HTMLElement("option")}} com propriedade [`value`](/pt-BR/docs/Web/HTML/Element/option#value) definido para o valor do intervalo no qual uma marca deve ser desenhada. <table class="standard-table"> <tbody> @@ -190,7 +190,7 @@ Este controle está usando um atributo `list` especificando o ID de uma {{HTMLEl ##### Um controle deslizante com marcas e rótulos -Você pode adicionar rótulos para seu controle usando o atributo {{htmlattrxref("label", "option")}} para o elemento {{HTMLElement("option")}} correspondente às marcas de marcação para as quais você deseja ter rótulos. +Você pode adicionar rótulos para seu controle usando o atributo [`label`](/pt-BR/docs/Web/HTML/Element/option#label) para o elemento {{HTMLElement("option")}} correspondente às marcas de marcação para as quais você deseja ter rótulos. <table class="standard-table"> <tbody> @@ -313,10 +313,10 @@ O tamanho do controle está configurado para ter 150 pixels de comprimento por 2 Não há padrões de validação disponível, no entanto, as seguintes formas de validações são realizadas automaticamente: -- Se {{htmlattrxref("value", "input")}} estiver definido para algo que não possa ser convertido em um número flutuante válido, a validação falhará porque a entrada está sofrendo de uma entrada incorreta. -- O valor não será inferior há {{htmlattrxref("min", "input")}}. O valor padrão é 0. -- O valor não pode ser maior que {{htmlattrxref("max", "input")}}. O valor padrão é 100. -- O valor será um multiplo de {{htmlattrxref("step", "input")}}. O valor padrão é 1. +- Se [`value`](/pt-BR/docs/Web/HTML/Element/input#value) estiver definido para algo que não possa ser convertido em um número flutuante válido, a validação falhará porque a entrada está sofrendo de uma entrada incorreta. +- O valor não será inferior há [`min`](/pt-BR/docs/Web/HTML/Element/input#min). O valor padrão é 0. +- O valor não pode ser maior que [`max`](/pt-BR/docs/Web/HTML/Element/input#max). O valor padrão é 100. +- O valor será um multiplo de [`step`](/pt-BR/docs/Web/HTML/Element/input#step). O valor padrão é 1. ## Exemplos diff --git a/files/pt-br/web/html/element/input/time/index.md b/files/pt-br/web/html/element/input/time/index.md index ff1352d595b736..607dc731cf4de5 100644 --- a/files/pt-br/web/html/element/input/time/index.md +++ b/files/pt-br/web/html/element/input/time/index.md @@ -48,10 +48,10 @@ O campo de `time` do Edge é melhor elaborado, abrindo um seletor de hora e minu <tr> <td><strong>Atributos comuns suportados</strong></td> <td> - {{htmlattrxref("autocomplete", "input")}}, - {{htmlattrxref("list", "input")}}, - {{htmlattrxref("readonly", "input")}} e - {{htmlattrxref("step", "input")}}. + <a href="/pt-BR/docs/Web/HTML/Element/input#autocomplete"><code>autocomplete</code></a>, + <a href="/pt-BR/docs/Web/HTML/Element/input#list"><code>list</code></a>, + <a href="/pt-BR/docs/Web/HTML/Element/input#readonly"><code>readonly</code></a> e + <a href="/pt-BR/docs/Web/HTML/Element/input#step"><code>step</code></a>. </td> </tr> <tr> @@ -74,7 +74,7 @@ O campo de `time` do Edge é melhor elaborado, abrindo um seletor de hora e minu ## Valor -Uma {{domxref("DOMString")}} contendo o valor do horário inserido no campo. Você pode definir um valor padrão para o campo incluindo um horário válido no atributo {{htmlattrxref("value", "input")}} ao criar o elemento `<input>`, tipo assim: +Uma {{domxref("DOMString")}} contendo o valor do horário inserido no campo. Você pode definir um valor padrão para o campo incluindo um horário válido no atributo [`value`](/pt-BR/docs/Web/HTML/Element/input#value) ao criar o elemento `<input>`, tipo assim: ```html <label for="hora-cons">Escolha o horário da consulta: </label> @@ -145,11 +145,11 @@ O caso de uso mais simples do `<input type="time">` envolve uma combinação bá ### Controlando o tamanho do campo -O elemento `<input type="time">` não é compatível com atributos de dimensionamento de formulários tais como {{htmlattrxref("size", "input")}}, já que horários quase sempre tem o mesmo número de caracteres. Você terá que recorrer ao [CSS](/pt-BR/docs/Web/CSS) para ajustar tamanhos. +O elemento `<input type="time">` não é compatível com atributos de dimensionamento de formulários tais como [`size`](/pt-BR/docs/Web/HTML/Element/input#size), já que horários quase sempre tem o mesmo número de caracteres. Você terá que recorrer ao [CSS](/pt-BR/docs/Web/CSS) para ajustar tamanhos. ### Usando o atributo step -Você pode usar o atributo {{htmlattrxref("step", "input")}} para variar a quantidade de tempo pulada sempre que o horário for incrementado/decrementado (por exemplo, para fazer com que o horário avançe ou volte em 10 minutos ao clicar nas setinhas ao lado do campo). +Você pode usar o atributo [`step`](/pt-BR/docs/Web/HTML/Element/input#step) para variar a quantidade de tempo pulada sempre que o horário for incrementado/decrementado (por exemplo, para fazer com que o horário avançe ou volte em 10 minutos ao clicar nas setinhas ao lado do campo). > **Note:** Esta propriedade pode se comportar de maneira inesperada em alguns navegadores. Por isso, ela não é 100% confiável. @@ -178,7 +178,7 @@ Por padrão, `<input type="time">` não aplica nenhum tipo de validação nos va ### Definindo horários mínimo e máximo -Você pode usar os atributos {{htmlattrxref("min", "input")}} e {{htmlattrxref("max", "input")}} para restringir a faixa de horário válida que o usuário pode escolher. No seguinte exemplo, definimos `12:00` como o horário mínimo e `18:00` como o horário máximo: +Você pode usar os atributos [`min`](/pt-BR/docs/Web/HTML/Element/input#min) e [`max`](/pt-BR/docs/Web/HTML/Element/input#max) para restringir a faixa de horário válida que o usuário pode escolher. No seguinte exemplo, definimos `12:00` como o horário mínimo e `18:00` como o horário máximo: ```html <form> @@ -227,7 +227,7 @@ O resultado disso é que: ### Tornando campos de horário obrigatórios -Além do mais, você pode usar o atributo {{htmlattrxref("required", "input")}} para tornar obrigatória a inserção de um horário. Como resultado, os navegadores compatíves irão mostrar um erro se você tentar enviar um horário fora da proporção adequada ou que esteja em branco. +Além do mais, você pode usar o atributo [`required`](/pt-BR/docs/Web/HTML/Element/input#required) para tornar obrigatória a inserção de um horário. Como resultado, os navegadores compatíves irão mostrar um erro se você tentar enviar um horário fora da proporção adequada ou que esteja em branco. Vamos ver um exemplo. Nele, colocamos um horário mínimo e um máximo, além de tornarmos o campo obrigatório. @@ -271,7 +271,7 @@ The second problem is the more serious; as mentioned previously, `time` inputs' - `3 o'clock in the afternoon` - etc. -One way around this is to put a {{htmlattrxref("pattern", "input")}} attribute on your `time` input. Even though the `time` input doesn't use it, the `text` input fallback will. For example, try viewing the following demo in a browser that doesn't support time inputs: +One way around this is to put a [`pattern`](/pt-BR/docs/Web/HTML/Element/input#pattern) attribute on your `time` input. Even though the `time` input doesn't use it, the `text` input fallback will. For example, try viewing the following demo in a browser that doesn't support time inputs: ```html <form> diff --git a/files/pt-br/web/html/element/link/index.md b/files/pt-br/web/html/element/link/index.md index 61213a20c75b35..e4c39abb63e2c4 100644 --- a/files/pt-br/web/html/element/link/index.md +++ b/files/pt-br/web/html/element/link/index.md @@ -7,10 +7,10 @@ slug: Web/HTML/Element/link O **Elemento HTML _\<link>_** especifica as relações entre o documento atual e um recurso externo. Possíveis usos para este elemento incluem a definição de uma estrutura relacional para navegação. Este elemento é mais usado para vincular as folhas de estilo. -- _[Categorias de conteúdo](/pt-BR/docs/Web/HTML/Content_categories)_ Metadata content. If {{htmlattrxref("itemprop", "link")}} is present: [flow content](/pt-BR/docs/Web/HTML/Content_categories#Flow_content) [phrasing content](/pt-BR/docs/Web/HTML/Content_categories#Phrasing_content) +- _[Categorias de conteúdo](/pt-BR/docs/Web/HTML/Content_categories)_ Metadata content. If [`itemprop`](/pt-BR/docs/Web/HTML/Element/link#itemprop) is present: [flow content](/pt-BR/docs/Web/HTML/Content_categories#Flow_content) [phrasing content](/pt-BR/docs/Web/HTML/Content_categories#Phrasing_content) - _Conteúdo permitido_ None, it is an {{Glossary("empty element")}}. - _Omissão de tag_ As it is a void element, the start tag must be present and the end tag must not be present -- _Elementos pai permitidos_ Any element that accepts metadata elements. If {{htmlattrxref("itemprop", "link")}} is present: any element that accepts [phrasing content](/pt-BR/docs/Web/HTML/Content_categories#Phrasing_content). +- _Elementos pai permitidos_ Any element that accepts metadata elements. If [`itemprop`](/pt-BR/docs/Web/HTML/Element/link#itemprop) is present: any element that accepts [phrasing content](/pt-BR/docs/Web/HTML/Content_categories#Phrasing_content). - _Interface de DOM_ {{domxref("HTMLLinkElement")}} ## Atributos @@ -50,7 +50,7 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut - {{htmlattrdef("href")}} - : Esse atributo especifica a [URL](/pt-BR/docs/URIs_and_URLs) do recurso vinculado. Uma URL pode ser absolute or relative. - {{htmlattrdef("hreflang")}} - - : Esse atributo indica o idioma do recurso vinculado. É meramente consultivo. Os valores permitidos são determindaos por [BCP47](http://www.ietf.org/rfc/bcp/bcp47.txt) para HTML5 e por [RFC1766](http://www.ietf.org/rfc/rfc1766.txt) para HTML 4. Use esse atributo se apenas os atributos {{htmlattrxref("href", "a")}} estiverem presentes. + - : Esse atributo indica o idioma do recurso vinculado. É meramente consultivo. Os valores permitidos são determindaos por [BCP47](http://www.ietf.org/rfc/bcp/bcp47.txt) para HTML5 e por [RFC1766](http://www.ietf.org/rfc/rfc1766.txt) para HTML 4. Use esse atributo se apenas os atributos [`href`](/pt-BR/docs/Web/HTML/Element/a#href) estiverem presentes. - {{htmlattrdef("media")}} - : This attribute specifies the media which the linked resource applies to. Its value must be a [media query](/pt-BR/docs/CSS/Media_queries). This attribute is mainly useful when linking to external stylesheets by allowing the user agent to pick the best adapted one for the device it runs on. @@ -65,18 +65,18 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut - : This attribute names a relationship of the linked document to the current document. The attribute must be a space-separated list of the [link types values](/pt-BR/docs/Web/HTML/Link_types). The most common use of this attribute is to specify a link to an external style sheet: the **rel** attribute is set to `stylesheet`, and the **href** attribute is set to the URL of an external style sheet to format the page. WebTV also supports the use of the value `next` for **rel** to preload the next page in a document series. - {{htmlattrdef("rev")}} - - : The value of this attribute shows the relationship of the current document to the linked document, as defined by the {{htmlattrxref("href", "link")}} attribute. The attribute thus defines the reverse relationship compared to the value of the **rel** attribute. [Link types values](/pt-BR/docs/Web/HTML/Link_types) for the attribute are similar to the possible values for {{htmlattrxref("rel", "link")}}. + - : The value of this attribute shows the relationship of the current document to the linked document, as defined by the [`href`](/pt-BR/docs/Web/HTML/Element/link#href) attribute. The attribute thus defines the reverse relationship compared to the value of the **rel** attribute. [Link types values](/pt-BR/docs/Web/HTML/Link_types) for the attribute are similar to the possible values for [`rel`](/pt-BR/docs/Web/HTML/Element/link#rel). - > **Nota:** This attribute is obsolete in HTML5. **Do not use it**. To achieve its effect, use the {{htmlattrxref("rel", "link")}} attribute with the opposite [link types values](/pt-BR/docs/Web/HTML/Link_types), e.g. made should be replaced by author. Also this attribute doesn't mean _revision_ and must not be used with a version number, which is unfortunately the case on numerous sites. + > **Nota:** This attribute is obsolete in HTML5. **Do not use it**. To achieve its effect, use the [`rel`](/pt-BR/docs/Web/HTML/Element/link#rel) attribute with the opposite [link types values](/pt-BR/docs/Web/HTML/Link_types), e.g. made should be replaced by author. Also this attribute doesn't mean _revision_ and must not be used with a version number, which is unfortunately the case on numerous sites. - {{htmlattrdef("sizes")}} - - : This attribute defines the sizes of the icons for visual media contained in the resource. It must be present only if the {{htmlattrxref("rel","link")}} contains the icon [link types value](/pt-BR/docs/Web/HTML/Link_types). It may have the following values: + - : This attribute defines the sizes of the icons for visual media contained in the resource. It must be present only if the [`rel`](/pt-BR/docs/Web/HTML/Element/link#rel) contains the icon [link types value](/pt-BR/docs/Web/HTML/Link_types). It may have the following values: - `any`, meaning that the icon can be scaled to any size as it is in a vector format, like `image/svg+xml`. - a white-space separated list of sizes, each in the format `<width in pixels>x<height in pixels>` or `<width in pixels>X<height in pixels>`. Each of these sizes must be contained in the resource. - > **Nota:** Most icon formats are only able to store one single icon; therefore most of the time the {{HTMLAttrxRef("sizes")}} attribute contains only one entry. + > **Nota:** Most icon formats are only able to store one single icon; therefore most of the time the [`sizes`](/pt-BR/docs/Web/HTML/Global_attributes#sizes) attribute contains only one entry. > MS's ICO format does, as well as Apple's ICNS. ICO is more ubiquitous, so you should use this format if cross-browser support is a concern (especially for old IE versions). - {{htmlattrdef("target")}}{{Non-standard_inline}} diff --git a/files/pt-br/web/html/element/meta/index.md b/files/pt-br/web/html/element/meta/index.md index 5021db028ce124..0c53caa3c4f565 100644 --- a/files/pt-br/web/html/element/meta/index.md +++ b/files/pt-br/web/html/element/meta/index.md @@ -16,7 +16,7 @@ O elemento **HTML `<meta>` **define qualquer informação de metadados que não </th> <td> Conteúdo de metadado. Se o - {{htmlattrxref("itemprop", "meta")}} atributo estiver + <a href="/pt-BR/docs/Web/HTML/Element/meta#itemprop"><code>itemprop</code></a> atributo estiver presente: <a href="/pt-BR/docs/Web/HTML/Content_categories#Flow_content" >flow content</a @@ -42,7 +42,7 @@ O elemento **HTML `<meta>` **define qualquer informação de metadados que não <td> <code>&#x3C;meta charset></code>, <code>&#x3C;meta http-equiv></code>: um elemento {{HTMLElement("head")}}. Se o - {{htmlattrxref("http-equiv", "meta")}} não for uma + <a href="/pt-BR/docs/Web/HTML/Element/meta#http-equiv"><code>http-equiv</code></a> não for uma declaração de codificação, ele pode estar dentro de um elemento {{HTMLElement("noscript")}}, dentro de um elemento {{HTMLElement("head")}}. @@ -63,7 +63,7 @@ O elemento **HTML `<meta>` **define qualquer informação de metadados que não Esse elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attributes). -> **Nota:** o atributo global {{htmlattrxref("name", "meta")}} tem um significado específico para o elemento {{HTMLElement("meta")}}, e o atributo {{htmlattrxref("itemprop", "meta")}} não deve ser definido no mesmo elemento`<meta>` que tem algum desses atributos existentes: {{htmlattrxref("name", "meta")}}, {{htmlattrxref("http-equiv", "meta")}} ou {{htmlattrxref("charset", "meta")}}. +> **Nota:** o atributo global [`name`](/pt-BR/docs/Web/HTML/Element/meta#name) tem um significado específico para o elemento {{HTMLElement("meta")}}, e o atributo [`itemprop`](/pt-BR/docs/Web/HTML/Element/meta#itemprop) não deve ser definido no mesmo elemento`<meta>` que tem algum desses atributos existentes: [`name`](/pt-BR/docs/Web/HTML/Element/meta#name), [`http-equiv`](/pt-BR/docs/Web/HTML/Element/meta#http-equiv) ou [`charset`](/pt-BR/docs/Web/HTML/Element/meta#charset). - {{htmlattrdef("charset")}} @@ -80,13 +80,13 @@ Esse elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut > - Esse elemento {{HTMLElement ("meta")}} deve estar dentro do elemento {{HTMLElement ("head")}} e dentro dos primeiros 1024 bytes da página, pois alguns navegadores só olham para esses primeiros bytes antes de escolher um caractere definido para a página. > - Esse elemento {{HTMLElement ("meta")}} é apenas uma parte do algoritmo para determinar o conjunto de caracteres de uma página que os navegadores aplicam. O cabeçalho HTTP Content-Type e quaisquer elementos da BOM têm precedência sobre esse elemento. > - É uma boa prática, e altamente recomendável, definir o conjunto de caracteres usando este atributo. Se nenhum conjunto de caracteres estiver definido para uma página, várias técnicas de scripts cruzados poderão prejudicar o usuário da página, como a técnica de cross-scripting de fallback UTF-7. Sempre definindo esta meta irá proteger contra esses riscos. - > - Esse elemento {{HTMLElement("meta")}} é um sinônimo para o pre-HTML5 `<meta http-equiv="Content-Type" content="text/html; charset=IANAcharset">` onde o atributo `IANAcharset` corresponde ao valor equivalente de {{htmlattrxref("charset", "meta")}}. Essa sintaxe ainda é permitida, embora obsoleta e não mais recomendada. + > - Esse elemento {{HTMLElement("meta")}} é um sinônimo para o pre-HTML5 `<meta http-equiv="Content-Type" content="text/html; charset=IANAcharset">` onde o atributo `IANAcharset` corresponde ao valor equivalente de [`charset`](/pt-BR/docs/Web/HTML/Element/meta#charset). Essa sintaxe ainda é permitida, embora obsoleta e não mais recomendada. - {{htmlattrdef("content")}} - - : Esse atributo fornece o valor associado ao atributo {{htmlattrxref("http-equiv", "meta")}} ou {{htmlattrxref("name", "meta")}}, dependendo do contexto. + - : Esse atributo fornece o valor associado ao atributo [`http-equiv`](/pt-BR/docs/Web/HTML/Element/meta#http-equiv) ou [`name`](/pt-BR/docs/Web/HTML/Element/meta#name), dependendo do contexto. - {{htmlattrdef("http-equiv")}} - - : Este enumerado atributo define a pragma isso pode alterar o comportamento de servers e user-agents. o valor do pragma é definido usando {{htmlattrxref("content", "meta")}} e pode ser um dos seguintes: + - : Este enumerado atributo define a pragma isso pode alterar o comportamento de servers e user-agents. o valor do pragma é definido usando [`content`](/pt-BR/docs/Web/HTML/Element/meta#content) e pode ser um dos seguintes: - `"content-language"` @@ -100,19 +100,19 @@ Esse elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut - : Esse atributo define o [MIME type](/pt-BR/docs/MIME) e o conjunto de caracteres do documento. Isso segue a mesma sintaxe como o HTTP `content-type` entity-header field, mas isto esta dentro de um elemento HTML, a maioria dos valores não é possível. Sendo assim a sintaxe válida para este conteúdo é a literal string '`text/html`' eventualmente seguido por estes caracteres com a seguinte sintaxe: '`; charset=`_`IANAcharset`_' onde `IANAcharset` é o _MIME preferido nome para um conjunto de caracteres como_ [definido pela IANA.](https://www.iana.org/assignments/character-sets) - > **Note:** **nota de uso:**- Nao use esta pragma ela esta obsoleta. use {{htmlattrxref("charset", "meta")}} atributo {{HTMLElement("meta")}} element instead. + > **Note:** **nota de uso:**- Nao use esta pragma ela esta obsoleta. use [`charset`](/pt-BR/docs/Web/HTML/Element/meta#charset) atributo {{HTMLElement("meta")}} element instead. > > - como o {{HTMLElement("meta")}} pode nao ser usado para mudar o tipo de documento no XHTML, ou em um documento de HTML5 seguindo uma syntax de XHTML, nunca marque MIME type para um XHTML MIME type desta forma. isso sera incoerente. - > - somente um documento HTML pode usar o content-type, então a maioria disto é redundante: isso porque esta obsoleto e trocado pelo atributo {{htmlattrxref("charset", "meta")}}. + > - somente um documento HTML pode usar o content-type, então a maioria disto é redundante: isso porque esta obsoleto e trocado pelo atributo [`charset`](/pt-BR/docs/Web/HTML/Element/meta#charset). - `"default-style"` - - : Este pragma preferencia de stylesheet a ser usado na página. o atributo {{htmlattrxref("content", "meta")}} deve conter o **title** de um {{HTMLElement("link")}} elemento de quem {{htmlattrxref("href", "link")}} atributo link um CSS stylesheet, ou um **title** de um elemento {{HTMLElement("style")}} do qual contem um [CSS](/pt-BR/docs/Web/CSS) stylesheet. + - : Este pragma preferencia de stylesheet a ser usado na página. o atributo [`content`](/pt-BR/docs/Web/HTML/Element/meta#content) deve conter o **title** de um {{HTMLElement("link")}} elemento de quem [`href`](/pt-BR/docs/Web/HTML/Element/link#href) atributo link um CSS stylesheet, ou um **title** de um elemento {{HTMLElement("style")}} do qual contem um [CSS](/pt-BR/docs/Web/CSS) stylesheet. - `"refresh"` - : este pragma especifica: - - o numero de segundos até a página ser recarregada, se o atributo {{htmlattrxref("content", "meta")}} contém apenas um número inteiro não negativo; - - o número de segundos até a página ser redirecionada para outro lugar, se o atributo {{htmlattrxref("content", "meta")}} contém um inteiro não negativo seguido de uma string '`;url=`' e uma URL válida. + - o numero de segundos até a página ser recarregada, se o atributo [`content`](/pt-BR/docs/Web/HTML/Element/meta#content) contém apenas um número inteiro não negativo; + - o número de segundos até a página ser redirecionada para outro lugar, se o atributo [`content`](/pt-BR/docs/Web/HTML/Element/meta#content) contém um inteiro não negativo seguido de uma string '`;url=`' e uma URL válida. - `"set-cookie"` @@ -122,8 +122,8 @@ Esse elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut - {{htmlattrdef("name")}} - - : Este atributo define o nome do document-level metadata. Isso não deve ser marcado se um dos atributos {{htmlattrxref("itemprop", "meta")}}, {{htmlattrxref("http-equiv", "meta")}} ou {{htmlattrxref("charset", "meta")}} já estiver preparado. - este document-level metadata name é associado a um valor, contido pelo atributo {{htmlattrxref("content", "meta")}}. os possíveis valores para o elemento name são, com seu valor associado, guardado via {{htmlattrxref("content", "meta")}} attribute: + - : Este atributo define o nome do document-level metadata. Isso não deve ser marcado se um dos atributos [`itemprop`](/pt-BR/docs/Web/HTML/Element/meta#itemprop), [`http-equiv`](/pt-BR/docs/Web/HTML/Element/meta#http-equiv) ou [`charset`](/pt-BR/docs/Web/HTML/Element/meta#charset) já estiver preparado. + este document-level metadata name é associado a um valor, contido pelo atributo [`content`](/pt-BR/docs/Web/HTML/Element/meta#content). os possíveis valores para o elemento name são, com seu valor associado, guardado via [`content`](/pt-BR/docs/Web/HTML/Element/meta#content) attribute: - `application-name`, define o nome da aplicação que esta rodando na página; @@ -206,7 +206,7 @@ Esse elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut - {{htmlattrdef("scheme")}} - - : Este atributo define o esquema no qual os metadados são descritos. Um esquema é um contexto que leva às interpretações corretas dos {{htmlattrxref("content", "meta")}} valores, como um formato. + - : Este atributo define o esquema no qual os metadados são descritos. Um esquema é um contexto que leva às interpretações corretas dos [`content`](/pt-BR/docs/Web/HTML/Element/meta#content) valores, como um formato. > **Note:** **Notes:** Não use este atributo pois esta obsoleto.Não há substituto para isso, pois não houve uso real para isso. Omitir completamente. @@ -214,11 +214,11 @@ Esse elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut Dependendo do conjunto escolhido, o tipo de metadata pode ser uma das seguintes: -- se {{htmlattrxref("name", "meta")}} é definido, isto é _document-level_ _metadata_, aplicando para a página inteira. -- se {{htmlattrxref("http-equiv", "meta")}} é definido, isto é um _pragma diretiva_, i.e. normalmente informação dada pelo web server sobre como a página web deve ser entregue. -- se {{htmlattrxref("charset", "meta")}} é definido, isto é uma declaração de _charset_, i.e. o charset usado para o formulário serializado da página da Web +- se [`name`](/pt-BR/docs/Web/HTML/Element/meta#name) é definido, isto é _document-level_ _metadata_, aplicando para a página inteira. +- se [`http-equiv`](/pt-BR/docs/Web/HTML/Element/meta#http-equiv) é definido, isto é um _pragma diretiva_, i.e. normalmente informação dada pelo web server sobre como a página web deve ser entregue. +- se [`charset`](/pt-BR/docs/Web/HTML/Element/meta#charset) é definido, isto é uma declaração de _charset_, i.e. o charset usado para o formulário serializado da página da Web -- se {{htmlattrxref("itemprop", "meta")}} é definido, isto é _user-defined metadata_, transparente para o user-agent, pois a semântica dos metadados é específica do usuário. {{experimental_inline}} +- se [`itemprop`](/pt-BR/docs/Web/HTML/Element/meta#itemprop) é definido, isto é _user-defined metadata_, transparente para o user-agent, pois a semântica dos metadados é específica do usuário. {{experimental_inline}} ## Exemplos diff --git a/files/pt-br/web/html/element/ol/index.md b/files/pt-br/web/html/element/ol/index.md index 7b40ec609ebd5d..e436b9a417c3bf 100644 --- a/files/pt-br/web/html/element/ol/index.md +++ b/files/pt-br/web/html/element/ol/index.md @@ -42,7 +42,7 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes). - `'I'` indica algarismos romanos maiúsculos, - e `'1'` indica números (padrão). - O tipo de marcação é usado na lista inteira, a menos que um atributo {{htmlattrxref("type", "li")}} diferente seja utilizado dentro do elemento {{HTMLElement("li")}}. + O tipo de marcação é usado na lista inteira, a menos que um atributo [`type`](/pt-BR/docs/Web/HTML/Element/li#type) diferente seja utilizado dentro do elemento {{HTMLElement("li")}}. > **Nota:** Este atributo, obsoleto na HTML4, foi reintroduzido na HTML5. A menos que o valor do número na lista seja importante, a propriedade CSS {{cssxref("list-style-type")}} deve ser usada em seu lugar. @@ -147,7 +147,7 @@ A saída HTML acima será: - a propriedade {{cssxref("list-style")}}, conveniente para escolher a forma como os ordinais são exibidos, - [contadores CSS](/pt-BR/docs/CSS_Counters), útil para gerenciar listas complexas aninhadas, - - a propriedade {{cssxref("line-height")}}, proficiente para simular o atributo obsoleto {{htmlattrxref("compact", "ol")}}, + - a propriedade {{cssxref("line-height")}}, proficiente para simular o atributo obsoleto [`compact`](/pt-BR/docs/Web/HTML/Element/ol#compact), - a propriedade {{cssxref("margin")}}, aplicável para controlar a indentação da lista. {{HTMLSidebar}} diff --git a/files/pt-br/web/html/element/option/index.md b/files/pt-br/web/html/element/option/index.md index c222359433cb21..7950c57bfe7f1e 100644 --- a/files/pt-br/web/html/element/option/index.md +++ b/files/pt-br/web/html/element/option/index.md @@ -26,7 +26,7 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Atributos_globa > **Note:** O atributo **label** é projetado para conter um rótulo curto tipicamente usado num menu hierárquico. O atributo **value** descreve descreve um rótulo maior, designado para ser usado perto de um botão de escolha, por exemplo. - {{htmlattrdef("selected")}} - - : Se presente, este atributo booleano indica que a opção está selecionada inicialmente. Se o elemento `<option>` for descendente de um elemento {{HTMLElement("select")}} cujo atributo {{htmlattrxref("multiple", "select")}} não está definido, apenas um único `<option>` deste elemento {{HTMLElement("select")}} pode ter o atributo **selected**. + - : Se presente, este atributo booleano indica que a opção está selecionada inicialmente. Se o elemento `<option>` for descendente de um elemento {{HTMLElement("select")}} cujo atributo [`multiple`](/pt-BR/docs/Web/HTML/Element/select#multiple) não está definido, apenas um único `<option>` deste elemento {{HTMLElement("select")}} pode ter o atributo **selected**. - {{htmlattrdef("value")}} - : O conteúdo textual deste atributo representa o rótulo que explica a opção. Se ele não estiver definido, seu valor padrão é o texto contido no elemento. diff --git a/files/pt-br/web/html/element/pre/index.md b/files/pt-br/web/html/element/pre/index.md index 5c77e40e3e49f8..4266cca586c303 100644 --- a/files/pt-br/web/html/element/pre/index.md +++ b/files/pt-br/web/html/element/pre/index.md @@ -21,7 +21,7 @@ Esse elemento apenas inclui atributos globais. This element only includes the [global attributes](/pt-BR/docs/HTML/Global_attributes). - {{htmlattrdef("cols")}} {{non-standard_inline}} - - : Contains the _preferred_ count of characters that a line should have. It was a non-standard synonym of {{htmlattrxref("width", "pre")}}. To achieve such an effect, use CSS styling instead. + - : Contains the _preferred_ count of characters that a line should have. It was a non-standard synonym of [`width`](/pt-BR/docs/Web/HTML/Element/pre#width). To achieve such an effect, use CSS styling instead. - {{htmlattrdef("width")}} - : Contains the _preferred_ count of characters that a line should have. Though technically still implemented, this attribute has no visual effect; to achieve such an effect, use CSS styling instead. - {{htmlattrdef("wrap")}} {{non-standard_inline}} diff --git a/files/pt-br/web/html/element/textarea/index.md b/files/pt-br/web/html/element/textarea/index.md index 591115fb1b177f..70d9376e9c3984 100644 --- a/files/pt-br/web/html/element/textarea/index.md +++ b/files/pt-br/web/html/element/textarea/index.md @@ -42,7 +42,7 @@ Este elemento inclui os atributos globais. - `off`: The user must explicitly enter a value into this field for every use, or the document provides its own auto-completion method; the browser does not automatically complete the entry. - `on`: O navegador pode concluir automaticamente o valor com base nos valores inseridos pelo usuário durante os usos anteriores. - Se o `autocomplete` atributo não está especificado em um `<textarea>` elemento, o navegador usa o elemento `autocomplete` valor do atributo `<textarea>` proprietário do formulário do elemento. O proprietário do formulário é o {{HTMLElement("form")}} elemento que este`<textarea>` elemento é um descendente ou o elemento de formulário cuja `id` é especificado pelo `form` atributo do elemento de entrada. Para mais informações, consulte o {{htmlattrxref("autocomplete", "form")}} atribuno no {{HTMLElement("form")}}. + Se o `autocomplete` atributo não está especificado em um `<textarea>` elemento, o navegador usa o elemento `autocomplete` valor do atributo `<textarea>` proprietário do formulário do elemento. O proprietário do formulário é o {{HTMLElement("form")}} elemento que este`<textarea>` elemento é um descendente ou o elemento de formulário cuja `id` é especificado pelo `form` atributo do elemento de entrada. Para mais informações, consulte o [`autocomplete`](/pt-BR/docs/Web/HTML/Element/form#autocomplete) atribuno no {{HTMLElement("form")}}. - {{ htmlattrdef("autofocus") }} - : Esse atributo booleano permite especificar que um controle de formulário tenha foco de entrada quando a página for carregada. Somente um elemento associado ao formulário em um documento pode ter esse atributo especificado. diff --git a/files/pt-br/web/html/element/tfoot/index.md b/files/pt-br/web/html/element/tfoot/index.md index ccd605e337cce4..43f2e04de0ac76 100644 --- a/files/pt-br/web/html/element/tfoot/index.md +++ b/files/pt-br/web/html/element/tfoot/index.md @@ -69,13 +69,13 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut - `center`, centraliza o conteúdo ao centro da célula - `right`, alinha o conteúdo do elemento a direita da célula - `justify`, insere espaços ao texto para que o mesmo fique centralizado na célula - - `char`, alinha o texto em um alinhamento especial com um deslocamento mínimo definido pelos atributos {{htmlattrxref("char", "tbody")}} e {{htmlattrxref("charoff", "tbody")}} atributos {{unimplemented_inline("2212")}}. + - `char`, alinha o texto em um alinhamento especial com um deslocamento mínimo definido pelos atributos [`char`](/pt-BR/docs/Web/HTML/Element/tbody#char) e [`charoff`](/pt-BR/docs/Web/HTML/Element/tbody#charoff) atributos {{unimplemented_inline("2212")}}. Se nenhum atributo for definido o valor `left` é passado por padrão > **Note:**Não use esse atributo o mesmo está obsoleto (não suportado) no último padrão.- Para obter os mesmo efeitos `left`, `center`, `right` ou `justify`, use a propriedade {{cssxref("text-align")}} do CSS. > - > - Para obter o mesmo efeito no CSS3, você pode usar os valores {{htmlattrxref("char", "tfoot")}} com o valor de {{cssxref("text-align")}} propriedade {{unimplemented_inline}}. + > - Para obter o mesmo efeito no CSS3, você pode usar os valores [`char`](/pt-BR/docs/Web/HTML/Element/tfoot#char) com o valor de {{cssxref("text-align")}} propriedade {{unimplemented_inline}}. - {{htmlattrdef("bgcolor")}} {{Non-standard_inline}} @@ -95,9 +95,9 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut - {{htmlattrdef("char")}} {{Deprecated_inline}} - - : O elemento é usado para alinhar as células em uma columa. Valores típicos para isso inclui o periódico (.) quando se alinha valores monetários. Se {{htmlattrxref("align", "tfoot")}} não é definido para `char`, este atributo é ignorado + - : O elemento é usado para alinhar as células em uma columa. Valores típicos para isso inclui o periódico (.) quando se alinha valores monetários. Se [`align`](/pt-BR/docs/Web/HTML/Element/tfoot#align) não é definido para `char`, este atributo é ignorado - > **Nota:** Não use esté atributo, ele é obsoleto (e não é mais suportado) desde da última versão padrão. Em vez disso use {{htmlattrxref("char", "tfoot")}} no CSS3, você pode usar o atributo {{htmlattrxref("char", "tfoot")}} com a propriedade {{cssxref("text-align")}}. + > **Nota:** Não use esté atributo, ele é obsoleto (e não é mais suportado) desde da última versão padrão. Em vez disso use [`char`](/pt-BR/docs/Web/HTML/Element/tfoot#char) no CSS3, você pode usar o atributo [`char`](/pt-BR/docs/Web/HTML/Element/tfoot#char) com a propriedade {{cssxref("text-align")}}. - {{htmlattrdef("charoff")}} {{Deprecated_inline}} diff --git a/files/pt-br/web/html/element/th/index.md b/files/pt-br/web/html/element/th/index.md index 2cd7ddd4d4a5c3..53edf8bf5ccde4 100644 --- a/files/pt-br/web/html/element/th/index.md +++ b/files/pt-br/web/html/element/th/index.md @@ -5,7 +5,7 @@ slug: Web/HTML/Element/th {{HTMLSidebar}} -O **elemento HTML `<th>`** define uma célula cabeçalho do grupo de células de sua tabela. A exatidão natural deste grupo é definida pelos atributos {{htmlattrxref("scope", "th")}} e {{htmlattrxref("headers", "th")}}. +O **elemento HTML `<th>`** define uma célula cabeçalho do grupo de células de sua tabela. A exatidão natural deste grupo é definida pelos atributos [`scope`](/pt-BR/docs/Web/HTML/Element/th#scope) e [`headers`](/pt-BR/docs/Web/HTML/Element/th#headers). {{EmbedInteractiveExample("pages/tabbed/th.html","tabbed-taller")}} @@ -89,19 +89,19 @@ Esse elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut - `center`: O conteúdo é centralizado da célula. - `right`: O conteúdo é alinhado a direita da célula. - `justify` (somente com texto): O conteúdo é estendido dentro da célula para cobrir toda a sua largura. - - `char` (somente com texto): O conteúdo está alinhado a um caractere dentro do elemento `<th>` com deslocamento mínimo. Esse caractere é definido pelos atributos {{htmlattrxref("char", "th")}} e {{htmlattrxref("charoff", "th")}}. + - `char` (somente com texto): O conteúdo está alinhado a um caractere dentro do elemento `<th>` com deslocamento mínimo. Esse caractere é definido pelos atributos [`char`](/pt-BR/docs/Web/HTML/Element/th#char) e [`charoff`](/pt-BR/docs/Web/HTML/Element/th#charoff). O valor padrão quando não especificado é `left`. > **Note:**Não use esse atributo, pois ele está obsoleto no padrão mais recente.- Para alcançar o mesmo efeito que os valores `left`, `center`, `right` ou `justify`, aplique a propriedade CSS {{cssxref("text-align")}} no elemento. > - > - Para alcançar o mesmo efeito que os valor `char`, atribue a {{cssxref("text-align")}} o mesmo valor que você usaria para {{htmlattrxref("char", "th")}}. {{unimplemented_inline}} no CSS3. + > - Para alcançar o mesmo efeito que os valor `char`, atribue a {{cssxref("text-align")}} o mesmo valor que você usaria para [`char`](/pt-BR/docs/Web/HTML/Element/th#char). {{unimplemented_inline}} no CSS3. - {{htmlattrdef("axis")}} - : Este atributo contém uma lista de palavras separadas por espaço. Cada palavra é o `id` de um grupo de células às quais este cabeçalho se aplica. - > **Note:** Não use esse atributo, pois ele está obsoleto no padrão mais recente: use o atributo {{htmlattrxref("scope", "th")}}. + > **Note:** Não use esse atributo, pois ele está obsoleto no padrão mais recente: use o atributo [`scope`](/pt-BR/docs/Web/HTML/Element/th#scope). - {{htmlattrdef("bgcolor")}} {{Non-standard_inline}} @@ -121,7 +121,7 @@ Esse elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut - {{htmlattrdef("char")}} - - : O conteúdo da célula está alinhado a um caractere. Os valores típicos incluem um ponto (.) para alinhar números ou valores monetários. Se {{htmlattrxref("align", "th")}} não está definido no `char`, o atributo é ignorado. + - : O conteúdo da célula está alinhado a um caractere. Os valores típicos incluem um ponto (.) para alinhar números ou valores monetários. Se [`align`](/pt-BR/docs/Web/HTML/Element/th#align) não está definido no `char`, o atributo é ignorado. > **Note:** Não use esse atributo, pois ele está obsoleto no padrão mais recente. Para obter o mesmo efeito, você pode especificar o caractere como o primeiro valor da propriedade {{cssxref("text-align")}}, {{unimplemented_inline}} no CSS3. diff --git a/files/pt-br/web/html/element/ul/index.md b/files/pt-br/web/html/element/ul/index.md index a12fb990edb994..8e6e8d78d04ec7 100644 --- a/files/pt-br/web/html/element/ul/index.md +++ b/files/pt-br/web/html/element/ul/index.md @@ -166,7 +166,7 @@ A saída HTML acima será: - a propriedade [list-style](/pt-BR/CSS/list-style), conveniente para escolher a maneira como os ordinais serão mostrados, - [CSS counters](/pt-BR/CSS_Counters), eficientes para guiar listas complexas aninhadas, - - a propriedade [line-height](/pt-BR/CSS/line-height), válida para simular o atributo ultrapassado {{ htmlattrxref("compact", "ul") }}, + - a propriedade [line-height](/pt-BR/CSS/line-height), válida para simular o atributo ultrapassado [`compact`](/pt-BR/docs/Web/HTML/Element/ul#compact), - a propriedade [margin](/pt-BR/CSS/margin), proveitosa para controlar a indentação da lista. {{ HTMLSidebar }} diff --git a/files/pt-br/web/html/global_attributes/autocapitalize/index.md b/files/pt-br/web/html/global_attributes/autocapitalize/index.md index 7ebd520e623202..28476f15df1abb 100644 --- a/files/pt-br/web/html/global_attributes/autocapitalize/index.md +++ b/files/pt-br/web/html/global_attributes/autocapitalize/index.md @@ -14,7 +14,7 @@ O [atributo global](/pt-BR/docs/Web/HTML/Global_attributes) **`autocapitalize`** O atributo `autocapitalize` não afeta comportamentos quando digitando em um teclado físico. Ao invés disso, afeta o comportamento de outros mecanismos de entrada, tais quais teclados virtuais em dispositivos móveis e entradas por voz. O comportamento de tais mecanismos é que frequentemente auxiliam usuários aos capitalizar automaticamente a primeira letra de sentenças. O atributo `autocapitalize` permite a autores sobrescreverem esse comportamento por elemento. -O atributo `autocapitalize` nunca ativa a autocapitalização para um elemento {{HTMLElement("input")}} com um atributo {{htmlattrxref("type", "input")}} cujo valor seja `url`, `email`, ou `password`. +O atributo `autocapitalize` nunca ativa a autocapitalização para um elemento {{HTMLElement("input")}} com um atributo [`type`](/pt-BR/docs/Web/HTML/Element/input#type) cujo valor seja `url`, `email`, ou `password`. ## Especificações diff --git a/files/pt-br/web/html/global_attributes/itemprop/index.md b/files/pt-br/web/html/global_attributes/itemprop/index.md index 4532615936ba2a..65d874c9a58b39 100644 --- a/files/pt-br/web/html/global_attributes/itemprop/index.md +++ b/files/pt-br/web/html/global_attributes/itemprop/index.md @@ -62,7 +62,7 @@ The example below shows the source for a set of elements marked up with `itempro ## Properties -Properties have values that are either a string or a URL. When a string value is a URL, it is expressed using the {{HTMLElement("a")}} element and its {{htmlattrxref("href", "a")}} attribute, the {{HTMLElement("img")}} element and its {{htmlattrxref("src", "img")}} attribute, or other elements that link to or embed external resources. +Properties have values that are either a string or a URL. When a string value is a URL, it is expressed using the {{HTMLElement("a")}} element and its [`href`](/pt-BR/docs/Web/HTML/Element/a#href) attribute, the {{HTMLElement("img")}} element and its [`src`](/pt-BR/docs/Web/HTML/Element/img#src) attribute, or other elements that link to or embed external resources. ### Three properties with values that are strings @@ -450,8 +450,7 @@ Names are unordered relative to each other, but if a particular name has multipl - [Other different global attributes](/pt-BR/docs/Web/HTML/Global_attributes) - Other, microdata related, global attributes: - - {{htmlattrxref("itemid")}} - - {{htmlattrxref("itemprop")}} - - {{htmlattrxref("itemref")}} - - {{htmlattrxref("itemscope")}} - - {{htmlattrxref("itemtype")}} + - [`itemid`](/pt-BR/docs/Web/HTML/Global_attributes#itemid) + - [`itemref`](/pt-BR/docs/Web/HTML/Global_attributes#itemref) + - [`itemscope`](/pt-BR/docs/Web/HTML/Global_attributes#itemscope) + - [`itemtype`](/pt-BR/docs/Web/HTML/Global_attributes#itemtype) diff --git a/files/pt-br/web/html/global_attributes/spellcheck/index.md b/files/pt-br/web/html/global_attributes/spellcheck/index.md index e9ebe729764399..456ff79c0fbf8e 100644 --- a/files/pt-br/web/html/global_attributes/spellcheck/index.md +++ b/files/pt-br/web/html/global_attributes/spellcheck/index.md @@ -44,7 +44,7 @@ Por exemplo: Neste exemplo HTML acima, os dois primeiros campos de texto terão a verificação ortográfica e o terceiro não terá. -Iniciando no Gecko 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. +Iniciando no Gecko 9.0, a verificação ortográfica usa o atributo [`lang`](/pt-BR/docs/Web/HTML/Element/input#lang) 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. diff --git a/files/pt-br/web/html/index.md b/files/pt-br/web/html/index.md index 54f1bbc21745a2..9808433ced887e 100644 --- a/files/pt-br/web/html/index.md +++ b/files/pt-br/web/html/index.md @@ -57,7 +57,7 @@ Nossa [Área de Aprendizado de HTML](/pt-BR/docs/Aprender/HTML) apresenta vário - [Usando o cachê de aplicação](/pt-BR/docs/Web/HTML/Using_the_application_cache) - : O cachê de aplicação tem como o objetivo executar a aplicação offline. Você pode usar a interface **Application Cache** (_AppCache_) para escolher elementos que o browser possa guardar, deixando-os disponíveis para usuários desconectados. As aplicações que forem armazenadas em cache podem ser utilizadas sem nenhum problema, mesmo que o usuário clique no botão de atualizar a página enquanto estiver offline. - [Pré-carregando conteúdo com rel="preload"](/pt-BR/docs/Web/HTML/Preloading_content) - - : O valor `preload` do atributo {{htmlattrxref("rel", "link")}} do elemento {{htmlelement("link")}} permite que você escreva solicitações de busca declarativas em seu elemento {{htmlelement("head")}} do HTML, especificando recursos que suas páginas vão utilizar logo após o carregamento. Você também pode necessitar que estes recursos sejam pré-carregados ao início do ciclo de execução da página e depois que o mecanismo de renderização do navegador comece a agir. Isso garante que estarão disponíveis mais cedo e que seja menos provável que sua página seja bloqueada do processo de renderizar. Isso aumenta a performance da página. Este artigo oferece um guia básico de como `preload` funciona. + - : O valor `preload` do atributo [`rel`](/pt-BR/docs/Web/HTML/Element/link#rel) do elemento {{htmlelement("link")}} permite que você escreva solicitações de busca declarativas em seu elemento {{htmlelement("head")}} do HTML, especificando recursos que suas páginas vão utilizar logo após o carregamento. Você também pode necessitar que estes recursos sejam pré-carregados ao início do ciclo de execução da página e depois que o mecanismo de renderização do navegador comece a agir. Isso garante que estarão disponíveis mais cedo e que seja menos provável que sua página seja bloqueada do processo de renderizar. Isso aumenta a performance da página. Este artigo oferece um guia básico de como `preload` funciona. ## Referências diff --git a/files/pt-br/web/http/cors/errors/corsmissingalloworigin/index.md b/files/pt-br/web/http/cors/errors/corsmissingalloworigin/index.md index fa275ae1d48905..062af9879162af 100644 --- a/files/pt-br/web/http/cors/errors/corsmissingalloworigin/index.md +++ b/files/pt-br/web/http/cors/errors/corsmissingalloworigin/index.md @@ -23,7 +23,7 @@ Por exemplo, para permitir que um site da origem `https://amazing.site` acesse a Access-Control-Allow-Origin: https://amazing.site ``` -Você também pode configurar um site para permitir que qualquer site o acesse usando o curinga `"*"`. Você só deve usar isso para APIs públicas. As APIs privadas nunca devem usar `"*"` e devem ter um domínio ou domínios específicos definidos. Além disso, o curinga só funciona para solicitações feitas com o atributo {{htmlattrxref ("crossorigin")}} definido como `"anonymous"`. +Você também pode configurar um site para permitir que qualquer site o acesse usando o curinga `"*"`. Você só deve usar isso para APIs públicas. As APIs privadas nunca devem usar `"*"` e devem ter um domínio ou domínios específicos definidos. Além disso, o curinga só funciona para solicitações feitas com o atributo [`crossorigin`](/pt-BR/docs/Web/HTML/Global_attributes#crossorigin) definido como `"anonymous"`. ``` Access-Control-Allow-Origin: * diff --git a/files/pt-br/web/http/headers/content-disposition/index.md b/files/pt-br/web/http/headers/content-disposition/index.md index 536a493f25ce80..d3da6bd3f42bb5 100644 --- a/files/pt-br/web/http/headers/content-disposition/index.md +++ b/files/pt-br/web/http/headers/content-disposition/index.md @@ -51,7 +51,7 @@ Content-Disposition: form-data; name="fieldName"; filename="filename.jpg" - `name` - - : O nome é seguido por uma cadeia de caracteres contendo o nome do campo HTML no formulário que o conteúdo dessa subparte se refere. Quando lidando com múltiplos arquivos no mesmo campo (por exemplo, o atributo {{htmlattrxref("multiple", "input")}} de um elemento `{HTMLElement("input","<input type=\"file\">")}}`), podem haver diversas subpartes com o mesmo nome. + - : O nome é seguido por uma cadeia de caracteres contendo o nome do campo HTML no formulário que o conteúdo dessa subparte se refere. Quando lidando com múltiplos arquivos no mesmo campo (por exemplo, o atributo [`multiple`](/pt-BR/docs/Web/HTML/Element/input#multiple) de um elemento `{HTMLElement("input","<input type=\"file\">")}}`), podem haver diversas subpartes com o mesmo nome. Um `name` com o valor de `'_charset_'` indica que a parte não é um campo HTML, mas uma codificação para usar em partes sem explicitar a informação de codificação. diff --git a/files/pt-br/web/http/headers/content-security-policy/index.md b/files/pt-br/web/http/headers/content-security-policy/index.md index 90de39c73e4eb2..b59c9c3f8e1b04 100644 --- a/files/pt-br/web/http/headers/content-security-policy/index.md +++ b/files/pt-br/web/http/headers/content-security-policy/index.md @@ -90,7 +90,7 @@ As diretivas de Documento governam as propriedades de um documento ou ambiente [ - {{CSP("plugin-types")}} - : Restringe o conjunto de _plugins_ que podem ser embutidos em um documento limitando pelos tipos de conteúdos que podem ser carregados. - {{CSP("sandbox")}} - - : Habilita o _sandbox_ para um recurso requisitado similar ao atributo {{htmlattrxref("sandbox", "iframe")}} de {{HTMLElement("iframe")}}. + - : Habilita o _sandbox_ para um recurso requisitado similar ao atributo [`sandbox`](/pt-BR/docs/Web/HTML/Element/iframe#sandbox) de {{HTMLElement("iframe")}}. ### {{Glossary("Navigation directive", "Navigation directives")}} diff --git a/files/pt-br/web/http/headers/x-dns-prefetch-control/index.md b/files/pt-br/web/http/headers/x-dns-prefetch-control/index.md index b9fed91122a9ea..81989ac322b618 100644 --- a/files/pt-br/web/http/headers/x-dns-prefetch-control/index.md +++ b/files/pt-br/web/http/headers/x-dns-prefetch-control/index.md @@ -52,7 +52,7 @@ Além disso, por padrão, a pré-busca de nomes de host de link incorporado não ### Ativando e desativando a pré-busca -Você pode enviar o cabeçalho do lado do servidor X-DNS-Prefetch-Control ou de documentos individuais, usando o atributo {{htmlattrxref ("http-equiv", "meta")}} no {{HTMLElement ("meta" )}} elemento, assim: +Você pode enviar o cabeçalho do lado do servidor X-DNS-Prefetch-Control ou de documentos individuais, usando o atributo [`http-equiv`](/pt-BR/docs/Web/HTML/Element/meta#http-equiv) no {{HTMLElement ("meta" )}} elemento, assim: ```html <meta http-equiv="x-dns-prefetch-control" content="off"> @@ -62,7 +62,7 @@ Você pode reverter essa configuração configurando o `content` como "`on`". ### Forçando a procura de nomes de host específicos -Você pode forçar a pesquisa de nomes de host específicos sem fornecer âncoras específicas usando esse nome de host com o uso de {{htmlattrxref ("rel", "link")}} no elemento {{HTMLElement ("link")}} com um tipo de link de `dns-prefetch`: +Você pode forçar a pesquisa de nomes de host específicos sem fornecer âncoras específicas usando esse nome de host com o uso de [`rel`](/pt-BR/docs/Web/HTML/Element/link#rel) no elemento {{HTMLElement ("link")}} com um tipo de link de `dns-prefetch`: ```html <link rel="dns-prefetch" href="http://www.spreadfirefox.com/"> diff --git a/files/pt-br/web/http/methods/post/index.md b/files/pt-br/web/http/methods/post/index.md index 63732166b21227..f2d8e2a3e8e323 100644 --- a/files/pt-br/web/http/methods/post/index.md +++ b/files/pt-br/web/http/methods/post/index.md @@ -9,7 +9,7 @@ O **método HTTP `POST`** envia dados ao servidor. O tipo do corpo da solicitaç A diferença entre `PUT` e {{HTTPMethod("POST")}} é que `PUT` é idempotente: chamá-lo uma vez ou várias vezes sucessivamente tem o mesmo efeito (ou seja, nenhum efeito colateral), onde sucessivos POST idênticos podem ter efeitos adicionais, assim como passando uma ordem várias vezes. -Uma solicitação `POST` geralmente é enviada por meio de um [formulário HTML](/pt-BR/docs/Web/Guide/HTML/Forms) e resulta em uma alteração no servidor. Nesse caso, o tipo de conteúdo é selecionado colocando a string adequada no atributo {{htmlattrxref("enctype", "form")}} do elemento {{HTMLElement("form")}} ou o atributo {{htmlattrxref("formenctype", "input")}} dos elementos {{HTMLElement("input")}} ou {{HTMLElement("button")}}: +Uma solicitação `POST` geralmente é enviada por meio de um [formulário HTML](/pt-BR/docs/Web/Guide/HTML/Forms) e resulta em uma alteração no servidor. Nesse caso, o tipo de conteúdo é selecionado colocando a string adequada no atributo [`enctype`](/pt-BR/docs/Web/HTML/Element/form#enctype) do elemento {{HTMLElement("form")}} ou o atributo [`formenctype`](/pt-BR/docs/Web/HTML/Element/input#formenctype) dos elementos {{HTMLElement("input")}} ou {{HTMLElement("button")}}: - `application/x-www-form-urlencoded`: as chaves e valores são codificados em tuplas de valor-chave separadas por `'&'`, com um `'='` entre a chave e o valor. Caracteres não alfanuméricos em chaves e valores são {{glossary ("percent-encoding", "percent encoded")}}: este é o motivo pelo qual esse tipo não é adequado para uso com dados binários (ao invés disso, use `multipart/form-data`) - `multipart/form-data` diff --git a/files/pt-br/web/http/redirections/index.md b/files/pt-br/web/http/redirections/index.md index 52f33b7b45890d..2e5dedecb5a5b6 100644 --- a/files/pt-br/web/http/redirections/index.md +++ b/files/pt-br/web/http/redirections/index.md @@ -54,7 +54,7 @@ HTTP redirects aren't the only way to define redirections. There are two other m ### HTML redirections -HTTP redirects are the preferred way to create redirections, but sometimes the Web developer doesn't have control over the server or cannot configure it. For these specific cases, the Web developers can craft an HTML page with a {{HTMLElement("meta")}} element and the {{htmlattrxref("http-equiv", "meta")}} attribute set to `refresh` in the {{HTMLElement("head")}} of the page. When displaying the page, the browser will find this element and will go to the indicated page. +HTTP redirects are the preferred way to create redirections, but sometimes the Web developer doesn't have control over the server or cannot configure it. For these specific cases, the Web developers can craft an HTML page with a {{HTMLElement("meta")}} element and the [`http-equiv`](/pt-BR/docs/Web/HTML/Element/meta#http-equiv) attribute set to `refresh` in the {{HTMLElement("head")}} of the page. When displaying the page, the browser will find this element and will go to the indicated page. ```html <head> @@ -62,7 +62,7 @@ HTTP redirects are the preferred way to create redirections, but sometimes the W </head> ``` -The {{htmlattrxref("content")}} attribute starts with a number indicating how many seconds the browser should wait before redirecting to the given URL. Always set it to `0`, for better accessibility. +The [`content`](/pt-BR/docs/Web/HTML/Global_attributes#content) attribute starts with a number indicating how many seconds the browser should wait before redirecting to the given URL. Always set it to `0`, for better accessibility. Obviously, this method only works with HTML pages (or similar) and cannot be used for images or any other type of content. diff --git a/files/pt-br/web/svg/element/a/index.md b/files/pt-br/web/svg/element/a/index.md index d270ccbd34e2ee..fa881809bfed31 100644 --- a/files/pt-br/web/svg/element/a/index.md +++ b/files/pt-br/web/svg/element/a/index.md @@ -58,28 +58,28 @@ svg|a:hover, svg|a:active { ## Attributes -- {{htmlattrxref("download", "a")}} {{experimental_inline}} +- [`download`](/pt-BR/docs/Web/HTML/Element/a#download) {{experimental_inline}} - : Instructs browsers to download a {{Glossary("URL")}} instead of navigating to it, so the user will be prompted to save it as a local file. _Value type_: **\<string>** ; _Default value_: _none_; _Animatable_: **no** - {{SVGAttr("href")}} - : The {{Glossary("URL")}} or URL fragment the hyperlink points to. _Value type_: **[\<URL>](/docs/Web/SVG/Content_type#URL)** ; _Default value_: _none_; _Animatable_: **yes** -- {{htmlattrxref("hreflang", "a")}} +- [`hreflang`](/pt-BR/docs/Web/HTML/Element/a#hreflang) - : The human language of the URL or URL fragment that the hyperlink points to. _Value type_: **\<string>** ; _Default value_: _none_; _Animatable_: **yes** -- {{htmlattrxref("ping", "a")}} {{experimental_inline}} +- [`ping`](/pt-BR/docs/Web/HTML/Element/a#ping) {{experimental_inline}} - : A space-separated list of URLs to which, when the hyperlink is followed, [`POST`](/pt-BR/docs/Web/HTTP/Methods/POST) requests with the body `PING` will be sent by the browser (in the background). Typically used for tracking. For a more widely-supported feature addressing the same use cases, see [Navigator.sendBeacon()](/pt-BR/docs/Web/API/Navigator/sendBeacon). _Value type_: **[\<list-of-URLs>](/docs/Web/SVG/Content_type#List-of-Ts)** ; _Default value_: _none_; _Animatable_: **no** -- {{htmlattrxref("referrerpolicy", "a")}} {{experimental_inline}} +- [`referrerpolicy`](/pt-BR/docs/Web/HTML/Element/a#referrerpolicy) {{experimental_inline}} - : Which [referrer](/pt-BR/docs/Web/HTTP/Headers/Referer) to send when fetching the {{Glossary("URL")}}. _Value type_: `no-referrer`|`no-referrer-when-downgrade`|`same-origin`|`origin`|`strict-origin`|`origin-when-cross-origin`|`strict-origin-when-cross-origin`|`unsafe-url` ; _Default value_: _none_; _Animatable_: **no** -- {{htmlattrxref("rel", "a")}} {{experimental_inline}} +- [`rel`](/pt-BR/docs/Web/HTML/Element/a#rel) {{experimental_inline}} - : The relationship of the target object to the link object. _Value type_: **[\<list-of-Link-Types>](/docs/Web/HTML/Link_types)** ; _Default value_: _none_; _Animatable_: **yes** - {{SVGAttr("target")}} - : Where to display the linked {{Glossary("URL")}}. _Value type_: `_self`|`_parent`|`_top`|`_blank`|**\<name>** ; _Default value_: `_self`; _Animatable_: **yes** -- {{htmlattrxref("type", "a")}} +- [`type`](/pt-BR/docs/Web/HTML/Element/a#type) - : A {{Glossary("MIME type")}} for the linked URL. _Value type_: **\<string>** ; _Default value_: _none_; _Animatable_: **yes** - {{SVGAttr("xlink:href")}} {{deprecated_inline}}