1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
---
title: 'HTML: Linguagem de Marcação de Hipertexto'
slug: Web/HTML
tags:
- HTML
- HTML 5
- Página de destino
- Web
- 'l10n:prioridade'
translation_of: Web/HTML
---
<div>{{HTMLSidebar}}</div>
<p class="summary"><span class="seoSummary"><strong>HTML</strong> (Linguagem de Marcação de HiperTexto) é o bloco de construção mais básico da web. Define o significado e a estrutura do conteúdo da web. Outras tecnologias além do HTML geralmente são usadas para descrever a aparência/apresentação (<a href="/pt-BR/docs/Web/CSS">CSS</a>) ou a funcionalidade/comportamento (<a href="/pt-BR/docs/Web/JavaScript">JavaScript</a>) de uma página da web.</span></p>
<p>"Hipertexto" refere-se aos <em>links</em> que conectam páginas da Web entre si, seja dentro de um único site ou entre sites. Links são um aspecto fundamental da web. Ao carregar conteúdo na Internet e vinculá-lo a páginas criadas por outras pessoas, você se torna um participante ativo na world wide web.</p>
<p>O HTML usa "Marcação" para anotar texto, imagem e outros conteúdos para exibição em um navegador da Web. A marcação HTML inclui "elementos" especiais, como {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("datalist")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("nav")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("video")}}, {{HTMLElement("ul")}}, {{HTMLElement("ol")}}, {{HTMLElement("li")}} e muitos outros.</p>
<p>Um elemento HTML é separado de outro texto em um documento por "tags", que consistem no nome do elemento entre "<code><</code>" e "<code>></code>". O nome de um elemento dentro de uma tag é insensível a maiúsculas e minúsculas. Isto é, pode ser escrito em maiúsculas, minúsculas ou um mistura. Por exemplo, a tag <code><title></code> pode ser escrita como <code><Title></code>, <code><TITLE></code> ou de qualquer outra forma.</p>
<p>Os artigos abaixo podem ajudá-lo a aprender mais sobre HTML.</p>
<section class="cleared" id="sect1">
<ul class="card-grid">
<li><span>Introdução ao HTML</span>
<p>Se você é novo no desenvolvimento web, não deixe de ler nosso artigo <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/HTML_basico">O Básico do HTML </a>para aprender o que é HTML e como usá-lo.</p>
</li>
<li><span>Tutoriais HTML </span>
<p>Para artigos sobre como usar o HTML, assim como tutoriais e exemplos completos, confira nossa <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/HTML">Área de Aprendizado de HTML</a>.</p>
</li>
<li><span>Referência do HTML </span>
<p>Em nossa extensa seção de <a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/ReferenciaHTML">Referência do HTML</a>, você encontrará os detalhes sobre cada elemento e atributo do HTML.</p>
</li>
</ul>
<div class="row topicpage-table">
<div class="section">
<h2 class="Tools" id="Tutoriais_para_iniciantes">Tutoriais para iniciantes</h2>
<p>Nossa <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/HTML">Área de Aprendizado de HTML</a> apresenta vários módulos que ensinam HTML desde o início — sem necessidade de conhecimento prévio.</p>
<dl>
<dt><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML">Introdução ao HTML</a></dt>
<dd>Este módulo fornece uma base de conhecimento, permitindo que você acostume-se com os conceitos e sintaxes importantes, tais como aplicar HTML para texto, como criar <em>hyperlinks</em> e como usar HTML para estruturar uma página web.</dd>
<dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimídia e como incorporá-la</a></dt>
<dd>Este módulo explora como usar HTML para incluir multimídia em sua página web, incluindo as diferentes maneiras para incluir imagens, e como incorporar vídeos, áudios e até como colocar uma página inteira em outras páginas web.</dd>
<dt><a href="/en-US/docs/Learn/HTML/Tables">Tabelas HTML</a></dt>
<dd>Representar dados tabulares em uma página web de maneira entendível e acessível pode ser um desafio. Este módulo cobre marcação tabular básica, junto com outras funcionalidades mais complexas como legendas e sumários.</dd>
<dt><a href="/en-US/docs/Learn/HTML/Forms">Formulários HTML</a></dt>
<dd>Formulários são partes muito importantes na Web — proporcionam muitas das funcionalidades que você precisa para interagir em páginas web. Exemplos disso são registrar-se e conectar-se, enviar comentários, comprar produtos e muito mais. Este módulo lhe permite começar a criar as partes visíveis dos formulários, ou seja, as partes que os usuários interagem.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto">Usando HTML para resolver problemas comuns</a></dt>
<dd>Apresenta links para seções com conteúdo explicando como usar HTML para resolver problemas muito comuns, quando se cria uma página web: como trabalhar com títulos, agregar imagens ou vídeos, colocar ênfase em conteúdo, criar um formulário básico, etc.</dd>
</dl>
<h2 id="Tópicos_avançados">Tópicos avançados</h2>
<dl>
<dt class="landingPageList"><a href="/en-US/docs/Web/HTML/CORS_enabled_image">Habilitando Imagem CORS </a></dt>
<dd class="landingPageList">O atributo <code><a href="/en-US/docs/Web/HTML/Element/img#attr-crossorigin">crossorigin</a></code>, em combinação com um cabeçalho <a class="glossaryLink" href="/en-US/docs/Glossary/CORS">CORS</a> adequado, permite definir imagens pelo elemento {{HTMLElement("img")}} para ser carregado de outras fontes em um elemento {{HTMLElement("canvas")}} como se estivessem sendo carregados da fonte atual.</dd>
<dt class="landingPageList"><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">Configuração de atributos CORS</a></dt>
<dd class="landingPageList">Alguns elementos em HTML que suportam <a href="/en-US/docs/HTTP/Access_control_CORS">CORS</a>, como por exemplo o {{HTMLElement("img")}} ou {{HTMLElement("video")}}, têm o atributo <code>crossorigin</code> (a propriedade <code>crossOrigin</code>), que permite configurar as requisições CORS para os dados recebidos pelo elemento.</dd>
<dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Focus_management_in_HTML">Gerenciamento de foco em HTML</a></dt>
<dd class="landingPageList">O atributo DOM <code><a href="/en-US/docs/Web/API/Document/activeElement">activeElement</a></code> e o método DOM <code><a href="/en-US/docs/Web/API/Document/hasFocus">hasFocus()</a></code> lhe ajudam a melhorar a interação entre o usuário e os elementos da página.</dd>
<dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Link_types">Tipos de conexões</a></dt>
<dd class="landingPageList">Em HTML, vários tipos de links podem ser utilizados para realizar conexões entre documentos, como por exemplo <a href="/en-US/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/en-US/docs/Web/HTML/Element/area"><code><area></code></a> e <a href="/en-US/docs/Web/HTML/Element/link"><code><link></code></a>.</dd>
<dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Supported_media_formats">Formatos de arquivos suportados pelos elementos de áudio e vídeo em HTML</a></dt>
<dd class="landingPageList">Os elementos <a href="/en-US/docs/Web/HTML/Element/audio"><code><audio></code></a> e <a href="/en-US/docs/Web/HTML/Element/video"><code><video></code></a> permitem que você reproduza áudios e vídeos no seu HTML. Estes elementos fornecem uma alternativa nativa de recursos do navegador, parecidos com a do Adobe Flash Player e outros plug-ins.</dd>
<dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Using_the_application_cache">Usando o cachê de aplicação</a></dt>
<dd class="landingPageList">O cachê de aplicação tem como o objetivo executar a aplicação offline. Você pode usar a interface <strong>Application Cache</strong> (<em>AppCache</em>) para escolher elementos que o browser possa guardar, deixando-os disponíveis para usuários desconectados. As aplicações que forem armazenadas em cache podem ser utilizadas sem nenhum problema, mesmo que o usuário clique no botão de atualizar a página enquanto estiver offline.</dd>
<dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content">Pré-carregando conteúdo com rel="preload"</a></dt>
<dd class="landingPageList">O valor <code>preload</code> do atributo {{htmlattrxref("rel", "link")}} do elemento {{htmlelement("link")}} permite que você escreva solicitações de busca declarativas em seu elemento {{htmlelement("head")}} do HTML, especificando recursos que suas páginas vão utilizar logo após o carregamento. Você também pode necessitar que estes recursos sejam pré-carregados ao início do ciclo de execução da página e depois que o mecanismo de renderização do navegador comece a agir. Isso garante que estarão disponíveis mais cedo e que seja menos provável que sua página seja bloqueada do processo de renderizar. Isso aumenta a performance da página. Este artigo oferece um guia básico de como <code>preload</code> funciona.</dd>
</dl>
</div>
<div class="section">
<h2 class="Documentation" id="Referências">Referências</h2>
<dl>
<dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Reference">Referência do HTML </a></dt>
<dd class="landingPageList">HTML é formado de <strong>elementos</strong>, onde cada um deles pode ser modificado por alguns <strong>atributos</strong>. Documentos HTML são interconectados através de <a href="/en-US/docs/Web/HTML/Link_types">links</a>.</dd>
<dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Element">Referência dos Elementos HTML</a></dt>
<dd class="landingPageList">Navegue em uma lista com todos os elementos <a class="glossaryLink" href="/en-US/docs/Glossary/HTML">HTML</a>.</dd>
</dl>
<dl>
<dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Attributes">Referência de atributos em HTML</a></dt>
<dd class="landingPageList">Elementos em HTML possuem atributos. Estes configuram ou ajustam o funcionamento e o comportamento dos seus elementos de muitas maneiras.</dd>
<dt class="landingPageList"><a href="/pt-BR/docs/Web/HTML/Global_attributes">Atributos Globais</a></dt>
<dd class="landingPageList">Os atributos globais podem ser utilizados em todos os <a href="/en-US/docs/Web/HTML/Element">elementos HTML</a>, <em>mesmo aqueles que não são especificados como padrão</em>. Isso significa que qualquer elemento não padrão vai permitir estes atributos, mesmo que este retorne um documento HTML5 incompatível.</dd>
</dl>
<dl>
<dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Inline_elements">Elementos em linha</a> e <a href="/en-US/docs/Web/HTML/Block-level_elements">Elementos em nível de bloco</a></dt>
<dd class="landingPageList">Elementos HTML são normalmente elementos <em>inline</em> (em linha) ou <em>block-level</em> (em nível de bloco). Um elemento em linha ocupa somente o espaço limitado pelas tags que o definem. Um elemento em nível de bloco ocupa o espaço inteiro do elemento pai (container), portanto criando um bloco.</dd>
</dl>
<dl>
<dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Link_types">Tipos de Links</a></dt>
<dd class="landingPageList">No HTML, vários tipos de links podem ser utilizados para estabelecer e definir o relacionamento entre dois documentos. Os tipos de elementos de link que podem ser incluídos são <a href="/en-US/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/en-US/docs/Web/HTML/Element/area"><code><area></code></a> e <code><a href="/en-US/docs/Web/HTML/Element/link"><link></a></code>.</dd>
<dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Supported_media_formats">Formatos de mídia suportados pelos elementos vídeo e áudio do HTML</a></dt>
<dd class="landingPageList">Os elementos <a href="/en-US/docs/Web/HTML/Element/audio"><code><audio></code></a> e <a href="/en-US/docs/Web/HTML/Element/video"><code><video></code></a> permitem que você reproduza mídias de áudio e vídeo. Estes elementos fornecem uma alternativa nativa para o navegador reproduzir recursos similares aos encontrados no Adobe Flash e outros plug-ins.</dd>
<dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Kinds_of_HTML_content">Tipos de conteúdo HTML</a></dt>
<dd class="landingPageList">O HTML é composto de uma grande diversidade de conteúdos, e cada um pode ser usado em certos contextos e não ser permitido em outros. Da mesma forma, cada um tem um conjunto de outras categorias de conteúdos que podem ou não serem usadas dentro deles. Este é um guia destas categorias.</dd>
<dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">Os Modos Quirks e o Modo Padrão </a></dt>
<dd class="landingPageList">Informações sobre a história dos Modos <em>Quirks</em> e o Modo padrão.</dd>
</dl>
<h2 class="landingPageList" id="Tópicos_relacionados">Tópicos relacionados</h2>
<dl>
<dt><a href="/en-US/docs/Web/HTML/Applying_color">Aplicando cores em elementos HTML usando CSS</a></dt>
<dd>Este artigo mostra as principais formas de se usar CSS para adicionar cores ao seu conteúdo HTML, mostrando que partes dos documentos HTML podem ser coloridas e quais propriedades utilizar. Inclui exemplos e links para ferramentas de <em>palette-building</em>, entre outros.</dd>
</dl>
</div>
</div>
</section>
|
