(Ebook+IFMG) - ProgramadorWebFrontEnd

Programador Web em Tecnologias
Front-end
Danielle Costa de Oliveira
Formação Inicial e
Continuada
+
IFMG
Danielle Costa de Oliveira
Programador Web em Tecnologias Front-end

1ª Edição
Belo Horizonte
Instituto Federal de Minas Gerais
2021
© 2021 by Instituto Federal de Minas Gerais
Todos os direitos autorais reservados. Nenhuma parte desta publicação poderá ser
reproduzida ou transmitida de qualquer modo ou por qualquer outro meio, eletrônico
ou mecânico. Incluindo fotocópia, gravação ou qualquer outro tipo de sistema de
armazenamento e transmissão de informação, sem prévia autorização por escrito do
Instituto Federal de Minas Gerais.
Pró-reitor de Extensão Carlos Bernardes Rosa Júnior

Diretor de Programas de Extensão Niltom Vieira Junior
Coordenação do curso Danielle Costa de Oliveira
Arte gráfica Ângela Bacon
Diagramação Eduardo dos Santos Oliveira
FICHA CATALOGRÁFICA
Dados Internacionais de Catalogação na Publicação (CIP)
O48p Oliveira, Danielle Costa de.

Programador Web em Tecnologias Front-end / Danielle
Costa de Oliveira. – Belo Horizonte : Instituto Federal de Minas
Gerais, 2021.
100 p. : il. color.
E-book, no formato PDF.

Material didático para Formação Inicial e Continuada.
ISBN 978-65-5876-100-6
1. Front-end. 2. HTML. 3. CSS. 4. JavaScript. I. Título.
006.7023
Catalogação: Simoni Júlia da Silveira - CRB-6/2396
Índice para catálogo sistemático:

Programador - 006.7023
2021
Direitos exclusivos cedidos à
Avenida Mário Werneck, 2590,
CEP: 30575-180, Buritis, Belo Horizonte – MG,
Telefone: (31) 2513-5157
Sobre o material
Este curso é autoexplicativo e não possui tutoria. O material didático,

incluindo suas videoaulas, foi projetado para que você consiga evoluir de forma
autônoma e suficiente.
Caso opte por imprimir este e-book, você não perderá a possiblidade de
acessar os materiais multimídia e complementares. Os links podem ser
acessados usando o seu celular, por meio do glossário de Códigos QR
disponível no fim deste livro.
Embora o material passe por revisão, somos gratos em receber suas
sugestões para possíveis correções (erros ortográficos, conceituais, links
inativos etc.). A sua participação é muito importante para a nossa constante
melhoria. Acesse, a qualquer momento, o Formulário “Sugestões para
Correção do Material Didático” clicando nesse link ou acessando o QR Code a
seguir:
Formulário de
Sugestões
Para saber mais sobre a Plataforma +IFMG acesse

https://mais.ifmg.edu.br/
Palavra do autor
Prezado estudante, seja bem-vindo ao curso de Formação Inicial e

Continuada de “Programador Web de Tecnologias Front-end”.
As aplicações Web tem um papel importante no dia a dia das pessoas,
mesmo quem não tem computador em casa ou no trabalho convive com elas e
depende direta ou indiretamente. Muitas pessoas ainda apresentam uma
relação muito distante com recursos disponíveis pela Internet, seja por medo
ou por falta de oportunidades de conhecê-los melhor, o que gera um certo
desconforto de sua parte quando se deparam com situações em que a
utilização dos mesmos é essencial (Internet Banking, compras por comércio
eletrônico, acesso a portais de instituições etc.).
O curso tem como proposta oportunizar à comunidade uma maior
compreensão sobre a Internet e criação de páginas de aplicações Web.
Espera-se que esse conhecimento possa servir de base para novos
aprendizados em programação e que oportunizem a inserção no mercado de
trabalho às pessoas que buscam atuar em empresas ou em prestação de
serviços voltados para construção de páginas pessoais ou comerciais.
O curso está dividido em três módulos, cujo conteúdo foi particionado de
forma estratégica, onde cada uma delas pode ser definida como uma etapa de
estudo.
Conhecimento prévio de uma linguagem de programação é desejável,
mas não essencial. Mesmo que você nunca tenha programado em uma
linguagem estruturada antes, acredito que será possível acompanhar todos os
exemplos deste livro e no final saber desenvolver aplicações de média
complexidade com HTML, CSS e JavaScript.
Desejo a você um excelente estudo

Danielle Costa de Oliveira.
Apresentação do curso
Este curso está dividido em três semanas, cujos objetivos de cada uma são
apresentados, sucintamente, a seguir.
Este livro está dividido em semanas para facilitar a

organização dos estudos e nessa primeira semana, você
conhecerá sobre o universo do desenvolvimento Web
começando pelo entendimento da Internet e seu
funcionamento. Você irá conhecer como é possível
publicar um site na Internet e sobre as aplicações front-end
SEMANA 1
e back-end. Conhecerá sobre como os sites são
desenhados para facilitar a navegabilidade e experiência
do usuário e sobre o problema de compatibilidade dos
navegadores para exibição de páginas. Conhecerá,
também, como obter e instalar a ferramenta de
desenvolvimento que será utilizada no curso, o Notepad++.
Nessa segunda semana, você irá conhecer a linguagem de
marcação HTML e como ela pode ser usada para criar
páginas contendo textos, listas, imagens, hyperlinks,
SEMANA 2
tabelas e formulários. Irá conhecer, também, a linguagem
de definição de estilos CSS para aplicação de diferentes
tipos de estilos as páginas.
Nessa terceira semana, você irá conhecer a linguagem de
programação JavaScript e como ela pode ser usada para
SEMANA 3 adicionar interatividade às páginas. Conhecerá sobre sua
sintaxe básica, os objetos e eventos. Irá conhecer como
manipular janelas e sobre a biblioteca JQuery.
Carga horária: 30 horas.

Estudo proposto: 2h por dia em cinco dias por semana (10 horas semanais).
Apresentação dos Ícones
Os ícones são elementos gráficos para facilitar os estudos, fique atento quando
eles aparecem no texto. Veja aqui o seu significado:
Atenção: indica pontos de maior importância

no texto.
Dica do professor: novas informações ou

curiosidades relacionadas ao tema em estudo.
Atividade: sugestão de tarefas e atividades

para o desenvolvimento da aprendizagem.
Mídia digital: sugestão de recursos

audiovisuais para enriquecer a aprendizagem.
Sumário
Semana 1 – O universo do desenvolvimento web ......................................... 15

1.1. O que é a Internet? ............................................................................ 15
1.2. Como publicar um site na Internet ...................................................... 19
1.3. Aplicações front-end e back-end ........................................................ 21
1.4. Design para a web ............................................................................. 21
1.5. Critérios de usabilidade ...................................................................... 23
1.6. Compatibilidade dos navegadores ..................................................... 24
1.7. Ferramenta de desenvolvimento ........................................................ 25
Semana 2 – As linguagens HTML e CSS ...................................................... 29
2.1 Introdução ao HTML........................................................................... 29
2.2 Estrutura da página ............................................................................ 30
2.3 Formatação de texto .......................................................................... 32
2.3 Listas.................................................................................................. 37
2.4 Hyperlinks .......................................................................................... 39
2.5 Imagens ............................................................................................. 40
2.6 Tabelas .............................................................................................. 41
2.7 Formulários ........................................................................................ 44
3.1 Introdução ao CSS ............................................................................. 51
3.2 Como Criar Estilos ............................................................................. 52
3.3 Tipos de Folhas de Estilos ................................................................. 54
3.4 Modelo de caixa CSS ......................................................................... 58
3.5 Validação CSS ................................................................................... 67
Semana 3 – Noções da linguagem JavaScript .............................................. 69
4.1 Introdução ao JavaScript .................................................................... 69
4.2 Funções ............................................................................................. 73
4.3 Tratamento de Eventos ...................................................................... 76
4.4 Operadores ........................................................................................ 80
4.5 Controle de fluxo ................................................................................ 80
4.6 Objetos principais ............................................................................... 82
4.6.1 Janelas personalizadas ........................................................................ 85
4.7 JQuery ............................................................................................... 87
Referências ................................................................................................... 91
Currículo da autora........................................................................................ 92
Glossário de códigos QR (Quick Response) ................................................. 95
Semana 1 – O universo do desenvolvimento web Plataforma +IFMG
Objetivos
Nesta primeira semana, você conhecerá sobre o universo do
desenvolvimento Web começando pelo entendimento da
Internet e seu funcionamento. Você irá conhecer como é
possível publicar um site na Internet e sobre as aplicações
front-end e back-end. Conhecerá sobre como os sites são
desenhados para facilitar a navegabilidade e experiência do
usuário e sobre o problema de compatibilidade dos
navegadores para exibição de páginas. Conhecerá também
como obter e instalar a ferramenta de desenvolvimento que
será utilizada no curso, o Notepad++.
Mídia digital: Antes de iniciar os estudos, vá até a sala

virtual e assista ao vídeo “Apresentação do curso”.
1.1. O que é a Internet?
A Internet começou em 1969 como um projeto de pesquisa financiado pelo

Departamento de Defesa dos Estados Unidos com o objetivo de criar um meio de
comunicação além das linhas telefônicas. A primeira rede foi denominada ARPANET
(Advanced Research Project Agency NETwork). O foco era a comunicação caso parte da
rede fosse desativada. Essa rede inicial foi a precursora da Internet. Sua função era limitada,
mas lançou a ideia de um método diferente de comunicação.
Hoje a Internet é uma parte cada vez mais importante da vida cotidiana das pessoas
ao redor do mundo. A Internet é uma rede global de bilhões de computadores e outros
dispositivos eletrônicos. Com a Internet, é possível acessar quase todas as informações,
comunicar-se com qualquer pessoa no mundo e muito mais.
A World Wide Web, geralmente chamada de Web, é uma coleção de diferentes sites
que você pode acessar pela Internet. Um site é composto de textos, imagens e outros
recursos relacionados.
Depois de se conectar à Internet, você pode acessar e visualizar sites usando um
navegador da web. O propósito de um site pode ser quase qualquer coisa: uma plataforma
de notícias, um anúncio, uma biblioteca online, um fórum para compartilhar imagens ou um
site educacional como o da plataforma +IFMG.

Pró-Reitoria de Extensão
15
Plataforma +IFMG
Atenção: Um navegador da web é um tipo de software

que permite localizar e visualizar sites na Internet.
Existem muitos navegadores diferentes, mas alguns dos
mais comuns incluem Google Chrome, Internet Explorer,
Safari, Microsoft Edge e Mozilla Firefox.
A esta altura, você deve estar se perguntando, como funciona a Internet? A Internet
funciona por meio de uma rede de roteamento de pacotes de acordo com o Protocolo da
Internet (IP), o Protocolo de Controle de Transporte (TCP) e outros protocolos.
Um protocolo é um conjunto de regras que especificam como os computadores
devem se comunicar entre si em uma rede. Por exemplo, o protocolo de controle de
transporte tem uma regra que, se um computador enviar dados para outro computador, o
computador de destino deve informar o computador de origem se algum dado estiver
faltando para que o computador de origem possa reenviá-lo. Ou o protocolo da Internet, que
especifica como os computadores devem rotear as informações para outros computadores
anexando endereços aos dados que envia. Esses endereços são chamados de endereços
IP e existem dois padrões.
O primeiro padrão de endereço é chamado IPv4 e se parece com 212.78.1.25. Mas
como o IPv4 oferece suporte a apenas 2³² (cerca de 4 bilhões) de endereços possíveis, a
Força-Tarefa da Internet propôs um novo padrão de endereço chamado IPv6, que se parece
com 3ffe: 1893: 3452: 4: 345: f345: f345: 42fc. O IPv6 suporta 2¹²⁸ endereços possíveis,
permitindo endereçar muito mais dispositivos em rede.
Quando você visita um site digitando um nome de domínio legível como
www.google.com. Os computadores resolvem os endereços IP por meio do Sistema de
Nomes de Domínio (DNS), um banco de dados descentralizado de mapeamentos de nomes
de domínio para endereços IP como mostra a Figura 1.
.
Atenção: O domínio é um nome que serve para localizar
e identificar conjuntos de computadores na Internet. O
nome de domínio foi concebido com o objetivo de facilitar
a memorização dos endereços de computadores na
Internet. Sem ele, teríamos que memorizar os endereços
IP.

16
Plataforma +IFMG
Figura 1 – Processo de resolução de endereços IP

Fonte: https://devcontent.com.br/artigos/aws/customizar-dominio-de-site-hospedado-na-amazon
(Acesso em: 10 jul. 2020)
Para resolver um endereço IP, o computador, primeiro, verifica seu cache DNS local,
que armazena o endereço IP de sites visitados recentemente. Se não conseguir encontrar o
endereço IP lá ou se o registro do endereço IP tiver expirado, ele consulta os servidores
DNS do ISP (provedor de serviços de Internet) que são dedicados a resolver endereços IP.
Se os servidores DNS do ISP não conseguem encontrar o endereço IP, eles consultam os
servidores de nomes raiz, que podem resolver todos os nomes de domínio de um
determinado domínio de nível superior. Domínios de nível superior são os nomes à direita
do ponto em um domínio, .com .net .org são alguns exemplos de domínios de nível superior
como mostrado na Figura 2.
Figura 2 – Hierarquia DNS

Fonte: https://devcontent.com.br/artigos/aws/customizar-dominio-de-site-hospedado-na-amazon
(Acesso em: 10 jul. 2020)

