blob: 9ddbd6516abac6cc15ce466d2a25617a901d36e9 (
plain)
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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
---
title: Use HTML para resolver problemas comuns
slug: Learn/HTML/Howto
translation_of: Learn/HTML/Howto
original_slug: Aprender/HTML/como-fazer
---
<div>{{LearnSidebar}}</div>
<p class="summary">Os links a seguir apontam para soluções de problemas comuns que você precisará resolver utilizando HTML.</p>
<div class="column-container">
<div class="column-half">
<h3 id="Estrutura_Básica">Estrutura Básica</h3>
<p>A aplicação mais básica de HTML é na estrutura de um documento. Se você está começando no HTML, deve começar por aqui.</p>
<ul>
<li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document">Como criar um documento básico HTML</a></li>
<li><a href="/en-US/docs/Learn/HTML/Howto/Divide_a_webpage_into_logical_sections">Como separar uma página web em seções lógicas</a></li>
<li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#The_basics_headings_and_paragraphs">Como configurar uma estrutura adequada de cabeçalhos e parágrafos</a></li>
</ul>
<h3 id="Semântica_básica_em_nível_de_texto">Semântica básica em nível de texto</h3>
<p>O HTML se especializou em fornecer informação semântica para um documento, portanto o HTML responde muitas questões que você talvez tenha sobre a melhor maneira de passar sua mensagem em um documento.</p>
<ul>
<li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">Como criar uma lista de itens com HTML</a></li>
<li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">Como destacar ou enfatizar conteúdo</a></li>
<li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">Como indicar que um texto é importante</a></li>
<li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Representing_computer_code">Como mostrar código de computador com HTML</a></li>
<li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#Annotating_images_with_figures_and_figure_captions">Como adicionar anotações em imagens e figuras</a></li>
<li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations">Como assinalar abreviaturas e torná-las inteligíveis</a></li>
<li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Quotations">Como adicionar citações em páginas web</a></li>
<li><a href="/en-US/docs/Learn/HTML/Howto/Define_terms_with_HTML">Como definir termos com HTML</a></li>
</ul>
</div>
<div class="column-half">
<h3 id="Hiperlinks">Hiperlinks</h3>
<p>Uma das principais atribuições do HTML é tornar a navegação mais fácil com {{Glossary("hyperlink", "hiperlinks")}}, que podem ser usados de diferentes formas:</p>
<ul>
<li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Como criar um hiperlink</a></li>
<li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Active_learning_creating_a_navigation_menu">Como criar um menu de navegação com HTML </a></li>
</ul>
<h3 id="Imagens_multimídia">Imagens & multimídia</h3>
<ul>
<li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#How_do_we_put_an_image_on_a_webpage">Como adicionar imagens em uma página web</a></li>
<li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Como adicionar conteúdo de vídeo em uma página web</a></li>
<li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Como adicionar conteúdo de áudio em uma página web</a></li>
</ul>
<h3 id="Scripts_estilos">Scripts & estilos</h3>
<p>O HTML só configura a estrutura do documento. Para resolver problemas de apresentação, use o {{glossary("CSS")}} ou use scripts para tornar sua página interativa.</p>
<ul>
<li><a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML">Como usar CSS em uma página web</a></li>
<li><a href="/en-US/docs/Learn/HTML/Howto/Use_JavaScript_within_a_webpage">Como usar JavaScript em uma página web</a></li>
</ul>
<h3 id="Conteúdo_embutido">Conteúdo embutido</h3>
<ul>
<li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">Como embutir uma página web dentro de outra página web</a></li>
<li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#The_%3Cembed%3E_and_%3Cobject%3E_elements">Como adicionar conteúdo em Flash dentro de uma página</a></li>
</ul>
</div>
</div>
<h2 id="Problemas_incomuns_ou_avançados">Problemas incomuns ou avançados</h2>
<p>Além do básico, o HTML é muito rico e oferece recursos avançados para resolver problemas complexos. Estes artigos lhe ajudam a lidar com casos de uso menos comuns que você possa encontrar:</p>
<div class="column-container">
<div class="column-half">
<h3 id="Formulários">Formulários</h3>
<p>Formulários são uma estrutura complexa em HTML, criada para enviar dados de uma página web para um servidor web. Nós lhe encorajamos a conhecer nosso <a href="/en-US/docs/Web/Guide/HTML/Forms">guia completo</a>. Eis os tópicos onde você deve começar:</p>
<ul>
<li><a href="/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form">Como criar um formulário Web simples</a></li>
<li><a href="/en-US/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form">Como estruturar um formulário Web</a></li>
</ul>
<h3 id="Informação_tabular">Informação tabular</h3>
<p>Algumas informações, chamadas de dados tabulares, precisam ser organizadas em tabelas com colunas e linhas. Esta é uma das estruturas HTML mais complexas, e dominá-la não é fácil:</p>
<ul>
<li><a href="/en-US/docs/Learn/HTML/Howto/Create_a_data_spreadsheet">Como criar uma planilha de dados</a></li>
<li><a href="/en-US/docs/Learn/HTML/Howto/Make_HTML_tables_accessible">Como tornar as tabelas HTML acessíveis</a></li>
<li><a href="/en-US/docs/Learn/HTML/Howto/Optimize_HTML_table_rendering">Como otimizar a renderização de tabelas HTML</a></li>
</ul>
<h3 id="Representação_de_dados">Representação de dados</h3>
<ul>
<li><a href="/en-US/docs/Learn/HTMLHowto/Represent_numeric_values_with_HTML">Como representar valores numéricos em HTML</a></li>
<li><a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Como usar atributos de dados</a></li>
<li><a href="/en-US/docs/Learn/HTML/Howto/Associate_human_readable_content_with_arbitrary_computer_data_structures">Como associar conteúdo legível por humanos com estruturas arbitrárias de dados</a></li>
</ul>
<h3 id="Interatividade">Interatividade</h3>
<ul>
<li><a href="/en-US/docs/Learn/HTML/Howto/Create_collapsible_content_with_HTML">Como criar conteúdo recolhível em HTML</a></li>
<li><a href="/en-US/docs/Learn/HTML/Howto/Add_context_menus_to_a_webpage">Como adicionar menus contextuais em uma página web</a></li>
<li><a href="/en-US/docs/Learn/HTML/Howto/Create_dialog_boxes_with_HTML">Como criar caixas de diálogo em HTML</a></li>
</ul>
</div>
<div class="column-half">
<h3 id="Semântica_avançada_de_texto">Semântica avançada de texto</h3>
<ul>
<li><a href="/en-US/docs/Learn/HTML/Howto/Take_control_of_HTML_line_breaking">Como controlar quebras de linha em HTML</a></li>
<li><a href="/en-US/docs/Learn/HTML/Howto/Mark_text_insertion_and_deletion">Como destacar mudanças (texto adicionado ou removido)</a></li>
</ul>
<h3 id="Imagens_multimídia_avançados">Imagens & multimídia avançados</h3>
<ul>
<li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Como adicionar imagens responsivas em uma página web</a></li>
<li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Como adicionar imagens vetoriais em uma página web</a></li>
<li><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">Como adicionar um mapa de links em uma imagem</a></li>
</ul>
<h3 id="Internacionalização">Internacionalização</h3>
<p>HTML não é unilíngue. A linguagem fornece ferramentas para lidar com problemas comuns de internacionalização.</p>
<ul>
<li><a href="/en-US/docs/Learn/HTML/Howto/Add_multiple_languages_into_a_single_webpage">Como adicionar múltiplos idiomas em uma única página web</a></li>
<li><a href="/en-US/docs/Learn/HTML/Howto/Handle_Japanese_ruby_characters">Como lidar com caracteres ruby em japonês</a></li>
<li><a href="/en-US/docs/Learn/HTML/Howto/Display_time_and_date_with_HTML">Como mostrar data e hora em HTML</a></li>
</ul>
<h3 id="Performance">Performance</h3>
<ul>
<li><a href="/en-US/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages">Como criar páginas HTML que carregam rápido</a></li>
</ul>
</div>
</div>
<p><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span> </p>
|
