CAPÍTULO II

HTML BÁSICO

2.1 O Editor

O Visual Studio Code (também conhecido como VS Code) é a nossa escolha para a
prática do desenvolvimento de interfaces web. É um editor de código-fonte desenvolvido pela
Microsoft. Ele é um ambiente de desenvolvimento integrado (IDE) leve, gratuito e de código
aberto que suporta várias linguagens de programação. O Visual Studio Code é projetado para
ser altamente extensível e oferece uma ampla gama de recursos que o tornam popular entre
desenvolvedores de software.
Aqui estão algumas características e funcionalidades principais do Visual Studio
Code:
Multiplataforma: O VS Code é compatível com Windows, macOS e Linux,
permitindo que os desenvolvedores usem a mesma ferramenta em diferentes sistemas
operacionais.
Suporte a Múltiplas Linguagens: O editor oferece suporte a uma variedade de
linguagens de programação por meio de extensões, incluindo JavaScript, TypeScript, Python,
Java, C#, HTML, CSS, entre outras.
IntelliSense: Oferece recursos avançados de autocompletar, sugestões e informações
de contexto durante a escrita de código, melhorando a produtividade do desenvolvedor.
Depuração Integrada: Permite a depuração diretamente no editor, facilitando a
identificação e correção de problemas no código.
Controle de Versão Integrado: Oferece integração com sistemas de controle de
versão, como Git, para gerenciar facilmente as alterações de código.
Extensibilidade: Os desenvolvedores podem estender as funcionalidades do Visual
Studio Code instalando extensões da vasta biblioteca disponível no Visual Studio Code
Marketplace.
Terminal Integrado: Inclui um terminal integrado, permitindo que os
desenvolvedores executem comandos diretamente do editor.
 Integração com Ambientes de Desenvolvimento: Pode ser integrado a ambientes de
desenvolvimento específicos, como [Link], para facilitar o desenvolvimento de aplicativos
baseados em determinadas tecnologias.
Configuração Fácil: Possui uma configuração simplificada e é projetado para ser
rápido e responsivo.
O Visual Studio Code é uma escolha popular para muitos desenvolvedores devido à
sua flexibilidade, desempenho e à comunidade ativa que contribui para suas extensões e
aprimoramentos contínuos.

2.0 – O ambiente de desenvolvimento Visual CODE

Profa. Adriana da Silva Belon 2

2.2 As extensões que utilizaremos

Existem várias extensões disponíveis para melhorar a experiência de desenvolvimento

no VSCode ao trabalhar com HTML. Aqui estão algumas extensões populares:

Auto Close Tag

Descrição: Esta extensão fecha automaticamente as tags HTML assim que você as
digita.

HTML Snippets
Descrição: Oferece uma série de snippets (trechos de código) para facilitar a escrita de
HTML.

Prettier - Code formatter

Descrição: Esta extensão formata automaticamente o código HTML (e outros tipos de
código) para um estilo consistente.

Profa. Adriana da Silva Belon 3

 Live Server
Descrição: Inicia um servidor ao vivo para a visualização instantânea de alterações no
navegador à medida que você edita o código HTML, CSS ou JavaScript.

Colorize
Como o nome indica, a extensão Colorize visualiza instantaneamente as cores CSS,
gerando um plano de fundo colorido

Inline HTML
Destaque de sintaxe para html/css dentro de strings.

2.3 Atalhos Super Úteis

CTRL + ; → comentário de linha ou bloco

Ctrl + Shift + N → Abre uma nova janela do VS Code.
Ctrl + D: Seleciona a próxima instância da palavra atual ou a seleção atual. Repetir este
atalho para selecionar ocorrências adicionais.

Profa. Adriana da Silva Belon 4

 ? Exercícios
01 – Pesquise mais 5 extensões úteis para HTML e explique sua funcionalidade

02- Pesquise mais 5 atalhos úteis para HTML e explique sua funcionalidade

Profa. Adriana da Silva Belon 5

2.4 O que é HTML

Não podemos dizer que HTML(Hyper Text Markup Language) é uma Linguagem
de Programação, trata-se de um conjunto de regras de formatação para documentos web.
Em HTML, trabalhamos com TAGS em um documento com o formato de texto. O HTML
define um conjunto de estilos, como cabeçalhos, parágrafos, listas e tabelas. Com as tags
podemos inserir imagens e links.
Foi também o primeiro código que surgiu para o desenvolvimento de home pages e continua
até os dias atuais, sendo a base para desenvolvimento de aplicativos Web.
Pelo fato do html ser a base para o desenvolvimento WEB, faz-se necessário que os
aprendizes passem primeiramente por este aprendizado antes de iniciar qualquer tipo de
treinamento em PHP.
Para utilizá-la, basta um simples editor de texto.

