diff options
Diffstat (limited to 'files/pt-br/learn/html/introduction_to_html/creating_hyperlinks/index.html')
| -rw-r--r-- | files/pt-br/learn/html/introduction_to_html/creating_hyperlinks/index.html | 324 |
1 files changed, 324 insertions, 0 deletions
diff --git a/files/pt-br/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/pt-br/learn/html/introduction_to_html/creating_hyperlinks/index.html new file mode 100644 index 0000000000..1abbfa20c4 --- /dev/null +++ b/files/pt-br/learn/html/introduction_to_html/creating_hyperlinks/index.html @@ -0,0 +1,324 @@ +--- +title: Criando hyperlinks +slug: Aprender/HTML/Introducao_ao_HTML/Criando_hyperlinks +tags: + - Guía + - HTML + - HTTP + - Iniciante + - Link + - URL + - absoluto + - href + - hyperlinks + - relativo +translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +--- +<div> +<p>{{LearnSidebar}}</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</p> +</div> + +<p class="summary">Os hiperlinks são realmente importantes — são o que torna a Web uma <em>web</em>. Este artigo mostra a sintaxe necessária para criar um link e discute as suas melhores práticas.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Pre-requisitos:</th> + <td> + <p>Familiaridade básica em HTML, conforme <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Getting_started">Começando com o HTML</a>. Formatação de texto em HTML, conforme <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML">Fundamentos do texto em HTML</a>.</p> + </td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Para aprender a implementar um hiperlink efetivamente e vincular vários arquivos juntos.</td> + </tr> + </tbody> +</table> + +<h2 id="O_que_é_um_hiperlink">O que é um hiperlink?</h2> + +<p>Os hiperlinks são uma das inovações mais interessantes que a Web oferece. Bem, eles são uma característica da Web desde o início, mas são o que torna a Web como ela é — eles nos permitem vincular nossos documentos a qualquer outro documento (ou outro recurso) que queremos. Também podemos vincular para partes específicas de documentos e podemos disponibilizar aplicativos em um endereço web simples (em contraste com aplicativos nativos, que devem ser instalados e tantas outras coisas). Qualquer conteúdo da web pode ser convertido em um link, para que, quando clicado (ou ativado de outra forma) fará com que o navegador vá para outro endereço ({{glossary("URL")}}).</p> + +<div class="note"> +<p dir="ltr" id="tw-target-text"><strong>Nota</strong>: Um URL pode apontar para arquivos HTML, arquivos de texto, imagens, documentos de texto, arquivos de vídeo e áudio e qualquer outra coisa que possa estar na Web. Se o navegador não souber exibir ou manipular o arquivo, ele perguntará se você deseja abrir o arquivo (nesse caso, o dever de abrir ou manipular o arquivo é passado para um aplicativo nativo adequado no dispositivo) ou fazer o download dele (nesse caso, você pode tentar lidar com isso mais tarde).</p> +</div> + +<p dir="ltr" id="tw-target-text">A página inicial da BBC, por exemplo, contém um grande número de links que apontam não apenas para várias notícias, mas também diferentes áreas do site (funcionalidade de navegação), páginas de login/registro (ferramentas do usuário) e muito mais.</p> + +<p><img alt="frontpage of bbc.co.uk, showing many news items, and navigation menu functionality" src="https://mdn.mozillademos.org/files/12405/bbc-homepage.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="Anatomia_de_um_link">Anatomia de um link</h2> + +<p dir="ltr" id="tw-target-text">Um link básico é criado envolvendo o texto (ou outro conteúdo, veja {{anch("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 <strong>Hypertext Reference</strong>, ou <strong>target</strong>) que conterá o endereço da Web para o qual você deseja que o link aponte.</p> + +<pre class="brush: html notranslate"><p>Estou criando um link para +<a href="https://www.mozilla.org/pt-BR/">a página inicial da Mozilla</a>. +</p></pre> + +<p dir="ltr" id="tw-target-text">Isso nos dá o seguinte resultado:</p> + +<p>Estou criando um link para <a class="ignore-external" href="https://www.mozilla.org/pt-BR/">a página inicial da Mozilla</a>.</p> + +<h3 id="Adicionando_informações_de_suporte_com_o_atributo_title">Adicionando informações de suporte com o atributo <em>title</em></h3> + +<p>Outro atributo que você pode querer adicionar aos seus links é o <code>title</code>; pretende-se que ele contenha informações úteis adicionais sobre o link, como, que tipo de informação a página contém ou informações importantes. Por exemplo:</p> + +<pre class="brush: html notranslate"><p>Estou criando um link para +<a href="https://www.mozilla.org/pt-BR/" + title="O melhor lugar para encontrar mais informações sobre a missão da Mozilla e como contribuir"> a página inicial da Mozilla</a>. +</p></pre> + +<p>Isto nos dá o seguinte resultado (o título aparecerá como uma dica de ferramenta quando o link estiver suspenso):</p> + +<p>Estou criando um link para <a class="ignore-external" href="https://www.mozilla.org/pt-BR/" title="O melhor lugar para encontrar mais informações sobre a missão da Mozilla e como contribuir">a página inicial da Mozilla</a>.</p> + +<div class="note"> +<p><strong>Nota</strong>: Um título de link só é revelado ao passar o mouse sobre ele, o que significa que as pessoas que dependem do teclado ou <em>touchscreen</em> para navegar em páginas web terão dificuldade em acessar a informação do título. Se a informação de um título é realmente importante para a usabilidade da página, então você deve apresentá-la de uma maneira que será acessível a todos os usuários, por exemplo, colocando-o no texto normal.</p> +</div> + +<p dir="ltr" id="tw-target-text">Aprendizagem na prática: criando seu próprio link de exemplo</p> + +<p dir="ltr" id="tw-target-text">Momento da aprendizagem na prática: gostaríamos que você criasse um documento HTML usando seu editor de código local (nosso <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">modelo inicial</a> seria interessante.)</p> + +<ul> + <li>Dentro do corpo do HTML, tente adicionar um ou mais parágrafos ou outros tipos de conteúdo que você já conhece.</li> + <li> + <p dir="ltr" id="tw-target-text">Transforme alguns dos conteúdos em links.</p> + </li> + <li> + <p dir="ltr" id="tw-target-text">Inclua atributos de título.</p> + </li> +</ul> + +<h3 id="Links_de_nível_de_bloco">Links de nível de bloco</h3> + +<p dir="ltr" id="tw-target-text">Como falamos anteriormente, você pode transformar qualquer conteúdo em um link, mesmo <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Getting_started#Elementos_em_bloco_versus_elementos_inline">elementos de nível de bloco</a>. Se você tiver uma imagem que queira transformar em um link, você pode simplesmente colocar a imagem entre as tags <code><a></a></code>.</p> + +<pre class="brush: html notranslate"><a href="https://www.mozilla.org/pt-BR/"> + <img src="mozilla-image.png" alt="Logotipo mozilla que liga a página inicial do mozilla"> +</a></pre> + +<div class="note"> +<p><strong>Nota</strong>: Você descobrirá muito mais sobre o uso de imagens na Web em artigo posterior.</p> +</div> + +<h2 dir="ltr" id="Um_guia_rápido_sobre_URLs_e_caminhos">Um guia rápido sobre URLs e caminhos</h2> + +<p dir="ltr" id="tw-target-text">Para entender completamente os destinos de links, você precisa entender URLs e caminhos de arquivos. Esta seção fornece as informações que você precisa para conseguir isso.</p> + +<p>Um URL ou <em>Uniform Resource Locator</em> é simplesmente uma sequência de texto que define onde algo está localizado na Web. Por exemplo, a página inicial em inglês da Mozilla está localizada em <code>https://www.mozilla.org/en-US/</code>.</p> + +<p>Os URLs usam caminhos para encontrar arquivos. Os caminhos especificam onde, no explorador de arquivos, o recurso que você está interessado está localizado. Vejamos um exemplo simples de uma estrutura de diretório (veja o diretório de <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/creating-hyperlinks">criação de hiperlinks</a>).</p> + +<p><img alt="A simple directory structure. The parent directory is called creating-hyperlinks and contains two files called index.html and contacts.html, and two directories called projects and pdfs, which contain an index.html and a project-brief.pdf file, respectively" src="https://mdn.mozillademos.org/files/12409/simple-directory.png" style="display: block; margin: 0 auto;"></p> + +<p>A raiz dessa estrutura de diretório é chamada de <code>criação de hiperlinks</code>. Ao trabalhar localmente com um site, você terá um diretório no qual ele todo esta dentro. Incluído na raiz, temos um arquivo <code>index.html</code> e um arquivo <code>contacts.html</code>. Em um site real, <code>index.html</code> seria nossa página inicial ou página de entrada (uma página da web que serve como ponto de entrada para um site ou uma seção específica de um site).</p> + +<p>Existem também dois diretórios dentro da nossa raiz — <code>pdfs</code> e <code>projects</code>. Cada um deles contém um único arquivo — um PDF (<code>projetos-brief.pdf</code>) e um arquivo <code>index.html</code>, respectivamente. Observe como é possível, felizmente, ter dois arquivos <code>index.html</code> em um projeto, desde que estejam em locais diferentes no sistema de arquivos. Muitos sites fazem isso. O segundo <code>index.html</code> poderia ser a página de destino principal para informações relacionadas ao projeto.</p> + +<ul> + <li> + <p><strong>Mesmo diretório: </strong>se você deseja incluir um hiperlink dentro de <code>index.html</code> (o <code>index.html</code> de nível superior) apontando para <code>contacts.html</code>, basta especificar o nome do arquivo ao qual deseja vincular, já que está no mesmo diretório que o arquivo atual. Portanto, o URL que você usaria seria <code>contacts.html</code>:</p> + + <pre class="brush: html notranslate"><p>Deseja entrar em contato com um membro da equipe específica? +Encontre detalhes sobre nossos serviços em nossa <a href="contato.html">página de contatos</a>.</p></pre> + </li> + <li> + <p><strong>Movendo-se para baixo em subdiretórios: </strong>se você quisesse incluir um hiperlink dentro do <code>index.html</code> apontando para o <code>projeto/index.html</code>, você precisaria descer no diretório de projetos antes de indicar o arquivo que deseja vincular. Isso é feito especificando o nome do diretório, depois uma barra inclinada e, em seguida, o nome do arquivo. Então o URL que você usaria seria <code>projeto/index.html</code>:</p> + + <pre class="brush: html notranslate"><p>Visite minha <a href="projects/index.html">pagina inicial do projeto</a>.</p></pre> + </li> + <li> + <p><strong>Movendo-se de volta para os diretórios pai: </strong>se você quisesse incluir uma hiperlink dentro de <code>projeto/index.html</code> apontando para pdfs/<code>projetos-brief.pdf</code>, você precisaria subir um nível de diretório e voltar para o diretório <code>pdf</code>. "Subir um diretório" é indicado usando dois pontos — <code>..</code> — então a URL que você usaria seria <code>../pdfs/project-brief.pdf</code></p> + + <pre class="brush: html notranslate"><p>Um link para o meu <a href="../pdfs/project-brief.pdf"> breve de projeto</a>.</p></pre> + </li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: Você pode combinar várias instâncias desses recursos em URLs complexas, se necessário, por exemplo<code>../../../complex/path/to/my/file.html</code>.</p> +</div> + +<h3 id="Fragmentos_de_documento">Fragmentos de documento</h3> + +<p>É possível vincular a uma parte específica de um documento HTML (conhecido como um <strong>fragmento de documento</strong>) e não apenas ao topo do documento. Para fazer isso, primeiro você deve atribuir um atributo "id" ao elemento ao qual deseja vincular. Normalmente faz sentido vincular a um título específico, então ficaria algo do tipo:</p> + +<pre class="brush: html notranslate"><h2 id="Mailing_address">Endereço de correspondência</h2></pre> + +<p>Em seguida, para vincular a esse <code>id</code> específico, você o incluirá no final do URL, precedido por um símbolo de hashtag/cerquilha, por exemplo:</p> + +<pre class="brush: html notranslate"><p>Quer escrever uma carta? Use nosso<a href="contacts.html#Mailing_address">endereço de correspondência</a>.</p></pre> + +<p>Você pode até usar apenas referência de fragmento do documento por si só para vincular a outra parte do mesmo documento:</p> + +<pre class="brush: html notranslate"><p>O <a href="#Mailing_address">endereço postal da empresa</a> pode ser encontrado na parte inferior desta página.</p></pre> + +<h3 id="URLs_absolutos_versus_relativos">URLs absolutos versus relativos</h3> + +<p>Dois termos que você encontrará na Web são URL <strong>absoluto</strong> e URL <strong>relativo</strong>:</p> + +<p><strong>URL absoluto: </strong>aponta para um local definido por sua localização absoluta na web, incluindo "protocolo" e "nome de domínio". Então, por exemplo, se uma página <code>index.html</code> for carregada para um diretório chamado <code>projeto</code> que fica dentro da raiz de um servidor web, e o domínio do site é <code>http://www.exemplo.com</code>, a página estará disponível em <code>http://www.exemplo.com/projeto/index.html</code> (ou mesmo apenas <code>http://www.exemplo.com/projeto/</code>, pois a maioria dos servidores web apenas procura uma página de destino como index.html para carregar, se não está especificado no URL.)</p> + +<p>Um URL absoluto sempre aponta para o mesmo local, não importa onde seja usado.</p> + +<p><strong>URL relativa: </strong>aponta para um local <em>relativo</em> ao arquivo do qual você está vinculando, mais como o que vimos na seção anterior. Por exemplo, se desejássemos vincular nosso arquivo de exemplo em <code>http://www.exemplo.com/projeto/index.html</code> para um arquivo PDF no mesmo diretório, o URL seria apenas o nome do arquivo — por exemplo, <code>project-brief.pdf</code> — nenhuma informação extra é necessária. Se o PDF estava disponível em um subdiretório dentro de <code>projects</code> chamado <code>pdfs</code>, o link relativo seria <code>pdfs/projeto-brief.pdf</code> (o URL absoluto equivalente seria <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>).</p> + +<p>Um URL relativo apontará para lugares diferentes, dependendo da localização real do arquivo ao qual você se refere — por exemplo, se tivermos movido nosso arquivo <code>index.html</code> para fora do diretório de projetos e para a raiz do site (no nível superior, não em qualquer diretório), o link relativo à URL referente a <code>pdfs/project-brief.pdf</code> agora apontaria para um arquivo localizado em <code>http://www.example.com/pdfs/project-brief.pdf</code>, não para um arquivo localizado em <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>.</p> + +<h2 id="Práticas_recomendadas">Práticas recomendadas</h2> + +<p>Existem algumas práticas recomendadas a seguir, ao escrever links. Vejamos.</p> + +<ul> +</ul> + +<h3 id="Use_palavras-chave_claras">Use palavras-chave claras</h3> + +<p>É muito fácil jogar links na sua página, porém somente isto não é suficiente. Precisamos tornar nossos links <em>acessíveis</em> a todos os leitores, independentemente do contexto atual e de quais ferramentas eles prefiram. Por exemplo:</p> + +<ul> + <li>Os usuários de leitores de telas gostam pular de link a outro link na página e ler links fora do contexto.</li> + <li>Os motores de busca usam o texto do link para indexar arquivos de destino, por isso é uma boa idéia incluir palavras-chave no texto do link para descrever efetivamente o que está sendo vinculado.</li> + <li>Os usuários normalmente deslizam sobre a página em vez de ler cada palavra, e são atraídos para recursos de página que se destacam, como links. Eles acharão os textos descritivos de links úteis.</li> +</ul> + +<p>Vejamos um exemplo específico:</p> + +<p><em>Texto de link </em><strong>correto</strong>:<em> </em><a href="https://firefox.com/">Baixe o Firefox</a></p> + +<pre class="brush: html notranslate"><p><a href="https://firefox.com/"> + Baixe o Firefox +</a></p></pre> + +<p><em>Texto de link</em> <strong>incorreto</strong>: <a href="https://firefox.com/">clique aqui</a> para baixar o Firefox</p> + +<pre class="brush: html notranslate"><p><a href="https://firefox.com/"> + clique aqui +</a> +para baixar o Firefox</p> +</pre> + +<p>Outras dicas:</p> + +<ul> + <li>Não repita o URL como parte do texto do link — Os URLs parecem feios e até são mais feios quando um leitor de tela os lê letra por letra.</li> + <li>Não diga "link" ou "links para" no texto do link — é apenas ruído. Os leitores de tela já dizem às pessoas que existe um link. Os usuários visuais também sabem que existe um link, porque eles geralmente são de cor diferente e sublinhados (esta convenção geralmente não deve ser quebrada, pois os usuários estão muito acostumados a isso).</li> + <li>Mantenha seu rótulo de link o mais curto possível — links longos irritam especialmente os usuários de leitores de tela, que têm que ouvir o texto inteiro lido.</li> + <li>Minimize instâncias em que o mesmo texto esteja ligado a diferentes lugares. Isso pode causar problemas para os usuários do leitor de tela, que muitas vezes mostrará uma lista dos links fora do contexto — vários links todos rotulados como "clique aqui", "clique aqui", "clique aqui"... seria confuso.</li> +</ul> + +<h3 id="Use_links_relativos_sempre_que_possível">Use links relativos sempre que possível</h3> + +<p>A partir da descrição acima, você pode pensar que é uma boa idéia usar apenas links absolutos o tempo todo; Afinal, eles não quebram quando uma página é movida como pode ocorrer com <em>links relativos</em>. No entanto, você deve usar <em>links relativos</em> sempre que possível ao vincular a outros locais dentro do mesmo site (ao vincular a outro site, você precisará usar um link absoluto):</p> + +<ul> + <li>Para começar, é muito mais fácil verificar seu código — os URL relativos geralmente são muito mais curtos que os URLs absolutos, o que torna o código de leitura muito mais fácil.</li> + <li>Em segundo lugar, é mais eficiente usar URLs relativas sempre que possível. Quando você usa um URL absoluto, o navegador começa procurando a localização real do servidor no Servidor de Nomes de Domínio "DNS"; veja <a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/Como_a_Web_funciona">Como a web funciona</a> para obter mais informações), então ele vai para esse servidor e encontra o arquivo que está sendo solicitado. Por outro lado, com um URL relativo, o navegador apenas procura o arquivo que está sendo solicitado, no mesmo servidor. Então, se você usa URLs absolutos para fazer o que os URLs relativos fariam, você está constantemente fazendo o seu navegador realizar trabalho extra, o que significa que ele irá executar de forma menos eficiente.</li> +</ul> + +<h3 id="Vinculando-se_a_recursos_que_não_sejam_HTML_—_deixe_indicadores_claros">Vinculando-se a recursos que não sejam HTML — deixe indicadores claros</h3> + +<p>Ao vincular a um arquivo que será baixado (como um documento PDF ou Word) ou transmitido (como vídeo ou áudio) ou ainda tiver outro efeito potencialmente inesperado (abrir uma janela pop-up ou carregar um filme Flash), você deve adicionar uma redação clara para reduzir qualquer confusão. Pode ser bastante irritante, por exemplo:</p> + +<ul> + <li>Se você estiver em uma conexão de baixa banda larga, clicar em um link e, em seguida, um download de muitos megabytes começa inesperadamente.</li> + <li>Se você não tiver instalado o Flash Player, clicar em um link e, de repente, ser levado para uma página que requer Flash Player.</li> +</ul> + +<p>Vejamos alguns exemplos, para ver que tipo de texto pode ser usado aqui:</p> + +<pre class="brush: html notranslate"><p><a href="http://www.example.com/large-report.pdf"> + Baixe o relatório de vendas (PDF, 10MB) +</a></p> + +<p><a href="http://www.example.com/video-stream/"> + Assista ao vídeo (o fluxo abre em separado, qualidade HD) +</a></p> + +<p><a href="http://www.example.com/car-game"> + Jogue o jogo de carro (requer Flash Player) +</a></p></pre> + +<h3 id="Use_o_atributo_de_download_ao_vincular_a_um_download">Use o atributo de download ao vincular a um download</h3> + +<p>Quando você está apontando para um arquivo que deve ser baixado em vez de ser aberto no navegador, poderá usar o atributo de download para fornecer um nome de arquivo salvo padrão. Aqui está um exemplo, com um link de <code>baixar</code> para a versão do Windows 39 do Firefox:</p> + +<pre class="brush: html notranslate"><a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=en-US" + download="firefox-39-installer.exe"> + Faça o download do Firefox 39 para Windows +</a></pre> + +<h2 id="Aprendizagem_ativa_criando_um_menu_de_navegação">Aprendizagem ativa: criando um menu de navegação</h2> + +<p>Para este exercício, gostaríamos que você vinculasse algumas páginas a um menu de navegação para criar um <em>site</em> com várias páginas. Essa é uma maneira comum de criá-los — a mesma estrutura de página é usada em todas elas, incluindo o mesmo menu de navegação. Portanto, quando os <em>links</em> são clicados, dá a impressão de que você permanece no mesmo lugar e que um conteúdo diferente está sendo criado.</p> + +<p>Você precisará fazer cópias locais das quatro páginas a seguir, tudo no mesmo diretório (veja também o diretório de <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-start">início do menu de navegação</a> para uma lista completa de arquivos):</p> + +<ul> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/index.html">index.html</a></li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/projects.html">projects.html</a></li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/pictures.html">pictures.html</a></li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/social.html">social.html</a></li> +</ul> + +<p>Você deve:</p> + +<ol> + <li>Adicionar uma lista não ordenada no local indicado em uma página, contendo os nomes das páginas a serem vinculadas. Um menu de navegação geralmente é apenas uma lista de <em>links</em>, então está semanticamente correto.</li> + <li>Transformar o nome de cada página em um <em>link</em> para essa página.</li> + <li>Copiar o menu de navegação para cada uma.</li> + <li>Em cada página, remova apenas o <em>link</em> para a mesma página - é confuso e inútil que uma página inclua um link para si mesma, e a falta de um <em>link</em> é um bom lembrete visual de qual página você está atualmente.</li> +</ol> + +<p>O exemplo final acabaria por parecer algo assim:</p> + +<p><img alt="An example of a simple HTML navigation menu, with home, pictures, projects, and social menu items" src="https://mdn.mozillademos.org/files/12411/navigation-example.png" style="display: block; margin: 0 auto;"></p> + +<div class="note"> +<p><strong>Note</strong>: Se você ficar preso, ou não tem certeza se o fez bem, você pode verificar o diretório de <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up">navegação-menu-marcado</a> para ver a resposta correta.</p> +</div> + +<h2 id="Links_de_e-mail">Links de e-mail</h2> + +<p>É possível criar <em>links</em> ou botões que, quando clicados, abrem uma nova mensagem de e-mail de saída em vez de vincular a um recurso ou página. Isso é feito usando o elemento {{HTMLElement("a")}} e o <code>mailto:</code> estrutura de URL.</p> + +<p>Na sua forma mais comum, um <code>mailto:</code> simplesmente indica o endereço de e-mail do destinatário pretendido. Por exemplo:</p> + +<pre class="brush: html notranslate"><a href="mailto:nowhere@mozilla.org">Enviar email para nenhum lugar</a> +</pre> + +<p>Isso resulta em um <em>link</em> que se parece com isto: <a href="mailto:nowhere@mozilla.org">Enviar e-mail para lugar nenhum.</a></p> + +<p>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" <em>links</em> que os usuários podem clicar para enviar um e-mail para um endereço escolhido.</p> + +<h3 id="Especificando_detalhes">Especificando detalhes</h3> + +<p>Além do endereço de e-mail, você pode fornecer outras informações. Na verdade, qualquer campo de cabeçalho de correio padrão pode ser adicionado ao URL do <code>mailto:</code> que você fornece. Os mais utilizados são "assunto", "cc" e "corpo" (que não é um campo de cabeçalho verdadeiro, mas permite que você especifique uma mensagem de conteúdo curta para o novo e-mail). Cada campo e seu valor são especificados como um termo de consulta.</p> + +<p>Aqui está um exemplo que inclui um cc, bcc, assunto e corpo de texto:</p> + +<pre class="brush: html notranslate"><a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&amp;subject=The%20subject%20of%20the%20email &amp;body=The%20body%20of%20the%20email"> + Aqui está um exemplo, incluindo um cc, bcc, assunto e corpo: +</a></pre> + +<div class="note"> +<p><strong>Nota:</strong> Os valores de cada campo devem ser codificados por URL, ou seja, com caracteres não imprimíveis (caracteres invisíveis, como guias, carriage returns e quebras de página) e espaços com <a href="http://en.wikipedia.org/wiki/Percent-encoding">percent-escaped</a>. Observe também o uso do ponto de interrogação (<code>?</code>) Para separar o URL principal dos valores do campo e do <em>e</em> comercial (&) para separar cada campo no <code>mailto:</code> URL. Essa é a notação de consulta padrão do URL. Leia <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data#The_GET_method">O método GET</a> para entender para que esta notação de consulta é mais comum.</p> +</div> + +<p>Aqui estão alguns outros exemplos de URLs de <code>mailto:</code></p> + +<ul> + <li><a href="mailto:">mailto:</a></li> + <li><a href="mailto:nowhere@mozilla.org">mailto:nowhere@mozilla.org</a></li> + <li><a href="mailto:nowhere@mozilla.org,nobody@mozilla.org">mailto:nowhere@mozilla.org,nobody@mozilla.org</a></li> + <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org</a></li> + <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject</a></li> +</ul> + +<h2 id="Resumo">Resumo</h2> + +<p>Por enquanto isto é tudo sobre links! Você retornará aos links mais tarde no curso quando começar a analisar o estilo deles. Em seguida, em HTML, retornaremos à semântica de texto e veremos alguns recursos mais avançados/incomuns que você achará úteis — No próximo artigo você verá a formatação avançada de texto.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</p> |