Oi, hoje vamos falar sobre hiperlinks, ou links, como eles são mais comumente chamados. E como você pode usá-los para vincular seu documento a outras pessoas lá fora. Agora, links são realmente o que fazem da web uma web. É toda essa idéia de que diferentes links construídos juntos criam esse tipo de conhecimento que os motores de busca ou você mesmo pode ganhar indo de página em página, e com material que esperamos relacionado. Então, vamos direto sobre como você cria um link em sua página. Links são chamados de links âncora e é aí que obtemos o a para na tag a. Quando você usa uma tag âncora, a tag a que você vai precisar para se certificar de que você tem duas partes diferentes. Você precisa de uma hiperreferência e precisa de conteúdo. Portanto, a hiperreferência é apenas a referência à localização do novo conteúdo. Então, neste caso, eu usei http://www.umich.edu. Isso diz a um navegador, se alguém clicar neste link aqui é onde eu quero solicitar a nova página. Precisamos também de ter conteúdo. O conteúdo é o que chamamos de parte clicável. Neste caso, é texto. Eu realmente clicar em um texto sublinhado que diz, Universidade de Michigan. Mas em alguns casos, pode ser uma imagem em vez disso. Então, que tipos de links podemos ter? Alguns dos mais comuns são chamados de links absolutos. Nós também temos links relativos. Links internos e links gráficos e vou mostrar exemplos de cada um deles. Com uma referência absoluta na seção a href precisamos colocar uma url totalmente formada. Você precisa ter o http ou https o endereço e qualquer tipo de nome de documento extra que você deseja. Então, se você se lembrar que há três partes para URL, você tem o protocolo, o host e o documento. Você precisa incluir todos eles se você tem uma referência absoluta, certo? Todo o resto ainda é praticamente o mesmo. Para uma referência relativa, mudamos ligeiramente o que entra para o href. Em vez de vincular a algum site externo ou mesmo interno, nós só vamos colocar, neste caso, o nome do arquivo. Então, neste caso, vamos vincular a page2.html. Você pode obter um pouco mais profundo do que isso, onde você pode incluir também algum tipo de nome de pasta. Então, neste caso, estaríamos indo para o arquivo chamado page2.html, mas ele está em uma pasta diferente chamada docs a terceira maneira que podemos usar uma referência relativa é o que chamamos usar a tag ID. Então, quando você tem href igual a libra de hash ou histórico, estamos dizendo que há outro local dentro do mesmo arquivo e é chamado de histórico. Então, links absolutos versus relativos. Quando você usaria links absolutos versus quando usaria links relativos? Com links absolutos, você está basicamente dizendo, que eu não sou responsável por esta página, outra pessoa é. Então, se você estiver ligando para a página de outra pessoa, absolutamente use o link absoluto com a referência completa lá. Para relativo é quando você está desenvolvendo seu próprio site. E é muito útil usar links relativos em vez de absolutos, portanto, se você mover sua página para um servidor diferente, ou movê-la para uma pasta diferente, não precisará renomear tudo. E então esses são alguns dos benefícios para usar links locais, é apenas a idéia de que você não precisa atualizar tanto. Agora, uma das coisas que você precisa ter certeza de que você nunca faz é ter um link que inclui algum tipo de estrutura de arquivo, vamos chamá-lo. Então, verifique seus links. Certifique-se de que ele nunca diz, C:Page ou MyDocumentsPage ou qualquer coisa que seja muito específica para o seu computador. A razão pela qual você não quer fazer isso é. Se você colocar sua página para fora na web. Se você terminou, você o colocou em um servidor ou em uma hospedagem e deseja que outras pessoas cliquem. Bem, não faz sentido que eles possam acessar páginas que estão no seu computador. Portanto, nunca tenha uma referência que inclua algo local para sua máquina. Tudo bem? Uma das outras coisas que você pode fazer é usar imagens como o link. Portanto, o componente clicável não precisa ser texto. Você já viu isso muitas vezes. Pode ser ícones, imagens. coisas diferentes ao longo dessa linha. Neste caso, eu entrei e uso a referência H regular e o que estamos mudando agora, não é a referência h, mas o conteúdo que vai entre a tag de abertura e fechamento. e eu fui em frente e eu coloquei em uma imagem em vez disso. Certifique-se de usar o texto alt para acompanhar essa imagem. E outro caso eu fiz algo muito parecido, a única diferença é, em vez de usar uma referência local aqui para a imagem, eu usei uma referência absoluta. Coloquei toda a URL. Então vamos falar de questões de usabilidade e de acessibilidade. Se você estiver indo para usar um componente clicável, você deve ter certeza de que ele tem um nome informativo. Há software lá fora que pode listar todos os links dentro de uma página para pessoas que estão procurando coisas, que não podem usar o típico. meios típicos de acessar a página. Não é de todo útil para eles se todos os links são rotulados, clique aqui, clique aqui, clique aqui, clique aqui, certo? Você quer dar a ele algum tipo de nome informativo. Você também quer se certificar de que, se você estiver usando uma imagem para a parte clicável do seu link. Essa imagem precisa ter algum tipo de texto alternativo ou outra informação disponível para aqueles que não conseguem ver a imagem. Então, deixe-me mostrar-lhe alguns exemplos codificados desses tipos de links. Tudo bem? Como você pode ver aqui, eu tenho uma referência a referências absolutas, referências relativas, imagens como links, e, em seguida, alguns links incorporados, também. Então, se eu fosse clicar em Washtenaw Dairy ou Rosie Coffee Bar and Bakery, ou Dexter Bakery etc., ele realmente me levaria para suas páginas. Em frente para trás. Um dos truques que eu quero apontar enquanto estou fazendo isso é, enquanto eu passo o mouse sobre cada um desses links, se você olhar para o fundo do meu navegador, e eu realmente não posso mostrar ao mesmo tempo, mas quando você o destaca, ele mostra qual URL você está indo. E eu acho que isso é muito valioso para as pessoas saberem, porque se você estiver pairando sobre um link, e as informações que você vê na parte inferior da página não coincidem com o que você disse. Então referências absolutas levá-lo para longe do seu site. Referências relativas podem levá-lo a algo que está dentro da sua pasta. Então aqui eu tenho uma imagem de alguns donuts, e eu continuei e eles estão na minha pasta no meu arquivo. Então eu fui capaz de ligar a eles apenas usando o nome da imagem. Tudo bem? Também podemos usar imagens como links também. Em vez de escrever Donuts da loja Squire, eu fui em frente e fiz isso para que você possa clicar na imagem para chegar à visão maior. Esta última ideia de links incorporados é um pouco interessante. Deixa-me levar-te ao código por um segundo e mostrar-te. Escreva aqui, eu tenho algo chamado referências relativas com um ID é igual a relativo. Eu tenho links incorporados com um ID que diz incorporado e aqui em cima, no início você pode ver que eu tenho div id = “absoluto”. Com links incorporados, eu posso clicar em qualquer um desses e navegar dentro da mesma página. Então eu não vou para uma página diferente. Não vou abrir uma nova conta. Em vez disso, vou saltar para lugares diferentes dentro da página. Então eu fui para absoluto. Eu fui para parente agora se eu tentar fazer referências embutidas não parece que ele se moveu, mas realmente mudou. É que já estamos lá. Certo, então é assim que esses tipos de links internos ou embutidos funcionam, certo? Agora, se a qualquer momento você ficar confuso sobre como o código está funcionando. Eu só quero lembrá-lo que eles sempre podem ir para ver. Desenvolvedor e fonte de visualização para realmente ter uma idéia melhor de como as pessoas estão criando suas páginas e seus links. A seguir, vamos falar sobre alvos, está bem? As âncoras também podem ter um atributo de destino diferente. Temos a fonte, vamos adicionar âncora. Então somos o alvo. Então você pode ter o alvo é igual a si mesmo. Este é o tipo de ação padrão. Isso vai acontecer se você não colocar nada. Se você nem incluir target, e o que isso significa é quando você clica em um link, abra na mesma guia ou janela que você está olhando agora. Se você colocar o alvo é igual a branco. Você vai deixar a página atual em que você está exatamente na mesma, e abrir uma nova guia ou janela para onde você deseja que a nova página seja aberta. Agora isso tem o seu lado positivo e negativo. O lado positivo é que seu site ainda está aberto na janela de alguém. A desvantagem é que muitas pessoas não gostam quando ele continua adicionando e adicionando , e à medida que eles progridem através de sua página, você está fazendo com que eles abram mais e mais guias. Existem duas outras opções sobre as quais não vamos realmente falar aqui, mas você pode vê-las na leitura, e essas são top e pai, e isso lida com se você realmente está entrando na idéia de ter várias janelas , quadros, etc. Então, vamos em frente e rever, porque certificar-se de que você entende links é de vital importância para o seu sucesso neste curso ou até mesmo para entender HTML. Então, a primeira coisa que você precisa saber é que uma página sem links é extremamente rara. E para ser honesto, quase nem sequer é uma página web. É só um documento. Os links podem ser absolutos, relativos e internos. E interno, novamente, era o tipo onde tinha a marca de hash nele. Acho que me referi a eles como parentes, mas quero ter certeza de que a marca de hash o torna interno. Você deseja ter cuidado ao usar imagens em links. Não é que eles não sejam uma boa coisa para se fazer, e eu não estou dizendo que você deve fazer isso. Só estou dizendo para garantir que você faça isso com cuidado para garantir que todos os que estão visualizando sua página possam obter o mesmo conteúdo e a mesma experiência que todos os outros.