2.5 Características Gerais do HTML

Os documentos HTML, sempre são escritos em formato texto, sendo necessário então,
apenas um editor de texto simples.
Veja a estrutura de um WEBSITE:
WEBSITE = Conjunto de Páginas
Desta forma, a informação mínima é a página.
HTML não diferencia maiúsculas e minúsculas (não é “case sensitive”), porém, aconselho ao
desenvolvedor que defina um padrão em seu desenvolvimento. Ou tudo em caixa alta ou tudo
em caixa baixa.
As marcações do HTML – tags - consistem do sinal (<), seguida pelo nome da marcação e
fechada por (>).
De um modo geral, as tags aparecem em pares. Por exemplo: <li> Marcadores </li). O
símbolo que termina uma determinada marcação é igual aquele que a inicia, antecedido por
uma barra (/) e precedido pelo texto referente.

Profa. Adriana da Silva Belon 6

Exemplo 1:
Estrutura Básica de um documento em HTML
<html>
<head>
<title> Livro Desenvolvimento Web </title>
</head>
<body>
Você ficará bom nisso!
</body>
</html>

Onde:
<html> </html> - delimita um documento em html
<head> </head> - define uma área a ser lida antes de carregar o texto em html. não é exibido
no corpo da página. Esta área é geralmente utilizada para carregarmos folhas de estilo,
redirecionamentos, código java script, etc.
<body> </body> - determina o início e o fim do corpo do texto.
<title> </title> - coloca o nome da página na barra de título da janela.

4.1 Utilizando o Visual Code para testar o seu resultado

Siga este passo a passo para construir seu primeiro documento HTML de forma bem simples.

1- Crie uma pasta no seu Windows Explorer

Profa. Adriana da Silva Belon 7

 2- Abra o Visual CODE
3- Vá em File Open Folder e Escolha a sua pasta criada

4- Na lateral esquerda, clique em + (New File)

5- Digite o nome do arquivo de trabalho

6 – Digite html e pressione TAB

Profa. Adriana da Silva Belon 8

 7 – Pronto ! Agora você digita o código de teste

8 – E pode rodar no navegador utilizando a Extensão Go Live.

• Desta forma, criando a pasta do projeto e os arquivos de trabalho dentro desta pasta
você poderá utilizar a extensão Live Server. A extensão que atualiza em tempo real
as suas atualizações do arquivo no navegador.
Bastando para isso clicar em Go Live na parte inferior da tela

Profa. Adriana da Silva Belon 9

2.6 Testando seus conhecimentos em html

Esta lista de exercícios foi criada para que o leitor possa avaliar seus conhecimentos em
HTML, permitindo que o leitor desconsidere este Capítulo e parta ao Capítulo II, caso consiga
resolver e responder pelo menos 80% das questões abaixo (sem utilizar ferramentas de
pesquisa)
Boa Sorte!!!! Avalie-se!!!!

? Avalie-se
01 - Desenvolva as tags para criação de uma página html com:
3 níveis de cabeçalho
Uma imagem de “fundo”
O 1º Cabeçalho deverá ser azul com o texto “Boa Noite”
O 2º Cabeçalho deverá ser verde com o texto “alunos”
O 3º Cabeçalho deverá ser vermelho com o texto “de WebDesign e Internet”

02 – Desenvolva as tags para criação de uma página html com a seguinte estrutura:
Título da Página= Informática na Educação
Cabeçalho Nível 1 (Centralizado) = AMBIENTES INFORMATIZADOS DE
APRENDIZAGEM
Cabeçalho Nível 2 – Alinhado a Esquerda = O PROFESSOR
Conteúdo: Entre as contribuições da informática freqüentemente enfatizadas por alguns
especialistas da área de Informática na Educação, está a de favorecer o trabalho do professor.
Texto Final = Celina Couto
Cor da fonte = Azul, Tipo da Fonte = Verdana, Alinhado a direita.

03- Com base nas tags para interligar Documentos, crie a seguinte página html:
a) Uma página (index) com o título: Negrito , cor azul, centralizado =
Cursos do Instituto Federal.
b) Crie os seguintes Links... que abrirão as seguintes páginas
• Processos Gerenciais = [Link]

Profa. Adriana da Silva Belon 10

 • Química = [Link]
• Análise de Sistemas = [Link]
• Tecnologia em Alimentos = [Link]

04 - Qual a função da tag mostrada abaixo:

<META HTTP-EQUIV="REFRESH" CONTENT="2; URL=[Link]

 05 - Crie uma página html, título Imagens em Tabelas e faça o que se pede:

