HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags

O editor de código VSCode - Apresentação

Guilherme: Olá! Meu nome é Guilherme Lima.

Rafaella: E eu sou Rafaella Ballerini.

Guilherme: Estamos muito felizes em te acompanhar no curso HTML e CSS: Desenvolvendo uma página.

Rafaella: Afinal, o que é HTML? O que é CSS? São linguagens de programação? Como conseguimos transformar esses códigos em uma página web?

Guilherme: Aprenderemos do zero a:

• utilizar páginas HTML;
• onde escrever nossos arquivos HTML e CSS;
• para que servem essas duas linguagens.

Este curso é indicado para pessoas que nunca utilizaram HTML e CSS na vida. Se você se encaixa nessa descrição, te convidamos para mergulhar juntos!

HTML e CSS com Gui Lima e Rafa Ballerini aqui na Alura!

O editor de código VSCode - Criando um arquivo

Rafaella: Antes de começar a codar, criaremos um arquivo com outro tipo de extensão, a qual estamos mais acostumados, para entendermos como este arquivo é criado. A primeira etapa será abrir um editor de texto — pode ser o Docs do Google, o Word ou mesmo um bloco de notas. Vamos escrever neste documento.

Guilherme: A ideia é entender que a criação de um código HTML ou CSS é similar à criação de um documento de texto. A diferença é que, no arquivo do Docs, existem elementos que nos auxiliam nessa criação.

Rafaella: Exato, elementos visuais.

Guilherme: Até de interface. Todo texto que lemos — como por exemplo um livro — possui um título. Vamos criar um título?

Rafaella: Sim. Se abrirmos o Docs do Google, veremos no topo da página uma barra de menus. Abaixo do menu "Formatar" temos uma lista de submenus de estilo que nos permite modificar automaticamente a configuração da fonte, sem precisar realizar modificações manualmente. Vamos abrir esse submenu e selecionar a opção "Título". No corpo do documento escreveremos "Isso é um título".

Guilherme: Temos um título. Pressionaremos "Enter" no final dessa linha e veremos que o tamanho do nosso cursor diminuiu. Na nova linha, o documento espera o formato "parágrafo", que consiste em um texto menor.

Rafaella: Este formato "parágrafo" é o padrão do Docs do Google. Nessa linha escreveremos "isso é um parágrafo". Podemos ver como é diferente a formatação entre o título e o parágrafo.

Guilherme: Este exemplo parece muito simples, mas explicaremos a ideia posteriormente. Os livros, geralmente, possuem imagens. Vamos acrescentar uma imagem do HTML 5?

Rafaella: Vamos. Buscaremos no google por "html 5" e clicaremos na aba "Imagens", na qual salvaremos uma imagem da logo do HTML 5. O nome do arquivo será html 5. Retornaremos ao Docs do Google, abriremos a nossa imagem e a arrastaremos para o documento que estamos editando.

Guilherme: Foram criados um título, um parágrafo e uma imagem. Você não deve estar entendendo nada. Contudo, a ideia é a seguinte: definimos que o título é um título clicando nos estilos e aplicando-os ao texto. No HTML fazemos algo parecido, porém sem clicar em menus.

Rafaella: Exatamente. As nossas páginas web também utilizam títulos, assim como os livros. Por exemplo, quando entramos em páginas de notícias percebemos um título grande, vários parágrafos com notícias e imagens embutidas. Precisamos pensar como uma página web funciona. Ela também possui esses elementos. Entretanto, para desenvolvermos um HTML não temos menus de estilização prontos, em vez disso utilizaremos códigos.

No caso do HTML, utilizaremos as tags. Elas serão responsáveis por informar quais trechos serão títulos, por exemplo.

Guilherme: Boa. Precisamos aprender todas as tags de uma só vez?

Rafaella: Não.

Guilherme: Não façam isso, por favor.

Rafaella: É uma questão de prática. Devemos analisar o que se encaixa melhor em cada contexto. Não adianta simplesmente decorar.