17
Plataforma +IFMG
É importante perceber que a Internet é uma rede global de cabos físicos, que podem
incluir fios telefônicos de cobre, cabos de TV e cabos de fibra óptica. Mesmo as conexões
sem fio como Wi-Fi e 3G / 4G contam com esses cabos físicos para acessar a Internet.
Quando você visita um site, seu computador envia uma solicitação por esses fios a
um servidor. Um servidor é onde os sites são armazenados e funciona de maneira muito
semelhante ao disco rígido do seu computador. Assim que a solicitação chega, o servidor
recupera o site e envia os dados corretos de volta ao seu computador. Tudo isso acontece
em apenas alguns segundos.
Uma das melhores características da Internet é a capacidade de se comunicar quase
que instantaneamente com qualquer pessoa no mundo. O e-mail é uma das formas mais
antigas e universais de se comunicar e compartilhar informações na Internet, e bilhões de
pessoas o usam. A mídia social permite que as pessoas se conectem de várias maneiras e
criem comunidades online.
Existem muitas outras coisas que você pode fazer na Internet. Existem milhares de
maneiras de acompanhar as notícias ou comprar qualquer coisa online. Você pode pagar
suas contas, gerenciar suas contas bancárias, conhecer novas pessoas, assistir TV ou
aprender novas habilidades. Você pode aprender ou fazer quase tudo online.
Você pode adquirir acesso doméstico à Internet para enviar e receber e-mails,
navegar na Web, transmitir vídeos e muito mais. Você pode até querer configurar uma rede
sem fio doméstica, comumente conhecida como Wi-Fi, para que possa conectar vários
dispositivos à Internet ao mesmo tempo.
O tipo de serviço de Internet que você escolher dependerá muito de quais provedores
de serviços de Internet (ISPs) atendem sua área, junto com os tipos de serviço que oferecem.
Aqui estão alguns tipos comuns de serviço de Internet.
Dial-up: este é geralmente o tipo mais lento de conexão com a Internet e você
provavelmente deve evitá-lo, a menos que seja o único serviço disponível em sua área. A
Internet dial-up usa sua linha telefônica, portanto, a menos que você tenha várias linhas
telefônicas, não será possível usar seu telefone fixo e a Internet ao mesmo tempo.
DSL: o serviço DSL usa uma conexão de banda larga, o que o torna muito mais
rápido do que o dial-up. O DSL se conecta à Internet por meio de uma linha telefônica, mas
não exige que você tenha um telefone fixo em casa. E, ao contrário do dial-up, você poderá
usar a Internet e sua linha telefônica ao mesmo tempo.
Cabo: o serviço de cabo se conecta à Internet via TV a cabo, embora você não
precise necessariamente ter uma TV a cabo para obtê-lo. Ele usa uma conexão de banda
larga e pode ser mais rápido do que o serviço dial-up e DSL; no entanto, só está disponível
onde a TV a cabo está disponível.
Satélite: uma conexão via satélite usa banda larga, mas não requer cabo ou linhas
telefônicas; ele se conecta à Internet por meio de satélites que orbitam a Terra. Como
resultado, ele pode ser usado em quase qualquer lugar do mundo, mas a conexão pode ser
afetada por padrões climáticos. As conexões via satélite também costumam ser mais lentas
do que DSL ou cabo.

18
Plataforma +IFMG
3G e 4G: o serviço 3G e 4G é mais comumente usado com telefones celulares e

se conecta sem fio por meio da rede do seu ISP. No entanto, esses tipos de conexão nem
sempre são tão rápidos quanto DSL ou cabo. Eles também limitarão a quantidade de dados
que você pode usar a cada mês, o que não é o caso da maioria dos planos de banda larga.
A maioria dos ISPs oferecem vários níveis de serviço com diferentes velocidades de
Internet, geralmente medidas em Mbps (abreviação de megabits por segundo). Se você
deseja usar a Internet principalmente para e-mail e redes sociais, uma conexão mais lenta
(cerca de 2 a 5 Mbps) pode ser tudo de que você precisa. No entanto, se você deseja baixar
músicas ou fazer streaming de vídeos, você vai querer uma conexão mais rápida (pelo
menos 5 Mbps ou superior).
Você também deve considerar o custo do serviço, incluindo taxas de instalação e
taxas mensais. De modo geral, quanto mais rápida a conexão, mais cara ela ficará por mês.
A maioria dos ISPs oferece vários níveis de serviço com diferentes velocidades de Internet,
geralmente medidas em Mbps (megabits por segundo).
1.2. Como publicar um site na Internet
Com o rápido crescimento da Web, muitas pessoas começaram a entender que

conteúdos diferentes poderiam ser disponibilizados com rapidez e facilidade através da
Internet. A partir disso, começaram a querer seus próprios websites na rede.
A questão é saber como hospedar um website. A hospedagem é o serviço que guarda
todas as informações do site. Todas as páginas e seus conteúdos de imagens, áudio e vídeo
deverão ser hospedado através desse serviço.
A hospedagem é realizada através dos provedores nacionais ou internacionais que
são empresas que fornecem um determinado espaço em seus servidores e conexão à
Internet as informações dos seus clientes (informações dos websites).
O pré-requisito para a hospedagem é ter um domínio. Imagine, por exemplo, se você
tivesse uma empresa de aventura chamada Cia Aventura, você poderia escolher usar
ciaaventura.com como seu domínio. Mas, se Cia Aventura, na verdade, é uma empresa
especializada em viagens pela costa brasileira, então, outro nome provavelmente servirá
melhor, como brasilviagens.com − e os mecanismos de buscas encaminharão as pessoas
certas para o seu site.
Os domínios nacionais (.br) são coordenados pelo RegistroBR, que faz o registro e a
manutenção dos domínios no Brasil. Já os internacionais como .com, .net e outros, são de
responsabilidade do ICANN (Internet Corporation for Assigned Names and Numbers), órgão
internacional responsável por registros em todo o mundo.
Dica do professor: Veja como registrar um domínio no

Brasil: http://registrobr.org/registro-de-dominio/

19
Plataforma +IFMG
Alguns provedores também oferecem o serviço de domínio. Cada conta criada nos
provedores de hospedagem terá direito a registrar um domínio, porém, existem alguns
provedores que aceitam mais de um domínio por hospedagem. A Figura 3 a seguir ilustra
os passos para uma publicação e o acesso ao um website.
Acessar o site
Hospedar o site
Registrar o Contratar o pelo navegador
no servidor do
domínio provedor usando o
provedor
domínio
Figura 3 – Processo de publicação

Fonte: Costa (2018).
Algumas empresas também disponibilizam planos de cloud computing (computação

em nuvem) onde o objetivo é não ter restrições técnicas com relação ao volume de acessos.
Sua aplicação pode começar pequena e crescer sem problemas, em um ambiente escalável,
ou seja, que cresce elasticamente conforme suas necessidades. Nesse cenário, se paga por
quanto usar dos recursos em cada mês, e não uma mensalidade fixa. Costuma ter um valor
mais alto que hospedagens clássicas, mas traz um ambiente bem mais robusto.
Hoje em dia, a principal forma de encontrar um site é utilizar alguma ferramenta de
busca como a da Google por exemplo. Essas ferramentas encontram os sites que possuem
conteúdo relacionado às palavras chaves utilizadas nas buscas. Os sites mais relevantes
são apresentados no topo da página de resultado da busca e com maior destaque.
Para responder rapidamente às consultas realizadas, as ferramentas de busca
analisam previamente os sites. Esse processo de análise é chamado de indexação. A
indexação é realizada por programas de computador que interagem com os sites para obter
informações sobre o conteúdo de cada um deles. Esses programas são chamados de bots
(robôs).
No desenvolvimento de um site, pode-se aplicar técnicas que facilitam e melhoram a
análise dos robôs das ferramentas de busca. Essas técnicas são desenvolvidas por
especialistas SEO (Search Engibe Optimization).
Dica do professor: A Google disponibiliza

gratuitamente o seu guia de otimização de motores de
busca (download).

20
Plataforma +IFMG
1.3. Aplicações front-end e back-end
O desenvolvedor front-end é responsável por criar os mecanismos que farão com que
os usuários interajam com a aplicação através de uma interface. Por esse motivo, é
importante que quem irá desenvolver a aplicação também se preocupe com a experiência
do usuário.
O foco do desenvolvimento cliente-side está em 3 camadas: a de Informação (HTML-
linguagem de marcação), a de Formatação (CSS- linguagem de estilo) e de comportamento
(JavaScript - linguagem de script/programação).
Já o desenvolvedor back-end, como o nome sugere, trabalha na parte de “trás” da
aplicação. Ele é o responsável, em termos gerais, pela implementação da regra de negócio.
Em uma aplicação web, este desenvolvedor não toca na parte visual da aplicação.
No entanto, por lidar com a regra de negócio, às vezes um programador de sistemas, como
de aplicações comerciais e até científicas, pode ser chamado de desenvolvedor back-end.
E, geralmente, nessas aplicações, esse desenvolvedor trabalha um pouco com a parte
visual.
Para desenvolvimentos back-end existem diversas linguagens, como Go, Clojure, C#,
PHP, Java, Python, etc. E ainda banco de dados, como por exemplo MySQL, SQL Server,
PostgreSQL, entre outros, que, normalmente, é escolhido com base naquele que possuir
mais recursos disponíveis para implementar o que será utilizado na aplicação.
Este curso, tem como foco mostrar as linguagens para desenvolvimento de front-end.
Dica do professor: Para JavaScript há bibliotecas e

frameworks que alguns profissionais se especializam
como Angular e VueJS.
1.4. Design para a web
O design de uma página é um componente crucial do processo de desenvolvimento

de front-end. Se você se interessa por web design, é possível que você tenha uma veia
criativa. Criar um design é como criar uma obra de arte funcional. Mas por onde começar?
Para o seu primeiro projeto, é uma boa ideia escolher algo simples e divertido. Um
site de comércio eletrônico é mais complicado e seria melhor lidar com isso quando você
tiver mais experiência. Um blog é uma boa opção para começar. Será um bom exercício de
design até você aprender como funciona um Sistema de Gerenciamento de Conteúdo
(CMS). O melhor de tudo, você não precisa começar do zero porque existem muitos modelos
de blog que facilitam a montagem de um.

21
Plataforma +IFMG
Os modelos são uma ferramenta de aprendizagem valiosa. Observar como os

elementos HTML, CSS e Javascript são estilizados e combinados lhe dará uma visão mais
profunda sobre o que faz um design funcionar. Você pode usar modelos como base para
fazer alterações e personalizações.
O site é mais do que apenas texto flutuante no espaço. O esquema de cores,
conteúdo, tipografia, layout e imagens se reúnem para servir ao seu público e despertar
emoções. Alguém vagando pelo espaço digital que você criou deve ter um caminho livre de
obstáculos.
O design eficaz é guiado por certas regras e é importante entender as habilidades
essenciais de web design antes de começar. Vejamos algumas delas:
Layout
Se você deseja projetar e construir sites, entenda que um bom layout é fundamental.
Sugiro manter as coisas mínimas e trabalhar com apenas alguns elementos para focar no
posicionamento perfeito. Quando você começar a projetar, pense em grades. As grades
alinham elementos, como blocos div (veremos mais à frente no curso) e imagens em uma
página da web, de forma a criar ordem.
A estrutura de um layout deve seguir uma hierarquia visual. Quais são as ideias
importantes que você deseja que as pessoas vejam e em que ordem? A hierarquia visual
precisa seguir os padrões comuns que as pessoas usam ao ler. Existem dois caminhos que
os olhos das pessoas geralmente seguem na web: o padrão F e o padrão Z. Estar
familiarizado com o funcionamento desses padrões o ajudará a organizar seu próprio
conteúdo.
O padrão F é mais comum para designs com blocos densos de conteúdo. Os olhos
das pessoas percorrerão o lado esquerdo de um layout até que as coisas chamem sua
atenção e então lerão da esquerda para a direita. Imagine olhar o cardápio de um
restaurante, você pode pular os nomes em negrito dos pratos alinhados à esquerda até
chegar a algo que o agarra, o que o levará a ler os detalhes de apoio que explicam aquele
prato específico. Já o padrão Z está associado a um design com menos texto. Muitas páginas
de destino seguem esse padrão.
Cores
Você tem à disposição uma infinidade de cores possíveis disponíveis. Mas, todos nós
sabemos que “com grande poder vêm grandes responsabilidades”. O poder do seletor de
cores pode ser usado a favor do design ou não. Geralmente, é utilizado nos sites cores
monocromáticas (quando é selecionada uma única cor como base, variando a quantidade
de saturação, claros e escuros e vários matizes para um esquema de cores uniforme). Ou,
cores complementares (cores opostas combinadas).
Tipografia
A tipografia informa o tom. Ao projetar seu primeiro site, mantenha o tom em mente.
Se você está procurando uma vibração alegre, como um blog de comida, entrelaçar fontes
divertidas faz sentido. Mas se você estiver criando um site para um escritório de advocacia,
opte por fontes mais profissionais. Assim, também, é importante escolher fonte com ou sem

22
Plataforma +IFMG
serifa. Uma fonte com serifa parece mais formal e a versão sem serifa parece mais leve e
solta. De qualquer forma, a legibilidade é a característica mais importante na escolha das
fontes. Concentre-se em garantir que tudo esteja legível e deixar o ajuste fino dos detalhes
mais tarde.
Web designers têm o trabalho muito importante de conceituar e criar um visual para
o site. Eles precisam pensar nos recursos visuais do site e também ter sempre em mente a
funcionalidade e a experiência do usuário. Na seção a seguir, você irá conhecer sobre como
a usabilidade é utilizada para garantir a boa experiência do usuário.
1.5. Critérios de usabilidade
Uma página de um website tanto define as estratégias para a realização de uma

tarefa, como conduz, orienta, recepciona, alerta e responde ao usuário durante as
interações.
O conjunto de critérios ergonômicos de usabilidade definidos por dois pesquisadores
franceses Dominique Scapin e Christian Bastien (1993) pode ser observado no projeto de
desenvolvimento do website para atribuir qualidades às páginas de forma que estas
satisfaçam os usuários quando da sua utilização, pois, os usuários jamais chegarão perto
das páginas destinadas à execução de uma tarefa, a menos que estas sejam implementadas
de acordo com suas necessidades e que contenham um esquema de navegação que os
permita descobrir o que desejam.
Esses critérios constituem um conjunto de qualidades que as interfaces humano-
computador deveriam apresentar. O conjunto é composto por 8 critérios ergonômicos
principais que se subdividem em 18 subcritérios: Condução, Carga de Trabalho, Controle
Explícito, Adaptabilidade, Gestão de Erros, Coerência, Significado do Códigos e
Denominações, Compatibilidade.
O grau de usabilidade das páginas pode ser avaliado com o emprego da técnica de
Análise da Tarefa versus Usuário, onde são realizados o levantamento das atividades
desempenhadas pelo usuário e a construção de um protótipo do website. O protótipo é
validado após sucessivas apresentações e modificações, procurando adequá-lo o mais
próximo das atividades do usuário.
Também existe na literatura, uma série de diretrizes de usabilidades consagradas,
entre elas as apresentadas por Nielsen (2000) para a criação de interfaces. As diretrizes
são recomendações aplicáveis amplamente aos projetos de interação com o usuário,
embora possam ser escritas de forma genérica, o seu claro entendimento pode servir como
uma orientação para um projeto. São algumas vezes elaboradas e validadas empiricamente,
apoiadas em opiniões baseadas na experiência de seus criadores.
Mais recentemente, o W3C tem desenvolvido diretrizes para acessibilidade às
pessoas com alguma deficiência e, também, para melhorar a usabilidade dos ambientes
criados para dispositivos móveis .

23
Plataforma +IFMG
As páginas Web podem ser visualizadas usando vários dispositivos diferentes:

