Como treinar HTML E CSS nos estudos sobre desenvolvimento web

Como treinar HTML E CSS  nos estudos sobre desenvolvimento web

Ainda que você seja iniciante no meio da programação, já deve ter ouvido falar sobre HTML. Essa linguagem, fácil de se aprender, permite com que você crie um site sem grandes problemas, e unido ao CSS, você conseguirá um resultado mais profissional. Entenda neste artigo o passo a passo de como treinar HTML e CSS.

Mas afinal, o que é HTML?

Foi criado pelo britânico Tim Berners-Lee, e HTML é um acrônimo para Hypertext Markup Language, que é usado para a construção das páginas da web que acessamos diariamente, ou seja, tudo aquilo que vemos nos sites!

Devemos lembrar também que o HTML não é uma linguagem de programação, mas sim de marcação. Portanto, isso significa que não podemos usar o HTML para criar funcionalidades dinâmicas, assim como podemos fazer com o Javascript, por exemplo.

Sua sintaxe é bem simples e baseada em tags (veremos mais adiante sobre elas), que representam os elementos de uma página, como imagens, listas e links.

Sem isso nosso navegador não conseguiria exibir textos ou carregar outros conteúdos!

Podemos entender o nosso HTML como o esqueleto da nossa página, mas além de um esqueleto, é preciso ter um corpo, é aí que entra o CSS que vamos conhecer um pouquinho mais para frente.

Entenda como funciona o HTML

Geralmente um site é composto por diversas páginas HTML, repare no site da Digital House, ele possui a página inicial e uma página para cada curso disponível, como por exemplo o curso de desenvolvimento web.

Para que seja possível a visualização dessas páginas precisaremos de ao menos 2 arquivos HTML, ou seja, com a extensão .html.  Assim o navegador faz a leitura do arquivo e renderiza o seu conteúdo para que o usuário final possa visualizá-lo.

Cada página é uma estrutura que contém uma série de tags, que são consideradas os blocos de construção das páginas.

O que são tags?

Tags são códigos que definem toda a estrutura de uma página HTML, como por exemplo o tamanho do texto, os parágrafos, as quebras de linha, as imagens, e etc.

A principal característica das tags é estarem sempre dentro dos sinais de chevron, ou seja: < >.

A maioria das tags são compostas  por uma estrutura de abertura e uma de fechamento:

Há também tags de estrutura única, como a tag <br/> que realiza a quebra de linha ou <hr> que cria uma linha horizontal no texto para separar conteúdos.

Vamos supor que você queira escrever o seu primeiro parágrafo em html, então para isso devemos chamar a tag <p> escrevemos o parágrafo e depois fechamos a tag com o </p>:

<p> Meu primeiro parágrafo na digital house! </p>

Ao salvar esse arquivo com a extensão .html  e abri-lo em um navegador, veremos o parágrafo escrito na tela:

Conheça as principais tags

Atualmente conseguimos encontrar mais de 140 tags html para utilização, mas grande parte delas não são muito utilizadas no dia a dia. Abaixo você encontra as tags mais utilizadas e mais importantes para o HTML básico:

<style> </style>

Introduz um código CSS no documento HTML.

<script> </script>

Introduz um código de Script, como JavaScript, no documento HTML.

<link/>

Possibilita fazer uma linkagem com documentos locais ou globais, como por exemplo fontes ou folhas de estilos.

<meta/>

Possibilita incluir metadados na página.

<h1> </h1> <h2></h2> (...)

Tags para definir um título e subtítulos, variando de 1 a 6, sendo h1 o título mais importante e h6 o de menor importância.

<p> </p>

Tag para definir um parágrafo

<span> </span>

Define um span.

<br/>

Realiza uma quebra de linha.

<a> </a>

Tag de link, junto ao atributo href=”…” é responsável pela principal característica da web.

<header> </header>

Define um cabeçalho – tag estrutural e semântica.

<section> </section>

Define uma seção – tag estrutural e semântica.

<article> </article>

Define um artigo – tag estrutural e semântica

<div> </div>

Define uma divisão – tag estrutural.

<footer> </footer>

Define um rodapé – tag estrutural e semântica.

<nav> </nav>

Define uma área de navegação (como menus) – tag estrutural e semântica.

<table> </table>

Define uma tabela.

<tr> </tr>

Define uma linha da tabela.

<td> </td>

Define uma célula da tabela.

<ol> </ol>

Define uma lista ordenada.

<ul> </ul>

Define uma lista não ordenada.