Guilherme: É isso aí. Vamos prestar atenção em um detalhe interessante, que é a extensão. Vamos dar um nome para esse documento?

Rafaella: Vamos. O nome será "Exemplo".

Guilherme: Baixaremos este arquivo. Quando clicamos no menu "Arquivo" localizado na barra de menus, uma lista de submenus é exibida. Selecionaremos o submenu "Fazer download" e nele veremos uma lista com vários tipos de extensão. Elas são formas com as quais esse arquivo será representado, ou seja, como ele vai funcionar. Pode ser um arquivo DOCX, um PDF, um TXT, e até mesmo um HTML compactado!

Podemos codar a partir de um editor de texto como o Docs Google ou o Word?

Rafaella: Não recomendamos.

Guilherme: Não conhecemos ninguém que faz isso.

Rafaella: Como pessoas desenvolvedoras, utilizamos na prática ferramentas específicas para essas tecnologias: os editores de código, algo como ambientes ou IDEs.

Neste curso utilizaremos um editor muito bom para códigos HTML e CSS: o Visual Studio Code, ou VS Code.

Guilherme: A seguir, aprenderemos como baixar e instalar o VS Code na nossa máquina para criarmos nosso arquivo HTML e desenvolver as nossas páginas.

O editor de código VSCode - Instalando o VS Code

Rafaella: Instalaremos o VS Code para criar nosso primeiro arquivo do projeto.

Guilherme: Vamos lá. Abriremos uma aba no navegador e pesquisaremos Vs Code.

Rafaella: Ou Visual Studio Code. Clicaremos sempre no primeiro link retornado pelo buscador. Deixaremos disponível aqui o link do site do VS Code. Em seu interior, alinhado à esquerda, temos um botão denominado "Download for Windows". Vamos clicar nele.

Caso a plataforma utilizada não seja o Windows, basta clicar no botão à direita de "Download Windows", o qual abrirá um submenu para escolher entre baixar Stables ou Insiders, sendo possível escolher, para as duas opções, entre as plataformas macOS, Windows x64 e Linux x64.

Após baixarmos o editor de código, vamos clicar no arquivo e seguir os passos de instalação. Na etapa "Selecione o Local de Destino" é possível escolher o local de instalação. Podemos deixar na pasta padrão ou escolher outra. Na etapa "Selecionar Tarefas Adicionais" podemos instalar configurações. Marcaremos a checkbox da opção "Criar um atalho na área de trabalho" para que seja criado um ícone do VS Code em área de trabalho. No fim das etapas, clicaremos em "Instalar".

Guilherme: A instalação é bem simples.

Rafaella: Sim. Este é um dos motivos pelos quais decidimos utilizar esse editor no curso.

No fim da instalação, marcaremos a checkbox da opção "Iniciar o Visual Studio Code" e clicaremos em "Concluir". Neste momento o Visual Studio Code será aberto na tela, na primeira página: o Get Started (ou "Vamos começar"). Caso queiramos entender o funcionamento, podemos clicar nos links "Get Started with VS Code" ("Comece com VS Code") e "Learn the Fundamentals" ("Aprenda os Fundamentos").

Já que faremos juntos, não será necessário acessar esses links.

Criaremos o projeto em si. Que tal criarmos nossa pasta na área de trabalho para facilitar?

Guilherme: Sim.

Importante: Geralmente um projeto possui diversos arquivos, seja ele HTML, CSS, Python ou Java. Por isso, colocamos todos os arquivos deste projeto em uma pasta.

Vamos dar um nome para nossa pasta?

Rafaella: Vamos. Ela se chamará "Portfólio". Se clicarmos dentro dela veremos que ela está vazia.

Guilherme: O nosso desafio é abrir essa pasta no VS Code.

Rafaella: Exatamente. Abriremos novamente o VS Code, e na página inicial "Get Started", à direita, clicaremos na opção "Open Folder".