notebooks, tablets ou celulares e, por isso, não devem deixar de fora informações para caber
em dispositivos menores, mas sim, adaptar seu conteúdo para ser acessado por todos os
tipos de dispositivos.
A Internet tem sofrido várias alterações desde o seu primeiro lançamento nos anos
60. A rede inicial evoluiu de tal maneira que se tornou rapidamente em uma rede
interconectada e auto-organizada que construiu a base para a economia, os negócios e
investigação dos dias de hoje. Não só dispositivos móveis, mas geladeiras, carros e até
mesmo o gado - a lista é interminável, e continua ficando mais interessante – podem ser
conectados.
Ainda mais interessante é quando todas essas “coisas” são combinadas com
pessoas, processos e dados através da rede para oferecer valor transformacional ao mundo,
melhorando a forma como tomamos decisões, economizando tempo e dinheiro. Essa é a
chamada Internet das Coisas .
Assim, diante desse novo cenário, cada vez mais o web design responsivo deve usar
linguagens como CSS e HTML para redimensionar, esconder, encolher, ampliar ou mover o
conteúdo para que seja visto em qualquer tela a partir de qualquer dispositivo.
A ideia do design responsivo é pensar em páginas que se adaptem a todo tipo de
dispositivo e contexto de uso, saindo das limitações de um navegador e seu tamanho
previsível, por exemplo, e pensar em páginas com flexibilidade que suportem todo tamanho
de tela, qualquer tipo de resolução, interfaces com touch ou mouse.
No entanto, projetar pensando em sites responsivos vai além de mexer com os
códigos das linguagens, é primordialmente uma questão de usabilidade.
1.6. Compatibilidade dos navegadores
É possível que um mesmo site tenha uma aparência diferente quando visualizado em
dispositivos diferentes. Em geral alguns recursos não funcionam direito, ou então alguns
trechos deixam de ser exibidos. Em certos casos, o problema não está no site, mas sim, no
navegador utilizado para acessá-lo.
Alguns dos navegadores para desktop disponíveis no mercado usam motores de
renderização diferentes e que funcionam de maneiras diferentes. A função de um motor de
renderização ou motor de layout, é exibir os conteúdos solicitados na tela do navegador.
Isso significa que a experiência de cada usuário pode mudar de acordo com o navegador e
versão que está usando.
As especificações para as linguagens HTML, CSS e outras são enormes. Novos
elementos vão sendo adicionados, enquanto os mais velhos, já obsoletos, são removidos.
Todas essas alterações podem fazer com que os motores de renderização levem um tempo
para refletir as atualizações.

24
Plataforma +IFMG
Pode ser que o usuário não utilize um navegador que suporta por exemplo uma
versão mais atual de HTML ou CSS. Nesse caso, é possível redirecioná-lo para uma versão
do site mais simples, ou ainda, mostrar-lhe uma mensagem alertando sobre a importância
da atualização do navegador. Para isso, algumas técnicas de detecção para conferir se o
navegador suporta ou não a versão do HTML deve ser implementada.
Atualmente, existem três principais motores de renderização utilizados pelos
navegadores mais populares do mercado. São eles: Blink (Google Chrome), Gecko (Mozilla
Firefox), EdgeHTML (Microsoft).
Dica do professor: O site html5test.com permite testar

seu navegador, mais especificamente a versão que está
sendo executada, para ver quão bem ele suporta os
recursos do HTML5.
1.7. Ferramenta de desenvolvimento
Para que você possa desenvolver os códigos de exemplo deste curso, será
necessário a utilização de uma ferramenta de desenvolvimento de código-fonte para que os
códigos possam ser criados.
O Notepad++ é um editor de código-fonte gratuito e está disponível em vários idiomas.
Ele executa no ambiente Windows e seu uso é regido pela GNU General Public License. É
baseado no componente de edição Scintilla, é escrito em C ++ e usa Win32 API e STL puras,
o que garante maior velocidade de execução e menor tamanho do programa.
Suas funcionalidades incluem sintaxe para diferentes linguagens de programação
como C, Java, XML, HTML, PHP, JavaScrip, ASP, SQL, CSS, Pascal, Perl e Python e outras.
Além disso, você pode personalizar o estilo para cada linguagem suportada, escolhendo a
cor, tipo de letra, tamanho de fonte e estilo para as palavras-chave.
O programa sugere opções de preenchimento automático e permite que possa
comprimir linhas de código entre parênteses. Também está entre as opções de
funcionalidades visualizar e trabalhar com vários documentos ao mesmo tempo usando
diferentes guias. A interface do editor Notepad++ pode ser vista na Figura 3.
Como fazer download e instalar o Notepad++?
Para baixar o Notepad++ siga os passos a seguir:
1. Abra a página de download do site oficial em seu navegador (https://notepad-

plus-plus.org/downloads/).
2. Baixe a última versão do Notepad ++ para sua área de trabalho.

25
Plataforma +IFMG
3. Abra a pasta com o pacote baixado em seu computador. Clique duas vezes no
arquivo .exe para executar o instalador.
Figura 3 – Interface do Notepad++

Fonte: Elaborada pela autora
Siga todas as etapas de instalação:
1. Selecione o idioma de instalação.

2. Concorde com os termos do Contrato de Licença.
3. Procure o diretório de instalação em seu computador.
4. Selecione o tipo de instalação. Recomendo usar um personalizado.
5. Escolha os componentes para a instalação do Notepad ++ e clique em Instalar
para confirmar.
6. Aguarde quando o sistema terminar a instalação.
Isso é tudo! Agora você está pronto para usar o software Notepad ++ para editar
seus códigos.

26
Plataforma +IFMG
Atividade: Para concluir a primeira semana de estudos,

vá até a sala virtual e participe do Fórum
“Compartilhando experiências”. Inicie uma nova
publicação e agora que você conhece os diferentes tipos
de serviço de Internet, pode pesquisar para descobrir
quais ISPs estão disponíveis em sua área. Se você
estiver tendo dificuldades para começar recomendo
conversar com amigos, familiares e vizinhos sobre os
ISPs que eles usam. Isso geralmente lhe dará uma boa
ideia dos tipos de serviço de Internet disponíveis em sua
área.
Concluída esta semana de estudos, é hora de uma pausa para a reflexão. Faça a
leitura (ou releitura) de tudo que lhe foi sugerido, assista aos vídeos propostos e analise
todas essas informações com base na sua experiência profissional. Esse intervalo é
importante para amadurecer as novas concepções que esta etapa lhe apresentou.
Encontramo-nos na próxima semana.
Bons estudos!

27
Plataforma +IFMG

28
Semana 2 – As linguagens HTML e CSS Plataforma +IFMG
Objetivos
Nesta segunda semana, você irá conhecer a linguagem de
marcação HTML e como ela pode ser usada para criar páginas
contendo textos, listas, imagens, hyperlinks, tabelas e
formulários. Irá conhecer, também, a linguagem de definição
de estilos CSS para aplicação de diferentes tipos de estilos as
páginas.

virtual e assista ao vídeo “Apresentação da Segunda
Semana”.
2.1 Introdução ao HTML
HTML (Hypertext Markup Language) é uma linguagem padrão de marcação (tags)

de hipertexto, de formato aberto, para exibição de conteúdo no World Wide Web da Internet.
A linguagem HTML foi desenvolvida em 1990, a partir da união das funcionalidades
de dois padrões existentes, o SGML (padrão que possibilitava a formatação de texto) e o
HyTime (padrão para representação de documentos hipertextos). Atualmente, está na
versão 5.0 e sua especificação pode ser encontrada pelo endereço: http://www.w3.org/
TR/html5/.
Não é considerada uma linguagem de programação porque não possui comandos
para tomada de decisões (if...then...else), estruturas de repetição (do...while, repeat...while),
funções etc. Compõe-se de diretivas (tags e atributos) que são interpretadas pelos
navegadores. Ao interpretar as diferentes diretivas, temos a apresentação de uma página
seguindo a formatação de texto, cores e imagens definida pelo “autor”.
A página é um hipertexto no WWW que associa diferentes tipos de mídia como textos,
imagens, áudio e vídeo, conectados por hiperlinks. Pode ser única ou estar ligada a outras
páginas formando um sistema de informações ou um website. Vale a pena ressaltar que
uma página html é um arquivo composto de texto e que deve ser salvo como extensão .htm
ou .html.

29
Plataforma +IFMG
A página principal, conhecida também como Home Page é a página de entrada ou

página inicial de um ambiente Web.
Atenção: A index.html é a página padrão dentro dos

diretórios nos servidores de websites que é carregada
sempre primeiro, neste caso o próprio servidor se
encarrega de procurar pelo arquivo index.html e
apresentá-lo para o visitante.
Como as páginas são constituídas de texto puro, elas podem ser criadas usando um
simples editor de texto. O uso de editores específicos para HTML, permite que um autor crie
uma página sem conhecer os códigos da linguagem. São exemplos de editores HTML:
Adobe Dreamweaver, Edit Plus, NotePad++, SeaMonkey, Microsoft Expression Web,
Netbeans, entre outros. Além de Editores gráficos, existem também programas assistentes
que transformam documentos em páginas HTML- o Word é um exemplo de programa
assistente.
2.2 Estrutura da página
Todo documento HTML precisa conter, no mínimo, certas tags padronizadas. A

padronização recomendada pelo W3C visa a garantir que o HTML será lido e exibido
corretamente pelo interpretador de qualquer navegador.
Atenção: O World Wide Web Consortium (W3C) é a

principal organização de padronização para a Web.
Consiste em um consórcio internacional de empresas,
órgãos governamentais e organizações independentes
com a finalidade de estabelecer padrões para a criação
e a interpretação de conteúdos para a Web.
Uma página HTML deve ter por padrão a seguinte estrutura:
Figura 4 – Estrutura da página HTML


30
Plataforma +IFMG
Experimente criar a página chamada “exemplo.html” conforme a Figura 4. Quando

aberto por um navegador, apresentará o resultado conforme visualizado na Figura 5. Para
isso, abra o Notepad++ e edite o código. Para salvar o arquivo, vá no Menu Arquivo e
selecione a opção “Salvar como”. Salve o arquivo como “exemplo.html” em algum diretório
de sua preferência. Para executá-lo, clique no arquivo ou então no Menu através da opção
“Executar”, selecione o navegador para exibição da página.
Figura 5 – Visualização da página no navegador

O DOCTYPE deve ser sempre a primeira linha de código do documento. Ele não é
uma tag do HTML, mas uma instrução para que o navegador saiba qual versão de código a
marcação deve ser renderizada.
<HTML> e </HTML> - são tags que dizem ao interpretador que o documento é do tipo
HTML, ou seja, uma página web. Toda página HTML deve começar com essa declaração.
Possui o atributo “lang” que define a linguagem principal da página.
Cabeçalho <HEAD> e </HEAD> - especifica o título da página <TITLE> e </TITLE>
que será apresentado na barra superior do navegador e metadados <META>. A tag <META>
fornece metadados, ou seja, informações sobre o conteúdo do documento HTML. Os
elementos meta são normalmente utilizados para especificar a descrição da página
(description), palavras-chave (keywords) ou autor (author) do documento. Eles não são
visualizados no navegador, mas são utilizados pelos motores de busca (palavras-chave),
nos resultados de pesquisas
Corpo <BODY> e </BODY> - marcação que especifica: cores de fundo, texto, links
e o início do documento. Tudo que estiver entre essas tags é interpretado como “corpo” do
documento e será exibido pelo navegador

31
Plataforma +IFMG
Comentários - os comentários não são exibidos pelo navegador, mas podem ajudar
a documentar o HTML. Há um ponto de exclamação na tag de abertura .
A maioria dos navegadores atuais irá exibir o HTML corretamente, mesmo quando
esquecer a marca de fim </>, no entanto, sugere-se sempre adicioná-la para evitar
resultados inesperados.
Uma boa prática, sempre recomendada, ligada à limpeza e facilidade de leitura do
código, é o uso correto de recuos, ou indentação. Em um código HTML, costuma-se alinhar
elementos "irmãos" na mesma margem e adicionar alguns espaços ou uma tabulação para
elementos "filhos".
Um código HTML qualquer de uma página, pode ser visualizado por meio do
navegador (Ctrl+U). A Figura 6 exibe, como exemplo, o código da página do IFMG.
Figura 6 – Código HTML da página do IFMG

2.3 Formatação de texto
O texto pode ser formatado com tags de itálico, negrito, sobrescrito, subscrito e fonte.
Para todas é necessário delimitar o início e o fim do texto a ser formatado. Fonte e Cor: A
tag <font> especifica o tipo de letra, a cor do texto e o tamanho da fonte. Exemplo: <font
face=”verdana”> Texto </font>

32
Plataforma +IFMG
Figura 7 – Atributos da tag <font>

As cores podem ser definidas pelo seu nome RGB (Red, Green, Blue) ou pelo código
Hexadecimal correspondente, tomados em pares RRGGBB, onde cada par está no intervalo
de intensidade 00-FF (cada caractere do par está no intervalo de 0 a 15 na base decimal).
Por exemplo, 000000 é totalmente preto (intensidade zero para as três cores), FF0000 é
vermelho, 00FF00 é verde, 0000FF é azul e FFFFFF é branco. A Figura 8 exibe algumas
possibilidades de cores.
Figura 8 – Tabela de cores e código hexadecimal

Ser capaz de gerenciar o tamanho do texto é importante para o desenho da página,

no entanto, se não especificar um tamanho de fonte, o tamanho padrão para texto normal,
será 16px (16px = 1em).
Se o texto se refere a uma tag de cabeçalho ou título, existem alguns tipos de fonte
mais adequadas definidas pela linguagem HTML:
•Cabeçalhos:
<H1> Tamanho H1</H1>

33
Plataforma +IFMG

H6, H5, H4, H3, H2, H1

•Outros estilos:
<B> Texto em Negrito ( Bold ) </B>
--Texto em Negrito ( Bold )
<I> Texto em Itálico </I>
--Texto em Itálico
<U> Texto sublinhado </U>
Texto sublinhado
<SUP> Texto sobrescrito </SUP>
--Texto sobrescrito
<SUB> Texto subscrito </SUB>
-- Texto subscrito
Na linguagem HTML toda a formatação do texto é obtida com tags apropriadas. As
marcações inseridas pelos editores de texto, tais como quebras de linha, tabulações e
parágrafos são desprezadas pelo navegador.
Atenção: HTML não diferencia maiúsculo ou minúsculo

nos identificadores de tags e nome de atributos.
Acentuação e Caracteres Especiais

A codificação HTML permite a qualquer equipamento interpretar os códigos e exibir
na tela o caractere desejado. A acentuação ou os caracteres especiais podem ser
codificados da seguinte forma:
• Primeiro o caractere "&".
• Seguido da letra que deverá ser acentuada, pode ser minúscula ou maiúscula.

34
Plataforma +IFMG
• Coloque o código do acento desejado conforme a tabela abaixo.

• Acrescente o caractere " ; " ( ponto de vírgula ).
Exemplo:
avós = avós
natação = natação
Figura 9 – Códigos de acentos e caracteres especiais


