Scribd
Carregar
33 visualizações6 páginas

HTML, CCS e Bootstrap

A aula aborda o conceito de IDEs, destacando a instalação e uso do Visual Studio Code para desenvolvimento web. Os alunos aprendem a criar sua primeira página HTML, incluindo a instalação de extensões úteis e a visualização do arquivo no navegador. Exercícios são propostos para reforçar o aprendizado sobre IDEs e práticas de programação.

Enviado por

Roberson
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
33 visualizações6 páginas

HTML, CCS e Bootstrap

A aula aborda o conceito de IDEs, destacando a instalação e uso do Visual Studio Code para desenvolvimento web. Os alunos aprendem a criar sua primeira página HTML, incluindo a instalação de extensões úteis e a visualização do arquivo no navegador. Exercícios são propostos para reforçar o aprendizado sobre IDEs e práticas de programação.

Enviado por

Roberson
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 6

Aula 1

HTML, CCS e Bootstrap

Preparando o ambiente de desenvolvimento


Professora: Lívia Gouvêa

Introdução

IDE é um acrônimo para Integrated Development Environment cuja tradução em


português é Ambiente de Desenvolvimento Integrado. Uma IDE é um software que
possui ferramentas fundamentais para o desenvolvimento de sistemas como editor
de código, compilador de código, depurador de código (debugger), entre outras. Estas
ferramentas auxiliam e otimizam o processo de programação.

Objetivos da aula

● Explicar o conceito de IDEs de desenvolvimento


● Demonstrar a instalação do VS Code
● Implementar a primeira página HTML

Resumo

As IDEs possuem funcionalidades que otimizam o processo de programação, como


correções de sintaxes incorretas, indentação automática de código, sugestão de
código, esquema de cores para melhor visualização do código, dentre muitas outras.

Alguns exemplos de IDEs são: Netbeans, que é muito utilizado para programação em
Java, Eclipse e Visual Studio Code (VS Code) que são muito populares para
programação em diversas linguagens, como PHP.

Em nosso curso, iremos utilizar a IDE Visual Studio Code (VS Code). Para instalar o
VS Code é necessário fazer o download do mesmo no site do programa:
https://code.visualstudio.com/Download. Em seguida, basta executar o programa
para instalá-lo em sua máquina, seguindo os passo a passo da interface de
instalação.
Explorando o VS Code e criando a primeira página HTML

O VS Code possui uma interface na qual podemos instalar várias extensões que irão
auxiliar no dia a dia da programação. Dentre elas, destaca-se para este curso as
extensões:

● IntelliSense for CSS class names in HTML: que fornece preenchimento de


nome de classe CSS para o atributo de classe HTML com base nas definições
encontradas em seu espaço de trabalho ou em arquivos externos de folhas de
estilo.
● Path Intellisense: que completa automaticamente os nomes dos arquivos que
serão incluídos (como imagens) enquanto se digita o caminho deles.
● CSS Peek: que permite que se exiba ou vá para a definição da classe CSS ao
pressionar a tecla de atalho ctrl e passar o mouse sobre a classe que está
sendo utilizada ou ao clicar na classe respectivamente.

Como criar a primeira página HTML do projeto?

Primeiramente abra o Visual Studio Code que você instalou em seu computador.
Depois clique em File e, em seguida, Add Folder to Workspace. Uma janela se abrirá,
em que você poderá escolher em qual local do seu computador você deseja criar a
pasta do projeto. Escolha o local, crie a pasta do projeto e clique em Add. Agora já
temos a pasta do projeto.

Em seguida, vamos criar o primeiro arquivo HTML do projeto. Para isso, clique com
o botão direito do mouse na pasta do projeto que você criou e clique em New file.
Aparecerá um campo para preencher o nome do novo arquivo. Vamos nomear este
arquivo como index.html. Por que o nome index? Pois é, o nome do arquivo padrão
para a página inicial de uma aplicação é o primeiro arquivo solicitado pelo servidor
para ser exibido no navegador, caso nenhum outro seja especificado.

