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.