Existe uma alternativa para a acentuação que é usar a tag <META> com o atributo
"Http-equiv” (equivalente HTTP) ou “charset”. Com ela, é possível "simular" o cabeçalho do
HTTP pelo próprio conteúdo do documento HTML. Nas versões anteriores ao HTML5, essa
tag era escrita da forma: <meta http-equiv=”Content-Type” content=”text/html; charset=utf-
8”>
O novo código para o HTML5 resumiu bastante as coisas, deixando a linha acima
assim: <meta charset=”UTF-8”>
Como alternativa ao UTF-8, pode-se usar o ISO-8859-1. A diferença entre eles é que
o ISO-8859-1 suporta até 256 caracteres e o outro suporta até 65.536 caracteres. O que
leva alguns desenvolvedores a utilizarem o ISO-8859-1 é a economia de espaço, tráfego de
rede e velocidade na exibição, no caso de grandes quantidades de dados, pois um caractere
UTF-8 chega a ter o dobro do tamanho de um caractere ISO-8859-1, em compensação, o
UTF-8 suporta a maioria das letras, números e outros caracteres dos diversos países do
mundo.
Entretanto, é aconselhável utilizar o UTF-8 somente quando se prevê que é
necessário lidar com textos em idiomas distintos, cujos caracteres não são de origem
romana, do contrário, pode-se usar o ISO-8859-1, pois ele suporta os idiomas de origem
latina e também inglês, alemão, dinamarquês e dos demais países da Europa Ocidental.

35
Plataforma +IFMG
Disposição do Texto na Página

As marcações abaixo podem ser aplicadas para uma formatação básica de um texto
em uma página:
<CENTER>: centraliza o texto em relação à página
<BR>: quebra de linha, iniciando o texto seguinte na linha logo abaixo
<P>: força o fim de um parágrafo, ou seja, pula uma linha antes de iniciar outro
parágrafo
<HR>: régua horizontal - inclui uma linha horizontal no texto, separando o texto em
blocos
width = _% comprimento. Ex. width=50%
size = _ espessura do traço. Ex. size=6
<PRE> : respeita a formatação original do texto inserido na página
Para ilustrar a aplicação das formatações de texto, digite o código ilustrado na Figura
10, o qual demonstra algumas opções que empregaremos para caracterizar e estruturar o
conteúdo de nossas páginas. O arquivo, depois de salvo e executado, deverá apresentar o
resultado que pode ser visualizado na Figura 11.
Figura 10 – Código com recursos de formatação


36
Plataforma +IFMG
Figura 11 – Visualização da página formatada

2.3 Listas
As Listas são utilizadas para organizar um texto em uma relação de itens e subitens,
ordenados ou não. São tipos de listas: listas ordenadas, listas não-ordenadas e listas de
definição.
Atenção: Nos exemplos dos códigos de listas e imagens
mostrados a seguir foi omitida a estrutura básica da
página HTML. Caso deseje testá-los, coloque-os entre
das tags <body></body>.
Listas Ordenadas
<ol> - inicia uma lista.
type - define o tipo de numeração da lista que pode ser:
A - Letras maiúsculas;
a - Letras minúsculas;
I - Algarismos romanos;
1 - Números arábicos;
</ol> - finaliza a lista.
<li> - determina um item da lista.
Código html <ol type=”1”> No browser 1. Primeiro
<li>Primeiro 2. Segundo
<li>Segundo 3. Terceiro
<li>Terceiro
</ol>

37
Plataforma +IFMG
Listas Não Ordenadas

<ul> - marca o início da lista.
type - define o tipo de marcador de cada item da lista que pode ser:
disc - pequeno disco sólido;
square - quadrado preenchido;
circle - círculo cheio.
</ul>- marca o final da lista.
<li> - determina um item da lista.
<dl> marca o início da lista
<dt>indica termo a ser definido
<dd>indica a definição ou descrição do termo acima
Código <ul type=”disc”> No • Café
html <li>Café browser
<li>Chá • Chá
<ul type=”circle”>
<li>Chá preto> o Chá preto
<li>Chá verde
</ul> o Chá verde
<li>Leite
</ul> • Leite
Listas de Definição
<dl> marca o início da lista
<dt>indica termo a ser definido
<dd>indica a definição ou descrição do termo acima
Código <dl> No LW
html <dt> LW browser Linguagem
<dd>Linguagem Web Web
<dt>ED ED
<dd>Estrutura de Dados Estrutura
</dl> de Dados
As listas também podem ser exibidas de forma aninhada, isto é, listas dentro de outras
listas:

38
Plataforma +IFMG
2.4 Hyperlinks
A ideia central dos hyperlinks é proporcionar liberdade ao usuário para navegar entre
diferentes documentos, clicando em termos ou frases que levem a outros documentos.
Para fazer “links” para outros documentos (páginas, imagens, sons etc.), através da
tag <A> </A>, chamadas de âncoras (anchor tag) é preciso informar o HREF (endereço de
onde está a página que será acessada) e o TEXTO/IMAGEM que indicará o link.
< A HREF=http://endereço/documento> texto/imagem </A>
A referência a outro documento pode ser feita por:
▪ Caminho Absoluto: corresponde ao endereço completo do documento e
utilizado quando os documentos estão em servidores ou pastas diferentes.
<A REF=http://máquina/diretório/pagina.html>texto/imagem </A>
▪ Caminho Relativo: quando o documento a ser acessado está no mesmo
servidor ou pasta que a página atual.
<A HREF=../outra-página.html > texto </A>
<A HREF=../outra-página.html><img src=”imagem .jpg”> </A>
É possível criar links internos, dentro da própria página - por exemplo, uma tabela de
conteúdo ou índice com links para cada um dos capítulos em uma página. Para tanto, basta
usar o atributo id e o símbolo "#". O símbolo "#" informa ao navegador para ficar na mesma
página que está. O "#" deve ser seguido pelo valor atribuído a id para onde o link vai.
É possível também definir um link “mailto” que permite que os usuários enviem
mensagens para um endereço de e-mail definido, clicando no hyperlink conforme exemplo
abaixo.

39
Plataforma +IFMG
2.5 Imagens
A tag <IMG> inclui uma imagem dentro de um documento HTML. Elas podem ser
usadas em conjunto com alguns atributos tais como:
<IMG border=6 width=90 height=120 SRC=”imagens/figura.gif”>

• border - para determinar a moldura da imagem.
• width - para determinar a largura da imagem
• height - para determinar a altura da imagem
Para alinhar um texto em relação a uma imagem pode-se utilizar os atributos:

• align=left- para alinhar a imagem a esquerda do texto
<IMG align=left SRC=” imagens/figura.gif”> Texto
• align=right para alinhar a imagem à direita do texto
<IMG align=right SRC=” imagens/figura.gif”>
• align=top para alinhar o texto com o topo da imagem
<IMG align=top SRC=” imagens/figura.gif”>
• align=bottom para alinhar o texto com a parte inferior da imagem.
<IMG align=bottom SRC=” imagens/figura.gif >
• align=middle para alinhar o texto com o meio da imagem<IMG align=middle SRC=”
imagens/figura.gif”>
Texto que acompanha a figura.
<IMG align=left SRC=” imagens/figura.gif”> Texto

40
Plataforma +IFMG
2.6 Tabelas

As tabelas têm o propósito original de exibir dados tabulados, mas também podem
ser usadas para posicionar elementos nas páginas. As tags <TABLE> </TABLE> identificam
uma tabela e as tags a seguir sua estrutura interna.
<th>... </th>: “table head”, define o cabeçalho de cada coluna
<tr> ... </tr>: “table row”, delimita a linha
<td> ... </td>: “table data,” delimita cada dado da tabela, cada célula.
Atributos que podem ser usados nas tabelas:

border: especifica a espessura da borda.
colspan: específica quantas colunas da tabela a célula ocupará.
rowspan: específica quantas linhas da tabela a célula ocupará.
width: define a largura exata da célula.
height: define a altura exata da célula.
align: alinhamento horizontal ( right, center, left ).
valign: alinhamento vertical ( top, middle, bottom ).
cellspacing: define o espaço entre as células.
bgcolor: define uma cor de fundo para a tabela.
Atenção: Planeje cada tabela antes de iniciar a

codificação. Faça um esboço em papel para ter ideia da
estrutura. O esquecimento de uma tag pode
comprometer a estrutura da tabela. O ideal é escrever a
tag de fechamento sempre após a tag de abertura, antes
de incluir o conteúdo.
Exemplo:
…
<body>
<table border=4 height=300 cellspacing=4>
<th align=left>Coluna1</th><th align=left>Coluna2</th>
<tr><td width=150>linha1, coluna1</td><td>linha1, coluna2</td></tr>

41
Plataforma +IFMG
<tr><td width=150>linha2, coluna1</td><td>linha 2, Coluna2</td></tr>

</table>
</body>
...
Resultado da tabela no browser:

Coluna 1 Coluna 2
linha 1, coluna 1 linha 1, coluna 2
Exemplo:
…
<body>
<table border=4 bgcolor=blue>
<th colspan=2>Colunas 1 e 2</th>
<tr><td>linha1, coluna 1</td><td> linha 1, coluna 2</td></tr>
<tr><td>linha 2, coluna 1</td><td>linha 2, coluna 2</td></tr>
<th rowspan=3>3 linhas</th>
<td>uma linha</td>
<tr><td>duas linhas</td></tr>
<tr><td>três linhas</td></tr>
</table>
</body>
…
Resultado da tabela no browser:
Colunas 1 e 2
uma linha
3 linhas duas linhas
três linhas
Embora as tabelas sejam usadas para apresentar dados tabulares, elas também
podem ser utilizadas para criar um layout de página. Nesse caso, cada célula da tabela é
traduzida em um espaço na página como mostrado nas Figuras 12 e 13.

42
Plataforma +IFMG
Figura 12 – Layout usando tabela

Fonte: Adaptada de (COSTA, 2018)
Figura 13 – Código do layout usando tabela


43
Plataforma +IFMG
2.7 Formulários
Os formulários em uma página Web permitem coletar informações dos usuários que
visitam uma página. Usando campos de entrada de textos, menus e botões é possível colher
dados para diversos fins e, também, definir que ação será tomada assim que o formulário
for preenchido e enviado.
É preciso saber que o HTML oferece apenas os meios para receber as informações
do usuário e enviá-las a um servidor ou endereço de e-mail. O HTML não provê meios para
tratar ou armazenar essas informações. Para manipular e validar os dados inseridos pelo
usuário, antes de enviá-los ao servidor, é preciso ainda de uma linguagem de script cliente-
side (do lado do cliente) como o JavaScript por exemplo.
Definição do Formulário
Um formulário é definido pelas tags <FORM>e</FORM>. A tag de formulário mais

usada é a <INPUT>. O tipo de input (entrada) é especificado com o atributo type. Os tipos
de input mais comumente usados são exemplificados abaixo:
Campos Tipo Texto
...
<BODY>
<FORM>
<LABEL>Nome:</LABEL>
<INPUT TYPE=TEXT NAME="Nome" SIZE=30
VALUE="Danielle Costa">
<LABEL> Senha:</LABEL>
<INPUT TYPE=PASSWORD
NAME="Senha" SIZE=30 MAXLENGTH="8">
</FORM>
</BODY>
...
Figura 14 – Campos do tipo texto
Alguns atributos mais utilizados:
• VALUE- inicializa o campo com um valor definido.
• MAXLENGTH – define a quantidade máxima de caracteres permitidos no campo.
• DISABLED – desabilita o campo para digitação.
• SIZE- delimita o tamanho do espaço para entrada do valor nos campos.
• LABEL - define um rótulo para o campo.

44
Plataforma +IFMG
Campos Tipo Múltipla Escolha

...
<FORM>
<LABEL>Frutas: </LABEL>
<INPUT TYPE=CHECKBOX NAME="fruta"
VALUE="Abacaxi" CHECKED >Abacaxi
VALUE="Morango" CHECKED >Morango
VALUE="Limão">Limão
VALUE="Pera">Pera
VALUE="Laranja">Laranja
</FORM>
Figura 15 – Campos de múltipla escolha
... Fonte: Elaborada pela autora
• O atributo CHECKED serve para inicializar um item como “já selecionado”.
Campos Tipo Escolha Única

...
<FORM>
<LABEL>Estado Civil: </LABEL>
<INPUT TYPE=RADIO NAME="estciv"
VALUE="Solteiro">Solteiro
VALUE="Casado">Casado
VALUE="Viuvo">Viuvo
VALUE="Divorciado">Divorciado
VALUE="Outros">Outros
</FORM>
… Figura 16 – Campos de escolha única
Botões de Ação
...
<FORM>
<INPUT TYPE=SUBMIT VALUE="Enviar">
<INPUT TYPE=RESET VALUE="Cancelar">
</FORM>
...

45
Plataforma +IFMG
Tipos de botões mais comuns:
• SUBMIT - Envia os dados preenchidos no

formulário para o servidor, iniciando a
execução do programa especificado no
atributo ACTION.
• RESET - Reinicializa o formulário com os
valores previamente definidos. O atributo
VALUE define a mensagem sobre o botão.
Figura 17 – Botões do tipo Submit e
• FILE - Exibe a janela para procura de um Reset
arquivo Fonte: Elaborada pela autora
• HIDDEN - Além dos campos definidos no

formulário que estão visíveis e serão
preenchidos pelo visitante, podemos definir
campos não visíveis que passarão
parâmetros para o programa a ser
executado.
Botões de Seleção
...
<FORM>
<SELECT NAME="plataforma" SIZE=3>
<OPTION>PC
<OPTION>Workstation
<OPTION>Alpha
<OPTION>Mainframe IBM
</SELECT>
</FORM>
...
Figura 18 – Botões de seleção
• SELECT- é utilizada juntamente com a

diretiva <OPTION> para definir uma lista
de valores a serem selecionados.
• SIZE- é utilizado para se apresentar mais
de um valor na página.
Pode-se definir um valor como padrão
usando o atributo:
<OPTION SELECTED> valor

46
Plataforma +IFMG
Área de Texto
A tag TEXTAREA define uma área para entrada de textos. Os atributos COLS
(colunas) e ROWS (linhas) definem o tamanho da janela.
<FORM>
<TEXTAREA COLS=60 ROWS=10 NAME="texto">Área para entrada de texto
</TEXTAREA></FORM>
Figura 19 – Campo de área de texto

Para exemplificar os campos e botões possíveis em um formulário, vamos criar uma

página de formulário de Cadastro de Clientes como o mostrado na Figura 20 e 21. Observe
que é possível criar mais de um formulário por página.
Figura 20 – Exemplo de formulário de cadastro


47
Plataforma +IFMG
Figura 21 – Exemplo de formulário de cadastro de cliente

Criando seções
Uma forma elegante de apresentar os formulários na mesma página é separando-os
por seção. A tag <fieldset> é utilizada para criar uma seção, separando um conjunto de
elementos do formulário com uma linha ao redor. Já a tag <legend> é utilizada para criar a
legenda de cada seção, neste caso, o texto que aparece na parte superior de cada conjunto.
Exemplo
…
<fieldset>
<legend>Dados pessoais</legend>
<label>Nome:<input type="text" name="nome">
</label><br>
<label>Idade:<input type="text" name="idade">
</label><br>
</fieldset>
<fieldset>
<legend>Dados profissionais</legend>
<label>Escolaridade:

