1

Olá!

Estou começando a aprender HTML agora e me deparei com a seguinte situação: ao selecionar um dos links do body abro uma nova guia e ao selecionar o outro link é aberta uma nova guia que substitui a anterior.

O comportamento que gostaria de reproduzir é que a cada link clicado fosse aberta uma nova guia.

Como posso fazer isso usando o html?

Obs.: Qualquer dica ou instrução de boas práticas é bem vindo.

Abaixo um código exemplo que estou usando.

<!DOCTYPE html>

<html>

    <head>
        <meta charset = "UTF-8">
        <title>Exemplo 04</title>
        <link rel="icon" type="image/png" href = "icone.png"/>
        <base href = "http://www.w3c.org/"/>
        <base target="_blank/"/>
        
        <style type="text/css">
            body{
                background-color: lightpink;
            }
            
            p{
                color: green;
            }
        </style>
    </head>
    
    <body>
        <h1>Título do conteúdo</h1>
        <p>Link - padrões: <a href="/standards/">link</a></p>
        <p>Link - google: <a href="http://www.google.com">link</a></p>
    </body> 


</html>

Desde já grata!

1

2 Respostas 2

4

Olá, tudo bem? Também sou novo em HTML 5 mas creio que sei a resposta. Para abrir o link em uma nova guia, basta adicionar o atributo target="" dentro da tag <a>, desta forma:

<p>Link - padrões: <a href="/standards/" target="_blank">link</a></p>

Nesse caso, preenchemos o target com _blank para abrir o link em uma nova aba em branco (acho que daí que veio o nome). O padrão, se você não especifica e não coloca _blank, é o _self, no qual o link abre na mesma página.

Eu uso o VSCode para programar e nele já mostra as diversas funcionalidades dentro do atributo target="", mas encontrei um artigo em inglês que fala sobre isso: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/target

Esse site de developers da Mozilla é muito bom (https://developer.mozilla.org/pt-BR/), eu recomendo pois além de uma boa documentação, existem alguns documentos em português do Brasil. Enfim, existem mais alguns usos para esse atributo, mas creio que para o que você está querendo fazer é isso. Espero ter ajudado!

1

Olá, boa tarde! Basta que você adicione dentro da sua tag <a> o atributo target="_blank", assim:

  <p>Link - padrões: <a href="/standards/" target = "_blanck">link</a></p>

Desta forma você está dizendo ao navegador que ao ser clicado o hyperlink tem como alvo (target) um nova aba em branco (blank).

Seu código deve ficar assim:

<!DOCTYPE html>

<html>

    <head>
        <meta charset = "UTF-8">
        <title>Exemplo 04</title>
        <link rel="icon" type="image/png" href = "icone.png"/>
        <base href = "http://www.w3c.org/"/>
        <base target="_blank/"/>
        
        <style type="text/css">
            body{
                background-color: lightpink;
            }
            
            p{
                color: green;
            }
        </style>
    </head>
    
    <body>
        <h1>Título do conteúdo</h1>
        <p>Link - padrões: <a href="/standards/" target="_blank">link</a></p>
        <p>Link - google: <a href="http://www.google.com" target="blank">link</a></p>
    </body> 


</html>

Espero ter ajudado!

Bons estudos!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .