initial commit

2 files changed, 356 insertions, 0 deletions

diff --git a/files/pt-pt/learn/html/como/adicionar_um_mapa_de_zona_clicavel_numa_imagem/index.html b/files/pt-pt/learn/html/como/adicionar_um_mapa_de_zona_clicavel_numa_imagem/index.html
new file mode 100644
index 0000000000..d70dd147fc
--- /dev/null
+++ b/files/pt-pt/learn/html/como/adicionar_um_mapa_de_zona_clicavel_numa_imagem/index.html
@@ -0,0 +1,203 @@
+---
+title: Adicionar um mapa de zona clicável numa imagem
+slug: Learn/HTML/Como/Adicionar_um_mapa_de_zona_clicavel_numa_imagem
+translation_of: Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image
+---
+<div class="summary">
+<p>Aqui, nós explicamos como configurar um mapa de imagens, e algumas desvantagens para considerar primeiro.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos:</th>
+   <td>Já deverá saber como <a href="/pt-PT/docs/Learn/Comecar_com_a_Web">criar um documento HTML básico</a> e como <a href="/pt-PT/docs/Learn/HTML/Multimedia_and_embedding/Imagens_em_HTML">adicionar imagens acessíveis para uma página da Web.</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Learn how to make different regions of one image link to different pages.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="warning">
+<p>This article discusses client-side image maps only. Do not use server-side image maps, which require the user to have a mouse.</p>
+</div>
+
+<h2 id="Mapas_de_imagens_e_as_suas_desvantagens">Mapas de imagens, e as suas desvantagens</h2>
+
+<p>When you nest an image inside {{htmlelement('a')}}, the entire image links to one webpage. An image map, on the other hand, contains several active regions (called "hotspots") that each link to a different resource.</p>
+
+<p>Formerly, image maps were a popular navigation device, but it’s important to thoroughly consider their performance and accessibility ramifications.</p>
+
+<p><a href="https://developer.mozilla.org/en-US/Learn/HTML/Howto/Create_a_hyperlink">Text links</a> (perhaps styled with CSS) are preferable to image maps for several reasons: text links are lightweight, maintainable, often more SEO-friendly, and support accessibility needs (e.g., screen readers, text-only browsers, translation services).</p>
+
+<h2 id="Como_inserir_uma_imagem_de_mapa_devidamente">Como inserir uma imagem de mapa, devidamente</h2>
+
+<h3 id="Passo_1_A_imagem">Passo 1: A imagem</h3>
+
+<p>Nem qualquer imagem é aceitável.</p>
+
+<ul>
+ <li>The image must make it clear what happens when people follow image links. <code>alt</code> text is mandatory, of course, but many people never see it.</li>
+ <li>The image must clearly indicate where hotspots begin and end.</li>
+ <li>Hotspots must be large enough to tap comfortably, at any viewport size. How large is large enough? <a href="http://uxmovement.com/mobile/finger-friendly-design-ideal-mobile-touch-target-sizes/">72 × 72 CSS pixels is a good minimum,</a> with additional generous gaps between touch targets. The map of the world at <a href="http://www.goethe-verlag.com/book2/">50languages.com</a> (as of time of writing) illustrates the problem perfectly. It’s much easier to tap Russia or North America than Albania or Estonia.</li>
+</ul>
+
+<p>You insert your image <a href="http://developer.mozilla.org/en-US/Learn/HTML/Howto/Add_images_to_a_webpage">much the same way as always</a> (with an {{htmlelement("img")}} element and {{htmlattrxref("alt",'img')}} text). If the image is only present as a navigation device, you may write <code>alt=""</code>, provided you furnish appropriate {{htmlattrxref("alt",'area')}} text in the {{htmlelement('area')}} elements later on.</p>
+
+<p>You will need a special {{htmlattrxref("usemap","img")}} attribute. Come up with a unique name, containing no spaces, for your image map. Then assign that name (preceded by a hash) as the value for the <code>usemap</code> attribute:</p>
+
+<pre class="brush: html">&lt;img
+  src="image-map.png"
+  alt=""
+  usemap="#example-map-1" /&gt;</pre>
+
+<h3 id="Passo_2_Ativar_os_seus_pontos_de_hotspots">Passo 2: Ativar os seus pontos de <em>hotspots</em></h3>
+
+<p>In this step, put all your code inside a {{htmlelement('map')}} element. <code>&lt;map&gt;</code> only needs one attribute, the same map {{htmlattrxref("name","map")}} as you used in your <code>usemap</code> attribute above:</p>
+
+<pre class="brush: html">&lt;map name="example-map-1"&gt;
+
+&lt;/map&gt;</pre>
+
+<p>Inside the <code>&lt;map&gt;</code> element, we need {{htmlelement('area')}} elements. An <code>&lt;area&gt;</code> element corresponds to a single hotspot. To keep keyboard navigation intuitive, make sure the source order of <code>&lt;area&gt;</code> elements corresponds to the visual order of hotspots.</p>
+
+<p><code>&lt;area&gt;</code> elements are empty elements, but do require four attributes:</p>
+
+<dl>
+ <dt>{{htmlattrxref('shape','area')}}</dt>
+ <dt>{{htmlattrxref('coords','area')}}</dt>
+ <dd>
+ <p><code>shape</code> takes one of four values: <code>circle</code>, <code>rect</code>, <code>poly</code>, and <code>default</code>. (A <code>default</code> <code>&lt;area&gt;</code> occupies the entire image, minus any other hotspots you’ve defined.) The shape you choose determines the coordinate information you’ll need to provide in <code>coords</code>.</p>
+
+ <ul>
+  <li>For a circle, provide the center's x and y coordinates, followed by the length of the radius.</li>
+  <li>For a rectangle, provide the x/y coordinates of the upper-left and bottom-right corners.</li>
+  <li>For a polygon, to provide the x/y coordinates of each corner (so, at least six values).</li>
+ </ul>
+
+ <p>Coordinates are given in CSS pixels.</p>
+
+ <p>In case of overlap, source order carries the day.</p>
+ </dd>
+ <dt>{{htmlattrxref('href','area')}}</dt>
+ <dd>The URL of the resource you’re linking to. You may leave this attribute blank if you <em>don’t</em> want the current area to link anywhere (say, if you’re making a hollow circle.)</dd>
+ <dt>{{htmlattrxref('alt','area')}}</dt>
+ <dd>
+ <p>A mandatory attribute, telling people where the link goes or what it does. <code>alt</code> text only displays when the image is unavailable. Please refer to our <a href="https://developer.mozilla.org/en-US/Learn/HTML/Howto/Create_a_hyperlink#Writing_accessible_link_text">guidelines for writing accessible link text.</a></p>
+
+ <p>You may write <code>alt=""</code> if the <code>href</code> attribute is blank <em>and</em> the entire image already has an <code>alt</code> attribute.</p>
+ </dd>
+</dl>
+
+<pre class="brush: html">&lt;map name="example-map-1"&gt;
+  &lt;area shape="circle" coords="200,250,25"
+    href="page-2.html" alt="circle example" /&gt;
+
+
+  &lt;area shape="rect" coords="10, 5, 20, 15"
+    href="page-3.html" alt="rectangle example" /&gt;
+
+&lt;/map&gt;</pre>
+
+<h3 id="Passo_3_Certificar-se_de_que_este_funciona_para_toda_a_gente">Passo 3: Certificar-se de que este funciona para toda a gente</h3>
+
+<p>You aren’t done until you test image maps rigorously on many browsers and devices. Try following links with your keyboard alone. Try turning images off.</p>
+
+<p>If your image map is wider than about 240px, you’ll need to make further adjustments to make your website responsive. It's not enough to resize the image for small screens, because the coordinates stay the same and no longer match the image.</p>
+
+<p>If you must use image maps, you may want to look into <a href="https://github.com/stowball/jQuery-rwdImageMaps">Matt Stow's jQuery plugin.</a> Alternatively, Dudley Storey demonstrates a way to <a href="http://thenewcode.com/696/Using-SVG-as-an-Alternative-To-Imagemaps">use SVG for an image map effect,</a> along with a subsequent <a href="http://thenewcode.com/760/Create-A-Responsive-Imagemap-With-SVG">combined SVG-raster hack</a> for bitmap images.</p>
+
+<h2 id="Saiba_mais">Saiba mais</h2>
+
+<ul>
+ <li>{{htmlelement("img")}}</li>
+ <li>{{htmlelement("map")}}</li>
+ <li>{{htmlelement("area")}}</li>
+ <li><a href="http://www.maschek.hu/imagemap/imgmap">Online image map editor</a></li>
+ <li><a href="http://blog.goolara.com/2014/06/05/image-maps-revisited/">Advice on handling email clients</a></li>
+</ul>
+
+<div id="SL_balloon_obj" style="display: block;">
+<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%; opacity: 0; display: block; left: -8px; top: -25px; transition: visibility 2s ease 0s, opacity 2s linear 0s;"> </div>
+
+<div id="SL_shadow_translation_result2" style="display: none;"> </div>
+
+<div id="SL_shadow_translator" style="display: none;">
+<div id="SL_planshet">
+<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
+
+<div id="SL_Bproviders">
+<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div>
+
+<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div>
+
+<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div>
+</div>
+
+<div id="SL_alert_bbl" style="display: none;">
+<div id="SLHKclose" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
+
+<div id="SL_alert_cont"> </div>
+</div>
+
+<div id="SL_TB">
+<table id="SL_tables">
+ <tbody>
+  <tr>
+   <td class="SL_td"><input></td>
+   <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td>
+   <td class="SL_td">
+    <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Alternar Idiomas"> </div>
+   </td>
+   <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td>
+   <td class="SL_td">
+    <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Ouça"> </div>
+   </td>
+   <td class="SL_td">
+    <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Copiar"> </div>
+   </td>
+   <td class="SL_td">
+    <div id="SL_bbl_font_patch"> </div>
+
+    <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Tamanho da fonte"> </div>
+   </td>
+   <td class="SL_td">
+    <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Ajuda"> </div>
+   </td>
+   <td class="SL_td">
+    <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Fixar a janela de pop-up"> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</div>
+
+<div id="SL_shadow_translation_result" style=""> </div>
+
+<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
+
+<div id="SL_player2"> </div>
+
+<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div>
+
+<div id="SL_Balloon_options" style="background: rgb(255, 255, 255)  repeat scroll 0% 0%;">
+<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
+
+<table id="SL_tbl_opt" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td><input></td>
+   <td>
+    <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"> </div>
+   </td>
+   <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td>
+   <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</div>
+</div>
diff --git a/files/pt-pt/learn/html/como/index.html b/files/pt-pt/learn/html/como/index.html
new file mode 100644
index 0000000000..abbfb425f3
--- /dev/null
+++ b/files/pt-pt/learn/html/como/index.html
@@ -0,0 +1,153 @@
+---
+title: Utilizar HTML para resolver problemas comuns
+slug: Learn/HTML/Como
+tags:
+  - HTML
+  - Programação Scripting
+translation_of: Learn/HTML/Howto
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">As seguintes hiperligações apontam para soluções de problemas comuns diários que terá de resolver com HTML.</p>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Estrutura_básica">Estrutura básica</h3>
+
+<p>The most basic application of HTML is document structure. If you're new to HTML you should start with this.</p>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document">How to create a basic HTML document</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Divide_a_webpage_into_logical_sections">How to divide a webpage into logical sections</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#The_basics_headings_and_paragraphs">How to set up a proper structure of headings and paragraphs</a></li>
+</ul>
+
+<h3 id="Semântica_de_nível_de_texto_básica">Semântica de nível de texto básica</h3>
+
+<p>HTML specializes in providing semantic information for a document, so HTML answers many questions you might have about how to get your message across best in your document.</p>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">How to create list of items with HTML</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">How to stress or emphasize content</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">How to indicate that text is important</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Representing_computer_code">How to display computer code with HTML</a></li>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#Annotating_images_with_figures_and_figure_captions">How to annotate images and graphics</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations">How to mark abbreviations and make them understandable</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Quotations">How to add quotations and citations to webpages</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Define_terms_with_HTML">How to define terms with HTML</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="Hiperligações">Hiperligações</h3>
+
+<p>One of the main reasons for HTML is make navigation easy with {{Glossary("hyperlink", "hyperlinks")}}, which can be used in many different ways:</p>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">How to create a hyperlink</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Active_learning_creating_a_navigation_menu">How to create a table of contents with HTML</a></li>
+</ul>
+
+<h3 id="Imagens_e_multimédia">Imagens e 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">How to add images to a webpage</a></li>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">How to add video content to a webpage</a></li>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">How to add audio content to a webpage</a></li>
+</ul>
+
+<h3 id="Scripting_e_estilização"><em>Scripting </em>e estilização</h3>
+
+<p>HTML only sets up document structure. To solve presentation issues, use {{glossary("CSS")}}, or use scripting to make your page interactive.</p>
+
+<ul>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML">How to use CSS within a webpage</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Use_JavaScript_within_a_webpage">How to use JavaScript within a webpage</a></li>
+</ul>
+
+<h3 id="Conteúdo_integrado">Conteúdo integrado</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">How to embed a webpage within another webpage</a></li>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#The_%3Cembed%3E_and_%3Cobject%3E_elements">How to add Flash content within a webpage</a></li>
+</ul>
+</div>
+</div>
+
+<h2 id="Problemas_incomuns_ou_avançados">Problemas incomuns ou avançados</h2>
+
+<p>Beyond the basics, HTML is very rich and offers advanced features for solving complex problems. These articles help you tackle the less common use cases you may face:</p>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Formulários">Formulários</h3>
+
+<p>Forms are a complex HTML structure made to send data from a webpage to a web server. We encourage you to go over our <a href="/en-US/docs/Web/Guide/HTML/Forms">full dedicated guide</a>. Here is where you should start:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form">How to create a simple Web form</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form">How to structure a Web form</a></li>
+</ul>
+
+<h3 id="Informação_tabular">Informação tabular</h3>
+
+<p>Some information, called tabular data, needs to be organized into tables with columns and rows. It's one of the most complex HTML structures, and mastering it is not easy:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_a_data_spreadsheet">How to create a data spreadsheet</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Make_HTML_tables_accessible">How to make HTML tables accessible</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Optimize_HTML_table_rendering">How to optimize HTML table rendering</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">How to represent numeric values with HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">How to use data attributes</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Associate_human_readable_content_with_arbitrary_computer_data_structures">How to associate human readable content with arbitrary computer data structures</a></li>
+</ul>
+
+<h3 id="Interatividade">Interatividade</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_collapsible_content_with_HTML">How to create collapsible content with HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_context_menus_to_a_webpage">How to add context menus to a webpage</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_dialog_boxes_with_HTML">How to create dialog boxes with HTML</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="Semântica_de_texto_avançada">Semântica de texto avançada</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Take_control_of_HTML_line_breaking">How to take control of HTML line breaking</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Mark_text_insertion_and_deletion">How to mark changes (added and removed text)</a></li>
+</ul>
+
+<h3 id="Imagens_e_multimédia_avançadas">Imagens e multimédia avançadas</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">How to add responsive image to a webpage</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">How to add vector image to a webpage</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">How to add a hit map on top of an image</a></li>
+</ul>
+
+<h3 id="Internacionalização">Internacionalização</h3>
+
+<p>HTML is not monolingual. It provides tools to handle common internationalization issues.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_multiple_languages_into_a_single_webpage">How to add multiple languages into a single webpage</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Handle_Japanese_ruby_characters">How to handle Japanese ruby characters</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Display_time_and_date_with_HTML">How to display time and date with HTML</a></li>
+</ul>
+
+<h3 id="Desempenho">Desempenho</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages">How to author fast-loading HTML pages</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>