48
Plataforma +IFMG
<select name="escolaridade">
<option value="em"> Ensino Médio </option>
<option value="nt"> Nível Técnico </option>
<option value="ns"> Nível Superior</option>
</select>
</label><br>
<label>Área de atuação
<input type="radio" name="cargo" value="1" checked> Gerência
<input type="radio" name="cargo" value="2"> Financeiro
<input type="radio" name="cargo" value="3" > Recepção
</label>
</fieldset>
...
Resultado no browser:
Figura 22 – Exemplo de seções

Passagem de parâmetros pelo formulário
O atributo METHOD define o método HTTP para enviar os dados a URL, onde está o
programa que realizará o processamento, especificado pelo atributo ACTION. O exemplo a
seguir mostra os dados recolhidos pelo formulário sendo enviados para um arquivo
“teste.php”.
<FORM METHOD=GET/POST ACTION=script></FORM>
Exemplo
<html>
<head> <title> Usando tipo oculto </title></head>
<body>
<form method=post action=teste.php>
<input type=submit name=”enviar” value="enviar
informações">
</form>
</body>
</html>
O método GET envia os dados do formulário em pares/valor anexados à URL descrita

em Action, separando cada campo como caractere “?”. Não é recomendado quando não se
deseja que o usuário veja o que está sendo enviado. Já o método POST envia os dados
ocultos no corpo da mensagem.

49
Plataforma +IFMG
Iframe
A tag <iframe> ou inline frame é usada para especificar um quadro embutido, ou,
como a especificação HTML5 se refere a ele, um “contexto de navegação aninhada”. Um
quadro embutido permite que se insira outro documento dentro do documento HTML atual.
A tag é frequentemente utilizada em publicidade on-line, onde o conteúdo do <iframe>
é um anúncio de uma parte externa. São tipicamente criados usando um segundo
documento HTML. Esse segundo documento contém o conteúdo dentro do quadro
embutido.
O HTML 5 não suporta atributos como frameborder, scrolling, marginwidth e
marginheight (que foram suportados em HTML4). No entanto, introduziu a “seamless”
atributo que permite que o quadro embutido apareça como se ele estivesse sendo
processado como parte do documento que contém. Por exemplo, bordas e barras de
rolagem não aparecerão.
Outra característica da tag é que ela pode ser manipulada através de um script. O
código do <iframe> é bem simples e possui alguns atributos que já conhecemos em outras
tags, como <img> e <frame>.
Exemplo
<html>
<head> <title >Exemplo de iframes </title> </head>
<body>
<h1>Exemplo de iframes </h1>
<iframe height="250" width="250" src="http://www.w3c.br/">
</iframe>
<! O srcdoc especifica o que será exibido dentro do quadro -->
<iframe srcdoc="<i>Ol&aacute</i>"> </iframe>
</body>
</html>
Elementos Div
A tag <DIV> nada mais é do que uma unidade de recipiente (container) que encapsula
outros elementos da página e divide o documento HTML em seções.
Os desenvolvedores da Web usam elementos <DIV> para agrupar elementos HTML
e aplicar estilos CSS a elementos de uma só vez. Por exemplo, envolvendo um conjunto de
elementos de parágrafo em um elemento <DIV>, o desenvolvedor pode tirar proveito de
estilos CSS e aplicar uma fonte de todos os parágrafos de uma só vez, aplicando um estilo
de fonte para a marca <DIV> em vez de codificar o mesmo estilo de cada elemento do
parágrafo.
Existem muitos layouts baseados em tags "div", justamente porque é possível atribuir-
lhes altura/largura e distância das laterais da janela do navegador, atribuir opções de fundo
ou cor de fundo, e colocar o conteúdo lá dentro e estará tudo pronto. No entanto, embora a

50
Plataforma +IFMG
utilização da <DIV> permita uma facilidade de aplicação de estilos, não são todos os
navegadores que interpretam bem esses códigos todos.
Mais adiante, veremos sobre o CSS onde o uso da tag <DIV> será mais ilustrada.
Exemplo
<html>
<head><title> Exemplo de tag div</title></head>
<body>
<div id="myDiv" name="myDiv" title="Exemplo Div Elemento" style="font-family: Helvetica;
font-size: 12pt; border: 1px solid black;">
<div id="subDiv1" name="subDiv1" title="Subdivisão Div" style="color: #FF0000; border: 1px
dotted black;">
<h5>Seção 1</h5>
<p>O site é dividido em seções. </p>
<p>Cada seção tem seu significado e carrega informações de
diversos assuntos</p>
</div> <br>
<div id="subDiv2" name="subDiv2" title="Subdivisão Div"
style="color: #FF00FF; border: 1px dashed black;">
<h5>Seção 2</h5>
<p>Este parágrafo será seu parágrafo de conteúdo.</p>
<p>Este outro parágrafo será o de artigos.</p>
</div>
</div>
</body>
</html>
Resultado que é visualizado

no browser:
Figura 23 – Exemplo de utilização da tag div

3.1 Introdução ao CSS
Toda página utiliza certos elementos de desenho para formatar seções de texto a fim
de manter a mesma aparência e seguir um padrão. Por exemplo, um elemento de desenho
Heading1 (H1) é geralmente alguma fonte grande que identifica todas as principais divisões
de tópicos de um capítulo ou artigo na página. Um elemento de desenho Heading2 (H2)
identifica todos os títulos dos subtópicos. A HTML inclui uma tag para praticamente todos os
elementos de desenho comumente utilizados.

51
Plataforma +IFMG
No passado, a tag <H1> em quase todos os websites parecia a mesma, o texto preto
era consideravelmente maior que o corpo do texto normal. Se preferisse criar seus próprios
títulos diferenciados, era preciso formatar cada tag de título individualmente, utilizando tags
<FONT> ou similares.
A linguagem CSS (Cascading Style Sheets) ou folhas de estilo em cascata mudam
tudo isso. Com uma folha de estilo, é possível fazer uma "declaração global", como "quero
que todos os meus títulos <H1> sejam verdes". É preciso declarar isso somente uma vez e
cada título <H1> do site será verde. Se depois decidir que azul é uma cor melhor, não é
preciso voltar e alterar cada tag <H1> para a cor azul. Em vez disso, basta alterar o estilo -
a regra - para "quero que todos os meus títulos <H1> sejam azuis".
Assim, com CSS é possível:
• Economizar o tempo na formatação das páginas;
• Diminuir o tamanho do código;
• Diminuir o tempo de carregamento do website- diminuir o tamanho e o número
das requisições pode reduzir significantemente o tempo de carregamento;
• Mais facilidade de manter e fazer alterações na página;
• Mais controle no layout da página.
Atualmente, a especificação das folhas de estilo em cascata se encontra na versão
3. A principal função da CSS3 é apresentar transições e efeitos para criar animações de
vários tipos. No entanto, há navegadores no mercado que ainda não aceitam todas as novas
propriedades incorporadas.
Utilizar um framework pode ser muito útil. Framework é uma expressão em inglês que
não tem uma tradução em português. É mais fácil entendê-la pelo real sentido da palavra:
aumentar a produção diminuindo esforços.
Assim, para utilizar qualquer framework CSS é preciso, no mínimo, conhecer a
linguagem HTML e CSS a ponto de estilizar elementos. Bootstrap, UIKit, W3.Css e Sass são
exemplos utilizados no mercado para desenvolvimento com CSS em aplicações tanto para
dispositivos móveis como para computadores.
3.2 Como Criar Estilos
As formatações do CSS são normalmente aplicadas às tags do HTML, como, por

exemplo, nos elementos table, p, h1 ou body. No CSS esses elementos são chamados
seletores.
Cada estilo criado é definido como uma regra CSS. Cada regra deve utilizar a seguinte
sintaxe:
elemento {atributo1: valor; atributo2: valor ...}

52
Plataforma +IFMG
Elemento - descreve o elemento de design ao qual o estilo será aplicado.

Atributo - o aspecto específico do elemento que você quer usar como estilo. Deve
ser um nome de atributo CSS válido, como o atributo font-size do Exemplo a seguir.
Valor - a configuração aplicada ao atributo. Deve ser uma configuração válida para o
atributo em questão, como 20pt para font-size.
Atributo: valor - parte da declaração da regra. É possível atribuir múltiplas
declarações separando-as por ponto-e-vírgula.
Exemplo:
Todos os títulos de nível 2 (tags <H2>) devem ter tamanho de 24 pontos e cor azul.
H2 {font-size: 24pt; color: blue}
Dica do professor: O W3C descreve os principais

atributos que podem ser utilizados em arquivos CSS.
Trata-se de um guia de referência completo com os
todos os atributos e valores disponíveis (download).
Seletores
Existem diversas maneiras de selecionar o conteúdo que deve receber alguma
informação de estilo, vejamos as mais comuns:
Seletor de elementos múltiplos

Elemento1, Elemento2... {atributo1: valor; atributo2: valor ...}
H1, H2, H3 {font-weight:bold}
/* Faz com que o conteúdo dos elementos H1, H2, H3 fiquem em negrito */
Seletor universal
*{atributo1: valor; atributo2: valor ...}
*{color:#00FF00}
/* Faz com que o conteúdo dos elementos fique coloridos */
Seletor de elementos adjacentes

Elemento1 + Elemento2 {atributo1: valor; atributo2: valor ...}

53
Plataforma +IFMG
H1+P {border-style:solid; border-width:5px}

/* Faz com que o conteúdo do elemento P fique em negrito, mas somente quando
estiver logo após um elemento H1 */
Seletor de elementos filhos

Elemento1> Elemento2 {atributo1: valor; atributo2: valor ...}
DIV>P {font-weight:bold}
/* Faz com que o conteúdo dos parágrafos que estiverem dentro de algum DIV, fiquem
em negrito */
Seletor HTML: Class

. NomeDaClasse {atributo1: valor; atributo2: valor ...}, ou
Elemento.NomeDaClasse {atributo1: valor; atributo2: valor ...}
Exemplo:
<html>
<head><title></title>
<style type=”text/css”>
.conteudo{font-style:italic; font-size:24}
</style>
</head>
<body><p class=”conteudo”>Bem vindo a página! Tamanho da fonte 24</p>
<p>Texto normal</p>
</body>
</html>
Seletor HTML: Id
#NomeDoIdentificador {atributo1: valor; atributo2: valor ...}
Exemplo:
<html>
<head><title></title>
<style type=”text/css”>
#cabeçalho{font-style:italic}
</style>
</head>
<body><p id=”cabeçalho”>Bem vindo a página!</p>
<p>Texto normal</p>
</body></html>
3.3 Tipos de Folhas de Estilos

54
Plataforma +IFMG
É possível definir as regras de CSS de três formas:
1) Externo - significa que as regras de CSS são adicionadas em um arquivo separado

e, então, a página HTML pode fazer um link para esse arquivo. Essa abordagem permite
definir regras em um ou mais arquivos que podem ser aplicadas em alguma página do seu
website.
Exemplo:
Arquivo meu_estilo.css
H1 {font-family: 'Comic Sans MS';
font-size: 36pt;
color: blue}
/* Este comentário não será exibido */
H2 {font-family: 'Courier';
margin-left: 0.5in}
Arquivo estilo.html
<html> <title>Exemplo Estilo Externo</title>
<head>
<LINK REL="STYLESHEET" HREF="meu_estilo.css" TYPE="text/css">
</head>
<body><H1>Texto com a primeira formatação em css
<H2>Texto com a segunda formatação em css
</body>
</html>
Sempre que quiser utilizar esses estilos em uma nova página, basta colocar uma tag
<LINK...> no cabeçalho que referência meu_estilo.css:
<LINK REL="STYLESHEET" HREF="meu_estilo.css" TYPE="text/css">
Deve-se ter o cuidado de inseri-la entre as tags <HEAD>...</HEAD> e colocar a
localização correta do seu arquivo e seu nome.
2) Incorporado - Incorporado significa que as regras de CSS são especificadas no

cabeçalho da página. As regras incorporadas afetam somente a página atual.
Se quiser criar um conjunto de estilos que se aplicam a uma única página, pode-se
configurar os estilos exatamente como no exemplo dos estilos externos, mas, em vez de
colocar as tags <STYLE>...</STYLE> e as regras em um arquivo separado, coloque-as na
própria página HTML. A estrutura básica de uma página que utiliza estilos incorporados é
semelhante ao seguinte código:

55
Plataforma +IFMG
<html>
<head><title>Exemplo Estilo Incorporado</title>
<STYLE TYPE="text/css">
P {background-color: #FFFFFF;
font-family:'Comic Sans MS';
font-size: 14pt}
</STYLE>
</head><body></body>
</html>
3) Inline - Inline significa que as regras de CSS são especificadas dentro da tag da
HTML.
Os estilos inline afetam somente a tag atual e não outras tags na página e tampouco
outros documentos. A sintaxe para definir um estilo inline é a seguinte:
<A STYLE="color: green; text-decoration: none" HREF="http://www.seusite.com">
Note que em vez das tags <STYLE>...</STYLE>, apenas utiliza-se um atributo
STYLE, dentro da tag, para definir o estilo. E, em vez de colocar as regras de CSS entre
colchetes, as coloca entre aspas, separando-as com ponto-e-vírgula.
Mas então qual estilo utilizar?
As duas primeiras opções, apesar de reduzirem o número de requisições, aumentam
o tamanho do documento HTML. Elas podem ser interessantes quando se tem arquivos
pequenos e o custo de uma requisição é maior. Nesse caso, é necessário realizar testes
para avaliar se há realmente ganho. Deve ser avaliado, também, o objetivo da página e sua
audiência, se o esperado é que usuários visitem essa página somente uma única vez, como
por exemplo, uma campanha temporária onde não se espera futuras visitas, utilizar o estilo
inline/incorporado ajudará na redução do número de requisições.
Já o estilo externo, não só melhora a organização do código, como também possibilita
que eles sejam armazenados no cache do navegador. Esta opção deve ser utilizada para a
maior parte dos casos, quando lidamos com arquivos grandes e muitas páginas.
Atenção: Uma cache web é uma entidade da rede que

atende requisições HTTP em nome de um servidor Web
de origem. O cache Web tem seu próprio disco de
armazenamento e mantém, dentro dele, cópias de
objetos recentemente requisitados. O browser pode ser
configurado de modo que todas as suas requisições
HTTP sejam dirigidas primeiramente ao cache (
KUROSE, 2010).

56
Plataforma +IFMG
Estilos conflitantes
As definições de estilo aplicáveis a um documento podem se originar de três lugares
diferentes:
• Desenvolvedor: o desenvolvedor define as regras de apresentação do documento
• Usuário: caso o browser permita, o leitor pode definir suas regras de apresentação.
• Browser: o próprio browser possui um conjunto de regras que são utilizadas quando
nenhum outro estilo for definido. São as regras “default” do browser.
Dessa maneira, uma parte do documento pode receber estilos conflitantes de
diversas origens. O browser gera um único “CSS virtual” utilizando as regras de prevalência
mostradas na tabela 2 a seguir:
Tabela 1 - Regras de prevalência
Menor importância  Maior importância
Origem Estilo default do Estilo do usuário Estilo do
browser desenvolvedor
Métodos Externo Incorporado Inline
Elementos seletor class id
Utilizando a tag <DIV>

