Sites, blogs, páginas da web - conceitos já familiares em nosso tempo. Com o desenvolvimento da Internet, os sites para hospedagem de páginas da web tornaram-se incrivelmente populares, e isso não é surpreendente: para algumas pessoas, ter um site próprio é uma necessidade, para outras é um entretenimento prazeroso. No primeiro caso, geralmente estamos falando de empresas, corporações, empreendedores privados, quando anunciam algum produto ou serviço em demanda. A segunda é sobre blogueiros.
Além disso, há internautas que simplesmente buscam informações, leem blogs, assistem a vídeos e assim por diante.
Para criar um site de qualidade, existem muitas opções. Vamos nos concentrar na programação web através de HTML.
O que é HTML
HTML significa Hyper Text Mark-Up Language. Traduzido do inglês, significa "Linguagem de marcação de hipertexto".
Em outras palavras, HTML é um conjunto de códigos com os quais você pode criar os principais elementos do site, seu frame, comocomo as palavras são compostas de frases.
Os códigos HTML são escritos exclusivamente em letras latinas e são chamados de tags, e cada código é colocado entre colchetes angulares. Algumas tags são pareadas, outras não.
Emparelhado significa que eles devem ser usados em pares sem falhas. Por exemplo, a tag de abertura indica onde ela começa em uma página da Web e a tag de fechamento indica onde ela termina. O último difere do primeiro pela presença de um caractere de barra após o colchete angular de abertura. Por exemplo, é a tag de abertura,é a tag de fechamento.
Tags não pareadas não precisam de um parceiro.
Muitas tags podem ter atributos - elementos adicionais que dão um significado mais específico. Por exemplo, a tag.
Onde HTML é usado
A compreensão clássica de onde o HTML é necessário é a construção de sites.
Na prática, isso pode ser suficiente, pois o HTML permite criar os principais elementos do site, menus (incluindo os de vários níveis), definir o plano de fundo, inserir texto, imagens, áudio, vídeo, editar fontes e muito mais.
No entanto, existem outras linguagens que permitem adicionar elementos mais interessantes e muitas vezes necessários a uma página web:
- CSS define estilos para todo o site sem a necessidade de prescrever constantemente recursos de estilo de elementos individuais usando tags - a cor e a fonte do texto, por exemplo.
- A linguagem de script permite desenvolver e incorporar miniprogramas (scripts) no site, desdecoisas estéticas banais (mudando a cor do link ao passar o mouse sobre ele) e terminando com as funcionais (coletar endereços de e-mail de clientes, números de telefone).
- Com PHP você pode desenvolver seu próprio livro de visitas ou sistema de comentários.
Também o HTML é usado na criação de emails para distribuição.
O que é um link
Eles permitem que você navegue para outra página da web, tanto dentro do site quanto externa.
Links HTML são comumente usados:
- Para ir para um recurso externo da web.
- Para percorrer as páginas do site.
- Para acessar o Google Forms.
Um link para a fonte em HTML também é frequentemente indicado, especialmente porque ao copiar material de outro site, você deve especificar o autor. Caso contrário, copiar sem atribuição pode se enquadrar nas definições de violação de direitos autorais, roubo de conteúdo e tiro pela culatra. Além disso, o uso de materiais emprestados e não exclusivos reduz o desempenho de SEO e a indicação de um link para a fonte reduz os riscos.
Tipos de links
No sentido clássico, um link é o endereço de um recurso da web que você pode acessar clicando nele.
Além disso, existem hiperlinks: texto e imagens. Nesses casos, o link HTML fica "escondido" embaixo de alguma frase (palavra) ou imagem, e para segui-lo é preciso clicar no texto ou na imagem.
Outros tipos de links:
- Unvisited - um link que ainda não foi clicado durante uma determinada sessão. Por exemplo, se você seguiu este link ontem, desligou o computador e o ligou novamente hoje, agora o link não é visitado novamente, pois uma nova sessão foi iniciada.
- Ativo - neste estado, o link é salvo por um tempo muito curto: o intervalo entre clicar no link e segui-lo.
- Visitado - um link que já foi visitado pelo menos uma vez durante uma sessão.
Para links de texto normais, os visitados tendem a mudar de cor, a menos que especificado de outra forma.
Uma imagem com hiperlink não muda sua aparência, seja ela visitada ou não.
Como inserir um link normal
Muitos recursos da web percebem o endereço do site como um link, imediatamente o tornam clicável e o destacam com cores. Por exemplo, se o endereço for enviado em um messenger ou por e-mail, clicando nele, você pode acessar o site.
No caso de você mesmo criar um site usando HTML, você deve inserir um link usando uma tag especial. Ficará assim: endereço do site. O texto do link em HTML deve ser especificado por completo, com protocolo.
Como inserir um hiperlink de texto
Foi dito anteriormente que um hiperlink de texto desempenha a mesma função que um link normal, mas parece mais esteticamente agradável: em vez de um endereço de site, que geralmente é desnecessariamente longo, uma palavra ou frase é indicada. Por exemplo, na frase "Procure informações aqui", você pode ocultar o link ema palavra "aqui". Ele será destacado e clicar nele levará o usuário ao site desejado.
Como fazer um link HTML já foi discutido anteriormente. Você pode inserir um hiperlink de texto usando a mesma tag. A única diferença é que você precisa especificar entre as tags o texto sob o qual o link ficará oculto: texto visível.
Como inserir um hiperlink de imagem
É um pouco mais complicado aqui. Usamos a mesma tag, mas em vez de texto, você precisa especificar o caminho para a imagem.
O caminho é a localização da imagem. Se a imagem (foto) estiver localizada em um serviço de compartilhamento de arquivos, você precisará especificar todas as pastas ao longo do caminho para a imagem por meio de uma barra. Você também pode incluir um link para uma imagem, se possível.
Para marcar
além de src, outros atributos também são aplicáveis, permitindo ajustar a altura, largura e localização da imagem e muito mais. Alguns deles:
- Src - especifica o caminho para a imagem.
- Lowsrc - idêntico ao atributo anterior, mas especificado para imagens de baixa qualidade.
- Altura - altura da imagem.
- Largura - sua largura.
- Alt - descrição da imagem. Quando você passar o mouse sobre uma foto ou imagem, o texto especificado neste atributo aparecerá.
- Border - determina a espessura da borda ao redor da imagem.
Os atributos são especificados após a tag e são incluídos emsua composição. O atributo deve ser seguido por seu valor. Por exemplo, para os atributos " altura" ou "largura" (altura, largura) especifica a altura da imagem na página da web. A unidade de medida é pixels, a menos que especificado de outra forma.
Será assim: <a href="endereço da página da web"
. Esses atributos ajudarão a definir o tamanho apropriado para a imagem. Borda ajuda a criar uma borda invisível ao redor da imagem.
Os atributos acima se aplicam separadamente à tag de inserção de imagem. Por exemplo:.
O que são links âncora
Criar links âncora é uma habilidade muito útil. Frequentemente, há a necessidade de criar uma página da Web com um bloco de texto longo ou com várias subseções em uma página. Nesse caso, você pode começar imediatamente com uma lista de links para subseções do texto ou página da web e, ao clicar neles, o usuário irá diretamente para a seção solicitada.
A criação de links âncora exigirá mais uso de tags de atributo do que outros tipos de links.
Primeiro, você precisa definir o valor geral para cada bloco de informações ou subseção de texto usando o atributo top e associá-lo ao link correspondente.
Seus recursos são mais extensos, portanto, é aconselhável primeiro dominar a criação de links mais simples, e depois passar para a formação de links âncora.
Dicas
Ajuda de experientesprogramadores:
- Você pode fazer com que as informações sobre um link sejam exibidas ao passar o mouse em HTML. Para isso, o atributo alt, que também usamos para elementos gráficos, pode ser útil.
- É possível fazer uma lista de links usando HTML. Em particular, isso pode ser útil para links âncora, bem como quando você precisa fazer uma lista de recursos da web que podem ser seguidos por um link diretamente da página da web atual.
- Com a ajuda de CSS e JavaScript, bem como algumas funções HTML, você pode criar um design de links de texto e hiperlinks diferente do usual. Por exemplo, quando você passa o mouse sobre um link, ele pode alterar sua cor e retornar ao anterior quando o cursor estiver longe dele. Isso pode ser feito com um script JavaScript personalizado. Além disso, a cor do link pode ser definida como algo diferente de azul para não visitados ou roxo para visitados. Este é o trabalho do CSS.
- Não abuse dos links. Uma página da web com muitos links impróprios parece desleixada e desleixada.
- Certifique-se de que o usuário entenda que o hiperlink com a imagem é realmente uma imagem, e não apenas uma imagem.
Conclusão
É muito fácil criar um link para uma página em HTML. É importante seguir todos os pontos principais desta linguagem, pois mesmo um pequeno erro pode levar ao fato de que não haverá resultado e o código não funcionará.
