From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../index.html | 203 +++++++++++++++++++++ files/pt-pt/learn/html/como/index.html | 153 ++++++++++++++++ 2 files changed, 356 insertions(+) create mode 100644 files/pt-pt/learn/html/como/adicionar_um_mapa_de_zona_clicavel_numa_imagem/index.html create mode 100644 files/pt-pt/learn/html/como/index.html (limited to 'files/pt-pt/learn/html/como') 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 +--- +
+

Aqui, nós explicamos como configurar um mapa de imagens, e algumas desvantagens para considerar primeiro.

+
+ + + + + + + + + + + + +
Pré-requisitos:Já deverá saber como criar um documento HTML básico e como adicionar imagens acessíveis para uma página da Web.
Objetivo:Learn how to make different regions of one image link to different pages.
+ +
+

This article discusses client-side image maps only. Do not use server-side image maps, which require the user to have a mouse.

+
+ +

Mapas de imagens, e as suas desvantagens

+ +

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.

+ +

Formerly, image maps were a popular navigation device, but it’s important to thoroughly consider their performance and accessibility ramifications.

+ +

Text links (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).

+ +

Como inserir uma imagem de mapa, devidamente

+ +

Passo 1: A imagem

+ +

Nem qualquer imagem é aceitável.

+ + + +

You insert your image much the same way as always (with an {{htmlelement("img")}} element and {{htmlattrxref("alt",'img')}} text). If the image is only present as a navigation device, you may write alt="", provided you furnish appropriate {{htmlattrxref("alt",'area')}} text in the {{htmlelement('area')}} elements later on.

+ +

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 usemap attribute:

+ +
<img
+  src="image-map.png"
+  alt=""
+  usemap="#example-map-1" />
+ +

Passo 2: Ativar os seus pontos de hotspots

+ +

In this step, put all your code inside a {{htmlelement('map')}} element. <map> only needs one attribute, the same map {{htmlattrxref("name","map")}} as you used in your usemap attribute above:

+ +
<map name="example-map-1">
+
+</map>
+ +

Inside the <map> element, we need {{htmlelement('area')}} elements. An <area> element corresponds to a single hotspot. To keep keyboard navigation intuitive, make sure the source order of <area> elements corresponds to the visual order of hotspots.

+ +

<area> elements are empty elements, but do require four attributes:

+ +
+
{{htmlattrxref('shape','area')}}
+
{{htmlattrxref('coords','area')}}
+
+

shape takes one of four values: circle, rect, poly, and default. (A default <area> 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 coords.

+ +
    +
  • For a circle, provide the center's x and y coordinates, followed by the length of the radius.
    • +
  • For a rectangle, provide the x/y coordinates of the upper-left and bottom-right corners.
    • +
  • For a polygon, to provide the x/y coordinates of each corner (so, at least six values).
    • +
+ +

Coordinates are given in CSS pixels.

+ +

In case of overlap, source order carries the day.

+
+
{{htmlattrxref('href','area')}}
+
The URL of the resource you’re linking to. You may leave this attribute blank if you don’t want the current area to link anywhere (say, if you’re making a hollow circle.)
+
{{htmlattrxref('alt','area')}}
+
+

A mandatory attribute, telling people where the link goes or what it does. alt text only displays when the image is unavailable. Please refer to our guidelines for writing accessible link text.

+ +

You may write alt="" if the href attribute is blank and the entire image already has an alt attribute.

+
+
+ +
<map name="example-map-1">
+  <area shape="circle" coords="200,250,25"
+    href="page-2.html" alt="circle example" />
+
+
+  <area shape="rect" coords="10, 5, 20, 15"
+    href="page-3.html" alt="rectangle example" />
+
+</map>
+ +

Passo 3: Certificar-se de que este funciona para toda a gente

+ +

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.

+ +

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.

+ +

If you must use image maps, you may want to look into Matt Stow's jQuery plugin. Alternatively, Dudley Storey demonstrates a way to use SVG for an image map effect, along with a subsequent combined SVG-raster hack for bitmap images.

+ +

Saiba mais

+ + + +
+ + + + + +
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 +--- +
{{LearnSidebar}}
+ +

As seguintes hiperligações apontam para soluções de problemas comuns diários que terá de resolver com HTML.

+ +
+
+

Estrutura básica

+ +

The most basic application of HTML is document structure. If you're new to HTML you should start with this.

+ + + +

Semântica de nível de texto básica

+ +

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.

+ + +
+ +
+

Hiperligações

+ +

One of the main reasons for HTML is make navigation easy with {{Glossary("hyperlink", "hyperlinks")}}, which can be used in many different ways:

+ + + +

Imagens e multimédia

+ + + +

Scripting e estilização

+ +

HTML only sets up document structure. To solve presentation issues, use {{glossary("CSS")}}, or use scripting to make your page interactive.

+ + + +

Conteúdo integrado

+ + +
+
+ +

Problemas incomuns ou avançados

+ +

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:

+ +
+
+

Formulários

+ +

Forms are a complex HTML structure made to send data from a webpage to a web server. We encourage you to go over our full dedicated guide. Here is where you should start:

+ + + +

Informação tabular

+ +

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:

+ + + +

Representação de dados

+ + + +

Interatividade

+ + +
+ +
+

Semântica de texto avançada

+ + + +

Imagens e multimédia avançadas

+ + + +

Internacionalização

+ +

HTML is not monolingual. It provides tools to handle common internationalization issues.

+ + + +

Desempenho

+ + +
+
+ +

     

-- cgit v1.2.3-54-g00ecf