Guia do Dev Iniciante – Introdução ao HTML e CSS
Desta vez no Guia do Dev Iniciante vamos entender alguns conceitos básicos de HTML e CSS. O HTML trabalha lado a lado com os navegadores da internet e os sistemas de mecanismos de busca. Depois que o código HTML e o CSS de uma página está pronto, o navegador interpreta as informações e renderiza o site visualmente de acordo com as instruções. Assim, quando um usuário acessa a página, ele consegue visualizar todas as informações disponíveis, seja em forma de imagem, texto, áudio, vídeo e qualquer outro recurso que a página possua.
Aprender e entender um pouco mais de HTML e CSS é fundamental para que possamos avançar nossos conhecimentos para frameworks mais avançados como Vue.js, além de frameworks front-end como Bootstrap e Vuetify.
O HTML e CSS são utilizados para criar páginas web, sendo que HTML irá marcar os elementos da página, fornecendo um esqueleto inicial e o CSS irá dar um pouco mais de estilo a cada um dos elementos HTML que inserirmos.
Primeiramente, o HTML (Hypertext Markup Language ou Linguagem de Marcação de Hipertexto) não é uma linguagem de programação. E sim, como o nome diz, uma linguagem de marcação. Sendo assim, ele funciona através das marcações (tags) estruturando e definindo os conteúdos que uma página pode ter. Atualmente existem várias tags HTML que podemos aprender e utilizar durante o desenvolvimento e apesar de não ser uma linguagem de programação, possui regras de sintaxe e palavras reservadas de modo semelhante.
Já o CSS (Cascading Style Sheets ou Folha de Estilo em Cascatas) é composto por camadas que irão estilizar páginas HTML. Ou seja, colocar uma cor, deixar a borda mais arredondada, colocar uma fonte legal, posicionar algum elemento mais para a esquerda ou para direita, existe uma infinidade de estilos que podemos construir com CSS. É uma ferramenta muito poderosa para os nossos sites, afinal, quem não gosta de acessar um site bonitão, né?!
Sintaxe básica
Neste ponto falaremos sobre a sintaxe básica de qualquer página com HTML e CSS. Então já abre seu editor e se prepara para colocar a mão na massa, digo, no código. Você pode aproveitar esse Guia para criar um repositório no Git e já colocar em prática os conceitos aprendidos no nosso Guia do Dev que fala sobre Git e Github, se você não viu ainda é só clicar aqui, mas não esquece de voltar aqui, viu?!
Como falamos antes, o HTML tem diversas tags, cada tag representa um componente do HTML. O termo “tag” pode ser traduzido como etiqueta, ou seja, algo que ajuda a entender sua funcionalidade, definindo o que cada parte deve fazer e qual a sua função e importância dentro da estrutura do código. Abaixo podemos visualizar o esqueleto básico de qualquer página.
<!DOCTYPE html>
<html>
<head>
<title>Título da sua página</title>
</head>
<body>
<h1>Hello World! 🙂</h1>
<p>Seu primeiro hello world em HTML</p>
</body>
</html>
Você pode visualizar no código acima as tags que comentamos, por exemplo, <body> é uma tag, sempre que uma tag é aberta, é necessário que ela seja fechada posteriormente </body> e tudo que fica dentro deste intervalo onde abrimos a tag e depois fechamos, irá com as propriedades dela. Falando em body, ela é uma das principais tags de qualquer página HTML e como a própria tradução diz, é o corpo da página. Então tudo que estiver dentro dele aparecerá visualmente na página.
No <head> é tudo relacionado ao header da página, por exemplo, que título irá aparecer na aba dela e todas as configurações que vão ser interpretadas pelo navegador e que vão dar algum comportamento específico para a página.
A tag <h1> é um heading que são basicamente títulos e subtítulos que vão aparecer na sua página, a tag <h1> possui outras variações, por exemplo, <h2>, <h3> e vai até o <h6>, cada hx tem um tamanho de fonte especifico, você pode ver mais sobre os headings aqui. Aliás, eles são importantes, pois os mecanismos de pesquisa usam esses títulos para indexar a estrutura e o conteúdo de suas páginas da web.
A tag <p> é uma parágrafo.
Agora, abra seu editor de texto, crie um arquivo chamado index.html e salve em um lugar de preferência, em seguida abra o arquivo e coloque o código acima nele. Seu código ficará assim:
Agora salve e abra este arquivo (index.html) no seu navegador.
Você deverá conseguir visualizar as informações que inseriu no body e no head (corpo da página e o título no título da aba). Porém como podemos ver, a acentuação ficou estranha, para arrumar isso precisaremos inserir uma configuração no head da nossa página que irá dizer que ela deve interpretar utf-8.
Portanto adicione <meta charset=”UTF-8”> dentro do <head>, salve e atualize a página, você verá que agora os acentos aparecem normalmente.
Agora que sabemos a estrutura básica da página, vamos adicionar um pouco mais de estilo e deixar a página com mais elementos.
Para estilizar nossa página, precisaremos adicionar o CSS nela, então, dentro da pasta onde está o seu index.html, crie um arquivo chamado style.css, em seguida, volte no arquivo index.html e adicione o seguinte código dentro <head>, <link rel=”stylesheet” href=”style.css”> esse código permitirá que nosso index.html receba os estilos que inserirmos no style.css. Seu código ficará assim:
Sempre que quisermos adicionar CSS nas nossas tags, criamos uma classe CSS no arquivo de css, por exemplo, vamos deixar o título que está na tag h1 em vermelho, então, no nosso arquivo .css vamos criar a classe titles:
.titles {
color: #FF0000;
}
Note que a classe inicia com um ponto, sempre que criamos uma classe nova, ela deve ter o ponto antes do nome dela. Agora se você quiser estilizar diretamente uma tag, não precisa do ponto, só colocar por exemplo h1 { seus_estilos }. Existem vários estilos ou propriedades que podemos inserir em uma classe, tudo depende do que queremos fazer. O CSS é extremamente poderoso é pode fazer desde uma simples estilização até animações.
Retomando, seu arquivo style.css deve estar assim:
Agora voltando ao index.html, vamos adicionar a classe que acabamos de criar ao título:
Agora salve e veja no navegador que o título está em vermelho. Você poderia ter escolhido qualquer cor, as cores são todas definidas em hexadecimais e você pode escolher uma cor diferente utilizando um dos sites que geram cores hexadecimais.
Uma configuração importante para adicionarmos no <head> da nossa aplicação é o viewport. Visto que precisamos dizer para todos os dispositivos que a escala inicial do nosso layout é equivalente ao tamanho do dispositivo. Se não fizermos isto, alguns aparelhos móveis vão redimensionar o layout por conta própria e o design responsivo só vai funcionar no desktop.
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
Agora que entendemos o funcionamento básico, vamos tentar criar algo simples, como a imagem abaixo:
Para isso vamos mudar nosso código, que ficará da seguinte forma:
Note que agora estamos utilizando a tag <div>, ela cria, como o nome sugere, divisões no HTML, adicionamos a tag <button> que é o botão padrão do HTML e a tag <img> para podermos inserir imagens no nosso código. Também criamos classes CSS para colocar no nosso style.css e estilizar nossa página. Você precisará baixar uma imagem e colocar na mesma pasta do seu código, é possível baixar a imagem que utilizamos aqui, nós renomeamos ela para ficar com o nome mais simples (bg.jpg).
Ao abrir o index.html no navegador podemos observar que está tudo bem bagunçado, falta CSS.
Vamos ajustar agora. Abra seu arquivo style.css e vamos adicionar as novas classes que criamos. Seu arquivo ficará da seguinte forma:
.container {
display: flex;
width: 100%;
height: 400px;
}
.container .section-text {
width: 50%;
padding-left: 100px;
color: #000000;
font-family: arial, sans-serif;
font-size: 20px;
}
.container .section-image {
width: 50%;
padding: 15px;
text-align: center;
}
.container .section-image .image {
width: 100%;
height: 100%;
}
Como você deve ter reparado, no nosso HTML temos uma div com a classe container e dentro dela temos outras duas divs com as classes section-text e section-image. No nosso CSS instanciamos a classe .container e adicionamos propriedades de largura , altura e display (que é a forma como nossos itens podem ser exibidos, você pode ler mais sobre a propriedade display flex que utilizamos aqui). Para as outras classes que criamos, como section-text e section-image, como ambas estão dentro da div container, no CSS elas precisam ser chamadas da seguinte forma: .container .section-text, criando uma espécie de hierarquia nas classes. Os demais elementos que adicionamos nas nossas classes, são bem similares, estilizamos altura, largura, alinhamento do texto, cor do texto e fonte. Ao abrir o index.html agora nossa página deve estar assim:
Agora vamos finalizar nossa estilização. Neste ponto, você deve ter reparado como HTML e CSS se completam, sem o CSS nossa imagem estava gigantesca e a página toda desconfigurada. 🙂
Vamos adicionar uma classe no nosso botão chamada btn:
Também precisamos criar ela no CSS, ficará assim:
Vamos adicionar uma borda na nossa imagem, inserindo na classe dela a propriedade border-radius: 10px;
Também acrescentamos a tag <p> como subtítulo, logo abaixo do título.
Por fim, nossa primeira página web deve estar parecida com a imagem abaixo.
Bônus
Como um bônus desse guia, vamos aprender de um jeito bem simples a linkar uma página html a outra. Vai ser rapidinho, a gente promete.
Primeiro vamos criar um novo arquivo chamado next.html (na mesma pasta), vamos colocar apenas uma estrutura básica nele e salvar.
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Hello World</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<h1> Hello world </h1>
</body>
</html>
Agora voltando no index.html, adicione o seguinte código no seu botão:
onclick=”location.href=’next.html'”
Abra o index.html no seu navegador e clique no botão start coding, você deverá ser redirecionado para página que criamos no arquivo next.html. Agora é só usar sua criatividade e praticar. Existem muitas e muitas possibilidades do que podemos fazer só com o HTML e CSS.
Esperamos que tenha sido proveitoso. Você pode conferir todo o código criado neste guia aqui. Qualquer dúvida entre em contato conosco! Como próximos passos, sugerimos que procure um pouco sobre o básico de Javascript e algum framework front-end como Bootstrap. 🙂
Até o próximo guia que a força esteja com você.
Texto por Rhebeca Abreu.