Começando com HTML e CSS

É por aqui que vamos começar os nossos primeiros passos na programação. Hoje, vamos entender um pouquinho como funciona e o que pode ser feito com HTML e CSS.

O que é

É importante entender que HTML e CSS não são linguagens de programação. A explicação é bem simples: não conseguimos construir “lógica”, ou criar relações por aqui. No caso, HTML é chamada de “linguagem de marcação” e o CSS é conhecido por ser uma “linguagem de estilo”. Mas apesar de realmente não serem linguagens de programação, o HTML e o CSS são imprescindíveis para montar o seu projeto.

É geralmente com HTML e com CSS que começamos a montagem do “frontend”. E como explicamos no artigo “O que existe por trás de um aplicativo”, é pelo frontend que o usuário acessa, vê e utiliza as funcionalidades de seu programa.

Com HTML montamos toda a base e a estrutura que será visualmente apresentada. E com CSS, estilizamos com cores, posicionamento, espaçamentos e deixamos esteticamente agradável ao usuário.

HTML

O HTML é responsável por montar toda a estrutura de uma página: um cabeçalho, um link, uma imagem, enfim, todo e qualquer conteúdo presente em uma página na internet é montado pelo HTML. Montamos essa estrutura com o que chamamos de “tags”, e cada pedacinho de um site, é como se fosse um “bloco”, montado por essa “tag”. Vamos usar a devGo como exemplo:

Cada área marcada, ou cada “bloco” é um elemento criado com uma tag em HTML. Deixamos cada pedacinho do site estruturado dessa forma, e de pouco em pouco, tag por tag, vamos montando a nossa página.

No código, criamos nossas tags utilizando < e > entre o nome da tag, como por exemplo <div>. O conteúdo é escrito dentro dessa tag e fechado por um </div>, algo como:

<div>Conteúdo dentro da tag</div>

A própria montagem de uma página HTML segue um padrão de tags: tudo deve estar dentro de uma tag <html> , que contem as tags <head> para configuração de alguns meta dados da página, e a tag <body> com o real conteúdo da página:

<html>
    <head>
        <!-- Aqui dentro ficam elementos responsáveis pelo "metadata" da página -->
        <title>Título da Página</title>
    </head>
    <body>
        <!-- Aqui fica o conteudo da página -->
        <div>Um conteudo qualquer</div>
    </body>
</html>

Temos diversas tags, e cada tag tem a sua função, por exemplo:

<span> para conter um texto:

<span>Um texto qualquer</span>

<h1> ou <h2> , <h3> e etc para conter um título:

<h1>Um título aqui</h1>
<h2>Um segundo título aqui</h2>

<p> para criar um parágrafo:

<p>Um texto qualquer</p>

<a> para gerar um link, e neste caso, por conter esse tipo de tag ao clicar, abre-se uma nova página:

<a href="<https://devgo.com.br/>">Um link para a página da DevGo</a>

<button> para criar um botão

<button>Um botão qualquer</button>

<img> para gerar uma imagem —perceba que aqui, não há um conteúdo entre a tag:

<img src="URL_DA_IMAGEM" />

<div> como a tag mais comum de todas, pois gera um elemento genérico:

<div>Você pode fazer o que quiser dentro de uma tag div</div>

Existem diversos outros elementos, como por exemplo, para criar formulários, campos de input, uma tabela e até elementos que aparentemente não mudam nada na sua página mas contém uma informação importante como por exemplo um endereço, um artigo, etc. Você pode encontrar uma lista de todas tags HTML neste link.

Na prática, em um elemento como o bloco para uma postagem na devGo poderia ficaria como:

<div>
    <h1>Título da postagem</h1>
    <img src="LINK_DA_IMAGEM_DO_POST" />
    <span>Autor da postagem</span>
    <p>Aqui todo conteúdo do texto</p>
</div>

CSS

Uma coisa é montar a estrutura da página, outra coisa é deixar ela “bonita”. E como estamos falando de frontend, o que o usuário vê, deixar uma aplicação bonita é trabalho importantíssimo.

Enquanto o HTML é responsável pela estrutura, o CSS é responsável pela estilização. O trabalho do CSS é buscar um elemento no HTML e aplicar propriedades de cor, tamanho do texto, fonte utilizada, posicionamento, entre vários outros estilos.

O primeiro passo para aplicar um estilo CSS em um elemento é “marcar” este elemento no HTML. Existem duas formas: o “id” ou uma “classe” —IDs costumam ser mais específicos, por fim de identificação mesmo; classes costumam ser mais gênericas, quando há estilos compartilhados entre vários elementos, e um elemento pode até ter mais de uma classe. Essa identificação é aplicada no próprio elemento HTML, como:

<div class="classe1 classe2">Conteudo</div>
<div id="id1">Conteudo</div>

O segundo passo, é “integrar” o CSS na sua página HTML. Para isso existem dois formatos:

Na página HTML, você pode utilizar a tag style:

<style>
    ##Estilos aqui
</style>

Ou, criando um novo arquivo styles.css e importar este arquivo no HTML. Colocamos a tag abaixo, dentro das tags <head> do HTML:

<head>
    <link rel="stylesheet" href="styles.css">
</head>

O terceiro passo é criar os estilos para cada elemento. Os elementos podem ser identificados pela tag, pelo ID utilizando # antes do nome aplicado na identificação ou pela classe utilizando um. Antes do nome aplicado na classe:

## Aplicando em uma tag
p {
    font-size: 16px;
    color: black;
}

## Aplicando em uma classe
.classe1 {
    background-color: gray;
    padding: 50px;
    text-align: center;
}

## Aplicando em um ID
#id1 {
    margin: 20px;
    border: 1px solid red;
}

Cada propriedade aplicada irá afetar todos os elementos que possuem a tag, classe ou ID, por isso é bastante comum que você tenha inúmeras classes para cada elemento —claro, dependerá muito da forma em que você irá organizar o seu projeto. Você pode aplicar quantas propriedades quiser no CSS, e existem uma infinidade de propriedades que podem ser aplicadas:

color para definir a cor do texto
background-color para definir a cor de fundo de um elemento
margin para criar margens de espaçamento nos elementos
font-size para definir o tamanho da fonte
text-align para o alinhamento do texto
border aplicação de bordas no entorno do elemento

Você pode encontrar a lista de propriedades neste link.

Trabalhando com HTML e CSS na prática

Desenvolver uma página com HTML e CSS é uma questão de prática. Por mais que você tenha entendido como deve funcionar uma estrutura e a estilização de um elemento, temos uma diversidade de tags e propriedade bastante grande, é impossível ter tudo isso “decorado”.

Em um projeto real, devemos lembrar também que nem tudo são flores: propriedades entram em conflitos entre si, estruturas precisam ser melhor adaptadas para cada caso e por aí vai. É até uma questão de tentativa de erro. Por isso, quanto mais projetos você fizer, quando mais experiência tiver, mais tranquilo será o seu desenvolvimento.

Nos nossos próximos artigos, vamos evoluindo estes conceitos e montando projetos! Nos acompanhe em nosso canal do Discord, inscreva-se em nossa newsletter e acompanhe de perto os conteúdos da DevGo.