As tags HTML <DIV>...</DIV> podem ser usadas para formatar um grande bloco de
texto, uma divisão, abrangendo diversos parágrafos e outros elementos. Dessa forma, essas
tags são uma boa opção para definir estilos que afetam grandes seções de um texto em uma
página. Ao associar a tag <DIV> com o atributo CLASS, você estará fazendo com que todos
os elementos que estejam encapsulados nessa tag sigam estes padrões.
Exemplo:
Figura 24 – Exemplo de formulário usando div


57
Plataforma +IFMG
Figura 25 – Exemplo de utilização da tag div junto com CSS

3.4 Modelo de caixa CSS
O modelo de caixa em CSS, descreve as caixas que estão sendo geradas pelos
elementos HTML. O modelo de caixa contém, ainda, opções detalhadas de ajuste de
margens, bordas, padding e conteúdo para cada elemento. O diagrama da Figura 26 mostra
como o modelo de caixa é construído:

58
Plataforma +IFMG
Figura 26 – Modelo de Caixa Css

Fonte: https://www.w3c.br/divulgacao/guiasreferencia/css2/#mod-caixa (Acesso em: 12 ago.2020)
• Padding: espaço que pode existir entre o conteúdo e suas bordas.

• Border: designa o limite do elemento.
• Margin: pode existir e separa o elemento de outros da mesma página.
• Largura do elemento: é determinada pela largura do conteúdo.
• Largura da caixa: é determinada pela soma das larguras do conteúdo, mais as
larguras ocupadas pelas linhas de contorno (border), pelo espaço em branco
(padding) e pelas larguras das margens.
A ilustração mostra que cada um dos elementos é cercado por caixas que podem ser
ajustadas com o CSS. O exemplo a seguir contém dois elementos: <h1> e <p>. O modelo
de caixa para os dois elementos pode ser ilustrado como se segue:
<h1> Artigo 1: </h1>
<p> Todos os seres humanos nascem livres e iguais em dignidade e direitos. São
dotados de razão e consciência e devem agir em relação uns aos outros com espírito de
fraternidade. </p>

59
Plataforma +IFMG
Figura 27 – Exemplo de modelo de Caixa Css

Fonte: Elaborado pela autora
Bordas CSS
As propriedades de borda lhe permitem especificar o estilo, a cor, e a largura de um
elemento “border”. Em HTML usam-se tabelas para criar bordas em torno de um texto, mas
com as propriedades de borda em CSS podem-se criar bordas com belos efeitos, e elas
podem ser aplicadas a qualquer elemento.
Exemplo: Cor das bordas
<html>
<head><title> Cor das bordas </title>
<style type="text/css">
p.um { border-style: solid;
border-color: #0000ff;
}
p.dois {border-style: solid;
border-color: #ff0000 #0000ff;
}
p.tres { border-style: solid;
border-color: #ff0000 #00ff00 #0000ff;
}
p.quatro {border-style: solid;
rgb(250,0,255);
}
</style>
</head>
<body>
<p class="um"><b>Observação:</b> A propriedade "border-color" não é reconhecida
no Internet Explorer se for usada sozinha. Use a propriedade "border-style" para
configurar as bordas.</p>
<p class="dois">Algum texto</p>
<p class="tres"><b>Observação:</b> Alguns navegadores não suportam a
propriedade "border-color". Use a propriedade "border" para configurar as bordas e
as cores. </p>
<p class="quatro">Algum texto</p>
</body>
</html>

60
Plataforma +IFMG
Exemplo: Estilo das bordas

<html>
<head><title> Estilo das bordas </title>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
</style>
</head>
<body>
<p>A propriedade "border-style" não é reconhecida por alguns
navegadores.</p>
<p class="dotted"> Uma borda pontilhada</p>
<p class="dashed"> Uma borda tracejada</p>
<p class="solid"> Uma borda sólida</p>
<p class="double"> Uma borda dupla</p>
<p class="groove"> Uma borda com canaleta</p>
<p class="ridge"> Uma borda ressaltada</p>
<p class="inset"> Uma borda rebaixada</p>
<p class="outset"> Uma borda em relevo</p>
</body></html>
Exemplo: Largura das bordas

<html>
<head><title> Largura das bordas </title>
p.um {border-style: solid;
border-width: 5px;
}
p.dois {border-style: solid;
border-width: 5px 10px;
}
p.tres {border-style: solid;
border-width: 5px 10px 1px;
}
p.quatro {border-style: solid;
border-width: 5px 10px 1px medium;
}
</style>
</head>
<body>
<p class="um">

61
Plataforma +IFMG
A propriedade "border-width" não é reconhecida por alguns navegadores se for usada

sozinha. Use juntamente com a propriedade "border-style" para especificar bordas.
</p>
<p class="dois"> Algum texto. </p>
<p class="tres"> Algum texto. </p>
<p class="quatro"> Algum texto. </p>
</body>
</html>
Com o CSS3 é possível, ainda, arredondar as bordas conforme é mostrado no

exemplo abaixo.
Exemplo: Canto das bordas
<html>
<head><title>Canto das bordas</title>
p.cantoarredondado { border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p class="cantoarredondado"> Bordas Arredondadas</p>
</body>
</html>
Figura 28 – Cantos das bordas arredondado

Contorno CSS
Um contorno é uma linha em torno de um elemento - fora da borda. Isso pode ser
usado para fazer um elemento se destacar. O atributo outline especifica o estilo, cor e largura
de um contorno.

62
Plataforma +IFMG
Exemplo: Contorno da borda

<html><head><title> Contorno das bordas </title>
p { border: 1px solid black; outline-color: red;}
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
</style>
</head>
<body>
<p class="dotted"> Este é um contorno pontilhado </p>
<p class="dashed"> Este é um contorno tracejado </p>
<p class="solid"> Este é um contorno sólido </p>
<p class="double"> Este é um contorno duplo </p>
<p class="ridge"> Este é um contorno ridge </p>
<p class="inset"> Este é um contorno inset </p>
<p class="outset"> Este é um contorno outset </p>
</body></html>
Figura 29 – Contorno de bordas

Margem em CSS
As propriedades de margem definem o espaço em volta dos elementos. É possível
usar valores negativos para sobrepor o conteúdo. As margens superior, direita, inferior e
esquerda podem ser mudadas, independentemente, usando propriedades separadas.

63
Plataforma +IFMG
Como exemplo, vamos definir as margens para o documento, ou seja, para o

elemento <body>.
body { margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}
A ilustração a seguir mostra como queremos as margens da página.
Figura 30 – Margens da página

É possível, para diminuir o número de linhas do código, especificar todos os valores

da margem em uma propriedade:
body { margin: 100px 40px 10px 70px; }
Exemplo:
<html>
<head><title>Exemplo de margens</title>
p.margem {margin: 2cm 4cm 3cm 4cm;}
</style>
</head>
<body>
<p> Este é um parágrafo </p>
<p class="margem"> Este é um parágrafo com margens </p>
<p> Este é outro parágrafo </p>
</body>
</html>
Enchimento em CSS
As propriedades de enchimento definem o espaço entre a borda do elemento e o
conteúdo. Valores negativos não são permitidos. O enchimento superior, direito, inferior e

64
Plataforma +IFMG
esquerdo podem ser mudados, independentemente, usando propriedades separadas. Uma

propriedade de enchimento estenográfica é também criada para controlar múltiplos lados de
uma só vez.
Exemplo:
<html>
<head><title>Exemplo de enchimento</title>
td {padding: 1.5cm}
td.doisvalores {padding: 0.5cm 2.5cm;}
</style>
</head>
<body>
<table border="1">
<tr>
<td>Esta é uma célula de tabela com enchimento em cada lado</td>
</tr>
</table><br>
<table border="1">
<tr>
<td class="doisvalores"> Esta é uma célula de tabela com enchimento em cada lado.
Os enchimentos superior e inferior têm o mesmo valor (0,5cm), enquanto os enchimentos,
esquerdo e direito têm outro valor (2,5).</td>
</tr>
</table>
</body>
</html>
Links
Com CSS, os links podem ser decorados de formas diferentes de acordo com seu
estado:
• a - um link não visitado
• a:visited - um link que o usuário visitou
• a:hover - um link que o usuário passa o mouse sobre ele
• a:active - um link no momento em que for clicado
Exemplo:
<html>
<head><title>Formas dos links</title>
a { background-color: yellow;
text-decoration: underline;
}
a:visited { background-color: blue; }

65
Plataforma +IFMG
a:hover { background-color: lightgreen; }

a:active { background-color: red; }
</style>
</head>
<body>
<a href: “#”>Texto do link</a>
</body>
</html>
Dropdown
É a criação de uma caixa suspensa que aparece quando o usuário move o mouse
sobre um elemento.
Exemplo:
<style>
/* Estilo do botão */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* O container <div> precisa posicionar o conteúdo */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown conteudo (Hidden por default) */
.dropdown-conteudo {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
}
/* Links */
.dropdown-conteudo a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Muda a cor do dropdown links */
.dropdown-conteudo a:hover {background-color: #f1f1f1}
/* Mostra o dropdown menu */

66
Plataforma +IFMG
.dropdown:hover .dropdown-conteudo {
display: block;
}
/*Muda a cor de fundo do botão o conteúdo é exibido */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
<div class="dropdown">
<button class="dropbtn"> Dropdown </button>
<div class="dropdown-conteudo">
<a href="#"> Link 1 </a>
</div>
</div>
Figura 31 – Menu dropdown

3.5 Validação CSS
A grande vantagem na utilização do CSS é permitir que a lógica da estruturação seja

separada da formatação das informações, além da redução do tamanho e
consequentemente do tempo de carregamento das páginas. Mas, é importante ressaltar que
diferentes navegadores interpretam o CSS de forma diferente, principalmente, as versões
mais antigas.
É possível verificar se uma página pode ser visualizada corretamente pelos
navegadores através do uso de algum validador. O W3C disponibiliza um online. Para testar
o validador basta criar uma página e publicá-la na Internet. A seguir, acesse a página do
validador (validator.w3.org) e digite o endereço (a URL) da sua página no campo
correspondente. Depois, basta confirmar a validação clicando no botão “validar”. Se
seu HTML estiver correto, irá aparecer uma mensagem de congratulações. Se não, será
apresentada uma lista de erros, informando o que está errado e onde. O validador ajuda a
encontrar erros que não se tem nem ideia de que existiam.
O desenvolvimento web depende de três personagens principais: W3C, que
regulamenta, cria e sanciona padrões para a web. Os browsers, que importam essas regras
e padrões de forma que a web seja mais homogênea. E os desenvolvedores, que
possibilitam a criação e publicação de conteúdo em vídeos, texto, imagem etc.

67
Plataforma +IFMG
Cada um destes personagens tem papéis importantes para que a evolução da web
possa se tornar forte, traçando novos caminhos, cobrindo as necessidades atuais dos
usuários e prevendo necessidades e soluções futuras.
Esta semana abordou as duas tecnologias e alguns conceitos que estão em pauta
agora no mercado de desenvolvimento web. Mas, você já imaginou o que será do HTML ou
do CSS daqui há 5 ou 10 anos? Será que ainda iremos continuar escrevendo CSS e HTML
como fazemos hoje?
Atividade: Para concluir a segunda semana de estudos,

vá até a sala virtual e responda ao Questionário “Revise
seu conhecimento”. O teste é constituído por 10
perguntas de múltipla escolha, que se baseiam nos
conteúdos apresentados na segunda semana de aula.
Concluída essa segunda semana de estudos, é hora de uma pausa para a reflexão.
Faça a leitura (ou releitura) de tudo que lhe foi sugerido, assista aos vídeos propostos e
analise todas essas informações com base na sua experiência profissional. Esse intervalo é
importante para amadurecer as novas concepções que esta etapa lhe apresentou!”.
Encontramo-nos na próxima semana.

Bons estudos!

68
Semana 3 – Noções da linguagem JavaScript Plataforma +IFMG
Objetivos
Nesta terceira semana, você irá conhecer a linguagem de
programação JavaScript e como ela pode ser usada para
adicionar interatividade às páginas. Conhecerá sobre sua
sintaxe básica, os objetos e eventos. Irá conhecer como
manipular janelas e sobre a biblioteca JQuery.

virtual e assista ao vídeo “Apresentação da Terceira
Semana”.
4.1 Introdução ao JavaScript
A primeira coisa que você precisa saber é que JavaScript não tem nada a ver com
Java. Java é uma linguagem server-side, como PHP, Ruby, Python e tantas outras. A única
coisa parecida entre eles é o nome.
Sabendo disso, quero que saiba, também, que JavaScript é uma linguagem de
programação criada inicialmente para client-side. Ela é utilizada para controlar o HTML e o
CSS para manipular comportamentos na página. Mas, como assim, comportamento? Um
comportamento comum, por exemplo, é um submenu. Sabe quando você passa o mouse
em um item do menu, e aparece um submenu com vários outros itens? Pois é. A obrigação
de fazer aparecer esse submenu é do JavaScript. O submenu estava escondido, e quando
passamos o mouse no item, o submenu aparece. Todo esse comportamento quem vai
executar é o JavaScript.
O JavaScript não foi criado pelo W3C, na verdade, ele foi criado por Brendan Eich na
Netscape (um dos precursores dos navegadores web). A linguagem se chamava LiveScript,
mas logo seu nome foi mudado para JavaScript. Mesmo assim, o nome original é
ECMAScript, porque o JavaScript é mantido pela European Computer Manufacturer's
Association. Ou seja, chame de JavaScript mesmo, que é como todo mundo conhece.
Voltando ao assunto principal: o JavaScript não é mantido pelo W3C, ele é uma
linguagem criada e mantida pela ECMA. Eles mantêm uma documentação da linguagem no
site deles, mas a melhor documentação ainda são os materiais que você pode encontrar na
web mesmo.
69
Plataforma +IFMG
Você já deve ter ouvido falar sobre o desenvolvimento separado em camadas, onde
existem três camadas básicas no desenvolvimento para Web: a informação que fica com o
HTML, a formatação que fica com o CSS e o comportamento, que fica com o JavaScript.
O JavaScript é que manipula as duas primeiras camadas, isto é o HTML e CSS.
Imagine que você precise de um Slider de imagens. Toda a movimentação, ações de cliques
nas setinhas e etc, é o JavaScript que vai cuidar disso. É isso que é chamado de
comportamento.
A linguagem de programação é baseada em objetos. Os objetos são suas estruturas
básicas, propriedades do browser e os elementos de uma página HTML, ou seja, os objetos
são entidades com propriedades e comportamentos, e permitem que sejam manipulados
através de eventos do usuário. A linguagem oferece recursos interativos que faltavam no
HTML e permite a criação de páginas mais dinâmicas, que são interpretadas localmente pelo
browser, sem precisar recorrer à execução remota de programas no servidor.
Formas de usar JavaScript
Há três maneiras de incluir JavaScript em uma página Web:

1. Dentro de blocos HTML <SCRIPT> ... </SCRIPT> em várias partes da página: para
definir funções usadas pela página, gerar HTML em novas páginas ou alterar o
procedimento normal de interpretação do HTML da página pelo browser.
2. Em um arquivo externo, importado pela página: para definir funções que serão usadas
por várias páginas de um site.
3. Dentro de descritores HTML sensíveis a eventos: para tratar eventos do usuário em
links, botões e componentes de entrada de dados, durante a exibição da página.
Vamos fazer um primeiro Olá Mundo com JavaScript para exemplificar o primeiro
caso. Inicialmente, no Notepad++ escreva a estrutura básica do arquivo HTML:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Título</title>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
Agora, antes do </body> coloque este código:
<script type="text/javascript">
alert('Olá Mundo!'); Figura 32 – Janela de alerta
</script> Fonte: Elaborado pela autora
O código final fica assim:

<!DOCTYPE html>
<html lang="pt-br">
<head>
70
Plataforma +IFMG
</head>
<body>
alert('Olá Mundo');
</script>
</body></html>
E pronto, você já escreveu seu primeiro código JavaScript. Abra esse documento
HTML no browser e você vai ver uma janela de alerta aparecendo.
O exemplo acima descreve uma das formas de uso do javaScript incorporado à
página HTML. No entanto, é possível criar um arquivo com extensão JavaScript (.js)
separado. Vejamos um outro exemplo:
Primeiro, escreva a estrutura básica do HTML:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<script type="text/javascript" src=’Exemplo2.js’></script>
</head>
<body>
</body>
</html>
Agora, escreva o código em JavaScript chamado de Exemplo2.js:

alert('Olá Mundo!');
Observe que na sexta linha, entre as tags do cabeçalho <head> é feita a chamada ao
arquivo em JavaScript quando a página HTML é carregada. No valor do atributo src, é
passado o nome do arquivo Exemplo 2.js. Lembrando que se o arquivo estiver em outra
pasta o caminho também deve ser também informado.
Código JavaScript também pode ser acionado através de eventos nativos do HTML,
como links e botões de submissão de formulários usando uma URL “javascript:”:
<!DOCTYPE html>
<html lang="pt-br">
<head>
</head>
<body>
<a href='javascript:alert("Tem Certeza?")'> link </a>
</body> </html>
71
Plataforma +IFMG
O código fará com que o evento HTML (clicar no link) provoque a execução do código
JavaScript.
Comentários no código
Em JavaScript podemos usar comentários com uma única linha e comentários com
várias linhas. Os comentários com uma única linha começam com os caracteres:
//.
Um comentário que se estende por várias linhas começa com a sequência de
caracteres /* e continua até ser encontrada a sequência de caracteres */, que marcam o fim
do comentário.
// Este é um comentário com uma única linha
/* Este comentário ocupa várias linhas.
Tudo o que for escrito aqui dentro será ignorado pelo interpretador de JavaScript
*/
Terminar ou não com (;)
Ao contrário do que acontece nas linguagens Java e C++, em que o uso do ponto e
vírgula é obrigatório, em JavaScript ele é facultativo.
No entanto, é recomendado como boa prática de programação o uso do ; (ponto e
vírgula), assim, sempre que puder, use tal recomendação.
Sobre as variáveis
As variáveis são objetos que servem para guardar informação.
É importante que saibamos quais as regras que temos de respeitar quando
escolhemos um nome para uma variável:
• Todos os nomes têm que começar com uma letra ou com o caractere _.
• Os restantes caracteres que compõem o nome podem igualmente conter
números. Nunca se esqueça que para o JavaScript, letra maiúscula e letra
minúscula são coisas diferentes e que, por exemplo, as variáveis variavel1,
Variavel1 e vaRiavel1 são três objetos distintos.
A linguagem JavaScript é capaz de reconhecer três tipos de dados:
• Números, como por exemplo 12 ou 3.14159
• Texto (variáveis de tipo String), como por exemplo: "Seja Bem Vindo(a)!"
• Valores lógicos (true ou false)
E ainda “null” que é uma palavra especial que significa que a variável não guarda
qualquer valor, está vazia.
72
Plataforma +IFMG
A linguagem JavaScript exige pouco trabalho ao programador para definir o tipo de

dados que uma variável deve guardar. É o próprio interpretador de JavaScript que, em
função dos dados que recebe, decide se estes representam um número, texto (string), um
valor lógico, ou nada (null). Assim, se escrever:
var resposta = 42;
O interpretador decidirá guardar internamente a variável resposta como um número
inteiro, mas se escrevermos:
resposta = "JavaScript é muito fácil de aprender.";
Ao chegar à segunda linha de código, o interpretador mudará de ideia e a variável
resposta deixará de ser guardada internamente como um número inteiro para passar a ser
guardada como uma String (texto).
A declaração var serve para limitar o contexto em que a variável existe e que:
• As variáveis declaradas sem a declaração var são variáveis globais;
• As variáveis declaradas usando a declaração var existem apenas no contexto
em que foram definidas – variáveis locais.
Por exemplo: se tentarmos acessar uma variável local fora da função (veremos
funções a seguir) em que ela foi declarada, será gerado um erro porque a variável só existe
no universo da função em que foi declarada.
4.2 Funções
Uma função é um grupo de linha(s) de código de programação destinado a uma tarefa

bem específica e que podemos, quando necessário, utilizar várias vezes. A utilização de
funções melhora bastante a leitura do script.
Em Javascript, existem dois tipos de funções:
• As funções próprias do Javascript. Que chamamos de "métodos". Elas

são associadas a um objeto bem particular como o caso do método
alert() com o objeto window.
• E as funções escritas por nós para executar um script. É a estas que

vamos ver em detalhes agora.
Declaração de funções
Para declarar ou definir uma função, utiliza-se a palavra function.
73
Plataforma +IFMG
function nome_da_função (argumentos) {

... código de instruções ...
}
Definir os argumentos é facultativo, mas os parênteses devem permanecer. E aliás, é
graças aos parênteses, o interpretador Javascript distingue as variáveis das funções. O fato
de definir uma função não faz com que os comandos que ela contém sejam executados. A
função só é executada quando chamamos a função.
A invocação de função se faz pelo nome da função com parêntese como:
nome_da_função();
É aconselhado inserir todas as declarações de funções no cabeçalho da página, isto
é, entre os tags <HEAD>...</HEAD>. Assim é possível ter a certeza que as funções já
estarão interpretadas antes de serem invocadas no <BODY>.
Neste exemplo, foi definida dentro da tag HEAD, uma função chamada mensagem()
que insere um texto "Bem-vindo à minha página". Esta função será chamada no
carregamento da página através do evento onLoad=.... na tag <BODY>.
Exemplo:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="Javascript">
function mensagem() {
document.write("Bem vindo a minha página");
}
</SCRIPT>
</HEAD>
<BODY onLoad="mensagem()">
</BODY>
</HTML>
Passar um valor a uma função
Pode-se passar valores ou parâmetros às funções Javascript. Para passar um

parâmetro a uma função, fornece-se um nome de uma variável dentro da declaração da
função. No exemplo, o nome da variável é Texto e é definida como um parâmetro da função.
function ExemploText(texto) {
alert(texto);
}
Na invocação da função, fornece-se o texto:
ExemploText("Bom dia a todos");
74
Plataforma +IFMG
Também é possível passar vários parâmetros a uma função. Nesse caso, os

parâmetros são separados por vírgulas.
function nome_da_função(arg1, arg2, arg3) {

... código de instrução ...
}
Declaração de função:
function ExemploArg(Texto1, Texto2){...}
Invocação da função:
ExemploArg("Bem-vindo à minha página", "Bom dia a todos");
Voltar a um valor
Para reenviar um resultado, basta escrever a palavra-chave return seguido

da expressão a reenviar. Por exemplo:
function quadrado(numero) {
var quadrado = numero*numero
return quadrado;
}
Invocação da função:
document.write (quadrado(2));
Com as funções, o bom uso de variáveis locais e globais tem toda a sua importância.
Uma variável declarada dentro uma função pela palavra var terá uma invocação limitada a
esta função. Não se pode assim chamá-la fora do script. Nesse caso, a variável é chamada
de variável local.
Assim, a variável quadrado, no exemplo acima, é uma variável local. Se fizermos

referência a ela fora do script, a variável será desconhecida pelo interpretador Javascript
(mensagem de erro).
Se a variável é declarada contextualmente (sem utilizar a palavra var), a sua

invocação será global.
75
Plataforma +IFMG
quadrado = numero*numero
return quadrado;
}
As variáveis declaradas logo no início do script, fora e antes de todas as funções,

serão sempre globais, seja declarada com var ou de maneira contextual.
<script type="text/javascript" >

var quadrado=2
var cubo = numero*numero
}
</script>
4.3 Tratamento de Eventos