<li> </li>

Define o item de uma lista.

<form> </form>

Define um formulário

<input>

Define os campos do formulário.

<textarea> </textarea>

Define uma área para o usuário digitar um texto.

<button> </button>

Define um botão.

<img/>

Permite inserir uma imagem no seu documento.

Estrutura básica de um documento HTML

Para você poder criar ou editar um documento HTML a única coisa que você precisa é de um editor de texto. Para o desenvolvimento web recomendamos utilizar o Visual Studio Code, mas há vários outros no mercado, basta ver qual você prefere.

Para fins de estudos e testes, recomendamos também o Code Pen, uma ferramenta completa para teste de códigos HTML, CSS e JavaScript diretamente do navegador.

A estrutura básica para iniciar um documento HTML no seu editor de texto preferido, é realizada da seguinte forma:

É através desse código que podemos desenvolver toda a nossa página, estruturando na maneira que preferirmos. Mas vamos entender o que cada parte quer dizer:

Linha 1: A instrução DOCTYPE deve ser sempre a primeira a aparecer em uma página HTML para indicar ao browser qual versão da linguagem usada. Nesse caso, estamos trabalhando com a HTML5, versão na qual a declaração do DOCTYPE é bastante simples, como podemos ver na listagem;

Linhas 2 e 10: Abertura e fechamento da tag html, que delimita o documento. Sendo assim, todas as demais tags da página devem estar nesse espaço;

Linhas 3 e 6: Abertura e fechamento da tag head, que define o cabeçalho do documento. O conteúdo neste espaço não é visível no browser, mas contém instruções sobre seu conteúdo e comportamento. Dentro dessa tag, por exemplo, podem ser inseridas folhas de estilo e scripts;

Linha 4: A tag meta, nesse caso, especifica qual conjunto de caracteres (character set ou charset) será usado para renderizar o texto da página. O UTF-8 contém todos os caracteres dos padrões Unicode e ASCII, sendo, portanto, o mais utilizado em páginas web. A mesma tag meta, porém com outros atributos, pode ser utilizada para outros fins, como na SEO (Search Engine Optimization);

Linha 5: A tag title define o título da página, aquele que aparece na janela/aba do navegador;

Linhas 7 e 9: Abertura e fechamento da tag body, marcando o espaço no qual deve estar contido o conteúdo visual da página. As demais tags que representam texto, botões etc. devem ser adicionadas nesse intervalo;

Linha 8: Nessa linha podemos observar a sintaxe para adição de comentários em HTML. Esse trecho não é renderizado pelo browser.

Como treinar HTML E CSS

Conforme falado anteriormente, o HTML serve apenas de esqueleto que servirá para marcar todos os elementos da nossa página . Porém, sozinho o HTML é limitado a apenas essa função.

Podemos pensar em uma página da web sendo composta por camadas: O HTML formará a camada que apresenta o conteúdo ao usuário, e o CSS formará a camada que dará forma aos elementos. Com o CSS conseguimos atribuir estilos a nossa página e deixar ela personalizada.

O que realmente é o CSS?

CSS é a sigla para o termo em inglês Cascading Style Sheets que, traduzido para o português, significa Folha de Estilo em Cascatas.

Da mesma forma que o HTML, o CSS não é uma linguagem de programação, e também não é uma linguagem de marcação  — é uma linguagem de folhas de estilos. Isso significa que o CSS permite aplicar estilos seletivamente a elementos em documentos HTML. O CSS não é necessariamente obrigatório, mas você vai concordar comigo que não gostaria de olhar para um site feito somente em HTML com textos todos iguais, sem imagens ou qualquer outro tipo de estilo.

CSS: Entenda quais são suas vantagens

Antes do surgimento do CSS, toda a estilização tinha que ser incluída na marcação HTML. Isso significa que você deveria descrever separadamente todo o plano de fundo, as cores das fontes, os alinhamentos, etc.

Agora com o CSS, o seu principal benefício é separar a aparência do conteúdo de um documento. Assim, ao invés da formatação ficar dentro do documento HTML, vai existir apenas uma ligação para o arquivo CSS, que vai conter todos os estilos que você quiser.

Dessa forma, várias páginas podem utilizar o mesmo arquivo de estilos, e quando você quiser alterar a aparência do site, é necessário modificar apenas em um arquivo, e não em diversas partes do seu código.

Como funciona o CSS?

O CSS usa uma sintaxe fácil e simples em inglês junto com um conjunto de regras que o governam.

