Curso de HTML Completo: Aula 07 - Links

E aí é muito bem pessoal na sala nós vamos aprender sobre links uma das partes mais importantes Com certeza aqui do HTML do desenvolvimento de sites que a capacidade de a gente ir de um documento para o outro um link em HTML também é chamado de hiperlink onde você vai clicar né num texto numa imagem alguma coisa que ele cava e ele vai te levar para uma outra página então isso serve para a gente ir navegar na internet os links e nós vamos entender aqui como eles funcionam tanto com caminhos absolutos como com caminhos relativos nós vamos entender esses conceitos também nessa aula eu tô aqui com uma página que eu fiz aqui simplesinho né um título um página principal até deixar um comentário que a gente aprender aula passada Vamos aprender links e um parágrafo seja bem-vindo na página principal eu vou colocar também aqui pessoal uma tag HR que aquela linha né E vou colocar mais uma tag HR aqui para formar uma ó e aqui no meio eu vou colocar um link a tag que nós usamos para fazer um link é a tag a assim a de gancho ou Âncora o atributo que a gente coloca sempre para indicar qual é a página que a gente quer ir é HF HF assim igual e as suas duplas E aí fecha a tag ar então a abre a tag a HF aqui dentro a gente vai colocar o caminho do site que a gente quer então eu vou dar um exemplo aqui ó https//google. com então eu tô falando que eu quero ir para o site do Google e aqui dentro das tags entre abertura e fechamento da tag isso aqui é a abertura e esse aqui é o fechamento da tag certo aqui no meio eu vou colocar assim Ir para o Google certo vou dar um contra o s Então eu tenho link aqui ó Ir para o Google certo se eu clicar aqui olha só o que vai acontecer eu o Google ele me direcionou para esse documento para essa página certo só devo voltar volto lá para minha página principal então Aqui Nós criamos um link certo um link para um caminho absoluto um caminho absoluto seria quando a gente coloca o caminho completo de um site para ele ser direcionado eu poderia colocar aqui ó programação web. com.

br certo ir para o site Vou colocar sim clicar aqui Olá foi para a página do programação web certo então assim que a gente coloca o link bem simples né ah HF dentro da garrafa gente coloca qual o caminho que a gente quer ir aí o texto que vai aparecer aqui para o usuário naquela ele passa o mouse ele fica com esse símbolo de mãozinha lá embaixo ele marca para que site ele vai ser direcionado E aí fechamento agora algo que é interessante pessoal é que quando eu clico aqui para site ele tá abrindo esse site na mesma página onde eu tava né como se ele tivesse trocar Ah mas isso eu quisesse que esse site ele abrisse numa nova aba aí a gente precisa colocar um novo atributo aqui que se chama target assim ó target igual e "duplas target quer dizer alvo Se eu colocar target Bank assim underline blynk assim dessa forma eu tô indicando que eu quero que esse site aqui ele seja aberto em uma nova aba bom Então olha só o que que vai acontecer cliquei e para site repare que eu continuei com a minha página que ele abriu uma nova então ele abre uma aba adicional no meu navegador isso é interessante você usar esse target Blank quando você não quer que o usuário saia do teu site que ele tá navegando simplesmente ele abre uma coisa paralela para que ele possa Navegar certo isso daqui pessoal quando a gente indica então o caminho aqui no HF completo isso aqui é chamado de link absoluto ou URL absoluta certo agora existe um outro tipo mudar aqui um BR para uma mais uma linha a gente aprendeu já a quebra de linha né vou dar um BR aqui e eu vou colocar um outro link aqui ó que é de um caminho relativo o que que é um caminho relativo pessoal é quando você quer que vá para uma outra página dentro do próprio projeto que você tá dentro do teu documento Olá tudo aqui um control B aqui no vs code vai abrir aqui a pastinha que nós estamos trabalhando que a aula HTML né olha só o que que eu vou fazer vou criar um novo arquivo clicando aqui e nem o Firewall criar um novo arquivo e vou chamar essa página de sobre. HTML eu já inclusive abriu o seu ladinho aqui para nós o sobre. HTML eu vou colocar aqui HTML5 né para ele preencher aqui um padrãozinho tem um out Z para ele ficar tudo aqui na nesse Quadradinho que a gente enxergar vou mudar que o idioma para pt-br e aqui eu vou colocar no Bari né aqui um H1 a escrita assim sobre nós como se fosse uma página de sobre nós certo e vou colocar aqui um p vezes três Lauren só para a gente colocar algum conteúdo aqui beleza salvei aqui a nossa página soube então eu tenho minha página index que a minha página principal e eu quero que vá para a página sobre como é que eu vou fazer eu só preciso indicar que eu quero ir para página sobre.