A linguagem JavaScript introduziu no HTML os atributos, que permitem a captura de
eventos disparados pelo usuário, como o arrasto de um mouse, o clique de um botão, etc.
Quando ocorre um evento, um procedimento é chamado. O que cada procedimento irá fazer
pode ser determinado pelo programador.
Os atributos de eventos se aplicam a elementos HTML específicos e os valores
recebidos por esses atributos é o código JavaScript, como por exemplo:
<html>
<head>
<title>Exemplo evento</title>
</head>
<form>
<input type="button" ONCLICK="alert('Você acionou o botão!')"
value="Não aperte este botão">
</form>
</body>
</html>
Tudo o que aparece entre as aspas duplas do atributo ONCLICK é JavaScript.

ONCLICK é um atributo HTML, criado para dar suporte ao evento de clicar o botão. Assim,
tanto faz escrevê-lo em letras maiúsculas ou minúsculas.
O código JavaScript que está em negrito será interpretado quando o usuário apertar
o botão com o mouse (onclick). A instrução alert() cria uma janela de alerta com a mensagem
passada como parâmetro (entre parênteses e aspas no código em negrito). Observe que as
aspas usadas dentro do método alert() são aspas simples já que aspas duplas já estão sendo
usadas para representar o atributo HTML.
A seguir, na Tabela 2, são listados os atributos e os eventos mais comuns.
Tabela 2 - Tratamento de eventos
76
Plataforma +IFMG
Atributo HTML Eventos

onclick Quando um objeto é clicado pelo mouse
onfocus Quando um componente de formulário ganha
um foco
onmouseover Quando o mouse está sobre um link
onmouseout Quando o mouse deixa um link
onsubmit Antes de enviar um formulário
onload Após carregar uma página ou janela
Para ilustrar a aplicação dos outros atributos, observe os exemplos:
Onfocus
Figura 33 – Exemplo onfocus

Onmouseover
77
Plataforma +IFMG
Figura 34 – Exemplo onmouseover

Onmouseout
78
Plataforma +IFMG
Figura 35 – Exemplo onmouseout

Onsubmit
Figura 36 – Exemplo onsubmit

Onload
Figura 37 – Exemplo onload

79
Plataforma +IFMG
4.4 Operadores
O JavaScript possui várias classes de operadores: operadores de atribuição,
aritméticos, booleanos, comparativas e binárias. Em JavaScript são realizadas da mesma
forma que em outras linguagens estruturadas como C++. Iremos abordar os mais básicos.
Tabela 3 - Operadores
Operadores de atribuição de valor
Versão curta Significado
x+=y x=x+y
x-=y x=x-y
x*=y x=x*y
Operadores de comparação
Igualdade (==) Verifica se os dois operandos são iguais.
Desigualdade (!=) Verifica se os operandos são desiguais.
Maior do que (>) Verifica se o operando da esquerda é maior do que o da direita
Maior ou igual (>=) Verifica se o operando da esquerda é maior ou igual ao da direita.
Menor do que (<) Verifica se o operando da esquerda é menor do que o da direita
Menor ou igual (<=) Verifica se o operando da esquerda é menor ou igual ao da direita
Operadores aritméticos
+, - , / , * Soma, subtração, divisão e multiplicação
Operadores lógicos
e (&&) b && c. Dá true se b for true e c for true
ou (||) b || c. Dá false se b e c for false.
negação (!b) Dá true se b for false
Dica do professor: Teste você mesmo os exemplos

disponíveis sobre os operadores no site da
www.w3schools.com/js/js_operators.asp
4.5 Controle de fluxo

São comandos da linguagem JavaScript que permitem desviar o fluxo do programa,
dependendo de um teste. Vamos conhecer alguns dos principais comandos:
Instruções condicionais if...else
Uma instrução if permite-nos executar uma porção de código apenas se for verdadeira
uma determinada condição. Se essa condição não for verdadeira, essa porção de código
não será executada, podendo ser ou não executado outro código alternativo, que será
especificado através da palavra else.
Exemplo:
<html><head></head>
<body>
var hora = 10;
if(hora < 12)
document.write("Vamos passear");
80
Plataforma +IFMG
else
document.write("Vamos para a mesa");
</script>
</body>
</html>
Ciclo for
Um ciclo for consiste num conjunto de três expressões, separadas pelo caractere ;
(ponto e vírgula) e pelo código a executar em cada um dos ciclos. Normalmente esse código
estará contido entre chaves para formar um bloco, mas se consistir numa única linha não é
preciso usar as chaves.
A primeira das expressões do ciclo for declara a variável a usar como índice (funciona
apenas como contador) e a inicia. A segunda expressão declara uma condição que deve ser
testada sempre que se inicia um novo ciclo. Se essa condição der false como resultado o
ciclo pára e o código definido abaixo não voltará a ser executado. A terceira expressão serve
para atualizar o valor do índice no final de cada ciclo.
Exemplo:
<html><head></head>
<body>
soma = 0;
for(var i = 0; i < 3; i++) {
soma += i;
document.write("O valor do índice é agora de " + i + "<br>");
}</script>
</body>
</html>
Ciclo While
O ciclo while é muito parecido com o ciclo for. O ciclo while avalia uma condição e se
ela der true executa o bloco de código que vem imediatamente a seguir. Se der false salta
para frente do bloco de código que vem a seguir sem o executar.
Exemplo:
<html><head></head>
<body>
i = 0;
while(i < 3) {
soma += i;
document.write("O valor da variável i agora é de " + i+ "<br>");
i++;
}</script>
</body>
81
Plataforma +IFMG
</html>
Instrução switch
A instrução switch é usada para executar ações diferentes com base em condições
diferentes. Sempre que a comparação detectar uma igualdade será executada a porção de
código que está associada a esse caso. A execução do código prossegue pelas linhas
seguintes até ser encontrada a instrução break ou até que termine o bloco switch.
Exemplo:
<html><head></head>
<body>
var i = 12
var s = "O número " + i
switch(i) {
case 6:
s += " pertence "
break
case 12:
s += " pertence "
break
case 32:
s += " pertence "
break
default:
s += " não pertence "
}
s += "ao conjunto {6, 12, 32}"
document.write(s);
</script>
</body>
</html>
4.6 Objetos principais