A estrutura dessa sintaxe funciona da seguinte maneira:

Temos um seletor e uma declaração. Você seleciona o elemento que deseja estilizar, e depois declara o que deseja fazer com ele. Simples, certo?

Mas também devemos seguir algumas regras:

- O seletor sempre aponta para o elemento HTML que queremos estilizar.

- O bloco de declaração pode ter uma ou mais declarações sempre separadas por ponto e vírgula.

- Cada declaração possui um nome de propriedade CSS e um valor, sempre separados por dois pontos.

- Uma declaração sempre vai terminar com ponto e vírgula, e os blocos de declaração são envoltos por chaves.

Vamos ver um exemplo:


Nesse exemplo todos os nossos elementos <p>, utilizados para os textos comuns, serão centralizados com uma fonte de 16px e de cor pink.

As propriedades de CSS são infinitas! Se divirta pesquisando e criando várias coisas incríveis, mas para te ajudar nesse documento você encontra uma lista com os principais seletores.

Como criar uma folha de estilo?

O processo de criação da folha é bem simples. Basta abrir o seu editor de código preferido e criar um documento novo. Depois de criado salve esse documento com a extensão .css (ex: estilos.css). É essa extensão que permite o arquivo ser reconhecido como uma folha de estilo. E pronto, sua primeira folha de estilo foi criada :)

Ok Nykolle, mas como eu integro isso com o meu HTML? É o que vamos ver a seguir!

Integrando o CSS com o HTML

Depois de criar e salvar o arquivo .css precisamos colocar isso dentro do nosso arquivo HTML. É o nosso html quem vai carregar o CSS, lembrando que: CSS não cria sites!

Para avisar o nosso HTML vamos utilizar uma tags de referência que vai dizer ao HTML que existe um arquivo de estilo para ele.

A tag tem a seguinte sintaxe:

<link rel=”stylesheet” type=”text/css” href=”estilo.css”>

Essa referência deve ser adicionada dentro da tag <head> </head> do seu HTML, como no print abaixo:

Agora abra a sua folha de estilos e você está pronto para começar a dar personalidade a sua página HTML.

Tags, classes e ID's

Certo, até aqui já sabemos como criar nossa estrutura HTML, como criar um aquivo CSS e como integrar o CSS ao HTML. Mas para estilizar cada elemento do HTML podemos fazer de 3 formas:

Tags HTML

Podemos estilizar as tags chamando diretamente pelo seu nome, ex:

Além do p, podemos chamar outros elementos, como div, span, h1, e assim por diante.

Classes

Na sua folha de estilo, basta colocar .nome-da-sua-classe {} e iniciar a sua declaração, por exemplo:

Repare que existe um ponto (.) antes do nome da classe. Isso é essencial para que o CSS entenda que está criando uma classe para um elemento do HTML.

Para adicionar essa classe que criamos no CSS, basta adicionar na tag HTML o parâmetro class="" , ex:

Repare que dentro das aspas não precisamos usar o ponto (.) antes da classe. O nome class no HTML já avisa para o CSS que é para ele buscar pelo nome da classe com “.”

IDs

Criar IDs no CSS é parecido com criar as classes, a principal diferença é que os id's são identificados com # ao invés do ponto (.), e também só pode ser usado um id por tag html.

Para adicionar um ID ao HTML, adicione como parâmetro id=””.


Ufa! Quanta coisa, né? Com esses conhecimentos você já consegue treinar HTML e CSS. Que tal tentar?

Você pode ler tudo sobre HTML e CSS com muito mais detalhes na documentação da MDN, um dos principais sites usado pelos programadores.

Divirtam-se!

Aprenda a treinar HTML e CSS na Digital House

E aí, deu para tirar suas principais dúvidas de como treinar HTML e CSS?

Na Digital House você Aprende a fazer sites e sistemas web usando linguagens de programação (HTML, CSS, JavaScript, NodeJS e mais) em até cinco meses no nosso curso de Desenvolvimento Web Full Stack, e ainda sai do curso com um site para chamar de seu, que será o seu portfólio. Incrível, não? Venha fazer parte da comunidade DH.

Leia mais no blog DH:

+ Gestor de produtos: 4 habilidades para se destacar no mercado de trabalho

+ Os 6 principais comandos git para um programador iniciante

+ Gestão de RH: como se adaptar ao trabalho home office e cumprir com todas as responsabilidades?

E aí, já segue a gente no Twitter? Vem pra rede, vamos conversar sobre habilidades digitais! ;)