Links e Âncoras em HTML5 - @Curso em Vídeo HTML5 e CSS3
344.19k views2296 WordsCopy TextShare
Curso em Vídeo
Você sabe como criar links em HTML5? Sabe usar corretamente os parâmetros href, target e rel em link...
Video Transcript:
nós começamos agora os nossos estudos sobre o capítulo 10 que vai falar sobre links Então abre essa material e vamos começar [Música] [Aplausos] E aí [Música] o Olá tudo bem com você seja bem-vindo seja bem-vinda a mais uma aula no seu curso de html CSS a gente vai nessa décima aula falar sobre links e você vai entender a importância que os links tem dentro da web basicamente lá quando você viu o Capítulo de história que a gente falou sobre tiver mais lhe a criação da linguagem HTML do protocolo http o fundamento básico do protocolo http o fundamento básico da linguagem HTML são exatamente os links é só você ver cara quando você entra no site Você vai clicar em um link dificilmente você vai entrar no site vai consumir aquele conteúdo e vai embora você tem navegações Toda vez que você acessa um site você clica num lugar para ir para outro lugar em São link a é esse ponto que a gente chama esse ponto que é clicável a gente chama de âncora né ou hiperlink Então todo o hiperlink ele é construído através de uma Âncora dentro do código mas eu te falar sobre como criar um link eu quero te dizer importância deles isso porque existem muitos eles têm muitos sites no mundo a ideia de quantos sites foram criados no mundo e como é que a gente pode parar encontrar esse Insight até hoje é bem mais fácil né hoje a gente tem ferramenta de busca o Google é o maior buscador do mundo inclusive vai uma curiosidade aqui o Google primeiro buscador usado no mundo o segundo maior buscador do mundo é o YouTube e também é do Google então assim quando você tem uma marca você tem site o ideal é que você também tem um canal do YouTube para um levar para o outro certo você tem que ter uma estratégia de ganhar links porque Deixa eu te explicar rapidamente no material em PDF se você for logo na primeira página a gente tá discutindo o que que é um link eu faço uma relação Na verdade eu crie um link para um vídeo que tem um engenheiro chamado netcam onde ele explica como funciona o Google basicamente o Google é um grande algoritmo é o Google ao mecanismo de busca mas também tem um algoritmo de encontrar indexar site bacana que você faz um site você quer que ele seja encontrável não é você quer criar um site por exemplo queria um site do curso em vídeo eu quero que quando as pessoas digitar em no Google um vídeo meu site esteja lá e se ela toma Guanabara como é que o cadastro o meu site no Google de um monte de gente pergunta se ela vai comer com o cadastro o site que eu acabei de criar no Google aí é que tá a magia da coisa você nunca das para cá o Google vai encontrar você pode você vem fazer um trabalhinho de casa do Google poder te encontrar mas a gente discutir mais para frente se você quiser uma dica mais para frente quando você tiver mais avançado já procura sobre s ou SS Us é uma sigla que significa search Engine optimization seo otimização para mecanismos de busca você vai organizar o seu código que você vai organizar o seu HTML justamente para os mecanismos de busca como o Google te encontrar tranquilidade mas assistir esse vídeo aí para o médico tinha explicar como funciona basicamente o mesmo do Google e ele é baseado em links Por isso que nem que é tão importante por isso que ele é uma Sudeste um capítulo antes mesmo de a gente começar a falar de estilos mais que você deve estar né preocupado ou para o parar meu Deus não começa logo CSS calma você precisa ter a base de html porque o CSS vai ser em HTML que você não sabe as tags HTML não faz sentido você aprender CSS Fechou então não diretamente por nosso computador depois desse breve papo e vamos fazer umas primeiras é e o recado de hoje é trazido para você pela hostnet que traz soluções digitais para o seu negócio e uma dessas soluções digitais que a Rosinete de oferece há muito tempo é a hospedagem de sites e registro de domínios e se você não sabe ainda o que que é hospedagem o que que é domínio vai acompanhando esse curso que se já não saiu tá prestes a sair um vídeo que explica a diferença entre eles a Rosinete oferece o registro de domínio você pode comprar domínio de todas as terminações pontocom. com. br.
Net E você também pode escolher domínios com terminações bem recentes como o ponto top. Clips. Live ponto Cloud e muitas outras esses registros tem uma taxa anual mais necessita de uma hospedagem mas a rotinas também oferece hospedagens com servidores ultramodernos localizados no a esses servidores têm serviços de backup constante personalização do ambiente com o painel de controle exclusivo da hostnet e o melhor de tudo um suporte nota 10 que vai resolver seus problemas na hora que eles acontecerem esse a tua empresa de hospedagem promete que nenhum problema vai acontecer provavelmente lá tá mentindo para você a internet é muito grande problemas podem e vão acontecer mas a equipe da Rosinete vai estar pronta para resolver todos eles assim ó num estalar de dedos então se você está procurando um local para registrar o seu domínio e hospedar o seu site a escolha correta é Rosinete fica com isso na cabeça a nossa isso no seu caderno mais cedo ou mais tarde você vai precisar deles então já estou aqui na máquina com Windows vou abrir o meus documentos estudos HTML CSS exercícios e vou criar o exercício deles ao criar a pasta nova que é x 0 10 Vamos abrir essa pasta com os gostos hoje e vamos criar nossos exercícios eu vou querer aqui onde é que se compara a primeira beleza Jaqueline HTML ou criar o código base aquele negócio de sempre não precisa nem ficar explicando muito isso não aqui nós vamos trabalhando com looks tá ruim bem simples aqui tá primeiro lugar vou criar uma dá um eles eram vou botar assim usando links externos O que é um link externo o link externo ele é um link que vai apontar para outro site que não é nosso tá então vou botar aqui ó por exemplo você pode acessar o meu repositório público no gente olha só basicamente o meu repositório público no kit hamp eu vou transformar esse aqui ó repositório público long Run quando eu clicar nele nós vamos vamos abrir o arquivo para a gente poder enxergar bonitinho vamos organizar o nosso code ruim só tela aqui e aí beleza é eu quero o seguinte quando eu clicar em repositório público do kit Rubi eu quero que ele vá para o repositório publicamente então que eu vou fazer teu e aqui se você não sabe envelopar porque você falou um monte de vídeo eu te ensinei envelopar em vários vídeos anterior bastante 20 para trás e vamos envelopar com matar a tag quando você cria uma tag a esse a vende Âncora tá o ar e barrar ele vai te pedir logo desejo um parâmetro que praticamente obrigatório porque é o de referência hipertexto que é para onde o meu site vai tá então meu site é o seguinte o meu endereço da Fazenda botar que uma url completa Você lembra lá no Se não me engano Capítulo 2 onde a gente falou de sob domínio hospedagem eu te ensine o que que uma url quais são os componentes de uma url que que é o domínio que que é uma tela e de ou 60ld o gplb explicar essa panela toda protocolo caminho enfim você vai colocar a URL completa a minha URL https: 2 Barras Gustavo Guanabara.
É um subdomínio 20 hub. com. Aí o Pedro essa minha URL completa Então é só quando você faz aqui ó eu creio aí uma referência à hipertensão e para esse endereço aqui ó para essa URL vamos atualizar fica lá ele automaticamente virou um link para você pode acessar uma repositório por permitir vou criar um outro parágrafo aqui para aqui você também pode acessar o meu aí vou botar aqui uma Âncora para ele já bota uma garrafa aqui canal gratuito no YouTube também o link externo Então vou colocar lá https: 2 Barras youtube.
com barracos em vídeo com você por favor se você não se inscreveu ainda vai lá e se escreve aqui ó então você pode acessar meu repositório quando eu clico aqui ele vai abrir meu repositório simples vou voltar você também pode acessar meu canal gratuito no YouTube porque aqui ele Tá acessando o YouTube e Tá acessando o canal do consumir vídeo então assim isso daqui que a gente fez tão links externos são lindos para locais externos e aí vem uma conversa importante que eu preciso ter contigo esse link aqui quando você clica nele o repositório público ele vai para o repositório público e aí o usuário vai começar uma navegação nova é provavelmente ele nunca mais vai voltar no seu site isso porque você sobrepôs o repositório público do kit Rubi ao teu site aqui normalmente então o que que eu vou fazer quando for um link externo a gente sempre recomenda que você use isso aqui ó fala sobre isso do material em PDF produto assim ó target ou da underline plan outra coisa que você pode colocar também agora HTML5 é isso aqui ó real que é relativo à thurnau que é o seguinte esse é um link que é do tipo externo e só ele vai para fora do meu site e eu quero que ele tenha um alvo um target em underline Blank cuidado tem que ter esse underline aqui não pode ter espaço tá e branquitude minúsculo que é uma janela em branco Então olha só eu não fiz isso para o YouTube mas fez isso por 20 Ranger Olha o comportamento quando eu clicar no YouTube que não tem essa esse recurso Acabei de fazer aplique no YouTube ele vai abrir o meu canal do YouTube mas ele fechou o meu site certo sobrepois se eu clicar no repositório público agora do Beach rugby que já tem e os parâmetros o target e réu seu clicar aqui ó ele abriu também só que se você prestar atenção Olha que em cima meu site foi mantido ele tá aqui eu abrir uma nova aba tá vendo Então para eu abrir em uma nova aba basta que você coloque o tablet Black tá essa coisa aqui do realektor não é relativamente nova e também é recomendável na verdade esse réu aqui existem vários tipos de no pdf eu falei mais sobre eles tá mas aqui sempre que for necessário eu vou colocando aqui meus pitacos vizinhos também então basicamente Quando você vai abrir um outro site que não é seu não pertence aos a sua navegação normal o ideal é que você abra em outra aba perto com esses dois parâmetros aqui esses dois atributos da tag a vou fazer aqui também um carb underline Blank cuidado na hora de digitar não digitar errado e meu réu também é que se tornou vamos ver aqui agora você vai funcionar de fechar essa aba atualizando vamos ver se o YouTube também vai abrindo uma aba nova cliquei e abrindo uma outra aba tanto que tá aqui ó tá vendo eu tava aqui chegando aqui na talvez a tomar é beleza tranquilo então essa é a primeira coisa que a gente vai fazer os primeiros links que a gente aprende geralmente não existe ternos por quê Porque o outro site já tá pronto você está criando site e vai fazer um link para outro site esse outro site vai abrir uma aba nova recomendadíssimo quando é dentro do seu próprio site a gente não abre uma aba nova a gente vai ver isso no próximo vídeo mas quando vai para outro site onde você quer levar para outro lugar a gente recomendo usar o target quer underline Blank e também recomendo fortemente você colocar o réu igual a tornou se tornou dá para ir lá vai indicar para o navegador que é um link externo que exatamente o assunto desse vídeo Fechou então é só prática o uso links externos o que no próximo vídeo a gente vai falar sobre links internos inclusive navegações com pastas aqui no vídeo porque essa parte basicamente a explicar com tanto detalhe no pdf então eu vou complementar aqui um estudo em vídeo fechou muitos alunos sempre entrar em contato comigo dizendo assim armas Guanabara às vezes sai um vídeo novo um curso novo não consegui vídeo e eu não sou avisado pelo Youtube tem algum outro jeito de você me avisar pois agora tem é só você acessar t.