Agora vamos adicionar algum conteúdo à página. Vamos escrever a frase “Olá,
mundo!”. E por que esta frase? “Olá, mundo!” Ou “Hello, world!”. Essa frase é
convencionada como sendo a primeira frase utilizada a ser exibida por quem está
iniciando um projeto e ou aprendendo a programar!

Agora que temos nossa primeira página HTML criada, como faremos para visualizá-
la no navegador? Clique com o botão direito no arquivo index.html que você criou e,
em seguida, clique em copy path (estamos copiando o caminho do arquivo no
computador). Agora abra o navegador de sua preferência e cole o caminho que foi
copiado no local onde se digita o endereço de um site. Deverá ser exibida a frase de
sua primeira página HTML: “Olá, mundo!”

Como aplicar na prática o que aprendeu

1. Faça o download e instalação do Visual Studio Code.

2. Abra o VS Code e navegue até o menu de instalação de extensões ou dê início


pelo atalho (ctrl+shift+X)

3. No campo de busca, digite IntelliSense for CSS class names in HTML. Clique na
extensão e, em seguida, em Install. Pronto! Extensão instalada.

4. Agora faça o mesmo para as extensões Path Intellisense e CSS Peek. Busque por
elas e, em seguida, clique para instalar.

5. Agora crie um novo projeto, como indicado anteriormente. Clique em File e, em


seguida, Add Folder to Workspace. Escolha o local para criar a pasta do projeto e
clique em Add.

6. Vamos criar uma nova index.html para este projeto: Clique com o botão direito do
mouse na pasta do projeto que você criou e clique em New file. Nomeie o novo arquivo
como index.html.

7. Abra o arquivo index.html e digite a frase “Olá mundo!”.

8. Copie o caminho do arquivo clicando sobre ele em seguida em copy path.

9. Cole o caminho no navegador e visualize a frase “Olá mundo”

Dica quente para você não esquecer


● As IDEs possuem muitas extensões e atalhos que auxiliam a otimizar a
programação.
● No Visual Studio Code, o atalho !+Enter gera a estrutura básica de uma página
HTML.
● Outro atalho muito útil é a identação automática de código, que pode ser realizada
apertando as teclas Ctrl+Shift+I

Referência Bibliográfica

Visual Studio Code. Code editing. Redefined. Disponível em:


https://code.visualstudio.com/ Acesso em: 20 set. 2022.

Exercícios

1) Qual é a definição correta de IDE?


a. Information Development Environment
b. Informatics Development Environment
c. Integração de Desenvolvimento de Informática
d. Ambiente de Desenvolvimento Integrado
e. Ambiente de Desenvolvimento Informado

Gabarito comentado: Letra D. Ambiente de Desenvolvimento Integrado é a tradução


de Integrated Development Environment, designado como um ambiente
especializado para auxiliar no desenvolvimento de sistemas.

2) Qual destas não é funcionalidade de uma IDE?


a) Editor de código
b) Compilador de código
c) Depurador de código
d) Corretor de sintaxe
e) Plataformas low-code
Gabarito comentado: Letra E. Um ambiente de desenvolvimento integrado possui,
entre outras funcionalidades, editor de código, compilador de código, depurador de
código e corretor de sintaxe, mas não é uma plataforma low-code, pois exige que se
tenha conhecimento da linguagem de programação para escrever o código.

3) Qual destas é um exemplo de IDE?


a) Microsoft Word
b) WordPad
c) Visual Studio Code
d) LibreOffice
e) Terminator

Gabarito comentado Letra C. Visual Studio Code, uma IDE muito utilizada por
desenvolvedores no processo de desenvolvimento.

4) Por padrão, como deve se chamar a página inicial de um projeto?


a) Início
b) index
c) begin
d) config
e) inix

Gabarito comentado Letra B. Index.html é o arquivo padrão para a página inicial


de uma aplicação. É o primeiro arquivo solicitado pelo servidor caso nenhum outro
seja especificado.

Você também pode gostar