(Escreva as tags)
a) Características da página:
Cor do título = #ffaa00
Cor de fundo = #ffdd99
Móveis em Promoção = Tahoma, N, Tamanho 20
b) Características da Tabela
Espaço ocupado no Browser = 80 %
Tamanho de cada coluna = 40%
Borda = 4 - textos e imagens centralizadas em relação a coluna
Linhas de Preço - cor de fundo = #ffaa00

07 – Qual a função das tags mostradas abaixo:

<A HREF="#Histórico">Ir para o Histórico</A>

<A NAME="Histórico">INICIO DO HISTÓRICO</A>

Profa. Adriana da Silva Belon 11

08 – Explique a função de cada linha nas tags abaixo
<html>
<head>
<title> título </title>
</head>
<body>
<table bgcolor =” #ffdd99” border =” 6” width=”50%”>
<tr>
<td align="center">
<a href="[Link]"><img src="[Link]" alt="clique para entrar"
border=”no”> </a> </td>
</tr>
</table>
</body> </html>

Profa. Adriana da Silva Belon 12

2.7 Características Gerais do HTML

Antes de começar a desenvolver as tags HTML, é muito importante que você conheça os
principais códigos utilizados para determinar as cores dos elementos de uma home page.
As cores em html são definidas no formato hexadecimal e a tabela de cores possuí
aproximadamente 16 milhões de cores.
Veja alguns exemplos de cores no padrão hexadecimal e pesquise na Web a tabela completa.

Branco: #FFFFFF
Preto: #000000
Vermelho: #FF0000
Azul: #0000FF
Amarelo: #FFFF00
Verde:#00FF00

Inserindo Comentários em HTML

Os comentários em html são utilizados para explicações e anotações importantes. Os
comentários não são lidos pelo navegadores, bastando para isso identificá-los de forma
correta.
<!-- isto é um comentário --!>

Exemplo 2 :
<html>
<head>
<title>Exemplo de HTML simples</title>
</head>
<body>
Cronograma de Disciplina
<br> <br>
Curso WebDesign e Internet <p>
LPW I
</body></html>

Profa. Adriana da Silva Belon 13

 Onde:
<html> - tag de abertura
<head> o comando de carregamento (lida antes de carregar)
<br> = quebra de linha
<p> = parágrafo
Ao utilizar <p> o espaçamento é maior entre uma linha e outra.
... enquanto que o br apenas quebra a linha.

Exemplo 3:

<html>
<head>
<title> Exemplo com imagem no Fundo</title>
</head>
<body background=”[Link]”> Lembrando que todos os ajustes
e configurações mais avançadas
OLÁ PESSOAL!!! <p> em tags serão feitas futuramente
VOCÊS GOSTARAM?<p> com CSS
</body>
</html>

Exemplo 4:
<html>
<head>
<title> Exemplo com cor de Fundo e cor de texto padrão </title>
</head>
<body bgcolor=”#0000FF” text=”#FFFFFF”>
Olá alunos!!! <p>
Bem vindos ao Site de Apoio!
</body>
</html>

Profa. Adriana da Silva Belon 14

 Onde:
<background> Repete a cópia lado a lado de uma figura até esta preencher toda a janela
<bgcolor> define a cor de fundo
<text> define uma cor padrão para todo o conteúdo de texto existente no body.

Exemplo 5:
<html>
<head>
<title> Exemplo com imagem fixa </title>
</head>
<body background=”[Link]” bgproperties = “fixed”>
<marquee width=900 direction = left scrollamount = 10> WEBDESIGN E INTERNET
</marquee> <br>
<hr width = 100% size = “3” color=”red”>
</body>
</html>

Onde:
<bgproperties= “fixed”> fixa a imagem de fundo – não permite que ao rolar a página a
imagem role junto.
<marquee> cria letreiro em movimento: width = tamanho , direction = no caso rola para
esquerda ou right para direita, scrollamount = velocidade
<hr width= 100%> = cria linha horizontal que ocupa o espaço total do navegador: size =
espessura da linha, color = cor da linha

Profa. Adriana da Silva Belon 15

 ? Exercícios HTML A

01 – Crie uma página html, omita a tag que é lida antes de carregar o documento html e
faça o que se pede:
a) Crie uma página html com o título Exercício 1, cor de fundo = amarelo, cor de texto =
azul
b) Escreva a frase: O utilitário REQUEST.
c) Insira um parágrafo
d) Escreva : Retorna ao servidor informações do usuário;
e) faça o seguinte comentário no código:
Este é o 1º exercício de html

02 - Crie uma página html e faça o que se pede:

a) O título da página será Semiótica;
b) Coloque uma imagem denominada [Link] como fundo da página;
c) O primeiro conteúdo que aparecerá no body será um letreiro em movimento com as
seguintes características:
c.1 – velocidade = 30
c.2 – tamanho = 800
c.3 – rolando da esquerda para direita
c.4 - texto do letreiro = O que é Semiótica?
d) Quebre 3 linhas.
e) Continue com o seguinte texto: A semiótica trata-se de uma ciência que estuda todos
os tipos de linguagem, tanto as visuais como as escritas e orais.