HTML e aqui eu posso colocar assim e vou colocar Senhor sobre nós Ok e salvei olha só o que que aconteceu apareceu link aqui ó sobre nós se eu clico aqui em sobre nós fui para a página sobre nós beleza aqui eu poderia até colocar um link para gente conseguir voltar para a index Então vou lá na sobre e depois desses parágrafos aqui eu vou colocar um link you para a gente poder voltar para página anterior então vou colocar HF o index que a nossa principal voltar para principal Vou colocar sim olá voltar para principal cliquei voltei para principal clique em sobre nós foi para sobre nós então eu tô navegando entre documentos dentro do meu próprio projeto isso é um caminho relativo quando a gente trabalha com caminhos relativos isso quer dizer que talvez a gente tem que trabalhar também com pastas certo dentro do nosso projeto E aí tem um jeito de você indicar qual pasta e qual arquivo você quer abrir quando a gente trabalhar com links Então vou colocar aqui assim ó você quer um link relativo URL relativa é relativa porque pode variar de acordo com a posição dentro do nosso projeto Tá bom então eu vou fazer mais um link aqui ó pessoal para vocês entenderem eu vou fazer assim ó e o link chamado Dimitri e esse link demitri ele vai para uma pasta que a gente vai ter Deixa eu só quebrar a linha aqui ó br br por lá duas linhas ou para deixar ele mais separadinho uma pasta que a gente vai criar dentro do nosso projetinho que é para gente separar a nossa equipe de forma que a gente tem uma pasta chamada equipe onde a gente vai ter lá os arquivos HTML com o nome de cada cada integrante da equipe tá para a gente organizar que o nosso projeto Então vou criar uma pasta chamada equipe e dentro dessa pasta equipe o cliquei você vê que o símbolo tem um símbolo Zinho quando a pasta tá fechado aberta ó ela ficar pertinho e quando ela tá fechada quando ela está aberta a flecha fica para baixo e tem o desenho da pasta aberta quando ela tá fechado ó a flecha aponta para pasta e ela tá assim fechadinho então para você saber aqui no vs code tá aberto ou fechado você vê assim ó cliquei tá aberto Então tudo dentro da pasta equipe dentro da pasta equipe eu vou criar um novo arquivo o Dimitri. HTML certo e vai ser a o meu documento vai ser responsável por falar um pouco sobre mim então eu só vou criar aqui esse projetinho essa página HTML botei aqui em HTML5 que ao dizer só para aparecer certinho pt-br que em português aqui é o nome do documento eu vou colocar Dimitri e vou falar vou colocar o título um dizendo assim Dimitri E aí aqui a Vamos colocar vezes cinco Lauren só para ter algum conteúdo salvei beleza salvei aqui o arquivo demitri agora se eu quisesse linkar aqui fazer o link ir para esse documento aí demitri como é que eu faria repare que o meu arquivo demitri ponta HTML ele tá dentro da pasta equipe ele não tá mais na mesma é estrutura de onde está o index e o sobre talvez você vai entender isso melhor tô vendo aqui como é que tá a nossa pasta aula HTML aqui no nosso Windows Explorer só tem um arquivo index arquivo sobre aí eu tenho uma pasta chamada equipe e dentro dessa pasta equipe eu tenho meu arquivo demitri. HTML certo então prendi cá isso eu teria que fazer o seguinte eu teria que não HF fazer assim ó equipe que é o nome da pasta que eu quero acessar e até mostrou para mim barra demitri.

HTML então eu dei um caminho relativo que em relação onde eu tô aqui ao index HTML Eu quero ir para pasta equipe e dentro da pasta equipe Eu quero acessar o arquivo Dimitri certo vou dar um controle para salvar olha só o que que vai acontecer cliquei aqui em Dimitri ele foi para o arquivo documento de Mito mas é parar lá em cima que eu fui para a pasta equipe e depois o arquivo Dimitri aqui em cima tá vendo Então eu naveguei para uma pasta agora esse aqui dentro de Dimitri eu quisesse a minha principal a index não daria simplesmente para eu colocar assim ó dá uma olhada se eu fizer assim ó E se eu fizesse o link HF Colocar assim index. hr ml Qual o nome do maior que isso aqui eu voltar para principal tá olha o que que vai acontecer eu vou clicar aqui olha só ele vai dizer que não encontrou aquela ó cannot get ele não conseguiu encontrar a minha index. hr ml Porque ele acha que eu tô tentando entrar na index HTML dentro da pasta equipe porque eu tô dentro da pasta aqui então se eu indico aqui index.

hu ml ele vai procurar esse arquivo dentro da pasta que eu estou então eu tenho que falar que tá uma pasta para trás da onde eu tô aqui a face da equipe então o que que eu tenho que fazer aqui antes eu tenho Colocar assim. . /Tô dizendo que eu quero voltar uma pasta para trás o arquivo é o index.

hr ML agora é seu salvar isso pessoal salvei vou voltar aqui para Dimitri certo se eu clicar agora voltar para principal Olha que que vai acontecer Opa acho que eu esqueci de salvar aqui e talvez acho que é por causa que deu erro daí vai dar problema aqui no nosso servidor está pessoal vou ter que parar que o servidora para que embaixo depois eu vou ativar ele novamente E aí voltei para admitir agora vou clicar em voltar para principal pronto ele voltou para principal porque eu indiquei aqui que ele tem que voltar uma pasta e então ir para a index vamos HTML Se eu tivesse mais uma pasta aqui dentro e quisesse voltar duas pastas eu teria que fazer. . /.

/Tá dizendo que eu tô voltando duas pastas para trás e então index. hu ml e assim por diante dessa forma nós temos caminhos relativos porque relativos é em relação ao documento que você está para o documento demetri. HTML a index.

hu ml está um a pasta para trás já lá na index. hu ml eu preciso indicar qual é a parte da equipe aí o arquivo demetri.