A maior parte da programação em JavaScript é realizada através de objetos.
Basicamente os objetos JavaScript são contêineres para propriedades e métodos. Os
métodos de um objeto são funções que pertencem a esse objeto, ou seja, as ações que
podem ser executadas pelo objeto.
Tabela 4 - Objetos mais usados
Window Contém outros objetos e informação acerca da janela do browser e do
seu conteúdo.
Document O objeto document pertence ao objeto window e representa o conteúdo
da página HTML. Ele nos dá acesso aos elementos que definem a
página.
82
Plataforma +IFMG
Location Contém informação acerca da procedência de uma página.

Navigator Contém informação acerca do browser que está apresentando a página.
History Contém a história da navegação de uma janela do browser e permite
regressar a páginas que já foram visitadas antes
Data Permite-nos ler, construir e realizar operações com datas e horas.
Array Vetor capaz de guardar muitos valores, tantos quanto a memória
disponível na máquina permitir.
Fonte - Elaborado pela autora
A instrução “new” é um operador utilizado para criar novos objetos (cópias)

juntamente com Nome_do_Objeto() que é uma função especial, chamada de construtora.
No exemplo a seguir você verá que um objeto “d” do tipo Date é criado para mostrar data e
hora atuais.
Dica do professor: Depois de criar um objeto podemos

utilizar as propriedades e os métodos que ele coloca à
nossa disposição. Para conhecer os métodos
disponíveis consulte o site www.w3schools.com/js/
Para ilustrar a aplicação dos objetos da Tabela 4 implemente o exemplo a seguir e

verifique as funções de cada objeto.
83
Plataforma +IFMG
Figura 38 – Exemplos de objetos

84
Plataforma +IFMG
4.6.1 Janelas personalizadas

Um destaque especial é dado para as janelas do browser, são representadas em
JavaScript através de objetos do tipo Window. Três métodos de Window são usados para
criar janelas de diálogo. Eles são: alert(), confirm() e prompt(). E um método para fechar a
janela close(). Como já vimos exemplos com o window.alert() ou simplesmente alert(), vamos
conhecer as outras janelas através dos exemplos:
<html><head></head>
<body>
nome = window.prompt("Digite seu Nome:", "Sr(a). ");
/*Retorna string digitada caso o usuário clique em
OK e um string nulo caso o usuário clique em Cancelar. */
</script>
</body>
</html>
Figura 38 – Exemplo janela prompt

</html>
<html><head></head>
<body>
window.confirm("Você tem certeza?"));
/*Retorna true caso o usuário clique em OK e false caso o
usuário clique em Cancelar. */
</script>
</body> </html>
Figura 39 – Exemplo janela confirm

85
Plataforma +IFMG
As janelas podem ter várias de suas características alteradas no momento em que

são abertas como:
Tabela 5 - Métodos do objeto window

Aumentar ou reduzir o <html>
tamanho da janela <head>
resizeBy(x,y) <script type="text/javascript">
function resizeWindow(x,y) {
window.resizeBy(x,y) }
</script>
</head>
<body>
<a href="javascript: resizeWindow(50,25)">
Aumentar o tamanho da janela</a><br>
<a href="javascript: resizeWindow(-50,-25)">
Reduzir o tamanho da janela</a><br>
</body></html>
Imprimir uma página <html>
Print() <head><title></title>
function imprimePagina() {
window.print() }
</script>
</head>
<body>
<p>Clique no botão para imprimir esta página.</p>
<form action="javascript:;">
<input onclick="imprimePagina()" type="button"
value="Imprimir esta
página">
</form>
</body></html>
Mover a janela de posição <html>
moveBy() <head><title></title>
function moveJanela(x,y) {
top.window.moveBy(x,y) }
</script>
</head>
<body>
<a href="javascript: moveJanela(30,10)">
Deslocar a janela 30 pixels para a direita e 10 pixels
para baixo</a><br>
<a href="javascript: moveJanela(-30,-10)">
Deslocar a janela 30 pixels para a esquerda e 10 pixels
para cima</a><br>
</body></html>
Fonte - Elaborada pela autora
86
Plataforma +IFMG
4.7 JQuery
Lançada em 2006, por John Resig, jQuery é basicamente uma biblioteca JavaScript.
Com ela é possível fazer diversos efeitos com poucas linhas e, que custariam dezenas de
linhas em JavaScript puro.
Alguns recursos oferecidos facilmente pelo jQuery são:
• Seleção e manipulação de elementos HTML
• Manipulação de CSS
• Efeitos e animações
• Eventos
• Ajax
Para utilizar o jQuery, basta adicionar o arquivo JavaScript que contém o código dessa
biblioteca em uma página HTML. Esse arquivo JavaScript pode ser obtido no endereço
http://docs.jquery.com/Downloading_jQuery ou você pode fazer o link para uma CDN
(Content Delivery Network) como a do Google. A CDN é uma rede de computadores
conectados à Internet focada na distribuição de conteúdo.
Dica do professor: Conheça a CDN do Google

através do site
https://developers.google.com/speed/libraries?hl=pt-
br#jquery
O exemplo a seguir ilustra o uso do jquery para a seleção de foto de um cadastro. A

foto é pré-visualizada e pode ser alterada sem apagar os dados já registrados nos campos
nome e idade.
Figura 40 – Exemplo de uso do jquery

87
Plataforma +IFMG
Figura 41 – Exemplo de código com jquery

Atividade: Para concluir o curso e gerar o seu

certificado, vá até a sala virtual e responda ao
Questionário “Avaliação geral”. O teste é constituído por
10 perguntas de múltipla escolha, que se baseiam nos
conteúdos apresentados nas três semanas de aula.
88
Plataforma +IFMG
É importante destacar que as discussões contidas neste curso não se encerram aqui,
podendo se estender ao decorrer do tempo e das mudanças. Sendo assim, o convido a
conhecer também outros conteúdos relacionados a programação web avançada e que estão
disponíveis na Plataforma +IFMG.
Parabéns pela conclusão do curso. Foi um prazer tê-lo conosco!
89
Plataforma +IFMG
90
Plataforma +IFMG
Referências
BASTIEN, J.M.C.; SCAPIN, D.L. Critérios Ergonômicos para Avaliação de Interfaces

Homem-Computador. 1993. Disponível em:
http://www.labiutil.inf.ufsc.br/CriteriosErgonomicos/Abertura.html. Acesso em: 02 de ago.
de 2020.
COSTA, D. 1ª ed. Aprendendo HTML e CSS na prática. 2018.
KUROSE, J. F.; ROSS, K. W. Redes de Computadores e a Internet: nova abordagem
Top-Down. São Paulo: Addison Wesley, 2010.
NIELSEN, J. Projetando Websites. Rio de Janeiro: Campus, 2000.
91
Plataforma +IFMG
Currículo da autora
92
Plataforma +IFMG
Danielle Costa de Oliveira: Realizou Mestrado na área de Redes de Computadores e

Sistemas Distribuídos pela Universidade Federal do Rio de Janeiro (2007), é Especialista
em Redes de Computadores (2004) e em Arquitetura e Projeto de Nuvem (2018). Possui
Bacharelado em Ciência da Computação (2003). Tem experiência na área de
Computação atuando principalmente nos seguintes temas: redes de computadores e
internet, computação na nuvem e sistemas de segurança. Desde 2009 é professora
efetiva dos cursos de computação e engenharia elétrica do Instituto Federal de Minas
Gerais campus Formiga. Atuou também como docente em cursos técnicos na
modalidade EAD nos polos de Betim, Alfenas e Boa Esperança em 2012. Já ocupou
cargos como Coordenadora da área de Computação, Coordenadora do curso em Ciência da Computação
e Coordenadora dos cursos técnico subsequente e técnico integrado em informática. Foi Supervisora do
Pronatec/Bolsa Formação em 2014 e atualmente é parecerista ad hoc da revista ForScience além de
desenvolver pesquisas como membro do Grupo de soluções em Engenharia (GSE).
Currículo Lattes: http://lattes.cnpq.br/5804759448639565
Feito por (professor-autor) Data Revisão de layout Data Versão
Danielle Costa de Oliveira 25/08/2020 Viviane Lima Martins 14/05/2021 2.0
93
Plataforma +IFMG
94
Plataforma +IFMG
Glossário de códigos QR (Quick Response)
Mídia digital: Antes Dica do professor:

de iniciar os estudos, A Google
vá até a sala virtual e disponibiliza
assista ao vídeo gratuitamente o seu
“Apresentação do guia de otimização
curso”. de motores de
busca.
Mídia digital: Antes Mídia digital: Antes

de iniciar os estudos, de iniciar os estudos,
vá até a sala virtual e vá até a sala virtual e
assista ao vídeo assista ao vídeo
“Apresentação da “Apresentação da
Segunda Semana”. Terceira Semana”.
Dica do professor: Dica do professor:

Teste você mesmo os Depois de criar um
exemplos disponíveis objeto podemos
sobre os operadores. utilizar as
propriedades e os
métodos que ele
coloca à nossa
disposição.
Dica do professor: Dica do professor:
Conheça a CDN do O W3C descreve os
Google. principais atributos
que podem ser
utilizados em
arquivos CSS. Trata-
se de um guia de
referência completo
com os todos os
atributos e valores
disponíveis.
95
Plataforma +IFMG
96
Plataforma +IFMG
97
Plataforma +IFMG
Plataforma +IFMG
Formação Inicial e Continuada EaD
A Pró-Reitoria de Extensão (Proex), neste ano de

2020 concentrou seus esforços na criação do Programa
+IFMG. Esta iniciativa consiste em uma plataforma de cursos
online, cujo objetivo, além de multiplicar o conhecimento
institucional em Educação à Distância (EaD), é aumentar a
abrangência social do IFMG, incentivando a qualificação
profissional. Assim, o programa contribui para o IFMG cumprir
seu papel na oferta de uma educação pública, de qualidade e
cada vez mais acessível.
Para essa realização, a Proex constituiu uma equipe
multidisciplinar, contando com especialistas em educação,
web design, design instrucional, programação, revisão de
texto, locução, produção e edição de vídeos e muito mais.
Além disso, contamos com o apoio sinérgico de diversos
setores institucionais e também com a imprescindível
contribuição de muitos servidores (professores e técnico-
administrativos) que trabalharam como autores dos materiais
didáticos, compartilhando conhecimento em suas áreas de
atuação.
A fim de assegurar a mais alta qualidade na produção destes cursos, a Proex adquiriu
estúdios de EaD, equipados com câmeras de vídeo, microfones, sistemas de iluminação e
isolação acústica, para todos os 18 campi do IFMG.
Somando à nossa plataforma de cursos online, o Programa +IFMG disponibilizará
também, para toda a comunidade, uma Rádio Web Educativa, um aplicativo móvel para
Android e IOS, um canal no Youtube com a finalidade de promover a divulgação cultural e
científica e cursos preparatórios para nosso processo seletivo, bem como para o Enem,
considerando os saberes contemplados por todos os nossos cursos.
Parafraseando Freire, acreditamos que a educação muda as pessoas e estas, por
sua vez, transformam o mundo. Foi assim que o +IFMG foi criado.
O +IFMG significa um IFMG cada vez mais perto de você!
Professor Carlos Bernardes Rosa Jr.

Pró-Reitor de Extensão do IFMG
Plataforma +IFMG
Características deste livro:

Formato: A4
Tipologia: Arial e Capriola.
E-book:
1ª. Edição
Formato digital
Plataforma +IFMG

(Ebook+IFMG) - ProgramadorWebFrontEnd

Enviado por

Direitos autorais:

Formatos disponíveis

(Ebook+IFMG) - ProgramadorWebFrontEnd

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

(Ebook+IFMG) - ProgramadorWebFrontEnd

Enviado por

Direitos autorais:

Formatos disponíveis

Programador Web em Tecnologias

Danielle Costa de Oliveira

Programador Web em Tecnologias Front-end

Pró-reitor de Extensão Carlos Bernardes Rosa Júnior

O48p Oliveira, Danielle Costa de.

E-book, no formato PDF.

1. Front-end. 2. HTML. 3. CSS. 4. JavaScript. I. Título.

Catalogação: Simoni Júlia da Silveira - CRB-6/2396

Índice para catálogo sistemático:

Este curso é autoexplicativo e não possui tutoria. O material didático,

Para saber mais sobre a Plataforma +IFMG acesse

Prezado estudante, seja bem-vindo ao curso de Formação Inicial e

Desejo a você um excelente estudo

Este livro está dividido em semanas para facilitar a

Carga horária: 30 horas.

Atenção: indica pontos de maior importância

Dica do professor: novas informações ou

Atividade: sugestão de tarefas e atividades

Mídia digital: sugestão de recursos

Semana 1 – O universo do desenvolvimento web ......................................... 15

Mídia digital: Antes de iniciar os estudos, vá até a sala

1.1. O que é a Internet?

A Internet começou em 1969 como um projeto de pesquisa financiado pelo

Instituto Federal de Minas Gerais

Atenção: Um navegador da web é um tipo de software

Instituto Federal de Minas Gerais

Figura 1 – Processo de resolução de endereços IP

Figura 2 – Hierarquia DNS

Instituto Federal de Minas Gerais

Instituto Federal de Minas Gerais

3G e 4G: o serviço 3G e 4G é mais comumente usado com telefones celulares e

1.2. Como publicar um site na Internet

Com o rápido crescimento da Web, muitas pessoas começaram a entender que

Dica do professor: Veja como registrar um domínio no

Instituto Federal de Minas Gerais

Figura 3 – Processo de publicação

Algumas empresas também disponibilizam planos de cloud computing (computação

Dica do professor: A Google disponibiliza

Instituto Federal de Minas Gerais

1.3. Aplicações front-end e back-end

Dica do professor: Para JavaScript há bibliotecas e

1.4. Design para a web

O design de uma página é um componente crucial do processo de desenvolvimento

Instituto Federal de Minas Gerais

Os modelos são uma ferramenta de aprendizagem valiosa. Observar como os

Instituto Federal de Minas Gerais

1.5. Critérios de usabilidade

Uma página de um website tanto define as estratégias para a realização de uma

Instituto Federal de Minas Gerais

As páginas Web podem ser visualizadas usando vários dispositivos diferentes:

1.6. Compatibilidade dos navegadores

Instituto Federal de Minas Gerais

Dica do professor: O site html5test.com permite testar

1.7. Ferramenta de desenvolvimento

Para baixar o Notepad++ siga os passos a seguir:

1. Abra a página de download do site oficial em seu navegador (https://notepad-

Instituto Federal de Minas Gerais

Figura 3 – Interface do Notepad++

Siga todas as etapas de instalação:

1. Selecione o idioma de instalação.