Profa. Adriana da Silva Belon 16

2.7.1 Mais Tags HTML

Como criar cabeçalhos

Os cabeçalhos são utilizados em qualquer parte do corpo do html, e são utilizados para
diferenciar blocos de textos. Temos na verdade uma variação de tamanho que vai de <H1> até
<H6>, onde <H1> é a maior fonte e <H6> a menor.

<html>
<head>
<title> Testes HTML </title>
</head>
<body bgcolor=#0000ff text=#ffffff>
<h1>cabeçalho nível 1</h1>
<p>
<h2>cabeçalho nível 2</h2)
<p>
<h3>cabeçalho nível 3</h3>
<p>
<h4>cabeçalho nível 4</h4>
</body>
</html>

Alterando a Cor das Fontes

A tag <font color> é utilizada para alterar a cor da fonte de documentos html. Nas cores,
devemos informar o padrão hexadecimal.

<html>
<title> Testando as Cores de fonte !!!</title>
<head>
<body bgcolor=#0000ff>
<font color=#ffffff> <h1>Geni Quintino</h1></font>
<p>
<font color=#000000><h2>22 anos</h2></font>
Profa. Adriana da Silva Belon 17
 <br><br><br>
<font color=#ff000f><h3>estudante...</h3>
<p>
<h4>Analista de Sistemas</h4>
<body>
<html>

Alterando o tipo de Fonte

Com a tag <font face> podemos alterar a tipografia das fontes, conseguindo assim um
resultado visual mais interessante, porém, não devemos esquecer que os usuários de Internet
podem não possuir determinado tipo de fonte instalada em suas máquinas. Sugere-se então a
utilização de fontes convencionais.

<html>
<title> Testando o Tipo de fonte !!!</title>
<head>
<body bgcolor= “#0000ff”>
<font face= “tahoma”> <h1>Valdir da Silva</h1></font>
<p>
<font face=verdana><h2>22 anos</h2></font>
<br><br><br>
<font face=arial ><h3>estudante...</h3>
<p>
<h4>Analista de Sistemas</h4>
<body>
<html>

Profa. Adriana da Silva Belon 18

Formatações diversas de Texto
Veja abaixo, mas formatações que podemos aplicar aos documentos em html.

<html>
<head>
<title>WebDesign e Internet</title>
</head>
<body background= “[Link]” bgproperties = “fixed”>
<font color= “#ff0099” font face= “verdana” font size= “4”> <center> <b> 2º
semestre </b></center> </font>
<br>
Ano Letivo 2007
<p align= “right”><font color= “#ff9933” font face= “Tahoma” font size= “2”>
Análise e Desenvolvimento de Sistemas </font> </p>
</body>
</html>

Onde:
<body background= “[Link]” bgproperties = “fixed”> - Coloca uma imagem de
fundo, porém pelo fato de estarmos utilizando bgproperties=”fixed”, ao rolar a página a
imagem não rolará junto com o texto, ela estará fixa.
<font face> Altera o tipo de fonte
<font size> Define o tamanho da fonte
<p align = “right”> alinha o parágrafo a direita. Se substituirmos right por justify, teremos
um alinhamento perfeito, justificado.
<br> - quebra de linha

Profa. Adriana da Silva Belon 19

 ? Exercícios HTML B

01 – Com base nas explicações anteriores, crie uma página html com:
a) título da página: Cabeçalhos;
b) 3 níveis de cabeçalho onde:
O 1º Cabeçalho deverá ser azul, o 2º verde e o 3º PRETO.
c) O Fundo da página deverá ser amarelo
d) Insira textos variados para cada nível de cabeçalho.

02 - Bom base em todas as explicações obtidas até agora, elabore uma página html com
a seguinte estrutura:
Título da Página = Informática na Educação.
Cabeçalho Nível 1: Centralizado, cor azul, fonte = tahoma, texto = AMBIENTES
INFORMATIZADOS DE APRENDIZAGEM.
Cabeçalho Nível 2: Alinhado a Esquerda, cor azul, fonte = verdana, texto = O
PROFESSOR.
Conteúdo: Entre as inúmeras vantagens da informática evidenciadas por alguns
especialistas da área de Informática na Educação, está a contribuição com o trabalho do
professor, enriquecendo e diversificando a sua forma de conduzir o processo de ensino-
aprendizagem. Outra contribuição importante é a de ampliar os níveis de abordagem dos
conteúdos estudados.
Texto Final : cor vermelha, alinhado a direita, Texto = “Fonte: Celina Couto”

Profa. Adriana da Silva Belon 20