Caso você não possua mais a tela "Get Started" aberta, basta acessar a barra de menus no topo da aplicação e clicar em "File" (ou "Arquivo"). Com esse menu aberto, clicaremos no submenu "Open Folder" (ou atalho "Ctrl + K + Ctrl + O").

Após selecionarmos "Open Folder", uma janela será aberta, onde devemos procurar a nossa pasta "Portfólio" através do explorador e selecioná-la. Em seguida clicaremos em "Selecionar Pasta". Neste momento o editor vai abri-la automaticamente.

Guilherme: Antes de abrir a pasta, surgirá uma janela perguntando se a gente confia nos autores que criaram essa pasta.

Rafaella: Basta clicar na opção "Yes, I trust the authors" ("Sim, eu confio nos autores", em português).

Guilherme: A gente criou a pasta e ela está aparecendo no explorador do VS Code, localizado em uma coluna na lateral esquerda da tela. Por enquanto essa pasta não tem nada.

Rafaella: Nada. Ainda estamos com a tela principal do aplicativo exibindo o "Get Started".

Guilherme: Vamos fechar essa aba clicando no X acima dela, no canto superior esquerdo. No explorador vamos ser capazes de visualizar todo os nossos arquivos e documentos que temos na pasta "Portfólio".

Criaremos o primeiro arquivo HTML. Geralmente ele possui um nome padrão.

Rafaella: Sim. Quando precisamos encontrar o HTML principal da página, procuramos por "index.html" — o nosso índice.

Guilherme: Quando falamos do Word, vimos as extensões .docx, .txt e .pdf. O nosso HTML possui a extensão que é o .html. Portanto, criaremos o nome padrão que incide na maioria dos projetos: index.html.

Rafaella: Acessaremos o explorador e, ao lado do nome da nossa pasta, clicaremos no ícone de uma página com um símbolo de + embaixo, que corresponde à opção "New File". É possível também realizar esta ação através da barra de menus, clicando em "File > New File" (ou atalho "Ctrl + Alt + Windows + N").

Após clicarmos nessa opção, um campo de texto vazio será exibido abaixo do nome da nossa pasta. Em seu interior digitaremos o nome do novo arquivo: "index.html" e daremos "Enter".

Guilherme: Uma curiosidade: se clicarmos em "Ctrl + N", o sistema cria uma aba na tela principal denominada "Untitled-1" e com a extensão indefinida. No corpo da tela, será exibida a opção "Select a language" ("Selecionar a linguagem"). Após clicar nessa opção, será aberto um campo de texto vazio no qual digitaremos "html" e daremos "Enter". Desta forma será criado um novo arquivo HTML denominado "Untitled-1".

Para salvá-lo, basta digitar "Ctrl + S" para abrir uma janela de salvamento. Vamos selecionar a pasta "Portfólio", digitar no campo de texto o nome "index2.html" e clicar em "Salvar". Neste momento, ele surgirá no explorador do VS Code, logo abaixo do nosso index.html.

Rafaella: Legal, ele já fica dentro da pasta.

Guilherme: Vamos deletar esse arquivo index2.html, pois o criamos somente para explicação do atalho.

Rafaella: Vamos fechá-lo primeiro.

É importante perceber que quando fechamos a aba do arquivo, nós não estamos deletando-o do projeto. Sempre que quisermos deletar, iremos até o explorador e clicaremos no arquivo com o botão direito, selecionando a opção "Delete".

Guilherme: Instalamos o VS Code, criamos o arquivo index.html e abrimos a pasta do projeto. Nosso próximo desafio será codar o conteúdo.

Vamos voltar no modelo que criamos acessando o nosso arquivo do Google Docs para relembrar o conteúdo que precisamos implementar em nosso projeto. Precisamos criar um título, um parágrafo e uma imagem com HTML.

Sobre o curso HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags

O curso HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags possui 95 minutos de vídeos, em um total de 54 atividades. Gostou? Conheça nossos outros cursos de HTML e CSS em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• O editor de código VSCode
• Documentação e HTML
• Layout e tags semânticas
• Estilizando o projeto com CSS
• Super estilizando o seu CSS