Por que você deve aprender a codificar (um pouco): uma introdução a HTML e CSS
Publicados: 2021-08-15Nunca foi tão fácil abrir uma loja online. Graças a plataformas como Shopify, você pode comprar um tema, fazer upload de seus produtos e estar vendendo para seus clientes em questão de horas! A barreira de entrada é tão baixa que quase qualquer pessoa pode fazer isso.
Embora seja tão fácil começar, é tão fácil considerar essa simplicidade como garantida. Eventualmente, você desejará adicionar ou alterar algo em sua loja e perceberá que seu tema não é compatível. Os desenvolvedores não são baratos e a última coisa que você quer é pagar a alguém por algo que você mesmo poderia ter feito.
E se eu dissesse que você poderia gastar um pouco de tempo para aprender o básico de como os sites funcionam e economizar tempo e dinheiro no futuro?
Ao final deste artigo, você deve saber o básico de HTML e CSS e saber o suficiente para começar a mexer em sua própria loja.
Portanto, reserve alguns minutos para se preparar e vamos começar!
O que é HTML e CSS?
HTML significa Hypertext Markup Language. É uma das linguagens fundamentais mais antigas e importantes da web. É responsável por estruturar e apresentar o conteúdo desta página!
CSS significa Cascading Style Sheets. É responsável por fornecer o estilo e formatação do HTML.
Juntos, esses são os blocos de construção necessários de qualquer site. Neste artigo, vou guiá-lo pelos princípios básicos e mostrar como codificar e estilizar sua primeira página da web.
Já que sou um grande fã de Bill Murray (que não é), vamos criar nosso próprio santuário na web para Bill.
Porém, primeiro, vamos mergulhar mais fundo em HTML e CSS para realmente ter uma compreensão completa de seu poder e habilidade.
A anatomia de um site
Podemos entender facilmente como HTML e CSS funcionam juntos, comparando-os às partes estruturais de uma casa.
Atrás das paredes de cada casa existe uma moldura responsável por sua estrutura. Pense no HTML como uma estrutura de casa. É responsável pela estrutura de um site.
Mantendo nossa analogia com a casa, CSS é responsável por coisas como cores de pintura, dimensões da sala de jantar, cor do piso de madeira e forma e estilo da mesa da sala de jantar.
Vamos dar uma olhada em algumas marcações HTML básicas e examiná-las linha por linha.
Doctype
A tag <! DOCTYPE html> ajuda o navegador a saber que o tipo de documento com o qual queremos trabalhar é HTML.
Cabeça
Dentro da tag <head> é onde armazenamos todos os metadados do nosso documento. Esses dados incluem itens como título, estilos (CSS), descrição e muito mais. Esses dados não são exibidos para o usuário final, mas os navegadores os usam para determinar como o documento deve ter o título ou quais estilos devem ser usados ao exibi-lo para o usuário final.
Propaganda
Alguns outros elementos encontrados no <head> de uma página HTML podem incluir informações do autor, a descrição da página ou um link para uma imagem usada para o favicon (o pequeno ícone em uma guia do navegador).
Corpo
A tag <body> contém toda a marcação (código) do site. Este é o único código que o usuário final verá ao visualizar nosso site.
As ferramentas de que você precisa para construir um site
Para começar a escrever HTML, você pode pensar que precisa de um software caro e sofisticado, mas não precisa. Na verdade, você já tem o que precisa.
Se estiver usando um PC, abra o programa Bloco de notas. Se você estiver em um Apple Mac, abra o TextEdit.
Agora que você tem seu programa de edição de texto aberto, acompanhe-me enquanto expandimos a marcação HTML básica acima. Copie (Ctrl + C no Windows / Cmd + C no Mac) e cole (Ctrl + p no Windows / Cmd + P no Mac) o código a seguir em seu editor de texto.
<! DOCTYPE html>
<html>
<head>
<title> O título de sua página </title>
</head>
<body>
<h1> Olá, mundo! </h1>
<p> Este é o nosso primeiro parágrafo. </p>
</body>
</html>
Salve este arquivo em sua área de trabalho e abra-o no navegador da web. Agora você deve ver seu código traduzido ou renderizado pelo navegador e deve ser parecido com isto:
O elemento Heading (<h1>)
A tag <h1> é usada quando você deseja chamar a atenção e a definição para determinado texto. Neste caso, queremos o texto “Hello World!” para ser maior e mais proeminente do que o texto subsequente.
Pronto para usar, o HTML tem seis tags de título diferentes que você pode usar: h1, h2, h3, h4, h5 e h6.
O tamanho da fonte ficará menor a cada “redução” que você der; H1 será o maior e H6 será o menor. Por padrão, eles terão alguma margem (ou espaçamento ao redor deles) para separá-los de outros elementos na página e dar ao usuário uma hierarquia visual.
Reserve um minuto para experimentar alterar as tags de título, cabeçalho e / ou parágrafo. Depois de fazer uma alteração, salve-a e atualize o navegador. Parabéns, você acabou de editar HTML pela primeira vez!
Parece chato, certo?
Vamos adicionar algum estilo à nossa página e aprender mais sobre o verdadeiro poder do CSS.
Para adicionar nossos próprios estilos a esses elementos HTML, precisamos adicionar uma tag <style> dentro do <head> de nosso documento.
Esta tag envolve todo o nosso CSS. Pense no que está dentro da tag <style> como o guia de estilo do navegador.
Sob a tag <title> em uma nova linha, adicione uma tag de estilo como esta:
<title> O título de sua página </title>
Propaganda
<style>
</style>
Dentro da tag de estilo é onde podemos inserir todas as nossas declarações. Uma declaração CSS consiste em uma propriedade seguida por um valor .
Vamos diferenciar a cor do nosso <h1> do resto do nosso texto porque é o mais importante e queremos que se destaque. Adicione o seguinte entre suas tags <style> , salve seu arquivo e atualize seu navegador novamente.
<style>
h1 {cor: azul; }
</style>
Agora você deve ver algo parecido com isso! Você notará que nosso “Hello World!” o texto agora é azul. Simples, certo?
Pronto, você conseguiu! Você alterou com sucesso o estilo de um elemento HTML usando CSS. Já estamos nos divertindo?
Adicionando imagens à nossa página
Existem muitos outros elementos que você pode incluir em sua página, mas um dos mais proeminentes em qualquer site é a imagem todo-poderosa. Podemos facilmente adicionar uma imagem incluindo o tag assim:
<img src = “https://www.fillmurray.com/400/500” >
Observação: para fins de demonstração, estou usando um serviço de espaço reservado para imagens chamado www.fillmurray.com. Você pode usar uma imagem em seu computador local, se preferir.
Forma alternativa (dica profissional) de obter uma imagem de um site: Encontre uma imagem em um site que você gostaria de usar e clique com o botão direito nela. Clique em Copiar endereço da imagem e o URL dessa imagem estará em sua área de transferência. Dependendo do seu navegador, o texto pode ser um pouco diferente. Estou usando o Google Chrome. Não estou recomendando o uso excessivo de hotlinking, mas para esta demonstração não é grande coisa.
Copie e cole este elemento de imagem e coloque-o sob sua tag de parágrafo para que seu bloco de código completo se pareça com o meu:
<! DOCTYPE html>
<html>
<head>
<title> O título de sua página </title>
<style>
h1 { cor : azul;}
</style>
</head>
<body>
<h1> Olá, mundo! </h1>
<p> Este é o nosso primeiro parágrafo. </p>
<img src = “ https://www.fillmurray.com/400/500 ” alt = ”imagem de Bill Murray” >
</body>
</html>
Salve seu arquivo e recarregue seu navegador e você deverá ver algo assim:
Se você estava prestando atenção, notou outro atributo na tag <img> , a alt = ”imagem de Bill Murray” . Como o navegador decifra o código e não pode ver a saída renderizada como você e eu, ele precisa de alguma forma para saber o contexto do que está exibindo.
Propaganda
Adicionando uma tag ALT (texto alternativo) à nossa imagem, podemos dizer ao navegador do que se trata o assunto da imagem.
Isso também é muito importante para SEO (otimização de mecanismos de pesquisa) e, mais importante, este texto é lido em voz alta para usuários cegos que usam um leitor de tela.
Mas e quanto aos links?
Nenhuma introdução ao HTML / CSS estaria completa sem cobrir os links! Ao construir um site, você vai querer a capacidade de vincular, seja a fontes externas ou a outras páginas internas de seu próprio site.
Vamos falar sobre o elemento âncora. A verdadeira magia de um elemento âncora é, na verdade, seu atributo href. Vamos demonstrar a estrutura de uma tag âncora adicionando um link para a página da Wikipedia de Bill.
<a href= "www.google.com"> Leia a Wikipedia entrada </a>
Este código está dizendo ao navegador que, quando um usuário clicar no texto: “Leia seu verbete na Wikipedia”, leve-o para www.google.com.
Vamos adicionar este código logo abaixo de nosso elemento de título para que nosso bloco de código agora tenha a seguinte aparência:
<! DOCTYPE html>
<html>
<head>
<title> O título de sua página </title>
<style>
h1 { cor : azul;}
</style>
</head>
<body>
<h1> Olá, mundo! </h1>
<a href= "https://en.wikipedia.org/wiki/Bill_Murray"> Leia a Wikipedia entrada </a>
<p> Este é o nosso primeiro parágrafo. </p>
<img src = “https://www.fillmurray.com/400/500” alt = “imagem de Bill Murray” >
</body>
</html>
Clique em salvar e atualizar o navegador e, com sorte, o seu se parece com o meu.
Atravessando a linha de chegada
Fui em frente e estilizei minha pequena homenagem a Bill Murray e aqui está meu resultado final. Vou percorrer alguns dos estilos adicionados abaixo.
Por favor, rufem os tambores…
Agora, você pode ver que isso não é nada para se escrever, mas isso é intencional. Esta é apenas a ponta do iceberg quando se trata de como essa página pode olhar ou ser decorados. Eu queria manter as coisas simples para que você entendesse o que cada um dos métodos de estilo abaixo faz.
Propaganda
Vamos pular para o pequeno CSS que eu tive que adicionar para nos levar até aqui.
Modelando o corpo:
Primeiro, no corpo da página, adicionei:
corpo {
cor de fundo: #eee;
família da fonte: Helvetica, Arial, sans-serif;
alinhamento de texto: centro;
margem: 25px;
}
cor de fundo
Eu defini a cor de fundo da página para um cinza muito claro usando o valor de cor hexadecimal #eee. Você pode aprender mais sobre eles e ver alguns exemplos aqui no MOZ.
família de fontes
Eu queria alterar a fonte do uso padrão dos navegadores Times New Roman. Para isso, escolhi Helvetica como minha primeira escolha (se o usuário tiver essa fonte instalada em seu computador), Arial como minha segunda escolha (se o usuário não tiver Helvetica, o padrão será Arial), e como um backup final , uma fonte sans serif básica.
alinhamento de texto
Eu escolhi alinhar todo o texto na minha página ao centro. Existem algumas outras opções para valores como esquerdo e direito, mas achei que seria melhor centralizado.
margem
Eu adicionei uma pequena margem ao corpo do documento para dar a ele algum espaço para respirar.
Modelando nossa imagem:
Por último, eu estilizei o lindo rosto de Bill, er, quero dizer o elemento de imagem
img {
borda: 10px sólido # 41bcd6;
box-shadow: 2px 5px 5px # 999;
preenchimento: 10px;
raio da borda: 5px;
}
Não fiz muito, mas queria dar à foto de Bill alguma presença na página.
fronteira
Eu adicionei uma borda de 10px ao redor da imagem. O # 41bcd6 é outro valor de cor hexadecimal que renderiza uma cor azul claro (parte do meu tema de cores subliminar secreto de Steve Zissou).
Sombra da caixa
Eu queria dar à imagem uma sensação tridimensional, então adicionei uma sombra de luz a ela. A propriedade box-shadow aceita valores de pixel e cor que determinam o comprimento, desfoque e cor da sombra. Para saber mais sobre a declaração de sombra de caixa, Moz analisa bem para você aqui.
preenchimento
Para tornar a imagem mais parecida com uma moldura, adicionei 10 px de preenchimento entre ela e a borda.
raio de fronteira
Apenas para ilustrar uma das habilidades mais legais do CSS, fiz os cantos da imagem arredondados usando border-radius. Quando comecei a construir sites, nada parecido existia, e produzir cantos arredondados na web era realmente muito desafiador. Percorremos um longo caminho desde então e agora é bastante simples. Ele aceita um valor como px ou ems, e aqui eu escolhi apenas arredondá-lo o suficiente para notar, definindo o valor para 5px.
Conclusão
Ao longo deste artigo, trabalhamos juntos para aprender a anatomia básica de um site. Também aprendemos um pouco de HTML e CSS simples que, no final das contas, se transformaram em uma pequena homenagem incrível de uma página a um dos maiores atores de todos os tempos de uma geração
Porém, com toda a seriedade, espero que você tenha conseguido me acompanhar e construir seu primeiro site básico. Agora, se Bill Murray não é seu ator favorito, eu desafio você a editar este código para mostrar seu ator, banda ou o que você quiser.
Se você precisar fazer referência a este código a qualquer momento, volte e leia este artigo ou, para sua conveniência, coloquei-o no CodePen aqui.
Existem tantas coisas divertidas que você pode fazer apenas com HTML + CSS. Aqui estão alguns recursos excelentes para você expandir seu aprendizado:
Propaganda
- Code Academy: introdução 100% GRATUITA ao curso de HTML / CSS
- CSS Zen Garden: O primeiro exemplo na web que realmente “clicou” para mim, para me ajudar a perceber que você pode ter 100 sites de aparência diferente que usam a mesma marcação HTML
- Animações CSS
- A Mona Lisa usando apenas CSS
- Cão husky animado usando apenas CSS
- CodePen: CodePen é uma ferramenta online para testar e mostrar AO VIVO seu código HTML, CSS e JavaScript
Sério, apenas arranhámos a superfície neste artigo, por isso encorajo-vos a ler mais, a fazer alguns cursos online e a continuar a divulgar o vosso conhecimento!
