Desenvolvimento Software

Desenvolvimento de
Software para Internet

Autor: Prof. Salatiel Luz Marinho
Colaboradores: Prof. Angel Antonio Gonzalez Martinez
Prof. José Carlos Morilla
Professor conteudista: Salatiel Luz Marinho
Formado em Engenharia da Computação pela Universidade Paulista (UNIP) e pós-graduado em

Gestão de Projetos pelo Instituto Brasileiro (IBTA).
Trabalha há mais de 15 anos no desenvolvimento de aplicações desktop e web, tendo prestado

serviços a instituições financeiras e das áreas de varejo, de seguros e acadêmica. Leciona há
mais de 10 anos disciplinas dos cursos de Análise e Desenvolvimento de Sistemas, Engenharia da
Computação, Gestão de TI, Ciência da Computação etc.
Dados Internacionais de Catalogação na Publicação (CIP)
M338d Marinho, Salatiel Luz.
Desenvolvimento de Software para Internet / Salatiel Luz

Marinho. – São Paulo: Editora Sol, 2020.
208 p., il.
Nota: este volume está publicado nos Cadernos de Estudos e

Pesquisas da UNIP, Série Didática, ISSN 1517-9230.
1. HTML. 2. CSS3. 3. Cores. I. Título.
CDU 681.3.062
U509.14 – 20
© Todos os direitos reservados. Nenhuma parte desta obra pode ser reproduzida ou transmitida por qualquer forma e/ou
quaisquer meios (eletrônico, incluindo fotocópia e gravação) ou arquivada em qualquer sistema ou banco de dados sem
permissão escrita da Universidade Paulista.
Prof. Dr. João Carlos Di Genio
Reitor
Prof. Fábio Romeu de Carvalho

Vice-Reitor de Planejamento, Administração e Finanças
Profa. Melânia Dalla Torre

Vice-Reitora de Unidades Universitárias
Profa. Dra. Marília Ancona-Lopez

Vice-Reitora de Pós-Graduação e Pesquisa
Profa. Dra. Marília Ancona-Lopez

Vice-Reitora de Graduação
Unip Interativa – EaD
Profa. Elisabete Brihy

Prof. Marcello Vannini
Prof. Dr. Luiz Felipe Scabar
Prof. Ivan Daliberto Frugoli
Material Didático – EaD
Comissão editorial:
Dra. Angélica L. Carlini (UNIP)
Dr. Ivan Dias da Motta (CESUMAR)
Dra. Kátia Mosorov Alonso (UFMT)
Apoio:
Profa. Cláudia Regina Baptista – EaD
Profa. Deise Alcantara Carreiro – Comissão de Qualificação e Avaliação de Cursos
Projeto gráfico:
Prof. Alexandre Ponzetto
Revisão:
Jacinara Albuquerque
Kleber Souza
Sumário
Desenvolvimento de Software para Internet
APRESENTAÇÃO.......................................................................................................................................................9
INTRODUÇÃO......................................................................................................................................................... 10
Unidade I
1 MONTANDO O AMBIENTE DE ESTUDO.................................................................................................... 15
1.1 Editor Sublime Text............................................................................................................................... 15
1.2 Visual Studio Code................................................................................................................................ 22
1.2.1 Por que código do Visual Studio?..................................................................................................... 23
1.2.2 Baixando e configurando o Visual Studio Code.......................................................................... 24
2 ESTAÇÃO HTML................................................................................................................................................. 25
2.1 Introdução à linguagem de marcação.......................................................................................... 25
2.2 Hipertexto e marcação........................................................................................................................ 26
2.3 História do HTML................................................................................................................................... 27
2.4 HTML5........................................................................................................................................................ 29
2.4.1 Arquitetura HTML.................................................................................................................................... 32
2.5 Tabela ASCII............................................................................................................................................. 34
2.6 Tags............................................................................................................................................................. 37
2.6.1 Atributos de tag....................................................................................................................................... 38
2.6.2 Cabeçalhos.................................................................................................................................................. 40
2.6.3 Negrito: <b> </b>.................................................................................................................................. 40
2.6.4 Itálico: <i> </i>........................................................................................................................................ 41
2.6.5 Sublinhado: <u> </u>.......................................................................................................................... 41
2.6.6 Pequeno: <small> </small>................................................................................................................ 42
2.6.7 Cor da fonte: <font color=”#”> </font>...................................................................................... 42
2.6.8 Tamanho da fonte: <font size=””> </font>................................................................................ 46
2.6.9 Alteração do tamanho da fonte: <font size=”+/-?”> </font>............................................. 46
2.6.10 Centro: <center> </center>............................................................................................................. 47
2.6.11 Ênfase: <em> </em>........................................................................................................................... 47
2.6.12 Ênfase forte: <strong> </strong>................................................................................................. 48
2.6.13 Parágrafos: <p> desenvolvimento de software para internet </p>................................ 48
2.6.14 Quebra de linha: <br>......................................................................................................................... 50
2.6.15 Divisão: <div> </div>......................................................................................................................... 51
2.6.16 Table: <table> … </table>................................................................................................................ 52
2.6.17 Table row: <tr> </tr>.......................................................................................................................... 53
2.6.18 Table cell: <td> </td>......................................................................................................................... 53
2.6.19 Header cell: <th> </th>..................................................................................................................... 55
2.7 Ligações..................................................................................................................................................... 56
2.7.1 Link básico: <a href=”url”>link text</a>....................................................................................... 56
2.7.2 Link para um fragmento: <a href=”#fragment”>link</a>.................................................... 56
2.7.3 Janela de destino: <a href=”url” target=””>link</a>............................................................... 57
2.7.4 Imagem como um link: <a href=”url”><img … ></a>........................................................... 58
2.7.5 Link de e-mail: <a href=”mailto:email”></a>............................................................................. 59
2.7.6 Imagens: <img src=”unip.jpg”>......................................................................................................... 59
2.7.7 Imagem: <img src=”url”>.................................................................................................................... 60
2.7.8 Texto alternativo: <img … alt=”?”>................................................................................................. 61
2.7.9 Tamanho da imagem: <img … width=”?” height=”?”>........................................................... 62
2.7.10 Bordas <img … border=””>............................................................................................................... 63
2.7.11 Alinhamento de imagem: – <img … align=”?”>...................................................................... 64
2.7.12 Espaçamento: <img … vspace=”” hspace=””>.......................................................................... 65
2.8 Estrutura de arquivos HTML.............................................................................................................. 66
2.8.1 Doctype: definindo o documento..................................................................................................... 67
2.8.2 Head.............................................................................................................................................................. 67
2.8.3 Body.............................................................................................................................................................. 67
Unidade II
3 ESTRUTURANDO DOCUMENTOS COM HTML........................................................................................ 76
3.1 Recursos de documentos HTML à XHTML................................................................................... 78
3.2 Diferenças entre HTML e XHTML..................................................................................................... 81
3.2.1 Como converter de HTML para XHTML........................................................................................... 81
3.3 Formulários.............................................................................................................................................. 82
3.3.1 Formulário: <form> … </form>....................................................................................................... 82
3.3.2 Campo de entrada: <input>............................................................................................................... 83
3.3.3 Botão: <button>...................................................................................................................................... 83
3.3.4 Lista de seleção: <select> … </select>.......................................................................................... 84
3.3.5 Item de seleção: <option> </option>............................................................................................ 84
3.3.6 Área de texto: <textarea> </textarea>.......................................................................................... 84
3.3.7 Os elementos <fieldset> e <legend>.............................................................................................. 87
3.3.8 Utilizar o método Get............................................................................................................................ 89
3.3.9 Utilizar o método Post........................................................................................................................... 90
4 VALIDAÇÕES HTML.......................................................................................................................................... 90
4.1 Atributo obrigatório............................................................................................................................. 90
4.2 Lista ordenada e não ordenada....................................................................................................... 94
4.3 Tipo de marcador <ul type=”disc | circle | square”>.............................................................. 96
Unidade III
5 ESTAÇÃO CSS3.................................................................................................................................................101
5.1 CSS3..........................................................................................................................................................101
5.1.1 Introdução a CSS3.................................................................................................................................101
5.1.2 Definindo CSS.........................................................................................................................................103
5.1.3 Seletores CSS...........................................................................................................................................104
5.1.4 Pseudosseletores....................................................................................................................................107
5.1.5 Seletores diretos.....................................................................................................................................108
5.1.6 Seletor universal (*)...............................................................................................................................109
5.1.7 Seletor adjacente...................................................................................................................................112
5.1.8 Seletor de atributo................................................................................................................................114
5.1.9 Seletor de foco........................................................................................................................................117
5.1.10 Seletor ativado ou desativado.......................................................................................................119
5.1.11 Seletor válido ou inválido................................................................................................................121
5.1.12 Seletor verificado............................................................................................................................... 124
6 ESTUDO DE CORES.........................................................................................................................................126
6.1 Nomes das cores..................................................................................................................................127
6.2 Valores das cores.................................................................................................................................129
6.3 Fontes.......................................................................................................................................................129
6.4 Gerando uma fonte adequada.......................................................................................................131
Unidade IV
7 ESTAÇÃO JAVASCRIPT..................................................................................................................................138
7.1 JavaScript...............................................................................................................................................138
7.1.1 Objetos JavaScript................................................................................................................................ 138
7.1.2 Construtores JavaScript criam e retornam instâncias de objetos.................................... 143
7.1.3 Os construtores de objetos JavaScript nativos......................................................................... 144
7.1.4 Funções..................................................................................................................................................... 145
7.1.5 Parâmetros de funções....................................................................................................................... 146
7.1.6 Array........................................................................................................................................................... 147
7.1.7 Parâmetros de matrizes...................................................................................................................... 148
7.2 Uso de roteamento de soluções MVC.........................................................................................149
7.3 Razor........................................................................................................................................................152
7.4 Rest...........................................................................................................................................................153
7.5 Exemplo de API Web..........................................................................................................................156
7.6 Desenvolvimento de aplicações MVC.........................................................................................170
8 ACESSANDO DADOS COM MS ADO.NET...............................................................................................171
8.1 Instalar/configurar o banco de dados SQLite..........................................................................193
APRESENTAÇÃO
Caro(a) aluno(a), é muito bom saber que você chegou até aqui e juntos iremos ingressar nessa viagem
no aprendizado de Desenvolvimento de Softwares para Internet, uma disciplina que em conjunto com
as demais do curso, irá enriquecer ainda mais o seu conhecimento.
Nessa viagem, iremos passar por algumas estações que nos apresentarão itens que serão importantes
na composição da disciplina, tais como:
• Estação HTML: linguagem de marcação HTML, do inglês hypertext markup language (linguagem
de marcação de hipertexto), que a cada dia vem ganhando mais força, seja no ambiente web ou
tablets e smartphones.
• Estação CSS: técnica de formatação utilizando CSS, do inglês cascading style sheets (folha de
estilo em cascata), para que você possa utilizar o CSS para formatar de maneira confortável e
eficaz a informação que vem do HTML, seja imagem, vídeo, texto, áudio ou também qualquer
outro elemento criado.
• Estação JavaScript: criada basicamente para atuar com validações simples do lado cliente-
servidor, a fim de garantir interações em tempo real sem necessidade, por exemplo, de envio de
dados para um servidor.
• Configuração de estação de trabalho: instalação/configuração de IDE, do inglês integrated

development environment (ambiente de desenvolvimento integrado), visual studio code
e visual studio community, para que você consiga desenvolver exercícios práticos que são
colocados no livro-texto.
• Configuração de banco de dados: instalação/configuração do banco de dados sugerido

para estudo: SQLite.
Neste livro-texto, passaremos por outras estações que irão agregar ainda mais ao seu aprendizado e
que são complementadas em HTML, CSS e JavaScript, tais como:
• MVC (model-view-controller)
• Json (JavaScript object notation, notação de objetos JavaScript)
• XML (extensible markup language)
• Bootstrap
• Editores
9
Em alguns momentos desta viagem no aprendizado em web, iremos separar o
desenvolvimento em duas etapas:
• Front-end (desenvolvimento da interface do site): abordaremos conceitos de desenvolvimentos

de página utilizando recursos de HTML, CSS e JavaScript.
• Back-end (desenvolvimento e implementação da regra de negócio do site): abordaremos conceitos

de desenvolvimento e aplicação de regra de negócio utilizando a linguagem de programação C#.
Com o intuito de propor um aprendizado rico e imersivo no que diz respeito ao desenvolvimento
de software para internet, todos os assuntos que compõem este livro-texto e que foram citados nesta
apresentação serão distribuídos ao longo do texto.
Ao final dessa disciplina, o(a) aluno(a), estará apto a desenvolver sites e “módulos” que serão capazes
de se integrar com aplicações desktop e mobile, bem como aplicar todo o conhecimento adquirido em
seu dia a dia de trabalho.
Bons estudos!
INTRODUÇÃO
Esta disciplina apresentará, de forma estruturada, os principais conceitos teóricos e práticos de

desenvolvimento web, sendo assim, essa viagem irá proporcionar um processo importante de imersão
no que diz respeito ao mundo da internet.
Iniciaremos apresentando pontos importantes no que diz respeito ao ciclo histórico da internet. Será
colocada à sua disposição uma linha do tempo na qual apresentaremos a concepção da internet, sua
história seus marcos e em especial o desenvolvimento atualmente.
Mostraremos também conceitos técnicos que serão de grande importância para a sinergia do trabalho
acadêmico, projeto integrado multidisciplinar (PIM). Em diversas ocasiões deste livro-texto seremos
inseridos em um processo imersivo, simulando por diversos momentos cenários de desenvolvimento de
um projeto de software.
A abordagem deste livro-texto tem como principal objetivo colocar à disposição conceitos técnicos e
teóricos que possam alavancar estudos futuros, sendo assim, ele servirá como base para voos mais altos.
Vale ressaltar e deixar registrado neste livro-texto que toda a base de conhecimento técnico
envolvendo desenvolvimento de software, seja ele desktop, mobile ou web, tem como canal de entrada
o computador, que por muitas vezes ouvimos que algumas de suas vantagens são:
• elevada velocidade de processamento de dados;
• grande capacidade de armazenamento de dados e informações;

10
• execução de longas sequências de instruções;
• realização de tarefas repetitivas com rapidez e precisão.
Na figura, podemos analisar um cenário sistêmico, que rege até hoje o princípio de todo e
qualquer desenvolvimento.
Entrada de dados Processamento – execução de

cálculos e reorganização de dados Resultado (vídeo, impressora etc.)
Usuário
Figura 1 – Esquema simplificado (computador)
Todo trabalho de aprendizagem será voltado para três itens de extrema importância para o
desenvolvimento web, que são: HTML, CSS e JavaScript. Integraremos esses itens no desenvolvimento
para que possamos adquirir uma base de linguagem de marcação e enriquecer o layout com estilos
aplicados, conforme apresentado na figura a seguir.
Figura 2 – Base para o desenvolvimento web
11
• HTML 5: é a linguagem que irá exibir, estruturar e organizar nossa informação.
• CSS 3: o responsável por estilizar a informação, deixar a página mais atraente.
• JS (JavaScript): o responsável por manipular a nossa estrutura, através de eventos de click ou

eventos de carregamento de página.
Será abordada também uma arquitetura que cresce a cada dia, chamada MVC, do inglês
model‑view‑controller (modelo-visão-controle), que, segundo Groffe (2015) e Lotar (2011), pode ser
compreendida como um padrão de projeto de software, ou padrão de arquitetura de software. Esse
padrão, originado em meados da década de 1970, tem como principal objetivo o reuso de código e a
separação de conceitos em três camadas interligadas, conforme apresentado na figura a seguir.
Lotar (2011), definiu, conforme figura a seguir, essa arquitetura em:
• model, que contém o código da camada de dados;
• controller, que recebe as requisições do usuário;
• view, que implementa o design da aplicação.
View Model
Controller
Figura 3 – Arquitetura MVC
Também abordaremos neste livro-texto a utilização do protocolo HTTP, do inglês hypertext transfer
protocol (protocolo de transferência de hipertexto), que permite não apenas servir páginas web, mas
também serviços e dados. A API Web ASP.Net, de acordo com Manzano e Toledo (2010) e Janones (2010),
é uma estrutura para a criação de APIs Web sobre o .NET para servir dados e serviços, ainda abordando
diferenças de uma API Web, serviço rest WCF e uma API Web ASP.Net, bem como a criação estruturada
12
de um passo a passo de uma API Web ASP.Net e as operações CRUD (ver figura a seguir), do inglês create,
read, update, delete (criar, ler, atualizar e excluir), nos dados usando a API Web ASP.Net e muito mais.
Figura 4 – CRUD
Na figura a seguir, ilustramos a importância da API Web sobre aplicativos web, mobile e desktop e
que serão destacadas mais à frente.
13
API Web
Figura 5 – API Web
Enfim, será apresentado o direcionamento teórico, aliado a exemplos práticos e didáticos para o
crescimento do desenvolvimento aplicado ao mundo web.
14
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
Unidade I
1 MONTANDO O AMBIENTE DE ESTUDO
1.1 Editor Sublime Text
Para que você desfrute de todo o conteúdo apresentado neste livro-texto, recomendamos a escolha
de um editor de texto. Ele será responsável por alocar todo o código apresentado e, principalmente, criar
uma familiaridade ainda maior com a linguagem de marcação HTML. Recomenda-se, como ferramenta
adicional aos estudos aplicados no livro-texto, a instalação do editor Sublime Text, porém existe uma
infinidade de editores no mercado, e ainda iremos apresentar mais um editor, chamado VSCode.
É importante que todos os exemplos apresentados em cada item deste livro-texto sejam salvos em
uma pasta em seu computador para que você consiga estudar e entender cada conceito aqui exposto.
Também é importante que você crie comentários que lhe possibilitem relembrar a aplicação dos conceitos
quando for revisitar o código.
Para criar nosso ambiente de estudos, precisamos seguir os seguintes passos:
• Acessar o site do editor Sublime Text para realizar o download (utilizado para transmitir dados de
um dispositivo ao outro, entre um canal de comunicação previamente estabelecido no ambiente),
conforme apresentado na figura.
Figura 6 – Demonstrativo do site Sublime Text
15
Unidade I
• Escolher o link para efetuar o download, conforme o seu sistema operacional e realizá-lo. Há as
seguintes versões (Build 3211):
— OS X (10.7, ou posteriormente será necessário)
— Windows (também disponível como uma versão portátil)
— Windows 64 bits (também disponível como uma versão portátil)
— Linux Repository (também disponível como tarball de 64 ou 32 bits)
• Após realizar o download, iniciar a instalação do Sublime Text. Geralmente o arquivo fica na
pasta downloads, para quem usa o sistema operacional Windows ou em “transferências”
para quem usa OS X.
Observação
Windows é um sistema operacional que foi desenvolvido pela Microsoft.
OS X (Mac OS) é um sistema operacional desenvolvido pela Apple.
Figura 7 – Download efetuado na pasta Downloads
• Após realizar o download do Sublime Text, efetue um duplo clique no ícone Sublime Text Build
3211 x64 Setup, e será inicializada a instalação do editor, conforme apresentado na figura a seguir.
16
Figura 8 – Inicialização da instalação do Sublime Text
• Após acionar o botão Next > (próximo), estaremos na próxima tela de definição de diretório de
instalação, conforme apresentado na figura a seguir:
Figura 9 – Tela de instalação do Sublime Text
17
Unidade I
• Para iniciar a instalação do Sublime Text, acionar o botão Install (instalar), conforme apresentado
na figura anterior. Quando a instalação for finalizada, será apresentada a mensagem de sucesso na
instalação, conforme exibido na figura a seguir:
Figura 10 – Conclusão da instalação do Sublime Text
• Após a instalação ser concluída, podemos abrir o Sublime Text, conforme podemos ver na figura.
18
Figura 11 – Acessando o Sublime Text no computador com sistema operacional Windows
É importante que os exemplos desenvolvidos sejam salvos em uma pasta no computador, de preferência
acompanhados da extensão .html (exemplo: aula.html), conforme apresentado na figura a seguir.
19
Unidade I
Figura 12 – Pasta criada para alocação dos exercícios
Vale ressaltar aqui um “pequeno atalho” para a construção da estrutura de página HTML, que
acompanha as tags <html>, <head> e <body>, quando o arquivo HTML estiver aberto: digite <html
e aperte a tecla Tab do seu teclado, e será disponibilizada a estrutura HTML de tags <html>, conforme
pode ser visualizado nas figuras a seguir.
Figura 13 – Início da digitação da tag HTML
20
Figura 14 – Estrutura inicial de uma página HTML
Observação
Tag significa etiqueta, rótulo, que pode ser definido como algo que
marcamos para nos lembrar de informações importantes.
Após localizar o Sublime Text no computador, ele será visualizado conforme a figura a seguir.
Figura 15 – Editor Sublime Text
Um dos facilitadores contidos no Sublime Text é a opção de preferências que auxiliam na customização
e visualização do software.
Para melhor visualização dos exemplos apresentados neste livro-texto, foi adotada a preferência
Celeste (Preferences → Color Scheme), conforme ilustrado na figura a seguir.
21
Unidade I
Figura 16 – Definição de cores do Sublime Text
Lembrete
Um dos facilitadores contidos no Sublime Text é a opção de preferências

que auxiliam na customização e visualização do software.
1.2 Visual Studio Code
O Visual Studio Code não é apenas mais um bloco de notas desenvolvido com coloração de sintaxe e recuo
automático. Em vez disso, é um ambiente de desenvolvimento focado em um código muito poderoso, projetado
para facilitar a gravação de aplicativos da web, móveis e em nuvem, usando linguagens disponíveis para diferentes
plataformas de desenvolvimento e dando suporte ao ciclo de vida de desenvolvimento de aplicativos com um
recurso interno, depurador para Node.js e suporte integrado ao mecanismo de controle de versão Git.
Com o Code, é possível trabalhar com arquivos de código individuais ou sistemas de arquivos
estruturados com base em pastas.
O diretório de trabalho é uma pasta no seu computador ou em um compartilhamento de rede. Cada

desenvolvedor possui uma cópia completa de todo o código e arquivos associados. Nós podemos fazer
todo o trabalho de desenvolvimento no diretório específico e deixar o Git gerenciar os aspectos de
controle de versão para essa pasta.
O Git se refere a esse diretório de trabalho como um repositório ou um repositório para abreviar.
Quando ele gerencia a pasta, nós obtemos todos os benefícios de controle de versão que oferece.
Saiba mais
Para obter mais informações a respeito do tema abordado, acesse o site:
https://github.com/
22
1.2.1 Por que código do Visual Studio?
Antes de aprender a usar o Visual Studio Code, é muito útil entender seu objetivo, quais recursos ele
oferece e como fornece uma experiência aprimorada de edição de código.
O Visual Studio Code não é um editor de código simples, é um ambiente poderoso que coloca
a escrita de código no centro. O principal objetivo não é criar binários (como arquivos .exe e .dll),
e sim facilitar a criação de códigos para plataformas da web, dispositivos móveis e nuvem, para
qualquer desenvolvedor que trabalhe em diferentes sistemas operacionais, como Windows, Linux e
OS X, mantendo-o independente dos ambientes de desenvolvimento proprietários. Para um melhor
entendimento, veja o seguinte exemplo: pense no ASP.NET Core 1.0, a nova tecnologia de código aberto
de plataforma cruzada capaz de executar no Windows, Linux e OS X que a Microsoft produziu para criar
aplicativos web portáteis.
Forçar a criação de aplicativos web portáteis e de plataforma cruzada com o Microsoft Visual Studio
2019, causa dependência ao ambiente de desenvolvimento integrado (IDE).
Pode-se argumentar que o Visual Studio 2019 Community Edition é gratuito, mas é executado
apenas no Windows. Por outro lado, embora certamente não pretenda substituir um ambiente mais
poderoso e completo, como seu irmão principal, o Visual Studio Code pode ser executado em uma
variedade de sistemas operacionais e gerenciar diferentes tipos de projetos, além das linguagens de
programação mais populares. Para fazer isso, ele fornece os seguintes recursos principais:
• Suporte interno para codificação com vários idiomas, incluindo aqueles que normalmente
utilizamos em cenários de desenvolvimento de plataforma cruzada, com recursos avançados de
edição e suporte para idiomas adicionais via extensibilidade.
• Depurador interno para Node.js, com suporte para depuradores adicionais (como o Mono)
via extensibilidade.
• Controle de versão baseado no mecanismo Git, que fornece uma experiência integrada de
colaboração que suporta confirmações e ramificações de código, e é a escolha adequada para
uma ferramenta destinada a trabalhar com possivelmente qualquer idioma.
Para combinar adequadamente todos esses recursos em uma ferramenta, o Visual Studio Code
fornece um ambiente de codificação diferente de outras ferramentas de desenvolvedor, como o Microsoft
Visual Studio. De fato, o Visual Studio Code é um ambiente baseado em pasta, que facilita o trabalho
com arquivos de código que não são organizados em projetos e oferece uma maneira unificada de
trabalhar com diferentes idiomas. Partindo dessa premissa, o Code fornece uma experiência de edição
avançada, com recursos comuns a qualquer idioma suportado, além de alguns recursos disponíveis para
idiomas específicos.
23
Unidade I
1.2.2 Baixando e configurando o Visual Studio Code
Deve-se acessar o site do Visual Studio Code e realizar o download de acordo com seu sistema
operacional, conforme apresentado a seguir.
Figura 17 – Site do Visual Studio Code
Após a realização do download e instalação, será apresentada a IDE do Visual Studio, conforme ilustrado
a seguir.
Figura 18 – Visual Studio Code
24
Na figura a seguir é apresentada a estrutura de uma página HTML desenvolvida no Visual Studio Code:
Figura 19 – Estrutura HTML no Visual Studio Code
Observação
Todos os exemplos citados neste livro-texto poderão ser executados no

Sublime Text, Visual Studio Code ou Visual Studio Community.
2 ESTAÇÃO HTML
2.1 Introdução à linguagem de marcação
A web é a plataforma de programação com maior relevância no mundo. Suas tecnologias principais,
o HTML e o CSS, são fundamentais para o desenvolvimento de qualquer site. Quem aprender essas
tecnologias, suas boas práticas e seus recursos mais avançados, sai na frente na busca de espaço no
mercado de programação para front-end e pode participar de diversos projetos web.
Atualmente, todo produto digital necessita de um front-end web, por isso é um mercado com grandes
oportunidades no mundo todo, porém o bom profissional dessa área precisa lidar com grandes desafios,
tais como: saber as boas práticas de código, como trabalhar com múltiplos navegadores e escrever
sites precisos.
Você vai precisar estar atento às novidades do CSS, desenvolver sempre identificando oportunidades
em aplicações em mobile e responsivo, assim como conhecer sobre acessibilidade e HTML semântico,
que vem ganhando força a cada dia.
Segundo a W3C (W3C PRESS RELEASES, 2017), leva-se em consideração que a web é baseada
em três pilares:
25
Unidade I
• Determina um esquema de nomes para localização de fontes de informações na web, em que

esse esquema é denominado URI (do inglês uniform resource identifier, identificador uniforme de
recurso), que consiste em uma cadeia de caracteres compactada, utilizada para identificação ou
denominação de um recurso na internet.
• Delimita também um protocolo de acesso para visualizar essas fontes, hoje denominando HTTP
(do inglês hypertext transfer protocol, protocolo de transferência de hipertexto), que possibilita
às pessoas incluírem a URL (do inglês uniform resource locator, localizador uniforme de recursos)
de uma página (exemplo: www.unip.br) e possam ver o conteúdo que existe na página.
• Compreende-se também uma linguagem de hipertexto, para agilizar na navegação entre fontes
de informação, denominada HTML., que corresponde na apresentação das marcações atribuídas
diante de páginas apresentadas no browser.
Saiba mais
Para conhecer mais a respeito do tema, sugere-se a leitura da história

do W3C disponível em:
SOBRE O W3C. W3C. 2011. Disponível em: https://www.w3c.br/Sobre/.

Acesso em: 15 set. 2020.
2.2 Hipertexto e marcação
HTML ainda pode ser definida como uma linguagem de marcação de hipertexto, que tem por finalidade ser
uma linguagem de publicação de conteúdo, por exemplo, áudio, vídeo, imagem etc. direcionados para a web.
Os elementos atribuídos ao hipertexto, podem ser constituídos em palavras, imagens, áudios, vídeos,
documentos etc., sendo que estes podem ser conectados dentro de uma grande rede de informação.
Até aqui você pode se perguntar “por que uma linguagem universal?”. Considera-se então que, desde
o começo no HTML, seu intuito de criação foi levado para ser uma linguagem que fosse independente
de plataformas, browsers e qualquer outro meio de acesso, visto que a origem da linguagem foi de ser
aplicada pensando em redução de custos, ou até mesmo trabalhada com custo zero.
Sua construção foi pensada para que não houvesse nenhum tipo de barreira, ultrapassando as que fossem
impostas durante o seu ciclo de vida, fazendo com que, por exemplo, uma informação pudesse ser publicada
por meio desse código e sendo, assim, acessível por qualquer dispositivo e meios com características distintas.
Uma característica importante para ser ressaltada: a implementação de HTML para dispositivos
próprios, destinados a deficientes visuais e auditivos ou dispositivos móveis e portáteis, considerando
assim, praticidade e inclusão social das pessoas.
26
Saiba mais
Para compreender melhor a respeito do tema, leia o seguinte texto:
GT acessibilidade. W3C. 2011. Disponível em: https://www.w3c.br/GT/

GrupoAcessibilidade. Acesso em: 15 set. 2020.
Diante dos conceitos de HTML, ainda temos o que chamamos de marcação, que representa a notação
de algum elemento contido no documento, ou seja, em HTML podemos definir a marcação através de
tags, demonstrando assim a indicação da estrutura do documento.
Tags são definidas como marcas ou etiquetas que podem assim descrever de maneira isolada cada
elemento dentro do texto, ou seja, as tags em HTML possibilitam ao browser, de maneira interpretativa,
a exibição da página conforme sua concepção, apresentando de maneira fiel toda sua construção,
implementando todos os requisitos elaborados e desenvolvidos em HTML.
Podemos então definir que HTML é uma linguagem que possibilita realizar a marcação de hipertextos,
basicamente com a finalidade de adicionar informações de maneira particular sobre as informações
a serem apresentadas, ou seja, efetua a indicação da estrutura de um documento, partindo do
pré‑requisito da utilização de tags.
Um item importante para ser levado em consideração é que um arquivo HTML precisa necessariamente
conter a extensão htm ou html, podendo ser criado utilizando simplesmente um editor de textos
(exemplo: Notepad, que acompanha a instalação do Windows). Os documentos ou arquivos criados em
HTML serão denominados de páginas web.
Observação
Um editor de texto pode ser considerado um aplicativo de edição

de arquivo de texto que tem por finalidade incluir, formatar e desenvolver.
Editores de texto são frequentemente equipados com sistemas operacionais
ou pacotes de desenvolvimento de software considerados como plug-ins, e,
também, podem ser utilizados para alterar arquivos de configuração.
2.3 História do HTML
O conceito de internet nasceu de um projeto da agência norte-americana Advanced Research and

Projects Agency (Arpa), que teve como objetivo conectar computadores dos seus departamentos de
pesquisa, sendo assim, a internet é iniciada a partir da Arpanet. Separar alguns instantes para estudar
fundamentos históricos da internet é aprender com a evolução e se preparar para novas oportunidades
e tecnologias que irão surgir hoje e sempre.
27
Unidade I
A web teve como principal dependência o fato de diversos autores de páginas web e inúmeras
empresas compartilharem as mesmas convenções e atribuições da linguagem de marcação HTML, porém
podemos nos questionar o porquê de existir uma convenção para essa marcação? Isso seria simples de
responder, pois sem uma convenção, muito provavelmente essa linguagem estaria fadada ao fracasso,
pois todo e qualquer segmento sem um padrão viraria uma bagunça.
Para que houvesse, então, uma convenção, foi necessário um trabalho árduo e em conjunto na
criação de métricas e especificações da linguagem de marcação HTML.
A partir da metade da década de 1990, criou-se o W3C, entidade que tem por finalidade ou objetivo
específico o desenvolvimento e aprimoramento de padrões que possam ser consumidos na web,
estabelecendo normas de base para o desenvolvimento da linguagem de marcação HTML, conforme
apresentado na figura a seguir:
HTML HTML+ HTML 2.0 HTML 3.2 XHTML 1.0 HTML 5.0
1991 1993 1995 1997 1999 2000 2014
Não teve Com Com Com Com

Versão inicial recomendações recomendações recomendações recomendações recomendações
do W3C do W3C do W3C do W3C do W3C
Figura 20 – Ciclo de vida do HTML
A cada atualização de versão do HTML, conforme apresentado no quadro a seguir, houve um

consenso entre os industriais da época, para que não houvesse nenhum desperdício do trabalho
evolutivo da época, e para que seus documentos não se tornassem ilegíveis ou até mesmo inválidos
mediante um período curto com a implementação de novas versões do HTML.
Quadro 1 – Ciclo de vida detalhado do HTML
Versão Ano Recomendações do W3C

HTML 1991 Versão inicial
HTML + 1993 Não houve recomendações
HTML 2.0 1995 Recomendações do W3C
XHTML 1.0 2000 Recomendações do W3C
HTML 5 2014 Recomendações do W3C
28
Sendo assim, desde o começo, o HTML foi desenvolvido para ser uma linguagem de marcação
independente de plataformas, browsers e outros meios de acesso, cujo trabalho consiste na exibição
de páginas na web.
Porém, com esse trabalho, temos a possibilidade de realizar a criação apenas de um código de
marcação HTML, que pode ser lido por diversos meios, em vez de versões diferentes para diversos
dispositivos, dessa forma, evitou-se que a web pudesse ser desenvolvida em uma base proprietária,
limitando assim formatos incompatíveis.
Com esse pensamento, o HTML nasceu para que todas as barreiras fossem ultrapassadas, fazendo,
assim, com que as informações geradas diante de um código fossem apresentadas por dispositivos e
outros meios com características distintas, como, por exemplo, tamanho da tela, resolução ou até mesmo
variação das cores. Podemos, então, concluir que o HTML teve como principal objetivo ser entendido
de maneira universal, possibilitando, assim, a reutilização da linguagem de marcação de acordo com as
limitações de cada meio de acesso.
2.4 HTML5
Com a evolução da tecnologia de maneira gradativa, o W3C já sinalizava aos desenvolvedores

que o HTML4 já aplicaria quesitos de boas práticas de desenvolvimento e, principalmente, com a
estruturação e separação do código com sua formatação, colocando como ponto de importância física,
como acessibilidade, que foi colocada em diversas discussões e alertas para atenção dos fabricantes e
programadores. Contudo, mesmo com a evolução da tecnologia e diversas implementações efetuadas,
a evolução da linguagem de marcação do HTML4 ainda não contemplava grandes diferenciais para a
semântica. Um exemplo que pode ser citado, como meio que não facilitava o trabalho do programador,
era a manipulação dos elementos JavaScript ou CSS, tornando seu trabalho oneroso.
Com isso, o HTML5 nasceu com objetivo de facilitar a manipulação do elemento, possibilitando
assim, que o desenvolvedor pudesse modificar as características dos objetos de forma clara, objetiva de
maneira que fosse transparente para o usuário final.
Como características e trazendo melhorias em relação às versões anteriores, o HTML5 proporciona

ferramentas para o CSS e JavaScript efetuarem o seu trabalho de maneira eficaz.
Observação
Uma API Web pode ser considerada uma interface de programação de

aplicações tanto para um servidor quanto para um browser, sendo que
sua utilização tem por finalidade conseguir recuperar somente o valor
requisitado em um banco de dados de um site.
Existe também no mercado de web uma infinidade de motores de renderização que possibilitam que
smartphones, tablets etc. possam tornar compatíveis os browsers de cada dispositivo, contribuindo, assim,
29
Unidade I
para que os desenvolvedores possam manter o nível de compatibilidade de todos os browsers, levando em
consideração a particularidade de cada um deles, conforme apresentado a seguir.
Para isso, encontrou-se uma maneira de tentar assegurar de maneira compatível o código e encontrar
um denominador que pudesse equiparar o desenvolvimento trabalhando com motores de renderização,
sendo assim, cada browser teria por responsabilidade o processamento do código fonte de cada página
que fosse requisitada a cada instante, conforme apresentado nos quadros a seguir.
Quadro 2 – Motores de renderização e browsers
Motor Browser
Presto Opera 7 ao 10
WebKit Safari, Google Chrome
Trident Internet Explorer 4 ao 9
Gecko Firefox, Mozilla, Camino
Quadro 3 – Histórico dos motores de renderização
Motor de renderização Data de lançamento Versão inicial

Blink 3 de abril de 2013 Sem número
EdgeHTML 12 de novembro de 2001 12.0
Gecko 7 de dezembro de 1998 “Preview”
Presto 13 de novembro de 2002 1.0
Tasman 27 de março de 2000 0
Trident Abril de 1997 Sem número
WebKit 7 de janeiro de 2003 48
Presto
Desenvolvido e com sua implementação ainda em atuação, foi o motor de renderização do navegador
Opera por aproximadamente uma década, sendo desenvolvido pela Opera Software. Diante de muitos
trabalhos realizados para a disseminação do motor Presto, foi liberada para a comunidade web em 28
de janeiro de 2003 a integração do Presto ao browser Opera 7.0 para Windows.
O Presto nasceu então para entrar no lugar do motor Elektra, sendo muito utilizado nas versões
de 4-6 do Opera, ou seja, a página, ou parte dela, pode ser renderizada em diversos momentos em
resposta a eventos como DOM e script, sendo que o Presto se encontra somente disponível como parte
integrante do Opera ou produtos relacionados.
Blink
Considerado um motor de browser web desenvolvido pela Google como parte integrante do projeto
Chromium, foi colocado a público pela primeira vez em abril de 2013, ou seja, teve como principal
30
elemento uma bifurcação do componente WebCore do WebKit, que basicamente iniciou sua utilização
a partir do Chrome 28, Opera 14 e Yandex Browser.
Pode-se pontuar que a bifurcação não acarretou a adição de novos prefixos de CSS, porém essas
alterações é que foram planejadas. Atualmente, o Blink continua convergindo de maneira relativamente
similar ao WebCore.
EdgeHTML
Esse mecanismo de renderização teve seu lançamento primeiramente como uma forma experimental
no Internet Explorer 11 como parte da compilação do Windows 10 Preview. Basicamente, era assim o
motor principal utilizado pelo Microsoft Edge, até que o browser precisou ser refeito com base no
Chromium, em 2019, e passou a utilizar o Blink.
Gecko
Considerado um motor de layout com código aberto, é utilizado em aplicativos desenvolvidos pela
Mozilla Foundation e Mozilla Corporation – encapsulado no browser Firefox, que também tem como
finalidade muitos outros projetos de software com código aberto, para agregar valor à comunidade web.
O Gecko teve a finalidade de suportar os padrões da internet da época de sua implementação e

ser utilizado por diferentes aplicativos para apresentação de páginas web. O Gecko trouxe também
uma vasta e robusta API Web, que possibilitou de maneira adequada uma variada gama de aplicações
baseadas nos princípios da internet, como exemplo, browser. Seu logo é ilustrado na figura a seguir.
Alguns padrões suportados pelo Gecko:
• HTML4, com suporte parcial ao HTML5
• CSS estabelecido ao nível 2.1, porém com suporte parcial ao CSS3
• XML 1.0
• XHTML 1.0
Tasman
Considerado um motor de layout que teve como frente de desenvolvimento a Microsoft, para que
fosse incluído na versão do Internet Explorer 5 para Macintosh, é também uma grande tentativa de
proporcionar melhoria aos padrões web, definidos assim pela World Wide Web Consortium.
O cientista da computação Tantek Çelik liderou a equipe que desenvolveu o Tasman, trabalhando
como líder de desenvolvimento do software, e este começou a ser utilizado como motor de layout para
o MSN para Mac OS X e para o Office 2004 para Mac.
31
Unidade I
Trident
Teve como concepção um componente de software para possibilitar com que os desenvolvedores
de software pudessem facilmente adicionar funcionalidade de navegação na web para seus próprios
aplicativos, ou seja, apresentar através de uma interface COM para a edição de páginas web e acesso
em qualquer ambiente COM, como C++ e .NET. As funcionalidades do Trident tornaram-se disponíveis,
proporcionando, assim, uma ligação entre o arquivo mshtml.dll ao projeto de software.
WebKit
Considerado um motor de renderização que teve sua utilização fundamentada em browsers para
renderizar páginas, foi desenvolvido primariamente em C++.
A princípio, foi desenvolvido pela Apple Inc. a partir da biblioteca KHTML para utilização no navegador
Safari, porém, como projeto de código aberto, atualmente é mantido por desenvolvedores de diversas
organizações, como, por exemplo, Apple Inc., Google, Nokia e Samsung.
2.4.1 Arquitetura HTML
Pode-se determinar o HTML da seguinte forma:
• Interface do usuário: camada responsável por fornecer determinadas funcionalidades, tais

como progresso visual para loading de páginas apresentadas no browser e categorização de
downloads inteligentes.
• Motor do navegador: camada responsável por disponibilizar uma ou mais interfaces para o motor
de renderização, também responsável por efetuar o loading de documentos e em determinados
momentos suportar certas ações do browser, tais como: acionar o botão voltar, avançar e até
mesmo apresentação de páginas no browser.
• Motor de renderização: camada que tem por finalidade efetuar a produção e reprodução visual
de cada documento apresentado no browser, obtendo como definição que motores têm por
finalidade renderizar informações alocadas em páginas HTML e documentos no formato XML.
• Rede: camada responsável por efetuar implementações dos protocolos que definem a transferência
de dados, tais como HTTP e FTP (file transfer protocol), também responsável por interpretar
diversos tipos de charsets (biblioteca de caracteres) e mime types (tipo de documentos) que
possam existir nesse contexto.
• Interpretador JavaScript: camada responsável para executar códigos escritos na linguagem

JavaScript, sendo que, alguns dos recursos utilizados em JavaScript, como, por exemplo, abrir
uma janela pop-up, podem ser desabilitados pelo motor do browser, ou até mesmo pelo motor de
renderização, visto que aspectos de segurança podem ser relacionados à desativação.
32
• Analisador XML: camada responsável por atuar na transformação de documentos no formato

XML em, por exemplo, uma árvore relacionada ao tipo DOM.
• Apresentar back-end: camada responsável por interagir com o sistema operacional para que,
assim, possam ser garantidas a integridade e a funcionalidade para ações do tipo geração de
desenhos e janelas sistêmicas.
• Persistir dados: camada responsável por definir a alocação de informações no disco, no caso,
os dados que forem associados a uma ou mais sessões do browser do usuário, sendo assim,
esses dados têm como base de configuração, por exemplo, atribuição de itens à barra do browser
a cookies e também certificados de segurança.
Interface do usuário
Persistir dados
Motor do navegador
Motor de renderização
Interpretador Apresentar
Rede Analisador XML
JavaScript back-end
Figura 21 – Arquitetura de referência do browser
A figura ilustra por segmentos os tópicos que foram explicados nos itens anteriores.
Com a definição da arquitetura, citada na figura anterior, podemos trazer ainda mais conceitos, que
são de importância para os estudos de desenvolvimento de software para internet:
• O ASCII foi o primeiro padrão de codificação de caracteres (também chamado conjunto de

caracteres). O ASCII definiu 128 caracteres alfanuméricos diferentes, que poderiam ser usados na
internet: números (0-9), letras em inglês (AZ) e alguns caracteres especiais como ! $ + – ( ) @ < >.
• O ISO-8859-1 era o conjunto de caracteres padrão para HTML4. Esse conjunto de caracteres
suportava 256 códigos de caracteres diferentes.
• O ANSI (Windows-1252) era o conjunto de caracteres original do Windows. O ANSI é idêntico ao

ISO-8859-1, exceto que o ANSI possui 32 caracteres extras.
33
Unidade I
Como o ANSI e o ISO-8859-1 eram muito limitados, o HTML4 também suportava UTF-8.
• O UTF-8 (Unicode) possibilita a cobertura de caracteres e símbolos, conforme apresentado na

figura a seguir:
Figura 22 – Exemplo de aplicação UTF-8
Para exibir uma página HTML corretamente, um navegador da web deve conhecer o conjunto de caracteres
utilizados na página. Se um navegador detectar ISO-8859-1 em uma página web, o padrão será ANSI.
2.5 Tabela ASCII
O conjunto de caracteres ASCII utiliza valores, por exemplo, de 0 a 31 (também usa o 127),
principalmente para caracteres de controle. Já o conjunto de caracteres ANSI utiliza a mesma sequência
de caracteres do ASCII e agrega também a sequência de 128 a 159, que também se equipara ao UTF-8
para agregar valores de 160 a 255. E o conjunto de caracteres ISO-8859-1 utiliza a mesma sequência do
ASCII, não utiliza os valores 128 a 159 e agrega as sequências de valores 160 a 255, que são semelhantes
ao UTF-8, apresentando algumas combinações e caracteres de exemplo, como ilustrado na tabela.
Tabela 1 – Lista com alguns caracteres ASCII
Alt + número Descrição

33 Ponto de exclamação !
34 Aspa “
35 Sinal numérico #
36 Cifrão $
37 Sinal de porcentagem %
38 Letra “e” comercial &
39 Apóstrofo ‘
40 Parêntese esquerdo (
41 Parêntese direito )
42 Asterisco *
43 Sinal de mais +
44 Vírgula ,
45 Hífen-menos −
46 Ponto-final .
47 Barra /
34
Saiba mais
A ISO, International Organization for Standardization, ou Organização

Internacional de Padronização, é a entidade que promove a normalização de
produtos e serviços, utilizando regras para que a qualidade seja melhorada.
Conheça mais em:
https://www.iso.org/home.html
Um bom exemplo para apresentar como caso de estudos é o dos problemas de apresentação de
palavras, como, por exemplo, “pontua��o” ou “pontuaÃ§Ã£o” em vez de “pontuação”. Com isso, devemos
armazenar novamente os dados com a codificação correta, ou até mesmo efetuar a troca da codificação
de exibição da página. Para definir essa exibição, o cabeçalho HTML da página deve estar conforme
trecho apresentado nas figuras seguir:
Para ISO-8859-1:
Figura 23 – Exemplo de aplicação ISO-8859-1
35
Unidade I
Para UFT-8:
Figura 24 – Exemplo de aplicação UTF-8
Um fator de distinção entre ISO-8859-1 e o UTF-8 é que a primeira suporta até 256 caracteres
(0 a 255, ou 0x00 a 0xFF), e o outro suporta até 65.536 caracteres (0 a 65535, ou 0x0000 a 0xFFFF), sendo
assim, definir o direcionamento de alguns programadores 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. Ao
contrário da delimitação da condição da ISO-8859-1, é aconselhável, por padrão, o suporte aos idiomas
de origem latina (português, espanhol, francês, italiano), também inglês, alemão, dinamarquês e línguas
dos demais países da Europa Ocidental, conforme apresentado na tabela a seguir, com alguns caracteres
que são utilizados nos idiomas citados anteriormente.
Tabela 2 – Acentuação
Descrição Caractere Representação do caractere

A maiúsculo com acento agudo Á Á
E maiúsculo com acento agudo É É
I maiúsculo com acento agudo Í Í
O maiúsculo com acento agudo Ó Ó
U maiúsculo com acento agudo Ú Ú
A minúsculo com acento agudo á á
E minúsculo com acento agudo é é
I minúsculo com acento agudo í í
O minúsculo com acento agudo ó ó
U minúsculo com acento agudo ú ú
A maiúsculo com acento circunflexo Â Â
E maiúsculo com acento circunflexo Ê Ê
36
Descrição Caractere Representação do caractere

O maiúsculo com acento circunflexo Ô Ô
A minúsculo com acento circunflexo â â
E minúsculo com acento circunflexo ê ê
O minúsculo com acento circunflexo ô ô
A maiúsculo com crase À À
A minúsculo com crase à à
U maiúsculo com trema Ü Ü
U minúsculo com trema ü ü
C com cedilha maiúsculo Ç Ç
C com cedilha minúsculo ç ç
A com til maiúsculo Ã Ã
O com til maiúsculo Õ Õ
A com til minúsculo ã ã
O com til minúsculo õ õ
N com til maiúsculo Ñ Ñ
N com til minúsculo ñ ñ
E comercial (ampersand) & &
Aspa dupla “ "
Aspa simples ‘ ‘
Menor que < <
Maior que > >
2.6 Tags
O que são tags HTML? Uma tag é um conjunto dos caracteres <, /, >, mais uma nomenclatura, que
ainda pode conter atributos que possibilitam a sua customização.
Tags HTML também podem ser definidas como palavras-chave ocultas em uma página web que
definem como o navegador deve formatar e exibir o conteúdo. A maioria das tags deve ter duas partes,
uma de abertura e uma de fechamento. Por exemplo, <html> é a marca de abertura, e </html> é
a marca de fechamento. Observe que a marca de fechamento possui o mesmo texto da marca de
abertura, mas tem um caractere de barra (/) adicional. Costuma-se interpretar isso como o personagem
“final” ou “próximo”.
Existem tags que são tratadas como exceção à regra e não necessitam do seu fechamento. A tag
<img>, para mostrar imagens, é um exemplo disso. Cada arquivo HTML deve ter as tags essenciais para
que seja válido, para que os navegadores da web possam entendê-lo e exibi-lo corretamente. O restante
do arquivo HTML pode conter o mínimo ou o máximo de tags que você deseja exibir em seu conteúdo.
37
Unidade I
2.6.1 Atributos de tag
Os atributos possibilitam personalizar uma tag e são definidos na tag de abertura, conforme
apresentado na figura a seguir.
Figura 25 – Exemplo de aplicação tag
Os atributos são frequentemente conferidos a um valor usando o sinal, tal como iguais border=”0”
ou width=”50%”, mas há alguns que só precisam ser declarados na tag, assim: <hr noshade>.
A maior parte dos atributos é opcional para a maioria das tags e são usadas apenas quando você
deseja alterar algo sobre a maneira padrão como uma tag é exibida pelo navegador. Porém algumas
tags, como a <img>, precisam de atributos como srce alt, que são necessárias para que o navegador
exiba a página web corretamente.
Existem quatro conjuntos de tags HTML que são necessárias para formar a estrutura básica de cada
arquivo HTML, conforme apresentado na figura a seguir.
Figura 26 – Exemplo de estrutura de página HTML
38
• Definição – <html> </html>: essa tag define o documento como página web. Também identifica
o início e o fim do documento HTML. Todas as outras devem estar entre as tags HTML.
• Cabeçalho – <head> </head>: o cabeçalho contém informações sobre o documento que não
apareceram na página real, como o título do documento, o autor, a folha de estilo a ser usada,
também as metatags.
• Título – <title> </title>: a tag title define o título que aparecerá na barra de título do seu
navegador. O title deve aparecer entre as tags <head> e </head>.
• Corpo – <body> </body>: as tags body contêm todas as informações e outros conteúdos
visíveis na página. Todas as suas imagens, links e texto sem formatação devem estar entre as tags
<body> e </body>.
Essas quatro tags são especiais. Deve haver apenas um conjunto e cada uma delas precisa estar na
ordem correta, como no exemplo ilustrado na figura a seguir. A parte divertida e criativa vem de usar as
tags básicas para adicionar conteúdo e títulos.
Em seguida, é apresentado um documento básico em HMTL, compreendendo todas as tags essenciais.
Realizando uma classificação das principais tags, existem também outras que podem ser utilizadas
para adicionar conteúdo nas páginas, como:
• Imagens: <img>
• Títulos e subtítulos: <title>
• Parágrafos do texto: <p>
• Links para outras páginas: <a href>

39
Unidade I
As tags citadas ainda serão apresentadas.
2.6.2 Cabeçalhos
A tag <h> é utilizada para títulos, legendas e destaques para textos. Existem seis níveis de títulos
disponíveis, desde h1 (maior e mais importante título) até h6 (menor). Algumas tags são responsáveis
pelo auxílio da formatação do texto, em que ajudam a melhorar a aparência da página web. Na figura
ilustra-se a aplicação da tag <h1> para o texto “Desenvolvimento de Software para Internet”.
Figura 28 – Exemplo de aplicação da tag <1>
2.6.3 Negrito: <b> </b>
O texto “Desenvolvimento de Software para Internet”, que se encontra entre as tags <b></b> na
figura a seguir, ficará em negrito e se destacará do texto ao redor.
Figura 29 – Exemplo de aplicação da tag <b></b>
40
2.6.4 Itálico: <i> </i>
O texto “Desenvolvimento de Software para Internet”, que se encontra entre as tags <i></i> na
figura a seguir, ficará em formato itálico e exibirá o texto em um ângulo pequeno no navegador.
Figura 30 – Exemplo de aplicação da tag <i> <i>
2.6.5 Sublinhado: <u> </u>
O texto “Desenvolvimento de Software para Internet”, que se encontra entre as tags <u> </u> na
figura a seguir, será apresentado de maneira sublinhada no navegador.
Figura 31 – Exemplo de aplicação da tag <u> </u>
41
Unidade I
2.6.6 Pequeno: <small> </small>
No texto “Desenvolvimento de Software para Internet”, que se encontra entre as tags <small> </
small> na figura a seguir, em vez de definir um tamanho de fonte, pode se utilizar a tag small para
renderizar um texto um pouco menor que o texto ao seu redor.
Figura 32 – Exemplo de aplicação da tag <small>
2.6.7 Cor da fonte: <font color=”#”> </font>
Possibilidade de alterar a cor de algumas palavras ou de uma seção de texto. Os itens na coluna “Código
HEX HTML” representam o código de cores hexadecimal, conforme apresentado na tabela a seguir:
Tabela 3 – Códigos de cores HTML (valores hexadecimais)
Nome da cor Código HEX HTML

AliceBlue #F0F8FF
AntiqueWhite #FAEBD7
Aqua #00FFFF
Aquamarine #7FFFD4
Azure #F0FFFF
Beige #F5F5DC
Bisque #FFE4C4
Black #000000
BlanchedAlmond #FFEBCD
Blue #0000FF
BlueViolet #8A2BE2
Brown #A52A2A
BurlyWood #DEB887
CadetBlue #5F9EA0
Chartreuse #7FFF00
42

Chocolate #D2691E
Coral #FF7F50
CornflowerBlue #6495ED
Cornsilk #FFF8DC
Crimson #DC143C
Cyan #00FFFF
DarkBlue #00008B
DarkCyan #008B8B
DarkGoldenRod #B8860B
DarkGray #A9A9A9
DarkGreen #006400
DarkKhaki #BDB76B
DarkMagenta #8B008B
DarkOliveGreen #556B2F
Darkorange #FF8C00
DarkOrchid #9932CC
DarkRed #8B0000
DarkSalmon #E9967A
DarkSeaGreen #8FBC8F
DarkSlateBlue #483D8B
DarkSlateGray #2F4F4F
DarkTurquoise #00CED1
DarkViolet #9400D3
DeepPink #FF1493
DeepSkyBlue #00BFFF
DimGray #696969
DodgerBlue #1E90FF
FireBrick #B22222
FloralWhite #FFFAF0
ForestGreen #228B22
Fuchsia #FF00FF
Gainsboro #DCDCDC
GhostWhite #F8F8FF
Gold #FFD700
GoldenRod #DAA520
Gray #808080
Green #008000
GreenYellow #ADFF2F
HoneyDew #F0FFF0
HotPink #FF69B4
43
Unidade I

IndianRed #CD5C5C
Indigo #4B0082
Ivory #FFFFF0
Khaki #F0E68C
Lavender #E6E6FA
LavenderBlush #FFF0F5
LawnGreen #7CFC00
LemonChiffon #FFFACD
LightBlue #ADD8E6
LightCoral #F08080
LightCyan #E0FFFF
LightGoldenRodYellow #FAFAD2
LightGrey #D3D3D3
LightGreen #90EE90
LightPink #FFB6C1
LightSalmon #FFA07A
LightSeaGreen #20B2AA
LightSkyBlue #87CEFA
LightSlateGray #778899
LightSteelBlue #B0C4DE
LightYellow #FFFFE0
Lime #00FF00
LimeGreen #32CD32
Linen #FAF0E6
Magenta #FF00FF
Maroon #800000
MediumAquaMarine #66CDAA
MediumBlue #0000CD
MediumOrchid #BA55D3
MediumPurple #9370D8
MediumSeaGreen #3CB371
MediumSlateBlue #7B68EE
MediumSpringGreen #00FA9A
MediumTurquoise #48D1CC
MediumVioletRed #C71585
MidnightBlue #191970
MintCream #F5FFFA
MistyRose #FFE4E1
Moccasin #FFE4B5
NavajoWhite #FFDEAD
44

Navy #000080
OldLace #FDF5E6
Olive #808000
OliveDrab #6B8E23
Orange #FFA500
OrangeRed #FF4500
Orchid #DA70D6
PaleGoldenRod #EEE8AA
PaleGreen #98FB98
PaleTurquoise #AFEEEE
PaleVioletRed #D87093
PapayaWhip #FFEFD5
PeachPuff #FFDAB9
Pink #FFC0CB
Plum #DDA0DD
PowderBlue #B0E0E6
Purple #800080
Red #FF0000
RosyBrown #BC8F8F
RoyalBlue #4169E1
SaddleBrown #8B4513
Salmon #FA8072
SandyBrown #F4A460
SeaGreen #2E8B57
SeaShell #FFF5EE
Sienna #A0522D
Silver #C0C0C0
SkyBlue #87CEEB
SlateBlue #6A5ACD
SlateGray #708090
Snow #FFFAFA
SpringGreen #00FF7F
SteelBlue #4682B4
Tan #D2B48C
Teal #008080
Thistle #D8BFD8
Tomato #FF6347
Turquoise #40E0D0
Violet #EE82EE
Wheat #F5DEB3
45
Unidade I

White #FFFFFF
WhiteSmoke #F5F5F5
Yellow #FFFF00
YellowGreen #9ACD32
2.6.8 Tamanho da fonte: <font size=””> </font>
Incluir um número de 1 a 7 para alterar o tamanho da fonte na propriedade size (tamanho). Sendo o
1(um) o menor e o 7(sete) o maior. Na figura a seguir, ilustramos o exemplo de aplicação dessa propriedade
no texto “Desenvolvimento de Software para Internet”, que se encontra entre as tags <font></font>.
Figura 33 – Exemplo de aplicação da tag <font>
2.6.9 Alteração do tamanho da fonte: <font size=”+/-?”> </font>
Para uma alteração imediata do tamanho da fonte em relação ao tamanho da fonte anterior, essa
tag aumenta ou diminui o tamanho da fonte pelo número especificado na marcação, como ilustrado na
figura a seguir, com o texto “Desenvolvimento de Software para Internet”.
Figura 34 – Exemplo de aplicação da tag <font>
46
2.6.10 Centro: <center> </center>
É uma tag útil, que possibilita com que tudo que esteja entre as tags fique centralizado. Na figura
a seguir, o texto “Desenvolvimento de Software para Internet”, será apresentado no centro da página.
Figura 35 – Exemplo de aplicação da tag <title>
2.6.11 Ênfase: <em> </em>
Usada para enfatizar o texto, que geralmente aparece em itálico, mas pode variar de acordo com o
browser. Na figura a seguir, o texto “Desenvolvimento de Software para Internet”, será apresentado em
formato itálico no browser.
Figura 36 – Exemplo de aplicação da tag <em>
47
Unidade I
2.6.12 Ênfase forte: <strong> </strong>
Utilizada para enfatizar mais o texto, que geralmente aparece em negrito, mas pode variar de acordo
com o browser. Na figura a seguir, o texto “Desenvolvimento de Software para Internet” será apresentado
em formato negrito no browser.
Figura 37 – Exemplo de aplicação da tag <strong>
Lembrete
Você pode criar uma pasta chamada “Desenvolvimento de Software para

Internet” e nela adicionar todos os exercícios, e para facilitar a localização,
criar a pasta na área de trabalho: Desktop.
2.6.13 Parágrafos: <p> desenvolvimento de software para internet </p>
A maior parte do conteúdo de uma página web simples aparecerá em parágrafos ou seções.
Para definirmos parágrafos, utilizaremos as tags <p> e </p>, e os navegadores colocaram o texto
automaticamente na próxima linha assim que atingir a borda da tela. Quando uma tag <p> for utilizada,
indicará o próximo parágrafo e o navegador adicionará um espaço em branco entre os parágrafos. A tag
<p> possui os seguintes atributos, conforme ilustrado na figura a seguir.
48
Figura 38 – Exemplo de aplicação da tag <p>
• align=””: alinhamento de texto no parágrafo: left, center ou right (esquerda, centralizado ou direita).
• width=””: o parágrafo ocupará uma largura ou porcentagem fixa da página, padrão 100%.
49
Unidade I
2.6.14 Quebra de linha: <br>
Utilizado para iniciar o texto em uma nova linha. Várias tags <br> em uma linha criarão um grande
espaço vertical em uma página web, conforme ilustrado na figura a seguir.
Figura 39 – Exemplo de aplicação da tag <br>
50
2.6.15 Divisão: <div> </div>
A tag <div> define uma seção ou divisão dentro de um arquivo HTML. Geralmente, contém títulos,
parágrafos, tabelas ou outros elementos que precisam ser agrupados. Também pode se agregar css
(cascading style sheets), definindo na tag <div class=””>. O atributo class é utilizado para definir a
aparência de uma seção de uma página web, conforme ilustrado na figura a seguir.
Figura 40 – Exemplo de aplicação da tag <div>
51
Unidade I
2.6.16 Table: <table> … </table>
Usado para definir uma tabela. Ela contém todas as tags de linha e coluna, além de seu conteúdo.
Aplica-se como a tag body, embora sempre deva haver pelo menos uma linha em uma tabela, conforme
ilustrado a seguir.
Figura 41 – Exemplo de aplicação da tag <table>
A tag <table> possui alguns atributos para definir o seu layout, tais como:
• Border=””: o tamanho da borda (em pixels) ao redor da tabela.
• Cellspacing=””: o espaço (em pixels) entre cada célula, por exemplo. Entre linhas ou colunas.
• Cellpadding=”?”: o espaço ou margem entre o conteúdo de uma célula e sua borda.
52
2.6.17 Table row: <tr> </tr>
Para iniciar uma linha da tabela, as tags <tr> devem aparecer dentro das tags da <table>, conforme
ilustrado a seguir.
Figura 42 – Exemplo de aplicação da tag <tr>
2.6.18 Table cell: <td> </td>
Uma célula da tabela é onde o conteúdo será apresentado. As células devem existir dentro de linhas,
sendo que o número de células em uma linha determina o número de colunas na tabela, conforme
ilustrado a seguir.
53
Unidade I
Figura 43 – Exemplo de aplicação da tag <td>
As propriedades da célula podem ser configuradas usando os atributos:
• Align=””: o alinhamento do texto na célula: left, center ou right (esquerda, centralizada ou direita).
• Valign=””: o alinhamento vertical da célula: top, middle ou bottom.
• Width=””: especifique um fixo com uma célula; por padrão, eles ocuparão apenas o
espaço necessário.
• Colspan=””: a extensão da coluna permite que uma célula ocupe mais de uma coluna, para
corresponder aos layouts de outras linhas.
• Rowspan=””: a extensão da linha, semelhante à extensão da coluna, força uma célula a ocupar
mais de uma linha.
54
• Nowrap: nenhum texto na célula será quebrado na próxima linha. Semelhante à <nobr> tag
para parágrafos.
2.6.19 Header cell: <th> </th>
Semelhante a uma célula da tabela, uma célula do cabeçalho deve aparecer dentro de uma linha da
tabela. Normalmente encontradas na primeira linha, as células do cabeçalho são mostradas em negrito
e centralizadas pelo navegador, conforme ilustrado na figura.
Figura 44 – Exemplo de aplicação da tag <th>
55
Unidade I
2.7 Ligações
Os links são necessários para que os usuários pulem de uma página para outra. Na estrutura da
página, as tags são sinalizadas como <a href>, conforme ilustrado a seguir.
Figura 45 – Exemplo de aplicação da tag <a herf>
2.7.1 Link básico: <a href=”url”>link text</a>
Há duas partes principais em uma tag de link: o texto em que um usuário pode clicar e o endereço
da web para o qual ele acessa, se clicar nele. O caractere (e), por exemplo, entre as tags <a> e </a>, é o
texto do link, geralmente exibido em azul e sublinhado. A href=”url” é o endereço da web, onde url pode
ser definido de várias maneiras, conforme ilustrado na figura.
Figura 46 – Exemplo de variação da tag <a herf>
2.7.2 Link para um fragmento: <a href=”#fragment”>link</a>
Muitas vezes, é útil criar um link para outros lugares na mesma página web, como outras seções
ou capítulos mais abaixo na página. O termo técnico para isso é vinculado a um fragmento, em que os
browsers tentam automaticamente rolar para a parte da página.
56
Figura 47 – Exemplo de aplicação de fragmento
Fragmentos precisam ser estabelecidos em algum local de uma página, dando-lhes um nome.
Em seguida, links para esse fragmento são criados, usando o caráter de hash (#): <a href=”#fragment_
name”>Link</a>. Para realizar um link de um fragmento em outra página, é necessário acrescentar o
nome do fragmento para o endereço da página solicitada.
2.7.3 Janela de destino: <a href=”url” target=””>link</a>
Nem sempre desejamos vincular e apresentar sobre a página que será visualizada no momento.
O atributo target é útil para auxiliar na disponibilização de outra página quando requisitada e
apresentado em outra aba do browser. Para realizar essa implementação, utiliza-se target=”_blank”,
conforme implementação realizada na figura a seguir.
Figura 48 – Exemplo de aplicação de target
57
Unidade I
Ao definir a target =“_BLANK”, página para a qual você vincula, uma nova janela é carregada (ou
uma nova guia em alguns navegadores mais recentes). Similary, “_self”, “_parent”, ou “_top” abrirá o
link na janela atual, na janela pai (usada com quadros) ou na janela de nível superior, respectivamente.
Segue exemplo de sintaxe do target:
<a target=”_blank | _self_ | _parent | _ top | ” >
2.7.4 Imagem como um link: <a href=”url”><img … ></a>
Ao colocar uma tag de imagem entre as tags <a> e </a>, podemos transformar uma imagem em um
link, e clicar nessa imagem carregará a página referenciada, conforme apresentado a seguir.
Figura 49 – Exemplo de imagem como link
Figura 50 – Exemplo de imagem como link
A imagem indicada na figura, (src=”unip.jpeg”) precisa estar na mesma pasta que estão sendo
aplicados os exemplos apresentados neste livro-texto; src é uma abreviação de source (fonte), que
assinala qual diretório se encontra a imagem.
58
2.7.5 Link de e-mail: <a href=”mailto:email”></a>
Um tipo especial de link, o mailto, instrui o browser a compor e enviar um e-mail com o
endereço especificado, utilizando o programa de e-mail padrão (Outlook, por exemplo), conforme
apresentado a seguir.
Figura 51 – Exemplo de link e-mail
Você também pode definir um assunto para o e-mail utilizando a tag <a href=”mailto:desenvolvim
entosoftwareinternet@unip.br?Subject=Unidade1”> Unidade 1</a>.
2.7.6 Imagens: <img src=”unip.jpg”>
Adicionar fotos ou outras imagens à página web é muito simples, utilizando a tag <img>, conforme
apresentado na figura a seguir, onde utilizou-se os atributos para definição de bordar (border), rótulo da
imagem (alt), altura e largura da figura (height e width) e a localização da imagem através do source (src).
Figura 52 – Exemplo de aplicação da tag <img>
59
Unidade I
2.7.7 Imagem: <img src=”url”>
Para exibir uma imagem, precisamos especificar a sua URL utilizando o atributo src, substituindo url
pelo nome do arquivo da sua imagem. Existem várias maneiras de fazer isso (ver figura).
• Src = “unidade1.jpeg”, buscará a imagem na raiz do projeto;
• Src= “images/Picture.jpeg”, buscará a imagem dentro da pasta Imagens;
• Src=”http://www.ads.com/images/unidade1.jpeg”, buscará a imagem na url http://www.ads.com/

images/unidade1.jpeg.
Figura 53 – Exemplo de aplicação da tag <img src>
60
2.7.8 Texto alternativo: <img … alt=”?”>
O alt é o atributo que define o texto apresentado no lugar de uma imagem quando ela não pode ser
carregada. Na verdade, esse é um atributo necessário para o HTML válido e deve descrever brevemente
o que a imagem normalmente faria, conforme apresentado na figura.
Figura 54 – Exemplo de aplicação da tag <img alt>
61
Unidade I
2.7.9 Tamanho da imagem: <img … width=”?” height=”?”>
Uma imagem normalmente será mostrada no tamanho real, mas utilizando os atributos width
(largura) e height (altura), podemos alterar o tamanho da imagem a ser exibida. Podemos especificar o
tamanho em pixels ou como uma porcentagem.
Uma dica é especificar o tamanho usando o tamanho real da imagem em pixels para forçar os
browsers a alocar espaço para a imagem antes que ela seja carregada, garantindo que o layout da
página permaneça o mesmo, com ou sem imagens exibidas, conforme apresentado na figura.
Figura 55 – Exemplo de aplicação da tag <img width> <img height>
62
2.7.10 Bordas <img … border=””>
Tag utilizada para especificar a espessura em pixels de uma borda. Podemos definir o atributo
border=”0” como a remoção da borda adicionada quando as imagens são utilizadas como links, conforme
Figura 56 – Exemplo de aplicação da tag <img border>
63
Unidade I
2.7.11 Alinhamento de imagem: – <img … align=”?”>
Por padrão, uma imagem aparece no local especificado no código HTML (como em qualquer outra
tag). No entanto, podemos alinhar uma imagem com o texto ou parágrafo ao redor, definindo qualquer
um deles align=”left | right | top | bottom | middle”, conforme apresentado a seguir.
Figura 57 – Exemplo de aplicação da tag <img align>
64
2.7.12 Espaçamento: <img … vspace=”” hspace=””>
Atributos vspace e hspace da tag <img> proporcionam ajuste de espaço em branco (ou espaço de
contorno) ao redor de uma imagem, em pixels. Utiliza-se vspace para ajustar o espaçamento vertical
acima e abaixo, ou hspace, para os lados esquerdo e direito, conforme apresentado na figura.
Figura 58 – Exemplo de aplicação das tags <img vspace> e <img hspace>
O quadro a seguir apresenta as principais tags utilizadas para o desenvolvimento de uma página web.
65
Unidade I
Quadro 4 – Tags HTML essenciais para construção de uma página web
Tag Exemplo Resultado

Parágrafo <p> algum texto </p> Algum texto
Algum
Quebra de linha <p> algum texto <br> quebrado </p>
texto quebrado
Cabeçalho principal <h1> cabeçalho 1 </h1> Cabeçalho 1
Subtítulo <h5> rubrica 5 </h5> Rubrica 5
Negrito <b> texto em negrito </b> Texto em negrito
Itálico <i> texto em Itálico </i> Texto em itálico
<p style=”color:red;”>
Texto colorido Texto colorido vermelho
Texto colorido vermelho </p>
<p style=”font-family:serif;”>
Alterar fonte Texto em fonte Serif
Texto em fonte Serif</p>
Texto citado <q> texto citado </q> Texto citado
2.8 Estrutura de arquivos HTML
É possível visualizar através da figura a seguir e compreender que um documento em HTML se torna
simples e objetivo, considerando uma divisão simples de blocos compostos de tags e seguindo a estrutura:
• definição do documento (doctype);
• cabeçalho (head);
• corpo (body).
66
2.8.1 Doctype: definindo o documento
O doctype é um item de extrema importância e que sempre deve se levar em consideração. Ele
sempre precisa existir, que é <!DOCTYPE html>.
O doctype propriamente dito não é uma tag HTML, mas sim uma instrução para que o navegador e
outros programas possam então ler seu site, sendo que o código encontrado ali será um código HTML,
assim eles conseguem entender o que fazer para apresentar seu site da melhor forma. Lembrando que
o doctype é obrigatório e, por fim, deve ser sempre a primeira linha do seu documento de marcação.
2.8.2 Head
Contém informações que, por definição, não são transpostas visivelmente para o usuário/leitor do
documento de marcação, sendo assim, são dados implícitos, que podem ser considerados de uso e
controle do documento; vinculação com ênfase em outros arquivos, aplicação de lógica de programação
de scripts e, por fim, metadados, ou seja, na prática todo e qualquer conteúdo do cabeçalho fica
delimitado entre a abertura e o fechamento da tag head.
2.8.3 Body
Trata-se da tag que envolve a marcação HTML, ou seja, a informação legível para o usuário/leitor
do documento de marcação, sendo que todo e qualquer texto que se deseja apresentar, assim como
toda e qualquer forma de mídia de saída, tais como imagens, sons, miniaplicativos embutidos, conteúdo
multimídia etc., serão incluídos na tag <body>. Além disso, toda e qualquer apresentação de entrada de
dados (formulários) tem como forma de aplicação nessa seção do documento de marcação, ou seja, na
prática, o corpo do documento de marcação é delimitado pelo par de tags <body> e </body>.
Consideramos, então, que esse é o preceito básico que deve se levar em consideração para que fique
muito claro: em que as marcações se aplicam e quais são os resultados desse modelo, por exemplo,
se você desejar informar conteúdo textual para saída legível ao usuário do seu aplicativo web, essa
marcação deverá, obrigatoriamente, estar no bloco do corpo da página e, por fim, definir qual o tipo
de codificação da página, esta deve estar marcada no cabeçalho do mesmo documento, ou seja, dentro
do elemento body. Toda a sua estrutura de página terá os elementos semânticos da construção da sua
página, que, por finalidade, será alocada onde serão declarados e identificados cabeçalhos, rodapé,
conteúdo principal etc. As figuras a seguir ilustram a aplicação da estrutura HTML.
67
Unidade I
Na figura, visualizamos a marcação de uma página HTML que atribui uma imagem que será
apresentada no browser.
68
Já na anterior, visualizamos a marcação de uma página HTML que disponibiliza através da tag <nav>
um menu com os itens: 1, 2 e 3.
69
Unidade I
Na figura anterior, visualizamos a marcação de uma página HTML que atribui uma imagem que será
apresentada no browser, bem como um texto em meio às tags <article>, <h3> e <p>.
A seguir, podemos ver com detalhes a estrutura de uma página HTML, com as distribuições das tags.
70
Figura 63 – Estrutura de uma página HTML
Podemos observar a seguir toda a parte de marcação que foi desenvolvida e sua apresentação no
browser, apresentado na figura a seguir.
Figura 64 – Estrutura de uma página HTML
Figura 65 – Página exibida no browser
71
Unidade I
Observação
Para que as páginas apresentadas nesta unidade sejam executadas no

browser, deve-se salvar cada uma delas com a extensão .html e clicar
no arquivo. Então será exibida a página no seu browser padrão.
Resumo
Nesta unidade, conhecemos um pouco da história e alguns conceitos

relacionados ao desenvolvimento de software para internet, de uma
maneira ampla e objetiva.
Foi demonstrado que o desenvolvimento de software para internet não

é algo novo, porém, por seu desenvolvimento e arquitetura descrita, pode
levar você a pensar que é recente; devido a sua evolução no passar do
tempo, principalmente no que diz respeito à linguagem de marcação HTML.
Um grande passo para evolução da construção de sites foi a disseminação

da linguagem de marcação HTML, bem como sua utilização em editores de
texto, que possibilitam facilidades como: escolha de editores, customização
de editores e desenvolvimento, principalmente de novos editores com
recursos para desenvolvimento de linguagem de marcação HTML.
Com relação aos aspectos evolutivos dos sites, podemos compreender

os benefícios dos avanços teóricos e a contribuição na linguagem de
marcação HTML como os principais pontos que a transformaram em um
layout amigável e principalmente enriquecedor aos olhos humanos.
Também abordamos alguns conceitos que possibilitam que as tags

funcionem de maneira mais eficaz, tais como: cores, parágrafos, imagens,
formatação de texto etc.
E, por fim, vale deixar como nota de estudo para esta unidade conceitos
básicos para o desenvolvimento web: estudo da história da internet que
tem como concepção toda a década de 1970, quando nasceu o TCP/IP
(transmission control protocol/internet protocol), ou seja, um conjunto de
protocolos que são a base da internet, daquela época até os dias atuais, que
proporcionou o crescimento e principalmente o início da era web.
72
Vale ressaltar também, que o conceito de internet nasceu de um

projeto da agência norte-americana Advanced Research and Projects
Agency (ARPA), que teve como objetivo conectar computadores dos seus
departamentos de pesquisa, sendo assim a internet é iniciada a partir da
Arpanet. Separar alguns instantes para estudar fundamentos históricos
da internet é aprender com a evolução e se preparar para novas oportunidades
e tecnologias que irão surgir hoje e sempre.
A evolução da internet fez com que a cada dia houvesse um progresso

na contribuição e no crescimento da linguagem de marcação HTML, para
que assim fosse gerada uma experiência agradável em página web.
Exercícios
Questão 1. (Polícia Civil – SP (PC/SP) 2018, adaptada) Um usuário de um computador com Windows 7
está utilizando o navegador Google Chrome, versão 65, para realizar a busca por informações sobre
cursos de informática. Ao localizar uma página com informações interessantes, o usuário decide por
salvar a página. Nessa situação, um dos tipos de salvamento da página é: Página da web,
A) Somente HTML.
B) Imagem JPEG.
C) Formato PDF.
D) Somente texto.
E) Formato impressão.
Resposta correta: alternativa A.
Análise das alternativas
A) Alternativa correta.
Justificativa: HTML é uma linguagem usada para criar páginas web.
B) Alternativa incorreta.
Justificativa: JPEG (ou JPG) é um método usado para comprimir imagens fotográficas.
73
Unidade I
C) Alternativa incorreta.
Justificativa: a sigla PDF significa Portable Document Format e indica um formato de arquivo
criado para que qualquer documento possa ser visualizado, independente de qual tenha sido o
programa que o originou.
D) Alternativa incorreta.
Justificativa: não existe uma linguagem para salvar uma página somente texto.
E) Alternativa incorreta.
Justificativa: não existe uma linguagem para salvar uma página somente texto.
Questão 2. A tag cabeçalho que contém as informações sobre o documento e que não aparecerá na
página real, como o título do documento, é a tag:
A) head.
B) HTML.
C) body.
D) cabeçalho.
E) title.
Justificativa: a tag head é o cabeçalho e contém informações sobre o documento que não aparecerá
na página real, como o título do documento, o autor e a folha de estilo a ser usada.
Justificativa: a tag HTML define o documento como página web. Ela também identifica o início e o
fim do documento HTML. Todas as outras tags devem estar entre as tags HTML.
Justificativa: as tags body contêm todas as informações de conteúdo visível na página. Todas as
imagens, links e texto sem formatação devem estar entre as tags <body> e </body>.
74
Justificativa: essa tag não existe.
Justificativa: a tag title define o título que aparecerá na barra de título do navegador. O título
aparecerá entre as tags <head> e </head>.
75
Unidade II
Unidade II
3 ESTRUTURANDO DOCUMENTOS COM HTML
HTML e XHTML são dois idiomas nos quais as páginas web são gravadas, sendo que o HTML tem
como base de concepção o SGML (standard generalized markup language). Em contrapartida, o XHTML
tem como base de concepção o XML (extensible markup language), conforme ilustrado a seguir.
Exemplo de SGML:
<QUOTE TYPE=”SGML”>
Desenvolvimento de Software para <ITALICS>internet</ITALICS>
</QUOTE>
Exemplo de XML:
Figura 66 – Exemplo de arquivo XML
76
Saiba mais
Para agregar conhecimento aos estudos de HTML e XHTML, leia o artigo:
ISHIDA, R. Servindo HTML & XHTML. Internacionalização. Traduzido

por Maurício Samy Silva. W3C. 2016. Disponível em: https://www.w3.org/
International/articles/serving-xhtml/index.pt-br. Acesso em: 21 set. 2020.
No contexto histórico, o XHTML foi uma derivação do HTML para estar inserido dentro de uma
conformidade com os padrões de XML. Portanto, o XHTML é extremamente alinhado e padronizado
quando colocado em comparação ao HTML e não possibilita ao usuário escapar de falhas de codificação
e estrutura no código, ou seja, o XHTML foi uma derivação do HTML para estar inserido dentro de
uma conformidade com os padrões de XML. Logo, ele é extremamente alinhado e padronizado quando
colocado em comparação ao HTML e não possibilita ao usuário escapar de falhas de codificação e
estrutura no código.
Sendo assim, o motivo para o XHTML ser concebido foram as tags específicas do browser,
extremamente complicadas e de difícil aprendizado no HTML. As páginas desenvolvidas em HTML eram
apresentadas sem padrão algum nos browsers.
Considera-se, assim, o HTML uma linguagem de marcação direcionada para páginas web. Ele
possibilita a criação de documentos estruturados, apresentando uma semântica constante e estrutural
para textos como títulos, listas, links, citações etc. Possibilita também que imagens e objetos possam
ser incorporados para geração de formulários interativos, que podem ser escritos como tags entre
colchetes angulares, por exemplo <html>, e scripts em idiomas como JavaScript ainda podem ser
apresentados em páginas web.
XHTML é definido como uma agregação de linguagens XML que tem como requisito estender
ou espelhar versões do HTML, ou seja, não possibilitar a omissão de nenhuma tag ou a utilização de
minimização de atributo. O XHTML tem por exigência que exista uma tag final para cada tag inicial, e
todas as tags alinhadas devem ser fechadas na ordem e de maneira correta.
Por exemplo, embora <br> seja uma tag válida em HTML, seria necessário então escrever <br />em
XHTML. O quadro demonstra uma comparação:
77
Unidade II
Quadro 5 – Comparação HTML × XHTML
HTML XHTML
XHTML (extensible hypertext markup language) é considerada
A linguagem de marcação HTML ou hypertext é considerada, como da família de linguagens de marcação XML que tem por
de forma mundial, a principal linguagem de marcação para finalidade o espelhamento, ou até mesmo a extensão de versões
efetuar a criação de páginas web e outras informações que utilizadas em hypertext markup language (HTML), a linguagem
podem proporcionar a exibição em um browser. na qual as páginas de atuação da web são gravadas.
html, .htm .xhtml, .xht, .xml, .html, .htm
text / html application / xhtml + xml
W3C & WHATWG Consórcio na World Wide Web
Formato de arquivo do documento Linguagem de marcação
SGML XML, HTML
As páginas da web são escritas em HTML. A versão estendida do HTML é mais rígida e baseada em XML.
Estrutura flexível que requer analisador específico de HTML Subconjunto restritivo de XML e precisa ser analisado com
branda. analisadores XML padrão.
Proposta por Tim Berners-Lee em 1987. Recomendação do World Wide Web Consortium em 2000.
3.1 Recursos de documentos HTML à XHTML
Os documentos HTML têm como composição a base de elementos com três componentes, que são
um par de tags de elemento (de início e de término), atributos de elemento disponibilizados nas tags e o
conteúdo real, textual e gráfico, em que um elemento HTML é considerado tudo o que existe entre elas.
Os documentos XHTML têm por finalidade apenas a definição de um elemento raiz, ou seja, todos os
elementos, incluindo variáveis, devem estar por definição em letras minúsculas, e os valores atribuídos
devem necessariamente estar entre aspas, fechados e alinhados para serem devidamente reconhecidos.
Esse, por sinal, é um requisito obrigatório em XHTML, que, diferentemente do HTML, é tratado de forma
opcional, de maneira que, a declaração do doctype delimitaria e colocaria regras a serem seguidas pelos
documentos que estão desenvolvidos.
Além das diferenças das declarações de abertura de um documento que existe entre um documento
HTML 4.01 e XHTML 1.0, em que cada uma das DTDs (document type definition) correspondentes
são, com certeza, tratadas de forma gradativa e sintática. A sintaxe subjacente do HTML possibilita
diversos atalhos que o XHTML não permite, como, por exemplo, elementos com tags de abertura ou
fechamento opcionais ou até mesmo o propósito de trabalho de elementos vazios que não devem ter
como premissa uma tag final.
Por outro lado, o XHTML tem um nível de exigência de que todos os elementos possibilitem uma
definição de abertura ou uma definição de fechamento, atuando, assim, o XHTML, que também
possibilita introduzir um novo atalho: uma tag XHTML pode ser aberta e fechada dentro da mesma tag,
incluindo‑se para fins de desenvolvimento uma barra antes do final da tag, por exemplo: <br/>.
78
A inserção dessa abreviação, que não é utilizada na declaração do SGML para HTML 4.01, pode gerar
um cenário de confusão entre os softwares anteriores não familiarizados com essa nova convenção
estabelecida. Uma correção para isso é a inclusão de um espaço antes de fechar a tag, por exemplo: <br />.
HTML e XHTML podem estar considerados diretamente relacionados e, portanto, podem ser
documentados juntos: o HTML 4.01 e o XHTML 1.0 possibilitam três subespecificações definidas, como:
estrito, flexível e conjunto de quadros, considerando que a diferença de inicialização de declarações para
um documento distingue HTML e XHTML.
O HTML possibilita também atalhos como elementos com tags opcionais, elementos vazios sem tags
finais. Já o XHTML é muito rigoroso com relação à inicialização e finalização de tags.
O XHTML utiliza o atributo de funcionalidade, que tem por definição a linguagem incorporada,
ou seja, todos os requisitos de sintaxe do XML estão incluídos diretamente em um documento
XHTML bem formado.
Observação
MIME é a sigla em inglês que corresponde a multipurpose internet mail

extensions, que tem como referência um padrão da internet para o formato
das mensagens de correio eletrônico, ou seja, ela tem como premissa de
trabalho incluir diversos tipos de conteúdo dentro de uma única mensagem.
Determinar, por exemplo, qual aplicativo deve abrir um formato de

arquivo específico por padrão. Registrar, por exemplo, outros aplicativos
que também podem abrir um formato de arquivo específico. Fornecer,
por exemplo, uma mensagem especificando o tipo de um arquivo, ou até
mesmo, em um diálogo de propriedades de arquivo de um aplicativo; bem
como um ícone representando um formato de arquivo específico, ou até
em um diálogo de propriedades de arquivo de um aplicativo.
Um documento XHTML atrelado com um tipo MIME de texto / html deve ser analisado e interpretado
de forma obrigatória como HTML, sendo assim, as regras HTML teriam aplicação nesse caso.
Uma folha de estilo escrita para um documento XHTML que está sendo atrelado com um tipo de
texto / html MIME pode, por exemplo, não funcionar conforme o esperado se o documento for atrelado,
como a um tipo de aplicativo MIME / xhtml + xml.
Onde os termos “XHTML” e “documento XHTML” forem apresentados no restante dessa seção de
marcação, eles terão como referência a marcação XHTML veiculada com um tipo XML MIME, ou seja,
essa marcação XHTML atribuída como text / html é um documento HTML no que se refere aos browsers.
79
Unidade II
Para que possamos, de maneira objetiva, entender as pequenas diferenças entre HTML e XHTML,
podemos considerar a transformação de um documento XHTML 1.0 válido e bem formatado em
um documento HTML 4.01 válido. Para a realização dessa tradução precisamos executar alguns
passos, por exemplo:
• A linguagem para definição de um elemento deve ser especificada com um lang atributo e não
com o xml:lang atributo XHTML, ou seja, o XHTML utiliza o atributo de funcionalidade que tem
por definição a linguagem do XML.
• Remover o espaço para nome XML (xmlns=URI): o HTML não possui recursos para namespaces.
Observação
URI, do inglês uniform resource identifier, tem como definição uma
sequência de caracteres que possibilita a identificação de um recurso
específico, ou seja, para garantir sua granularidade, todos os URIs seguem
um conjunto predefinido de regras determinadas de sintaxe, que consistem
com sua extensão um meio de esquema de nomeação hierárquico
estabelecido de forma separada, por exemplo: http://.
Essa identificação tem por finalidade possibilitar, assim, a interação

com representações do recurso em uma rede, baseada em vias da World
Wide Web, utilizando assim, protocolos específicos.
Um exemplo de aplicação URI:
Quadro 6
https://exemplounip.com/caminho/unidade.txt#fragmento
//exemplounip.com/caminho/unidade.txt
/caminho/unidade.txt
caminho /unidade.txt
/caminho/unidade.txt
Efetua-se o ajuste da declaração do tipo de documento de XHTML 1.0 para HTML 4.01. Se atribuído,
remover a declaração XML: <?xml version=”1.0” encoding=”utf-8”?>.
Deve-se também verificar no arquivo se o tipo MIME do documento está definido como text/html,
porém, para HTML e XHTML, isso vem por definição do Content-Type, cabeçalho HTTP enviado previamente
pelo servidor.
Por fim, deve-se ajustar a sintaxe do elemento vazio XML para um elemento vazio do estilo HTML
(<br/>para<br>).
80
3.2 Diferenças entre HTML e XHTML
Estrutura do documento XHTML:
• DOCTYPE XHTML é obrigatório.
• o atributo xmlns em <html> é obrigatório.
• <html>, <head>, <title> e <body> são obrigatórios.
Os elementos XHTML devem:
• estar adequadamente alinhados;
• sempre estar fechados;
• estar em minúsculas;
• ter um elemento raiz.
Atributos XHTML:
• Os nomes dos atributos devem estar em minúsculas.
• Os valores dos atributos devem ser citados.
• A minimização de atributos é proibida.
3.2.1 Como converter de HTML para XHTML
A conversão de um documento que está em HTML para XHTML acontece com os seguintes passos:
• Adicionar um XHTML <! DOCTYPE> à primeira linha de cada página.
• Acrescentar um atributo xmlns ao elemento html de cada página.
• Alterar todos os nomes de elementos para minúsculas.
• Fechar todos os elementos vazios.
• Alterar todos os nomes de atributo para minúsculas.
• Citar todos os valores de atributo.
81
Unidade II
Segue um exemplo de marcação em XHTML:
Figura 67 – Exemplo de aplicação da estrutura XHTML
Segue um exemplo de marcação em HTML:
Figura 68 – Exemplo de aplicação da estrutura HTML
3.3 Formulários
Os formulários nos permitem automatizar o envio e o recebimento de dados de uma página

web e são úteis para logins de sites e fóruns, assinatura de livros de visitas, e-mail baseado na web,
questionários on-line etc.
3.3.1 Formulário: <form> … </form>
Todos os elementos do formulário, como entradas e botões, devem estar dentro das tags form.
Na maioria dos casos, um formulário deve ter os atributos name, action e method definidos:
82
• name=””: um nome exclusivo que identifica o formulário, usado pelo script de ação;
• action=”url”: o endereço (URL – uniform resource locator ou localizador de padrão de recursos)

do script que processará os dados do formulário quando enviado. Em alguns casos, o URL da ação
não é necessário, por exemplo, quando uma função JavaScript do cliente é programada na página
web para processar os dados do formulário;
• method=””: o método usado pelo script de ação efetuou o get. Por exemplo, post poderia ser
usado para enviar dados a um formulário de registro do usuário e get é utilizado para pesquisas
ou formulários que devem retornar informações.
3.3.2 Campo de entrada: <input>
Usado para criar um campo de entrada de texto simples ao seu formulário, mas também é a base
para muitos outros tipos de entrada de formulário usando o type para o atributo:
• name=””: nome exclusivo para a entrada a ser usada pelo script de ação;
• type=””: existem vários tipos de campos de entrada de formulário, text, password, checkbox,
radio, file, image, e hidden, entre os mais comuns;
• value=””: valor inicial ou dados exibidos no campo de entrada quando o formulário é carregado
pela primeira vez;
• size=””: define o tamanho ou a largura da entrada, normalmente definida em termos de caracteres

numéricos, em vez de pixels;
• maxlength=””: comprimento máximo do campo de entrada, como o número máximo de

caracteres para uma entrada de texto;
• checked: usado com checkbox para entradas; define o padrão do campo para já ser verificado.
3.3.3 Botão: <button>
Um botão de formulário, é semelhante a outras entradas de formulário, mas possui seu próprio
conjunto de atributos:
• name=””: nome exclusivo para o botão a ser usado pelo script de ação;
• type=””: o tipo de botão, submit ou reset, determina se o formulário deve ser enviado ou limpo
após pressioná-lo;
83
Unidade II
• value=””: texto que aparece no botão, como “OK” ou “enviar”;
• size=””: determina o comprimento (ou largura) do botão.
3.3.4 Lista de seleção: <select> … </select>
Uma lista suspensa, também chamada de caixa de combinação, permitindo a seleção de

uma lista de itens:
• name=””: nome do seletor;
• size=””: o tamanho mínimo (largura) da lista de seleção; geralmente não é necessário, pois o tamanho
dos itens definirá o tamanho da lista;
• multiple: permite que um usuário selecione vários itens da lista, normalmente limitados a um.
3.3.5 Item de seleção: <option> </option>
Uma tag option é necessária para cada item da lista e deve aparecer dentro das tags select. O texto
a ser mostrado para a opção precisa aparecer entre as tags option:
• value=”?”: o valor; são os dados enviados para o script de ação com a opção selecionada; esse
não é o texto que aparece na lista;
• selected: define a opção padrão que é selecionada automaticamente quando o formulário

é mostrado.
3.3.6 Área de texto: <textarea> </textarea>
Uma entrada que permite que uma grande quantidade de texto seja inserida e que possibilite a
altura da caixa de entrada seja especificada, diferente da tag input padrão:
• name=””: o nome exclusivo atribuído ao campo do formulário;
• rows=””: o número de linhas de texto define o tamanho vertical da área de texto;
• cols=””: o tamanho horizontal da caixa de texto, definido como o número de caracteres

(ou seja, colunas).
84
Exemplo de aplicação
Considere uma aplicação de formulários, conforme ilustrado nas figuras a seguir:
Figura 69 – Exemplo de construção de formulário em HTML
Para o formulário ilustrado, é necessário:
• Abrir o Sublime Text.

• Criar um documento HTML.
• Dentro da tag <body>, digitar as tags:
— <h3>Avaliar a Unidade 2: </h3>
Isso cria o cabeçalho Avaliar a Unidade 2.
— <form name=”formUnidade2 action=unidade2.php method=”post”>
Isso cria um formulário formUnidade2, que através do método post, será responsável por enviar
as informações preenchidas quando o botão submit for acionado.
— <input type=”text” name=”name” value=”Martins”>
Cria-se uma caixa de texto Nome e dentro dela fixa-se o nome Martins.
— <input type=”radio” name = “rating” value =”1>
Cria-se a opção de 1 à 3 para selecionar através do radio button.
— <textarea name=”comment”>
85
Unidade II
Cria-se uma caixa de texto para informar o comentário.
— <input type=”Submit” value=”Avaliar”>
Cria-se um botão para submeter os dados preenchidos para outra página ou um banco de dados.
Figura 70 – Página exibida no browser: formulário
Para o formulário ilustrado, é necessário:
• Abrir o Sublime Text.
• Criar um documento HTML.
• Dentro da tag <body>, digitar as tags:
— <h3>Avaliar a Unidade 2: </h3>
Isso cria o cabeçalho Avaliar a Unidade 2.
— <form name=”formUnidade2 action=unidade2.php method=”post”>
Isso cria um formulário formUnidade2, que através do método post, será responsável por enviar
as informações preenchidas quando o botão submit for acionado.
— <input type=”text” name=”name” value=”Martins”>
Cria-se uma caixa de texto Nome e dentro da caixa fixa-se o nome Martins.
— <input type=”radio” name = “rating” value =”1>
86
Cria-se a opção de 1 à 3 para selecionar através do radio button.

— <textarea name=”comment”>
Cria-se uma caixa de texto para informar o comentário.
— <input type=”Submit” value=”Avaliar”>
Cria-se um botão para submeter os dados preenchidos para uma outra página ou um banco de dados.
Assim, temos o resultado da construção de um formulário e seus componentes.
3.3.7 Os elementos <fieldset> e <legend>

Consideramos o elemento <fieldset> como via de realização de grupos que dispõem como possibilidade
realizar o seu compartilhamento. Um elemento <fieldset> por ter atribuído como rótulo de um elemento
chamado <legend>. Este tem como responsabilidade realizar a descrição formal do elemento <fieldset>.
Tecnologias cotidianas realizam a aplicação de <legend> para encapsular informações em formato
de etiqueta dentro de um elemento <fieldset> de cada formulário apresentado ao usuário.
Podemos ver os exemplos de aplicação de formulários com legend e fieldset, conforme
ilustrado na figura:
Figura 71 – Exemplo de aplicação de fieldset e legend
87
Unidade II
Na figura anterior, foi implementada a tag <fieldset>, para ser uma caixa que envolve todos os
componentes adicionados a ela, tais como: <input> e <label>. Adicionou-se a tag <legend> para
registrar o rótulo da caixa, conforme ilustrado no resultado final da implementação na figura a seguir.
Figura 72 – Página exibida no browser: formulário legend e fieldset
Na figura a seguir, implementou-se a tag <form> para ser um formulário que envia dados através do
método post. Todos os componentes adicionados a ela, tais como <input> e <textarea> serão enviados para
outra página ou para um banco de dados através da ação do botão “enviar” e o resultado é ilustrado a seguir.
Figura 73 – Exemplo de aplicação de formulário com input
88
Figura 74 – Página exibida no browser: formulário de contato
No quadro, ilustram-se alguns atributos que podem ser utilizados para facilitar a construção de um
formulário HTML.
Quadro 7 – Atributos para serem utilizados no form
Atributos Descrição
accept-charset Especifica o conjunto de caracteres usados no formulário enviado (padrão: o conjunto de páginas).
action Especifica um endereço (URL) para o qual enviar o formulário (padrão: a página de envio).
autocomplete Especifica se o navegador deve preencher automaticamente o formulário (padrão: ativado).
enctype Especifica a codificação dos dados enviados (padrão: é codificado por URL).
method Especifica o método HTTP usado ao enviar o formulário (padrão: GET).
name Especifica um nome usado para identificar o formulário (para uso do DOM: document.forms.name).
novalidate Especifica que o navegador não deve validar o formulário.
target Especifica o destino do endereço no atributo action (padrão: _self).
3.3.8 Utilizar o método Get
O método HTTP padrão, que pode ser utilizado ao enviar dados de formulário, é Get, no entanto,
quando ele é utilizado, todos os dados do formulário ficam visíveis no campo de endereço da página web.
Exemplo: /action_page.htm?disciplina=DSI&unidade=2
Dados importantes:
• Anexar todos os dados do formulário ao URL nos pares nome / valor, que transitam na URL.
• O tamanho de um URL é limitado (2.048 caracteres).
• Evitar a utilização do Get para enviar dados confidenciais, pois ficará visível na URL.
• Útil para envios de formulários nos quais um usuário possa efetuar uma marcação de
resultado como favorito.
• O Get pode ser considerado eficaz para dados não seguros, como cadeias de consulta no Google,
que auxiliam na busca e obtenção de dados.
89
Unidade II
3.3.9 Utilizar o método Post
Sempre utilizar o método Post quando os dados do formulário possam conter informações
confidenciais ou pessoais, sendo assim, ele não apresentará os dados do formulário no campo de
endereço da página web.
Dados importantes:
• O Post não possui limitações de tamanho e, com isso, pode proporcionar sua utilização para enviar
grandes quantidades de dados na web.
• Os envios de formulários com Post não possibilitam ser marcados como favoritos.
Exemplo: <form action=”unip.br” method=”post”>
4 VALIDAÇÕES HTML
A opção de usar HTML puro, às vezes com um toque de CSS, para complementar a validação de
formulário JavaScript, era até recentemente impensável. Certamente, ao longo dos anos, houve todos
os tipos de plug-ins desenvolvidos, mas nunca um único padrão no qual pudéssemos trabalhar.
Neste livro-texto, pretendemos apresentar apenas alguns exemplos simples para você começar a
entender os elementos básicos do formulário.
Saiba mais
Para uma introdução mais detalhada à validação de formulário HTML5, é

possível encontrar mais informações em:
FORMULÁRIOS HTML. w3schools. 2020. Disponível em: https://www.

w3schools.com/html/html_forms.asp. Acesso em: 21 set. 2020.
Esses exemplos funcionam nos seguintes browsers: Safari 5, Chrome 6, Opera 9, Firefox 4 Beta e
iPhone/iPad. Além disso, cada browser tem um comportamento padrão ligeiramente diferente.
4.1 Atributo obrigatório
A alteração mais simples que você pode fazer em seus formulários é marcar um campo de entrada
de texto como “obrigatório”:
Informe seu nome: <input type=”text” name=”name” required>
90
Lembrete
Um dos verbos mais comuns do HTTP é o Get. Quando o utilizamos, os

parâmetros são passados no cabeçalho da requisição. Por isso podem ser
vistos pela URI, como no caso do formulário de login <form method=”get”>.
No caso de formulários web, é muito comum que esse método seja o Post,
que, ao contrário do Get, envia os parâmetros no corpo da requisição HTTP.
Escondendo-os da URI, por exemplo: <form action=”/logar” method=”post”>.
O atributo required é um atributo booleano, e quando presente, especifica que o elemento deve ser
preenchido antes de enviar o formulário. Ele pode ser utilizado nas tags:
• <input>, <select> e <textarea>
• <form action=”/action_page.html”>
• Nome: <input type=”text” name=”nome” required>
• <input type=”submit”>
• </form>
• <select required>
• <option value=””>None</option>
• <option value=”azul”>Azul</option>
• <option value=”amarelo”>Amarelo</option>
• <option value=”branco”>Branco</option>
• <option value=”preto”>Preto</option>
• </select>
• <form action=”/action_page.html”>
• <textarea name=”comentario” required></textarea>
• <input type=”submit”>
• </form>
91
Unidade II
Isso informa ao navegador da web (compatível com HTML5) que o campo deve ser considerado
obrigatório. Navegadores diferentes podem marcar a caixa de entrada de alguma forma (o Firefox 4
Beta adiciona uma sombra de caixa vermelha por padrão), exibir um aviso (Opera) ou até impedir que o
formulário seja enviado se esse campo não tiver valor.
Antes de digitar qualquer coisa na caixa, é exibido um marcador vermelho. Assim que um único
caractere é inserido, isso muda para um marcador verde, para indicar que a entrada é “válida”.
É aqui que o HTML5, por exemplo, realmente se torna interessante e mais útil. Juntamente com o
tipo de entrada de texto, agora existem várias outras opções, incluindo e-mail, URL, número, telefone,
data e muitas outras.
Alterando o tipo de entrada para e-mail, enquanto também utiliza o atributo necessário, o navegador
pode ser usado para validar (de forma limitada) os endereços de e-mail.
Exemplo: Endereço de e-mail: <input type=”email” name=”email” required

placeholder=”Informar e-mail válido”>
Os tipos de entrada de número e faixa também aceitam parâmetros para min, max e step. Na maioria
dos casos, você pode excluir a etapa, pois o padrão é 1.
Exemplo:
Idade: <input type=”number” size=”6” name=”idade” min=”18” max=”99” value=”21”><br>
Satisfação: <input type=”range” size=”2” name=”satisfacao” min=”1” max=”5” value=”3”>
Lembrete
O atributo required é booleano, e quando presente, especifica que o

elemento deve ser preenchido antes de enviar o formulário.
Seguem exemplos de aplicação de validação HTML, conforme ilustrados nas figuras a seguir, que
utilizam dentro das tags as propriedades readonly e disabled:
92
Figura 75 – Validação com o campo readonly
Figura 76 – Validação com o campo disabled
O HTML válido é o único contrato que há com os fabricantes de browsers. A especificação diz como
devemos escrever documentos e como eles devem interpretá-los. Nos últimos tempos, a conformidade
com os padrões dos navegadores atingiu o ponto em que, desde que possamos escrever um código
válido, todos os principais browsers devem interpretar nosso código da mesma maneira, ou seja, esse
é quase sempre o caso do HTML, pelo menos com outros padrões tendo mais algumas diferenças no
suporte aqui e ali.
93
Unidade II
Saiba mais
Existe o validador do W3C, que auxilia na identificação e validação de

páginas HTML, que se encontra em:
SERVIÇO de validação de marcação. Validator. W3C. 2013. Disponível

em: http://validator.w3.org/. Acesso em: 21 set. 2020.
4.2 Lista ordenada e não ordenada
As listas HTML são usadas para apresentar a lista de informações de maneira bem formada e semântica.
Existem três tipos diferentes de lista em HTML e cada uma tem uma finalidade e significado específicos.
• Lista não ordenada: usada para criar uma lista de itens relacionados, em nenhuma ordem específica.
• Lista ordenada: usada para criar uma lista de itens relacionados, em uma ordem específica.
• Lista de descrição: usada para criar uma lista de termos e suas descrições.
Uma lista não ordenada criada usando o <ul> elemento e cada item da lista começa com o <li>
elemento. Os itens da lista em listas não ordenadas são marcados com marcadores:
Figura 77 – Exemplo de aplicação de lista não ordenada
94
Uma lista ordenada criada usando o <ol> elemento e cada item da lista começa com o <li> elemento.
As listas ordenadas são usadas quando a ordem dos itens da lista é importante:
Figura 78 – Exemplo de aplicação de lista ordenada
Exemplo: 1. Estudar essa unidade
2. Fazer exercícios
3. Realizar provas
A numeração de itens em uma lista ordenada geralmente começa com “1.”. No entanto, se você
deseja alterar, pode usar o start no atributo, conforme apresentado a seguir.
Figura 79 – Exemplo de aplicação de lista ordenada com aplicação do atributo start
Exemplo: 10. Desenvolver o PIM
11. Aplicar os conceitos de HTML
12. Eliminar qualquer dúvida no fórum Unip

95
Unidade II
Uma lista de descrição é uma lista de itens com uma descrição ou definição de cada um (conforme
apresentado a seguir). A lista de descrição é criada usando o <dl> elemento, em conjunto ao <dt>
elemento, que especifica um termo, e ao <dd> elemento, que especifica a definição do termo.
Os browsers geralmente processam as listas de definições colocando os termos e definições em linhas
separadas, em que as definições do termo são ligeiramente recuadas.
Figura 80 – Exemplo de lista de descrição
4.3 Tipo de marcador <ul type=”disc | circle | square”>
Por padrão, um navegador mostra um marcador redondo. Isso pode ser alterado usando o tipo de
atributo da tag <ul>, que mudará o tipo de marcador para a lista inteira.
Tipo de item <li type=””>
Pode-se definir o tipo de marcador para um item no meio da lista, definindo o tipo de atributo de
uma tag <li>, conforme apresentado a seguir.
96
Figura 81 – Exemplo de tipificação de lista
Valor do item <li value=””>
Você pode definir o valor de um item no meio da lista manualmente, se não desejar que ele siga a
letra ou o número anterior. Basta definir o value do atributo do item que você deseja alterar, conforme
apresentado na figura a seguir. Nota: os itens subsequentes seguirão o novo valor.
Figura 82 – Exemplo de tipificação de lista
97
Unidade II
Resumo
Nesta unidade, vimos como podemos combinar e integrar técnicas
de desenvolvimento web, conhecendo tags que possibilitam enriquecer
e principalmente auxiliar na validação das informações inseridas
em uma página web.
Abordamos conceitos de implementação que foram aplicados em HTML5,
com isso aumentando a consistência do trabalho executado na web. Também
conseguimos trabalhar com formulários que hoje continuam sendo de extrema
importância para cadastro de informações básicas de um cliente, listas
ordenadas e não ordenadas e tags que auxiliam na construção do formulário
Nesta unidade também abordamos métodos que auxiliam no
funcionamento de um formulário, como Get e Post, que são utilizados em
cenários específicos para o desenvolvimento web.
Vale ressaltar que existem inúmeras tags que poderiam agregar muito
no desenvolvimento web, no enriquecimento do layout e tornando as
páginas dinâmicas e agradáveis.
Sendo assim, ressaltamos que toda construção de páginas web trabalhando
com HTML5 convergem principalmente com a preocupação, atuam em desenvolver
aplicativos web com agilidade, qualidade e especialmente com a intenção de
visualizar as páginas em qualquer dispositivo conectado à internet. Vale ressaltar
também que o aprendizado adquirido será de grande importância para aplicação
dos conceitos no dia a dia do desenvolvimento de software para internet.
Exercícios
Questão 1. (Cespe 2020) Na linguagem HTML 5, geralmente considera-se determinado elemento
como o ponto central do conteúdo do documento, o qual pode ser, por exemplo, um post. Esse elemento,
que representa um conteúdo independente e altamente relevante, é o:
A) aside.
B) canvas.
C) embed.
D) article.
E) figure.
Resposta correta: alternativa D.
98
A) Alternativa incorreta.
Justificativa: aside: conteúdo relacionado à seção próxima. Análogo às barras laterais em

conteúdo impresso.
Justificativa: canvas: não tem relação com a questão.
Justificativa: embed: não tem relação com a questão.
D) Alternativa correta.
Justificativa: article: conteúdo independente de outras partes do sítio. É autocontido. Exemplo:

comentário enviado por usuário, post de um blog, artigo de uma revista.
Justificativa: figure: não tem relação com a questão.
Questão 2. (FCC 2019, adaptada) Considere o fragmento a seguir de uma página HTML5 que utiliza
elementos semânticos.
Para inserir a legenda “Figura 1 – Foto das dependências do TRF 3” na imagem, após
<img src=”trf. jpg” alt= “TRF3”>
deve-se colocar a instrução:
A) <label> Figura 1 – Foto das dependências do TRF3 </label>
B) <title> Figura 1 – Foto das dependências do TRF3 </title>
C) <legend> Figura 1 – Foto das dependências do TRF3 </legend>
99
Unidade II
D) <figlable> Figura 1 – Foto das dependências do TRF3 </figlabell>
E) <figcaption> Figura 1 – Foto das dependências do TRF3 </figcaption>
Resposta correta: alternativa E.
Análise da questão
Justificativa: o elemento <figure> é para ser usado em conjunto com o elemento <figcaption>.
Sua finalidade é marcar diagramas, ilustrações, fotos, e fragmentos de código.
100
Unidade III
5 ESTAÇÃO CSS3
5.1 CSS3
5.1.1 Introdução a CSS3
Assim como as novas especificações do HTML 5, o CSS3 (ou CSS versão 3, para ser mais preciso)
é definido como um conjunto mais recente de especificações projetadas para efetuar o molde,
assim proporcionando a experiência de modelar e definir exatamente quais recursos a versão mais
recente do CSS possui.
O CSS3 também não é um “novo CSS” como muitas pessoas pensam; como o HTML5, é
retrocompatível com tudo o que veio antes. No futuro, no entanto, haverá uma incrível quantidade de
novas funcionalidades, permitindo uma infinidade de possibilidades criativas que simplesmente não
existiam nas versões anteriores.
Figura 83 – Exemplo de estrutura HML5 com CSS
Preste muita atenção à tag do link no cabeçalho, conforme ilustrado a seguir, pois ela tem por
definição um arquivo com o nome de styles.css, ou seja, ele é um arquivo com o nome (ou similar) que
iremos apresentar na maior parte do nosso código CSS.
101
Unidade III
No entanto, se modificarmos o nome, precisamos lembrar de que usamos um nome diferente ao criar
documentos HTML básicos para experimentar. Existe também a opção de verificar a execução da página
acionando o botão F12 do teclado e visualizando as interações da página, conforme apresentado a seguir.
Figura 84 – Ferramentas do navegador Google Chrome mostrando o arquivo CSS falhando ao carregar
Se a página HTML não localizar um link com arquivo CSS, nenhuma das regras que se encontram no
CSS serão aplicadas a ela.
Saiba mais
A utilização do browser Google Chrome é uma recomendação. Para

realização da instalação desse browser, acessar o link disponível em:
FAÇA mais com o novo Chrome. Google. Disponível em: https://www.

google.pt/intl/pt-PT/chrome/. Acesso em: 21 set. 2020.
O seguinte artigo nos dá uma explanação sobre a utilização do modo

desenvolvedor do browser Google Chrome:
USE as ferramentas de desenvolvedor do Google Chrome para verificar tags.

Ajuda do Campaign Manager. Support Google. 2020. Disponível em: https://
support.google.com/dcm/answer/2828688?hl=pt-BR. Acesso em: 21 set. 2020.
102
5.1.2 Definindo CSS
CSS vem de cascading style sheets, e a ideia por trás dele é muito simples e prática, os documentos
CSS são gerados apenas com a finalidade de estilizar (ou seja, efetuar a gestão de cores, tamanho,
layout, posição e muito mais) o conteúdo de um documento de marcação HTML.
Sendo assim, embora o objetivo do código HTML seja estruturar o documento, o CSS tem em sua
existência a definição de como esse conteúdo é apresentado ao usuário final da web.
De modo básico, o CSS foi originalmente gerado para garantir a redução de quantidade de marcação
que estava sendo utilizada em um documento HTML para ditar, assim, a aparência de um trecho
específico de HTML, conforme apresentado a seguir.
Figura 85 – Exemplo de código pré-CSS
Como podemos ver no código HTML apresentado na figura anterior, é necessário muito mais
marcação para produzir um cabeçalho simples, em uma linha, em negrito e vermelho, do que a maioria
dos que são utilizados atualmente, conforme apresentado a seguir:
Figura 86 – A saída produzida pelo exemplo de código pré-CSS
103
Unidade III
As regras CSS resolvem dois desses problemas imediatamente apresentados no código. Primeiro, eles
geralmente têm por definição as regras que compõem a aparência do texto em um arquivo apartado, ou
seja, isso significa que um designer ou qualquer pessoa da área gráfica pode reajustar facilmente essas
regras, sem ter necessidade de se preocupar com o código no arquivo HTML.
Em segundo lugar, conseguem promover a reutilização de uma regra em diversos elementos através
da utilização do atributo class, o que significa que podemos especificar as configurações somente uma
vez e informar a marcação quando utilizá-las.
Exemplo de regra de estilo vermelho em negrito, agora definida em styles.css, esse arquivo deve ser
salvo com a extensão .css.
Quadro 8
.boldred
{
font-family: serif;
font-size: 20pt;
color: red;
}
Podemos notar imediatamente a diferença, para reutilizar a regra em outra linha, precisamos
apenas adicionar class = “boldred” como um atributo para nossa tag, sem precisar alterar a regra
de estilo de vermelho para azul, sendo que todos os elementos que utilizarem essa regra sofrerão
alterações para uma cor azul sem precisar tocar em nenhuma marcação HTML.
5.1.3 Seletores CSS
Os seletores de ID geralmente são utilizados deliberadamente para gerar um controle de hierarquia

em um documento CSS e atuam em pleno uso da natureza em modelo cascata da tecnologia.
A cascata pode ser utilizada com grande efeito quando conseguimos encadear seletores, porque
nos possibilita aprofundar a marcação HTML, sem precisar ter certeza de que ditamos apenas a
aparência da marcação.
Sendo assim, suponhamos que por um momento estamos desenvolvendo um documento HTML
contendo postagens de notícias acadêmicas.
Todas as publicações de notícias no documento precisam em definição obedecer ao mesmo conjunto

de regras de estilo e, como tal, assumem a mesma aparência para cada publicação de notícia.
104
Cada postagem pode ser exibida em um plano de fundo de cor diferente do restante da página e
sempre deve ter cabeçalhos em negrito e em azul com texto de parágrafo menor em vermelho, conforme
implementação realizada na figura.
Figura 87 – Implementação de CSS
Embora o código possa funcionar muito bem e produza a saída desejada (conforme apresentado
na figura a seguir), podemos tirar vantagem da natureza em cascata do CSS, sendo que seria possível
tornar possível as coisas um pouco mais óbvias – até o ponto em que nosso HTML e CSS pudessem estar
descrevendo suas próprias intenções.
105
Unidade III
Figura 88 – Resultado da implementação de CSS
Desde que os elementos estejam dentro de uma seção que tenha o ID nomeado, eles serão coloridos
de acordo. Devemos observar também que o comportamento em cascata pode ser apresentado de
maneira que não se aplica apenas a seletores baseados em ID, conforme apresentado a seguir.
Figura 89 – Exemplo de código CSS utilizando seletores de classe
106
O uso de um seletor em cascata com base em classe, como o citado, pode reutilizar sua classe
de notícias em diversos lugares em seu HTML, e qualquer elemento h1 ou p adicionado dentro desse
elemento assumirá automaticamente a aparência dos cabeçalhos azuis com texto vermelho.
5.1.4 Pseudosseletores
Assim como o “pseudocódigo”, o pseudosseletor não é um seletor completo por si só, mas uma extensão
para um seletor existente. O exemplo mais conhecido disso é o foco utilizado nas tags de âncora HTML.
Um pseudosseletor funciona alterando uma regra existente para estar ativa, sendo que apenas em
um cenário determinado, que no caso de estar em semelhança, é quando o usuário passa o mouse sobre
o elemento em questão, conforme apresentado a seguir.
Figura 90 – Exemplo para apresentar o seletor pseudo-hover
Antes do CSS3, havia também o pseudo-hover (conforme apresentado na figura a seguir), que
gerava a possibilidade de trabalhar em todos os navegadores; normalmente, era possível aplicar apenas
a tags de âncora HTML, que eram passadas, visitadas, ativas e vinculadas, utilizadas para estilizar tags de
âncora para feedback visual, sendo assim, dependendo de um usuário ter visitado ou não o link.
107
Unidade III
Figura 91 – Exemplo para apresentar o código CSS do pseudo-hover
Infelizmente, a partir do CSS3, embora esses estilos ainda funcionem conforme o esperado, o número
de opções que podem ser modificadas por eles foi estritamente limitado, isso foi ocasionado em resposta
a uma invasão de privacidade, onde proprietários de sites mal-intencionados os usavam para rastrear se
os usuários haviam visitado um determinado site ou não.
Saiba mais
Recomenda-se a leitura da Lei n. 13.709/18 (Lei Geral de Proteção

de Dados – LGPD):
BRASIL. Presidência da República. Casa Civil. Subchefia para Assuntos

Jurídicos. Lei n. 13.709, de 14 de agosto de 2018. Lei Geral de Proteção
de Dados Pessoais (LGPD). Brasília, 2018. Disponível em: http://www.
planalto.gov.br/ccivil_03/_ato2015-2018/2018/lei/l13709.htm. Acesso
em: 17 set. 2020.
5.1.5 Seletores diretos
Esse é o mais simples de todos os seletores disponibilizados e, como o próprio nome sinaliza, é
utilizado para selecionar de maneira direta um nome de elemento conhecido, ou seja, também é possível
encontrar os termos de tipo de seletores, seletores de elemento e seletores de tag.
108
Não existe uma terminologia estabelecida para esse tipo de seletor e tem por definição que sua
utilização depende muito do fabricante do browser, ou seja, para fins de desenvolvimento proprietário,
utilizamos o seletor direto simplesmente porque estamos segmentando de forma direta uma entidade
nomeada, conforme apresentado na figura a seguir:
Figura 92 – Exemplo para apresentar o código CSS dos seletores diretos hover
Depois que esse item é adicionado a uma folha de estilos (CSS), qualquer item na marcação HTML do
documento que consistir em uma marca <p> </p> será apresentado em cor verde, conforme ilustrado
a seguir, linhas de 4 a 9, independentemente de sua classe, ID ou qualquer outra situação.
Lembrete
Aplica-se um estilo de cor verde para a tag <p>, ou seja, todo texto
inserido na página envolvido com ela será apresentado nessa cor.
Sendo assim, vale lembrar que é possível combinar seletores básicos, para selecionar facilmente
apenas os elementos h1, que são descendentes de divs.
5.1.6 Seletor universal (*)
O seletor target all realiza o trabalho exatamente como o próprio nome diz: tem como premissa
localizar tudo o que pode no espaço em que está operando, ou seja, isso significa que, se estivermos
dentro de um seletor com base em ID, tudo o que estiver sob o controle desse seletor será afetado.
109
Unidade III
A utilização do símbolo * (asterisco) determina imediatamente que ele se comporte como um

curinga, sendo o que mais ganha campo de desenvolvimento e selecionando o máximo possível.
No início, essa ação pode ser encarada com bons olhos, até que repentinamente percebamos o quanto
a nossa página fica mais lenta em um dispositivo móvel ou até mesmo em uma página com milhões de
elementos alinhados.
O seletor universal foi desenhado e implementado, pensando principalmente nas possibilidades

de se fazer mudanças radicais como parte de uma configuração inicial, ou até mesmo como gerar
uma definição de um modelo CSS inteiro de uma página para um conjunto conhecido de padrões, por
exemplo, como margens de 0 pixel e sem bordas.
Normalmente, é utilizado em redefinições CSS para inicializar em um estado conhecido, sendo que
muitas das conhecidas estruturas de interface do usuário de front-end realizam uso extensivo dela para
colocar sua página em um estado conhecido antes de efetuar, assim, qualquer estilo personalizado que
eles possam disponibilizar para o seu trabalho.
O seletor universal deverá ser utilizado com muita moderação, visto que sua esfera de influência
deve ser a menor possível, para não onerar de forma drástica o desempenho de nossas páginas web,
conforme apresentado na figura a seguir.
Figura 93 – Exemplo para apresentar o código CSS do seletor universal
A propriedade margin, conforme ilustrado na figura a seguir, simplesmente adiciona uma margem
ao elemento. Podemos utilizar qualquer medida Css (px, pt, em, %…) como tamanho da propriedade
margin, além disso conseguimos atribuir valores negativos.
110
Quadro 9
#elemento {
margin-top: 15px; /* – propriedade que define a margem superior de um elemento
margin-right: 10px; /* – propriedade que define a margem direita de um elemento
margin-bottom: 25px; /* – propriedade que define a margem inferior de um elemento
margin-left: 35px; /* – propriedade que define a margem esquerda de um elemento
}
O padding, também ilustrado na figura a seguir, tem um funcionamento muito similar ao do margin,
porém, em vez de dar um espaçamento externo, ele realiza o espaçamento interno da página.
Quadro 10
#elemento {
padding-top: 25px; /* – propriedade que define o espaço de preenchimento superior de um elemento
padding-right: 45px; /* – propriedade que define o espaço de preenchimento no lado direito de um elemento
padding-bottom: 35px; /* – propriedade que define o espaço de preenchimento inferior de um elemento
padding-left: 15px; /* – propriedade que define o espaço de preenchimento no lado esquerdo de um elemento
}
#elemento { padding: 25px 15px; } /* Top/bottom – right/left */
#elemento { padding: 25px; }/* top/right/bottom/left */
Deve-se ter cuidado ao utilizar o padding, pois ele aumenta a largura do elemento. Caso seu
elemento tenha um width de 200px e utilizarmos um padding-left de 50px, ele vai passar a ter uma
largura de 250px. Então, sempre que necessário, deve-se compensar o padding do elemento reduzindo
o width ou o height.
Figura 94 – Margin/padding – CSS
111
Unidade III
Depois que incluímos em algum lugar próximo à parte superior do nosso arquivo de estilo,
podermos ter certeza de que, imediatamente, nenhuma das suas regras terá margens ou preenchimento
aplicados a elas.
Lembrete
A propriedade margin simplesmente adiciona uma margem ao elemento.

Pode-se utilizar qualquer medida Css (px, pt, em, %...) como tamanho, além
disso pode-se atribuir valores negativos.
O padding tem um funcionamento muito similar ao do margin, porém,

em vez de dar um espaçamento externo, ele realiza o espaçamento
interno da página.
5.1.7 Seletor adjacente
O seletor adjacente proporciona uma seleção dos elementos imediatamente próximos um do outro
e funciona apenas uma vez para cada ocorrência, conforme apresentado a seguir.
Figura 95 – Exemplo de marcação HTML para demonstrar o seletor adjacente
112
Aplicando-se a regra de CSS, conforme apresentado na figura, teremos a seguinte marcação:
Figura 96 – Exemplo de regra CSS para demonstrar o seletor adjacente
Sendo assim, obtém-se o resultado ilustrado no browser conforme apresentado a seguir:
Figura 97 – Resultado da aplicação do seletor adjacente
113
Unidade III
Somente o elemento p próximo ao elemento h1 seria alterado para uma cor vermelha, ou seja, a
segunda linha de texto (e quaisquer outras que possam seguir) permaneceriam inalteradas, assim como
os próprios elementos h1.
5.1.8 Seletor de atributo
No CSS3, no entanto, os seletores de atributos são extremamente poderosos e possibilitam que

possamos montar um estilo bastante inteligente dos elementos. Primeiramente, precisamos definir o
que realmente é um seletor de atributos.
Ao contrário dos seletores que já estudamos nessa unidade, um seletor de atributos não é considerado
uma construção de caractere único que fica entre dois destinos, e sim um apêndice com diversos
caracteres para uma regra principal, que contém suas próprias regras de processamento interno.
Os seletores de atributos podem ser definidos como um conjunto personalizado de expressões

de pesquisa, especificamente para identificar elementos com base no valor ou parte de um atributo
anexado a eles ao longo de sua estrutura, conforme apresentado na figura.
Figura 98 – Exemplo de marcação HTML com atributos personalizados
E possível ver no exemplo citado na figura que criamos uma lista não padrão e bastante ordenada
que contém itens como elementos do tipo âncora, porém isso não é nada incomum, é algo que
podemos certamente nos acostumar em observar nos links de navegação em documentos HTML.
O que fizemos, no entanto, foi utilizar o atributo rel para marcar a relação do link, especificando assim,
se é externo ou interno.
114
Se quisermos estilizar os dois tipos diferentes de maneiras distintas, poderíamos, então, em teoria,
apenas adicionar uma classe, como .internal ou .external, porém pode haver situações em que a marcação
HTML pode ser gerada dentro de um processo sobre o qual não se tenha esse controle, sendo assim, talvez
não seja possível adicionar classes de saída dessa maneira.
Então aqui entra em ação o seletor de atributos. Pode-se utilizá-lo para direcionar um atributo
nomeado específico dentro do elemento e, pode-se empregá-lo não somente para segmentar uma
sequência completa, mas como parte de um nó.
Primeiro, vamos observar a figura a seguir, como podemos aplicá-los de links anteriores. Vamos
adicionar as seguintes regras de estilo à nossa folha de estilos, sendo que iremos supor que já fizemos a
inclusão do HTML anterior ao nosso documento.
Figura 99 – Exemplo de regras do seletor de atributos
Apenas usando duas regras distintas, segmentamos de maneira fácil os dois tipos diferentes de links,
simplesmente por causa da diferença no atributo rel (conforme figura anterior). A principal vantagem
do estudo realizado é que agora não precisamos nos preocupar em garantir que uma classe específica
seja aplicada a um determinado link, tornando a manutenção do documento muito mais fácil, ágil e
menos propensa a erros, conforme apresentado a seguir.
115
Unidade III
Figura 100 – Resultado da aplicação de regras do seletor de atributos
Utilizamos o atributo “rel” para definir um relacionamento interno ou externo em um elemento

âncora. Em termos das especificações do W3C, essa provavelmente não seria a melhor forma de se fazer
isso e, muito provavelmente o HTML poderia falhar na validação se fosse testado com uma ferramenta
de validação do HTML 5, porém isso não significa que precisamos voltar a usar um atributo de classe.
Vamos imaginar por um instante que todos os seus links externos tenham uma URL totalmente
qualificada, e todos os seus links internos tenham apenas uma folha de página relativa, ou seja, nesse
caso, poderia se escrever a marcação da seguinte maneira, como apresentado a seguir:
Figura 101 – Resultado da aplicação de regras do seletor de atributos
Se examinarmos a diferença nos atributos href, podemos perceber que todos os links externos
começam com “http: //” e os internos não, ou seja, se utilizarmos o seletor “o valor do atributo começa
com”, agora podemos estilizar facilmente os externos com uma cor diferente.
O que abordamos aqui nem sequer arranhou a superfície do potencial disponível, levando-se em
consideração especialmente quando se trata de seletores de atributos, porém no HTML5, há um novo
conceito de atributo chamado atributo de dados, que assume a forma de dados seguida praticamente
por um nome personalizado, por exemplo:
• data-username
• data-recordindex
116
É possível utilizar esses atributos de dados em qualquer elemento, para qualquer finalidade, e ainda
mais quando efetuamos a combinação com os seletores corretos, eles permitem utilizar o HTML5 para
descrever facilmente suas próprias intenções e principalmente seu estilo.
5.1.9 Seletor de foco
Como o próprio nome sugere, o foco é utilizado quando um elemento de entrada tem foco em um
documento, ou seja, isso geralmente é utilizado em formulários para destacar um campo ativo aguardando
o seu preenchimento, conforme apresentado a seguir.
Figura 102 – Exemplo de marcação simulada de formulário HTML
117
Unidade III
Na sequência, iremos adicionar uma regra simples a nossa folha de estilo:
Figura 103 – Aplicando CSS
Para o nosso exemplo, qualquer elemento que possa receber o foco do usuário irá alterar a cor,
conforme especificado quando o foco for alternado:
Figura 104 – Resultado do exemplo apresentado no navegador
Importante ressaltar que consideramos foco quando o cursor está piscando no input selecionado, no
nosso exemplo poderia ser no campo “nome do usuário” ou “e-mail”.
118
5.1.10 Seletor ativado ou desativado
Entre os muitos dos novos atributos que podem facilmente ser aplicados aos elementos na
especificação do HTML5 está o atributo desativado (disabled). Podemos utilizá-lo como qualquer
outro atributo simplesmente adicionando “disabled” a um elemento em sua marcação, conforme
Figura 105 – Exemplo de marcação simulada de formulário HTML com elementos desativados
Na sequência, adicionaremos uma regra simples a nossa folha de estilo: se removermos o atributo
desativado do elemento, a entrada retornará facilmente ao seu estado original, sendo assim, essa regra
geralmente é muito utilizada para apresentar campos somente de leitura em um editor de registros ou
até mesmo para mostrar campos que não são aplicáveis ao formulário atual, por exemplo, poderíamos
realizar uma marcação de um formulário para que os campos de endereço pudessem ser visualizados
apenas quando uma caixa de seleção para enviar e-mail para esse endereço estivesse marcada, conforme
119
Unidade III
Figura 106 – Exemplo de aplicação de regra CSS para estilizar elementos desabilitados
Se utilizássemos a estrutura da interface do usuário do bootstrap, poderíamos observar que alguns

elementos, quando utilizados em um formulário, têm um pequeno círculo vermelho de parada apresentado
sobre eles quando se passa o mouse com um ponteiro. Ou seja, isso é realizado da mesma maneira,
utilizando a regra desativada para alterar o estilo do ponteiro do mouse. O pseudosseletor ativado é o
contrário lógico de desativado e aplica o estilo fornecido a um elemento que não está desativado.
Observação
Bootstrap pode ser definido como um framework web com

código‑fonte aberto para fins de desenvolvimento de componentes de
interface e front-end para sites e aplicativos web que utilizam HTML, CSS e
JavaScript, baseado praticamente em modelos de design para a tipografia,
contribuindo para uma melhor experiência do usuário em um site amigável
e principalmente responsivo.
Saiba mais
Para conhecer melhor sobre esse assunto, recomendamos a leitura da

documentação do bootstrap em:
GETBOOTSTRAP. Introdução. Disponível em: https://getbootstrap.com/

docs/4.4/getting-started/introduction/. Acesso em: 22 set. 2020.
120
Conforme apresentado na figura a seguir, um elemento é classificado como ativado, quando, por
exemplo, não há motivo para desativá-lo, ou especificamente, quando não possui um atributo desativado
aplicado, ou seja, pode-se observar que um elemento também pode ser classificado como desativado se a
propriedade boolean (true/falsa) desativada do elemento estiver configurada como true em seu objeto de
documento utilizando JavaScript. Como em outros seletores, a responsabilidade de habilitar e desabilitar
pode ser feita explicitamente com base no estado do elemento. Isso significa que não é necessário garantir
que nos elementos corretos existam, por exemplo, as classes aplicadas corretamente.
Figura 107 – Exemplo de regra CSS para estilizar elementos ativados
Observação
Em ciências exatas e tecnológicas, boolean pode ser definido como um

tipo de dado primitivo que possui dois valores (0 – falso e 1 – verdadeiro),
denominado boolean em uma honrosa homenagem a George Boole, que
diante de seus estudos, determinou um sistema de lógica algébrica pela
primeira vez em meados do século XIX.
5.1.11 Seletor válido ou inválido
Um dos ótimos recursos incrementados ao HTML5 é a validação do lado do browser, que pode
ser utilizada para fazer com que o browser efetue uma validação das entradas de um formulário
antes de enviá-lo.
121
Unidade III
Com o seletor desabilitado, os pseudosseletores aqui se aplicam a elementos somente quando

utilizados aos atributos e a marcações extras, fornecidos na especificação.
As alterações podem não ser tão óbvias no início, porém, se observarmos a caixa de nome de usuário,
poderemos visualizar que agora ela possui um atributo obrigatório, ou seja, a entrada de e-mail, no
entanto, não possui mais um tipo de texto, agora ele tem um tipo de e-mail.
Figura 108 – Exemplo de marcação simulada de formulário HTML com elementos validáveis
122
Conforme apresentado na figura a seguir, o nome do usuário aparece imediatamente vermelho,

porque é obrigatório, portanto, até ser preenchido, será classificado como inválido. O e-mail é válido
pois apenas apresentamos que ele deve ter sua entrada validada como um endereço de e-mail, por
exemplo, não afirmamos que isso seria necessário como entrada, portanto, ter um e-mail em branco
pode ser considerado válido.
Figura 109 – Exemplo de regras de validação CSS3
No entanto, se iniciarmos a nossa digitação, ele mudará para vermelho e voltará a verde até que a
entrada seja sinalizada corretamente ou removida por completo, conforme ilustrado a seguir:
Figura 110 – Resultado do exemplo de regras de validação CSS3
Utilizar válido e inválido é uma excelente maneira de fornecer feedback ao usuário, mas vê-los
imediatamente assim que o formulário é apresentado geralmente não é considerada uma boa prática.
123
Unidade III
Observação
Feedback pode ser definido como a informação que o emissor obtém da

reação do receptor a sua mensagem, ou seja, tem por finalidade servir para
avaliar os resultados da transmissão.
Sendo assim, por esse motivo, normalmente não os utilizamos diretamente aos elementos de
entrada, de forma geral anexamos a um nome de classe/ID e, em consequência, verificamos, aplicamos
e utilizamos JavaScript quando o formulário é enviado.
5.1.12 Seletor verificado
O pseudosseletor marcado é utilizado ao atuar com elementos de caixa de seleção e rádio, ou seja,
sua premissa é simples e prática: se o elemento estiver marcado ou selecionado, essa regra será aplicada;
caso contrário, não será.
Figura 111 – Exemplo de maneira simples de caixas de seleção e botões de opção
124
Como as caixas de seleção e os botões de opção não alteram a cor, utilizaremos uma estratégia
muito diferente para esse exemplo, e iremos alterar o tamanho dos controles, sendo assim, iremos
adicionar as seguintes regras a nossa folha de estilos, conforme apresentado a seguir:
Figura 112 – Exemplo de estilos CSS que demonstram o uso do pseudosseletor verificado
A utilização de seletores verificados como este é o método utilizado, por exemplo, pelos kits de
ferramentas da interface do usuário, como o materialize e o bootstrap, para produzir botões de alternância
e rádio personalizado e verificar grupos desenvolvidos a partir de listas de ícones. Caso desejássemos
criar caixas de seleção personalizadas, bastaria combinar esse padrão com pseudoelementos, como
antes e depois, para assim adicionar/remover conteúdo dinamicamente a sua marcação, conforme
ilustrado a seguir.
125
Unidade III
Figura 113 – Resultado do exemplo de estilos CSS que demonstram o uso do pseudosseletor verificado
Saiba mais
O materialize é um framework front-end responsivo que é baseado

totalmente em material design, porém o que diferencia o materialize
de outros frameworks front-end, como o bootstrap, por exemplo, é que
o materialize é completamente baseado no material design do Google,
enquanto o bootstrap tem como base de construção a primeira linguagem
de design para dispositivos móveis e na linguagem de design plano. Para
saber mais sobre esse assunto, recomendamos a seguinte leitura:
MATERIALIZE. Materializecss. Disponível em: https://materializecss.

com/. Acesso em: 22 set. 2020.
6 ESTUDO DE CORES
No esquema numérico hexadecimal, os dígitos são definidos e contabilizados de 0 a F, em vez de

0 a 9, como no sistema numérico decimal normal, ou seja, quando observamos atentamente, notamos
que podemos ajustar todos esses valores em 4 bits e, como esse número máximo pode representar em
decimal como o 15, então 0 a F realmente significa 0 a 15.
Se dobrarmos isso, os 4 bits se tornarão 8 bits e o máximo que poderíamos seria ajustar para 255,
então FF (nosso maior número hexadecimal) se tornará 255 (nosso maior número decimal), sendo
que nosso objetivo aqui não é transformar isso em uma lição de matemática hexadecimal, e sim
demonstrar apenas que um valor de cor é composto de 256 (0 a 255) níveis de vermelho, verde e azul,
com 0 sendo nenhuma cor e 255 sendo o valor máximo de cor. Por exemplo, se quiséssemos um cinza
126
médio, poderíamos utilizar 127 para os valores de vermelho, verde e azul, que, quando traduzidos,
forneceriam #7F7F7F.
6.1 Nomes das cores
O CSS2 introduziu nomes próprios para algumas cores, mas elas não foram realmente divulgadas;
isso, no entanto, foi bastante expandido com CSS3, conforme apresentado a seguir.
Tabela 4 – Os 147 nomes de cores CSS3
Nome da cor Hexadecimal Cor Nome da cor Hexadecimal Cor Nome da cor Hexadecimal Cor
AliceBlue #F0F8FF Gainsboro #DCDCDC MistyRose #FFE4E1
AntiqueWhite #FAEBD7 GhostWhite #F8F8FF NavajoWhite #FFDEAD
Aqua #00FFFF Gold #FFD700 Navy #000080
Aquamarine #7FFFD4 GoldenRod #DAA520 OldLace #FDF5E6
Azure #F0FFFF Gray #808080 Olive #808000
Beige #F5F5DC Grey #808080 OliveDrab #6B8E23
Bisque #FFE4C4 Green #008000 Orange #FFA500
Black #000000 GreenYellow #ADFF2F OrangeRed #FF4500
BlanchedAlmond #FFEBCD HoneyDew #F0FFF0 Orchid #DA70D6
Blue #0000FF HotPink #FF69B4 PaleGoldenRod #EEE8AA
BlueViolet #8A2BE2 IndianRed #CD5C5C PaleGreen #98FB98
Brown #A52A2A Indigo #4B0082 PaleTurquoise #AFEEEE
BurlyWood #DEB887 Ivory #FFFFF0 PaleVioletRed #DB7093
CadetBlue #5F9EA0 Khaki #F0E68C PapayaWhip #FFEFD5
Chartreuse #7FFF00 Lavender #E6E6FA PeachPuff #FFDAB9
Chocolate #D2691E LavenderBlush #FFF0F5 Peru #CD853F
Coral #FF7F50 LawnGreen #7CFC00 Pink #FFC0CB
CornflowerBlue #6495ED LemonChiffon #FFFACD Plum #DDA0DD
Cornsilk #FFF8DC LightBlue #ADD8E6 PowderBlue #B0E0E6
Crimson #DC143C LightCoral #F08080 Purple #800080
Cyan #00FFFF LightCyan #E0FFFF RebeccaPurple #663399
DarkBlue #00008B LightGoldenRodYellow #FAFAD2 Red #FF0000
DarkCyan #008B8B LightGray #D3D3D3 RosyBrown #BC8F8F
DarkGoldenRod #B8860B LightGrey #D3D3D3 RoyalBlue #4169E1
DarkGray #A9A9A9 LightGreen #90EE90 SaddleBrown #8B4513
DarkGrey #A9A9A9 LightPink #FFB6C1 Salmon #FA8072
DarkGreen #006400 LightSalmon #FFA07A SandyBrown #F4A460
DarkKhaki #BDB76B LightSeaGreen #20B2AA SeaGreen #2E8B57
DarkMagenta #8B008B LightSkyBlue #87CEFA SeaShell #FFF5EE
DarkOliveGreen #556B2F LightSlateGray #778899 Sienna #A0522D
DarkOrange #FF8C00 LightSlateGrey #778899 Silver #C0C0C0
DarkOrchid #9932CC LightSteelBlue #B0C4DE SkyBlue #87CEEB
DarkRed #8B0000 LightYellow #FFFFE0 SlateBlue #6A5ACD
127
Unidade III
Nome da cor Hexadecimal Cor Nome da cor Hexadecimal Cor Nome da cor Hexadecimal Cor
DarkSalmon #E9967A Lime #00FF00 SlateGray #708090
DarkSeaGreen #8FBC8F LimeGreen #32CD32 SlateGrey #708090
DarkSlateBlue #483D8B Linen #FAF0E6 Snow #FFFAFA
DarkSlateGray #2F4F4F Magenta #FF00FF SpringGreen #00FF7F
DarkSlateGrey #2F4F4F Maroon #800000 SteelBlue #4682B4
DarkTurquoise #00CED1 MediumAquaMarine #66CDAA Tan #D2B48C
DarkViolet #9400D3 MediumBlue #0000CD Teal #008080
DeepPink #FF1493 MediumOrchid #BA55D3 Thistle #D8BFD8
DeepSkyBlue #00BFFF MediumPurple #9370DB Tomato #FF6347
DimGray #696969 MediumSeaGreen #3CB371 Turquoise #40E0D0
DimGrey #696969 MediumSlateBlue #7B68EE Violet #EE82EE
DodgerBlue #1E90FF MediumSpringGreen #00FA9A Wheat #F5DEB3
FireBrick #B22222 MediumTurquoise #48D1CC White #FFFFFF
FloralWhite #FFFAF0 MediumVioletRed #C71585 WhiteSmoke #F5F5F5
ForestGreen #228B22 MidnightBlue #191970 Yellow #FFFF00
Fuchsia #FF00FF MintCream #F5FFFA YellowGreen #9ACD32
Em qualquer lugar em que precisarmos especificar uma cor em suas regras de CSS, poderíamos
utilizar esses nomes de cores.
Saiba mais
Se em alguns momentos do desenvolvimento não se lembra dessas cores,

anexo aqui dois links interessantes, que irão auxiliar muito nessa pesquisa:
BISQUE. Colors Commutercreative. Disponível em: http://www.colors.

commutercreative.com. Acesso em: 22 set. 2020.
O site CSS-Tricks não lista apenas as cores, mas também os valores de

#rrggbb para cada uma delas.
COYIER, C. Named colors and hex equivalentes. CSS-Tricks, janeiro de

2012. Disponível em: https://css-tricks.com/snippets/css/named-colors-
and-hex-equivalents/. Acesso em: 22 set. 2020.
Ao utilizar o nome da cor transparente, tornamos o objeto ao qual está aplicando o valor da cor
100% transparente, sendo assim, não há como variar o nível de transparência usando nomes de cores e
valores hexadecimais, porém podemos definir a regra CSS de opacidade em um elemento, a menos que
colocássemos como escolha a utilização de valores diretos de cores.
128
6.2 Valores das cores
Se as cores nomeadas não atuarem de forma suficiente e a notação hexadecimal for muito complicada
para o nosso estudo, temos uma boa notícia, sabendo que, com o CSS3, existe a possibilidade de definir
suas cores utilizando apenas um dos quatro novos tipos de dados, ou seja, eles são utilizados basicamente
especificando-os como uma palavra-chave seguida por um conjunto de valores de parâmetros entre
parênteses. Os valores entre parênteses podem assumir um valor fixo ou um valor percentual.
• # 7F7F7F
• rgb (127, 127, 127)
• rgb (50%, 50%, 50%)
Todos esses três valores, quando utilizados em qualquer lugar no CSS em que uma cor possa ser
especificada, resultarão na geração da mesma cor.
6.3 Fontes
Durante quase toda a vida útil da especificação HTML/CSS, muitos desenvolvedores e designers
da web ficaram restritos ao mesmo conjunto principal de fontes para sua tipografia de atuação. Caso
quiséssemos utilizar uma determinada fonte, frequentemente precisávamos preparar o texto em um
pacote artístico ou processador de texto que tivesse acesso à fonte desejada e, na sequência, salvar a
imagem como um arquivo de imagem compatível com o browser ou até mesmo como uma captura de
tela do seu processador de texto para utilizar no documento HTML.
Erros de ortografia e alterações simples de texto levavam um tempo longo para serem corrigidas, e
isso realmente era uma tarefa árdua para qualquer outra coisa além dos banners ou manchetes simples.
Sendo assim, embora houvesse uma quantidade de frustações em torno do uso de fontes,
havia também boas e sólidas razões para se restringir as coisas, e essas praticamente se resumiam a
diferenças de plataforma.
Os browsers antigos não eram tão capazes quanto aqueles de hoje, e muitos sistemas operacionais
tinham apenas uma quantidade limitada de fontes instaladas, sendo assim, por isso, os comitês de
HTML formularam uma lista de fontes conhecidas que estavam praticamente garantidas em qualquer
plataforma com qualquer tipo de fonte e browser gráfico.
Não trataremos apenas de Windows e Mac, pois no início dos anos 1990 havia mais variações de
Unix e Linux e suas distribuições em seus ambientes desktop específicos. Então, nessa mesma época
(anos 1990), iniciou-se uma padronização utilizando itens como X11 e gerenciadores de janelas, como
Gnome e KDE, que auxiliaram nesse trabalho.
129
Unidade III
Observação
Gnome é um projeto de software livre que atende como área de

atuação o ambiente de trabalho, de mesmo nome (para os usuários), e a
sua plataforma de desenvolvimento (para os desenvolvedores), sendo que
o projeto dá ênfase de maneira especial à usabilidade, acessibilidade e
internacionalização.
KDE é uma comunidade internacional de software livre que desenvolve

um conjunto de aplicativos multiplataforma desenhados e customizados
para o funcionamento em conjunto com sistemas tais como: Linux, Solaris
Microsoft Windows e Apple Mac OS X.
Só para se ter uma ideia da lista de fontes básicas restritas que quase sempre garantiam o
trabalho, tem-se:
• Sans-serif
• Serif
• Fantasy
• Cursive
• Monospace
Se quiséssemos especificar nossa fonte utilizando uma dessas opções, primeiramente obteríamos
a versão dessa plataforma e, embora nem sempre fosse exatamente idêntica, a aparência, o estilo e a
sensação estariam próximas o suficiente para que o layout do nosso design não fosse muito afetado e
prejudicado no resultado de sua apresentação.
Dependendo da plataforma de uso, também é possível disponibilizar substituições a serem utilizadas,

onde geralmente, em sites desenvolvidos em máquinas Windows, veríamos fontes descritas, tais como:
Times, “Times New Roman”, Serif.
Por exemplo, se especificássemos Impact Bold, Sans-serif, qualquer plataforma que tivesse Impact
Bold instalada seria exibida como pretendido, ou seja, se a fonte não estivesse disponível, a Sans-serif
seria utilizada, como padrão.
Não existia uma fonte original e muitos designers simplesmente desmoronavam pelo fato de não
renderizarem corretamente, porém com o CSS3, houve uma implementação de correção, que fornece
agora a capacidade de empacotar fontes em diferentes formatos com seu aplicativo da web, fazer o
130
download do servidor e utilizá-las se detectar que a plataforma de destino não as tem disponíveis, ou
até mesmo no caso de não estarem aderentes.
Isso ainda não significa que não se deva utilizar a lista de fontes seguras da web, porém basta uma
perda de conectividade e estaremos de volta à estaca zero.
6.4 Gerando uma fonte adequada
Talvez a maneira mais eficiente de usar uma fonte para o design seja utilizar o site Font Squirrel, que
pode ser utilizado basicamente para converter uma fonte do seu sistema em um kit instantaneamente
utilizável de regras e folhas de estilo CSS3.
Saiba mais
Visite o site:
FONT Squirrel. Webfont Generator. Disponível em: https://www.

fontsquirrel.com/tools/webfont-generator. Acesso em: 22 set. 2020.
Utilizá-lo é muito simples; precisa clicar, adicionar fontes e selecionar os arquivos que deseja
adicionar, sendo que, depois de adicionar as fontes que deseja converter, necessita clicar na caixa de
contrato para continuar, e o Font Squirrel irá converter as fontes, conforme apresentado a seguir.
Figura 114 – Representação do upload da fonte
131
Unidade III
Figura 115 – Localizando a fonte
Saiba mais
Para a realização do exemplo anterior, em que a fonte Photograph foi

usada, indicamos:
https://www.dafont.com/pt/
Quando finalizar, um link de download será apresentado para um arquivo zip, que contém a fonte
em diversos formatos compatíveis com a web, além de diversos arquivos CSS e exemplos de marcação
HTML mostrando como utilizá-lo, conforme apresentado a seguir.
132
Figura 116 – Representação do download do kit
Uma alternativa é a utilização de fontes do diretório de fontes abertas do Google Fonts, que faz
questão de utilizar essa ferramenta para possibilitar que todas as fontes listadas no site sejam utilizáveis
nos designs de páginas web.
Com o Google Fonts, podemos pesquisar, filtrar e comparar qualquer uma das fontes da lista e,
depois de escolher a fonte que desejamos utilizar, poderemos adicioná-la a uma coleção ou ver exemplos
rápidos de sua utilização.
Saiba mais
Visite:
https://fonts.google.com/
A página de utilização rápida é particularmente útil porque lista tudo o que precisamos saber para
adicionar de forma prática e ágil essa fonte a nossa página web.
Seguindo as instruções na página de utilização rápida e copiando e colando o código de amostra

fornecido, podemos utilizar a fonte diretamente das redes globais de entrega de conteúdo do Google,
para que seja carregada rapidamente e não precise se preocupar com o download e adicioná-lo ao seu
próprio servidor web.
133
Unidade III
Se optarmos por adicioná-lo a uma coleção, podemos continuar adicionando outras fontes e tudo
apareceria no nosso painel “Coleção”, na parte inferior da página, conforme ilustrado a seguir.
Figura 117 – Representação do Google Fonts
Resumo
Nesta unidade, vimos como podemos combinar e integrar técnicas

de desenvolvimento web, tais como o CSS, que, de fato, enriquece todo
o desenvolvimento do aplicativo web, principalmente tratando de sua
recursividade (bootstrap), disponibilizando, assim, a visualização de páginas
tanto em desktop quanto em smartphones e tablets, sem perder sua
qualidade. Conceitos de CSS enriqueceram o desenvolvimento do aplicativo
web, bem como todo o trabalho como o de aplicação de suas propriedades.
Todos os exemplos que foram apresentados ao longo deste livro-texto têm
como premissa a utilização de um código semelhante e procurará desenvolver
sobre esse código.
Finalmente, ressaltamos que, assim como as novas especificações do

HTML5, CSS3 (ou CSS versão 3, para ser mais preciso), pode ser definido
como o conjunto mais atualizado de especificações projetadas para moldar,
modelar e definir precisamente quais recursos a versão mais recente do CSS
possui atualmente.
Nos estudos de cores, observamos que no esquema numérico

hexadecimal os dígitos são definidos e contabilizados de 0 a F, em vez de 0 a
9, como no sistema numérico decimal normal, ou seja, quando observamos
atentamente, notamos que podemos ajustar todos esses valores em 4 bits
e, como esse número máximo pode ser representado em decimal como o
15, então de 0 a F realmente significa de 0 a 15.
134
Exercícios
Questão 1. (Cespe 2020) Assinale a opção que indica a propriedade usada no CSS3 para definir o
alinhamento de um elemento inline com relação ao seu elemento-pai.
A) alignment-baseline
B) alignment-adjust
C) background-image
D) background-position
E) line-boxes
Justificativa: para responder corretamente à questão é preciso lembrar que o CSS é desenvolvido em
cascata ou na forma linear. Isso significa que ele segue uma hierarquia – Pai e filho.
Convém lembrar, também, que a classificação do tipo inline é usada quando se quer aplicar um estilo
a uma única ocorrência de um documento.
Para alinhar elemento inline (elemento-filho) com relação ao seu elemento-pai, usa-se a tag
alignment-baseline.
Questão 2. (AOCP 2016) Considere que foi desenvolvido o seguinte código CSS em um arquivo
externo chamado styles.css:
E que também foi criado o seguinte XHTML na mesma pasta que o arquivo style.css:
135
Unidade III
Quando esse XHTML for executado em um navegador web que implemente as especificações mais
atuais do CSS, como ficará a aparência do texto entre as tags <h1> e </h1>?
A) Tamanho: padrão; fonte: arial; cor: vermelha.
B) Tamanho: 36pt; fonte: arial; cor: vermelha.
C) Tamanho: 36pt; fonte: comic sans ms; cor: verde.
D) Tamanho: padrão; fonte: comic sans ms; cor: vermelha.
E) Tamanho: padrão; fonte: padrão; cor: verde.
Resposta correta: alternativa C.
Justificativa: a ordem de prioridade das tags é:
> 1. tags inline
> 2. tags internas e externas
A questão apresenta duas tags, uma interna e outra externa, declaradas na sessão <head>. Elas
terão a mesma prioridade. Além disso, há uma tag inline dentro do elemento <h1>, que terá prioridade
sobre as demais.
136
Para as duas tags de mesma prioridade, terá preferência a que for declarada por último, que no
caso da questão é a tag <h1> dentro da tag <style> do segundo bloco de código. Ela sobrescreverá os
atributos da tag que for declarada antes.
Ou seja:
> tag externa define a cor da fonte (vermelho), a família (arial) e o tamanho (36pt)=> color:red /
family:arial / size:36pt
> tag interna, que foi declarada depois (portanto, tem mais prioridade), define a cor da fonte (azul)
e família (comic sans) => color:azul / family:comic sans / size:36pt
> tag inline define apenas uma nova cor (verde) => color:verde / family:comic sans / size:36pt <-
essa será a configuração aplicada
Tamanho: 36pt; fonte: comic sans ms; cor: verde
137
Unidade IV
Unidade IV
7 ESTAÇÃO JAVASCRIPT
7.1 JavaScript
No JavaScript, os objetos são o centro do seu desenvolvimento: quase tudo é um objeto ou age
como um, sendo assim, iremos, então, examinar a criação de objetos JavaScript.
7.1.1 Objetos JavaScript
Um objeto é nada mais do que um contêiner para uma coleção de valores nomeados, ou seja, antes
mesmo de analisarmos qualquer código JavaScript, vamos primeiro raciocinar sobre isso, com base no
exemplo da tabela a seguir.
Tabela 5 – Alunos alocados no banco de dados
Aluno
Propriedade Valor da propriedade
Idade 33
Gênero Masculino
A palavra “aluno” na tabela é apenas um rótulo para o grupo de nomes de propriedades e valores
correspondentes que compõem exatamente o que é um aluno. JavaScript, no entanto, não fala em
tabelas, e sim em objetos, que são semelhantes às partes contidas na tabela, conforme ilustrado na
figura a seguir. Os exemplos colocados poderão ser desenvolvidos no Visual Studio Code, Microsoft
Visual Studio, Sublime Text ou no editor de sua preferência.
138
Figura 118 – Exemplo de código JavaScript
Mantenha esse estudo em primeiro plano: os objetos são realmente apenas recipientes para
propriedades, onde cada um detém um nome e um valor. Essa noção de um recipiente de propriedades
com valores nomeados (ou seja, um objeto) é utilizada pelo JavaScript, como os blocos de construção,
para assim expressar valores nele.
O objeto “aluno” é um valor que nós expressamos como um objeto JavaScript criando-o, dando um
nome e, por fim, fornecendo as suas propriedades.
Até o momento, o objeto “aluno” que estamos estudando tem apenas informações estáticas, ou seja,
como estamos lidando apenas com uma linguagem de programação, queremos programar nosso objeto
para realmente tentar fazer alguma coisa, caso contrário, tudo o que realmente temos é um banco de
dados semelhante ao JSON.
Para dar vida ao objeto “aluno”, precisamos adicionar um método de propriedade, ou seja, métodos
de propriedade que possibilitem a execução de uma função. Para ser mais eficaz em nossa definição, em
JavaScript, métodos são propriedades que contêm um objeto Function(), cuja intenção é de simplesmente
operar no objeto em que a função está contida.
Se porventura atualizarmos a tabela aluno com um método getGenero, ficaria disponibilizada,

conforme segue:
Tabela 6 – Método getGenero apresentado na classe aluno
Aluno
Propriedade Valor da propriedade
Idade 33
Gênero Masculino
getGenero Retornar o valor do sexo
139
Unidade IV
O método getGender é uma propriedade do objeto aluno, que é utilizado para retornar um dos
outros valores de propriedade de aluno: o valor “masculino” armazenado na propriedade gênero. Sendo
assim, podemos avaliar que, sem métodos, nosso objeto não faria muito, exceto armazenar propriedades
estáticas, conforme pode ser visto a seguir.
Figura 119 – Método getGenero apresentado no JavaScript
Saiba mais
A JSON (JavaScript object notation – notação de objetos JavaScript)

é considerada uma formatação leve de alternância de dados. Leia
sobre o assunto em:
INTRODUÇÃO ao JSON. In: CROCKFORD, D. How JavaScript works.

Califórnia, EUA: Virgule-Solidus LLC, 2018. Disponível em: https://www.
json.org/json-pt.html. Acesso em: 23 set. 2020.
O objeto aluno que estamos estudando é conhecido como Object(). Criamos o objeto aluno
utilizando um objeto em branco que nos foi apresentado denominando essa função construtora, ou
seja, podemos pensar nas funções do construtor como um modelo para produzir objetos predefinidos.
No caso do objeto aluno, utilizamos a função construtora Object() para produzir um objeto vazio que
chamamos de aluno.
140
Aluno é um objeto construído a partir do Object() construtor, então chamamos aluno de um Object().
O que nós realmente precisamos definir de maneira clara, é que além da criação de um Object() simples
como “aluno”, a maioria dos valores expressos em JavaScript são objetos.
Vamos considerar que o objeto aluno criado a partir da função construtora Object() não seja
realmente distinta de um objeto string elaborado através da função construtora String():
Figura 120 – Exemplo de construtor JavaScript
Como podemos observar no exemplo anterior, myObject e myString são objetos, ou seja, ambos
podem ter suas propriedades, herdar suas propriedades e são produzidos a partir de uma função
construtora. A variável myString, que acopla o valor da string “foo” parece ser o mais simples possível,
porém de forma surpreendente possui uma estrutura de objeto sob sua superfície.
141
Unidade IV
Se nós examinarmos os dois objetos produzidos, vamos perceber que eles são objetos idênticos em
substância, porém não em tipo, ou seja, mais importante, espero que possamos começar a visualizar que
o JavaScript utiliza objetos para expressar valores, conforme apresentado na figura.
Figura 121 – Exemplo de construtor JavaScript: pessoa
A função construtora Pessoa() definida pelo usuário pode produzir objetos Pessoa, sendo assim,
como a função construtora String() nativa pode produzir objetos string, o construtor Pessoa() não é
inferior e não é mais ou menos maleável do que o construtor String() nativo ou qualquer um dos
construtores nativos utilizados no JavaScript.
É importante observar que a função construtora Object() e o novo construtor Pessoa(), demonstrado
no exemplo de código anterior, podem nos dar resultados idênticos, porém ambos podem produzir um
objeto semelhante com as mesmas propriedades e métodos de propriedade.
142
7.1.2 Construtores JavaScript criam e retornam instâncias de objetos
O papel de uma função construtora é possibilitar o desenvolvimento de vários objetos que

compartilham, por exemplo, certas qualidades e comportamentos. Basicamente, uma função
construtora é um cortador de frutas para produzir objetos que possuem propriedades e métodos de
propriedade padrão.
Se dissermos que um construtor nada mais é do que uma função, poderia ser respondido “você
está correto, a menos que essa função seja chamada usando a nova palavra-chave”; por exemplo,
nova String (“foo”). Quando isso tende a acontecer, uma função assume uma atribuição especial e o
JavaScript a trata como especial, definindo, assim, o valor desse elemento para a função no novo objeto
que está sendo construído.
Além desse comportamento especial, a função retornará o objeto recém-criado por padrão, em
vez do valor false. O novo objeto retornado da função pode ser considerado uma instância da função
construtora que a constrói.
Por exemplo, podemos considerar o construtor Pessoa() novamente, mas dessa vez gostaríamos que
acompanhasse a leitura dos comentários no exemplo de código a seguir com atenção, pois destacam o
efeito da nova palavra-chave, conforme apresentado:
Figura 122 – Exemplo de construtor
143
Unidade IV
A construção do código anterior utiliza uma função construtora definida pelo usuário, por exemplo,
Pessoa(), para criar o objeto aluno, e isso não é diferente do construtor Array(), que cria um objeto
Array(), conforme apresentado a seguir:
Figura 123 – Exemplo de código com Array
Em JavaScript, a maioria dos valores envolve objetos que foram criados, ou instanciados, a partir de
uma função construtora. Um objeto retornado de um construtor é denominado de instância.
Observação
Array em tecnologia pode ser definido como um arranjo de uma

estrutura de dados capaz de proporcionar o armazenamento de uma coleção
de elementos de tal maneira que cada um dos seus itens implementados
possa ser facilmente identificado por, pelo menos, um índice ou uma chave.
7.1.3 Os construtores de objetos JavaScript nativos
A linguagem JavaScript tem por definição nove construtores de objetos nativos (ou internos), sendo
que eles são utilizados pelo JavaScript para desenvolver a linguagem e, por “construção”, podemos
dizer que esses objetos são utilizados para expressar valores de objetos no código JavaScript, além de
organizar diversos recursos da linguagem.
Sendo assim, os construtores de objetos nativos podem ser multifacetados, na medida em que
produzem objetos, porém também são aproveitados para facilitar muitas das convenções de programação
da linguagem, como, por exemplo, funções que são objetos criados a partir do construtor Function(),
mas também são utilizados para gerar outros objetos quando chamados como funções de construtor
utilizando a nova palavra-chave.
144
Os nove construtores de objetos nativos que vêm predefinidos com JavaScript são:
• Number()
• String()
• Boolean()
• Object()
• Array()
• Function()
• Date()
• RegExp()
• Error()
Saiba mais
Recomenda-se a leitura dos nove construtores de objetos nativos em:
STANDARD built-in objects. JavaScript reference. Developer.Mozilla.

Disponível em: https://developer.mozilla.org/en-US/docs/Web/JavaScript/
Reference/Global_Objects. Acesso em: 2020.
O JavaScript é constituído basicamente a partir desses nove objetos (além de valores primários de
cadeia, número e booleano).
7.1.4 Funções
Uma função é um contêiner de instruções de código que podem ser chamadas utilizando o operador
parênteses (), ou seja, os parâmetros podem ser trafegados entre parênteses durante a invocação, para
que as instruções na função possam acessar determinados valores quando esta é invocada.
No exemplo apresentado na figura a seguir, identificaremos a construção de duas versões de um

objeto de função addNumbers, um utilizando o novo operador e outro o padrão literal mais comum.
Ambos estão esperando dois parâmetros, ou seja, em cada caso, invocamos a função, passando
parâmetros no operador parênteses ().
145
Unidade IV
Figura 124 – Exemplo de aplicação do addNumbers
Uma função pode ser utilizada para retornar um valor, construir um objeto ou como um mecanismo
para simplesmente executar o código, ou seja, o JavaScript tem uma utilidade para funções, mas, na
sua maneira mais básica, uma função é simplesmente um escopo exclusivo de instruções executáveis.
7.1.5 Parâmetros de funções
O construtor Function() utiliza-se de um número indefinido de parâmetros, porém o último parâmetro

esperado pelo construtor Function() é uma sequência que contém instruções que compõem o corpo da função.
Quaisquer parâmetros trafegados para o construtor antes do último estarão disponíveis para a
função que está sendo criada, ou seja, também é possível enviar vários parâmetros como uma sequência
separada por vírgula.
No exemplo apresentado na figura a seguir, estudaremos a diferença do uso do construtor Function()

com os padrões mais comuns de instanciar um objeto de função.
Figura 125 – Exemplo de aplicação de function
146
As funções podem ser canceladas a qualquer instante durante a chamada, utilizando a palavra-chave
return com ou sem um valor. No exemplo apresentado na figura a seguir, identificaremos o cancelamento
da função de adição se os parâmetros forem indefinidos ou não forem um número.
Figura 126 – Exemplo de cancelamento de function
7.1.6 Array
Um array (matriz) é uma lista ordenada de valores, normalmente criada com a finalidade de
percorrer valores indexados, iniciando com o índice zero. O que precisamos saber é que um array em
posição de objeto possui uma definição de nomes e propriedades associada a valores em ordem não
numérica também.
Essencialmente, as matrizes utilizam números como uma chave de pesquisa, enquanto os objetos
têm nomes de propriedades definidas pelo usuário. O JavaScript não possui matrizes associativas
verdadeiras, mas os objetos podem ser utilizados para obter a funcionalidade das matrizes associativas.
147
Unidade IV
No exemplo apresentado na figura a seguir, iremos armazenar quatro sequências de caracteres no

myArray, que poderemos acessar utilizando um índice numérico.
Figura 127 – Exemplo de aplicação de array
7.1.7 Parâmetros de matrizes
Nós poderemos passar os valores de uma instância de matriz para o construtor como parâmetros
separados por vírgula. O construtor Array() pode levar aproximadamente até 4.294.967.295 parâmetros.
No entanto, se apenas um parâmetro for enviado ao construtor Array() e esse valor for um número
inteiro, ele será utilizado para realizar a configuração do comprimento da matriz, e não será usado como
um valor contido na matriz, conforme apresentado a seguir:
Figura 128 – Exemplo de aplicação de array com parâmetros
148
7.2 Uso de roteamento de soluções MVC
O MVC (model→view→controller) pode ser considerado um pattern de arquitetura para o

desenvolvimento de aplicativos web. Ele pode estabelecer a segregação de três camadas: model, view e
controller, sendo que se pode considerar que a camada model corresponde a dados e regras determinadas
para a manipulação de todos os itens. Todas as estruturas são manipuladas inicialmente por controllers,
servindo como base para a implementação e apresentação de dados pela camada view.
Observação
O estudo de diagramação UML, bem como diagrama de sequência,

agregam no entendimento do conceito de aplicação MVC, pois são
recursos que se complementam na análise e desenvolvimento de
aplicações em camadas web.
A camada controller tem for finalidade tratar todas as requisições, sendo, assim, efetuada por meio de
métodos declarados na mesma classe controller. E, por fim, a camada view tem o objetivo de centralizar
todas as ações e apresentá-las dentro da página .aspx.
Pode-se entender todo o fluxo da seguinte maneira:
• A camada de apresentação exibe elementos da interface do cliente do site e encapsula toda a

estrutura lógica que inclui desde interação até integração de cliente e regras de negócio.
• A camada de controle, também conhecida como camada de negócio, retorna ao cliente o resultado
de toda a regra de negócio encapsulada na classe (C#).
• A camada de acesso a dados detém todos os métodos e conexões inseridas, que retornam para a
camada de negócio toda a execução efetuada em banco de dados, feita em classe (C#).
Observação
Para o desenvolvimento de todas as classes (sejam de controle ou de

acesso a dados ou modelo), recomendamos a utilização de classes C#, bem
como o conhecimento em programação orientada a objetos.
149
Unidade IV
A arquitetura de três camadas também pode ser estudada como uma solicitação enviada ao servidor
na qual a interface com o cliente efetua processos de regras de negócio a fim de armazenar dados que
são desenvolvidos e armazenados de maneira independente, ou até mesmo em plataformas separadas,
conforme apresentado a seguir.
Figura 129 – Exemplo de aplicação MVC
Após a seleção do template (figura anterior), será criado o projeto utilizando a arquitetura ASP.NET
MVC, apresentado nas figuras a seguir.
Figura 130 – Identificação de projeto MVC no Visual Studio .NET
150
Figura 131 – Escolha de template dentro do Visual Studio
Saiba mais
Recomenda-se a leitura do livro-texto de Programação Orientada a

Objetos II, pois esse capítulo trata sobre back-end, que usaremos como
linguagem base C#.
Aconselha-se também a instalação da última versão do Visual Studio,

para que o exemplo apresentado em Web Forms possa ser executado com
sucesso. Para verificação da última versão do Microsoft Visual Studio,
consultar o link:
DOWNLOADS. Visual Studio. Microsoft. 2020. Disponível em: https://

visualstudio.microsoft.com/pt-br/downloads/. Acesso em: 24 set. 2020.
Atualmente, mais de 80% dos projetos são desenvolvidos utilizando a arquitetura MVC, por conta
da segregação de código e principalmente do paralelismo que é feito com a parte de análise do projeto.
O conceito de MVC vem ao encontro de alguns diagramas da UML (tais como o Diagrama de Caso
de Uso, Sequência e Classe), que são de extrema importância para o desenvolvimento de qualquer
aplicação atualmente.
151
Unidade IV
Observação
O estudo de diagramas UML é essencial; por exemplo, diagrama de caso

de uso e diagrama de sequência, classe e atividade, que serão a base de
todo o desenvolvimento web efetuado neste livro-texto.
7.3 Razor
O Razor agrega uma série de características importantes, que possibilitam, por intermédio de um
objetivo natural, a construção de páginas com a estrutura de ASP.NET MVC, porém essa ideia nasceu a
partir da versão 3. Uma das características importantes construídas no Razor é que ele foi desenvolvido
para ser expressivo, compacto e ágil: a finalidade foi construir um mecanismo capaz de reduzir ao
máximo o número de caracteres necessários para a codificação de uma página aspx.
O View Engine Default do ASP.NET (aspx), é conhecido por possuir uma sintaxe muito
próxima à do HTML, com abertura e fechamento de tags em páginas aspx. No Razor não
conseguimos identificar esse item, reduzindo, portanto, a quantidade de texto necessário
para a codificação de itens contidos em controle, ou “parte” da página aspx.
Tratando exclusivamente da redução significativa de caracteres, do ponto de vista do

programador da página aspx, todo o processo passa a ficar muito mais eficaz, o que significa
que se perde menos tempo na codificação das páginas aspx. Ao contrário da maioria dos
View Engines, com o Razor não é necessário ficar desenvolvendo abertura e fechamento
dos blocos de código. O parser do Razor é inteligente e capaz de separar o que é código
HTML do código C# ou VB.NET, por exemplo.
Todo esse universo garante um código eficaz e limpo, facilitando não só a sua escrita
inicial, mas deixando fácil a manutenção posterior nessas páginas aspx.
Outra característica muito importante do Razor é a sua facilidade de aprendizagem.

Como ele, podemos considerar como um dos pontos a sua composição de HTML e C# (ou
vb.net); qualquer programador .NET com conhecimento básico em HTML conseguirá com
grande facilidade capturar a estrutura do Razor, e em pouco tempo estará com conhecimento
a escrever páginas aspx com o novo template.
Provavelmente outro ponto importante do Razor é o fato de ele não ser uma “nova
linguagem”, ou seja, ao contrário de todos os View Engines existentes, ele faz utilização de
sua própria linguagem C#/VB, o que torna sua aderência ainda mais efetiva e eficaz.
152
Considerando também que o Razor não depende exclusivamente de nenhuma

ferramenta para ser escrito, ou seja, não dependeria também do Visual Studio. É possível
desenvolver páginas com Razor em qualquer editor de texto, até mesmo no Notepad, caso
seja necessário utilizar essa ferramenta para tal desenvolvimento.
Levando-se em consideração ainda que, ao escolher utilizar o Razor no Visual Studio,

o programador consegue ganhar todos os recursos de IntelliSense e statement completion
(recurso que “completa” palavras do código que podem ser automaticamente identificadas).
Pensando, claro, que com esses recursos o processo de desenvolvimento de páginas se torna
ainda mais rápido e eficiente.
Outro ponto interessante do Razor, é que ele é totalmente amigável para efetuar testes,
trabalhando-se com testes unitários. Com o Razor é possível criar testes unitários para
verificação das Views do aplicativo web, sem que haja necessidade de conhecer o Controller
que renderiza a View e vice-versa.
Mesmo assim, ele passa a ser apenas mais uma escolha que é necessária fazer ao criar
as Views de um aplicativo web. A View Engine default do ASP.NET sempre irá funcionar e
proporcionar uma grande opção.
Adaptado de: Sendin (2009).
7.4 Rest
Podemos definir Representational State Transfer (Rest) como um estilo de arquitetura que se assenta
em uma série de princípios. A ascensão do Rest nos últimos anos está ligada ao design da API que a maioria
dos aplicativos da web oferece para estender suas funcionalidades. Mesmo que não esteja vinculado ao
HTTP, ele geralmente está associado aos aplicativos da web. HTTP se encaixa bem com os seus princípios.
Os princípios do Rest são: interface uniforme, sem estado, armazenável em cache, cliente-servidor,
sistema em camadas e código sob demanda.
Essa é uma breve introdução à arquitetura Rest. O que precisamos entender é o princípio básico
e uma imagem geral do aplicativo. A ideia do Rest sobre HTTP é usar a funcionalidade do protocolo o
máximo possível, para que não tenhamos que reinventar a roda.
Um recurso pode ser uma postagem num blog, um cliente, um documento e, em geral, qualquer coisa
que desejamos expor. Um recurso tem um identificador, como um registro em um banco de dados tem
uma chave primária. Da mesma maneira, um recurso possui um URI que identifica o próprio recurso, que
não é uma representação do recurso que pode assumir diferentes formatos. É apenas um identificador
que podemos usar para acessar o recurso.
Podemos solicitar o recurso com o URI, e o que obtemos é uma representação desse recurso solicitado
em um formato específico. O formato é negociado entre o cliente e o servidor e pode ser qualquer
153
Unidade IV
coisa, desde os XML e JSON mais usados, até HTML, PNG, CSV ou outros formatos binários. Com a
representação do recurso, o cliente pode manipular o estado e operar com o recurso usando o servidor,
se tiver os direitos para fazê-lo.
O servidor nunca deve armazenar informações sobre os clientes. Isso significa que, quando uma
solicitação chega ao servidor, o servidor carrega o recurso do armazenamento (geralmente um banco de
dados) e envia de volta a representação ao cliente. Esse é o estado do recurso. Se um segundo depois o
estado no armazenamento for alterado devido a uma nova solicitação que chega, o cliente não deve saber.
Sem estado também significa que o servidor nunca deve usar sessões ou outros mecanismos para
armazenar informações do cliente, e todas as solicitações não estão correlacionadas com solicitações
passadas ou futuras.
O servidor pode estender a funcionalidade do cliente passando código executável. Por exemplo, um
servidor pode enviar JavaScript ao cliente para que ele possa executar algum tipo de operação nos dados.
Se lermos cuidadosamente esses princípios, notamos que o foco principal é a escalabilidade. O fato de
o servidor não armazenar informações do cliente permite economizar memória. O sistema em camadas
nos permite usar servidores de cache como um balanceador de carga para obter escalabilidade. Adicionar
novos servidores e seguir os princípios cliente-servidor nos permite alterar a implementação (por exemplo,
passando de um banco de dados SQL para o armazenamento NoSQL) sem o conhecimento do cliente.
Mas como obtemos isso e como funciona? No documento original que descreve o Rest, Roy Fielding
não vincula a arquitetura Rest ao HTTP, mas, como afirmado anteriormente, o HTTP parece perfeito para
criar uma API REST, já que a maioria das coisas nesse estado já está construída no próprio protocolo
(cache, por exemplo).
A web em si é Rest: temos o URL, que é o identificador da página que precisamos, digitamos o
URL no navegador para obter uma representação no formato HTML e usamos um link para transferir
o estado para outra página.
Um aspecto do Rest que contrasta com Soap (RPC) é que a operação no recurso é baseada no verbo
HTTP usado em combinação com o URI.
O HTTP tem a noção de verbos. Estamos acostumados a get e post, pois o navegador gerencia esses
dois verbos, mas outros são especificados na especificação HTTP (RFC 2616) que pode ser usada para
outras operações. A lista completa de verbos é: options, get, head, post, put, patch, delete, trace e connect.
Eles podem ser usados com seu significado semântico; portanto, quando precisamos ler um recurso,
podemos usar o método get e, quando precisamos excluir um recurso, podemos usar um delete, e
assim por diante.
Como ilustrado no quadro a seguir, usando o URI correto e o verbo correto, temos as operações Crud
(criar, ler, atualizar, excluir) prontas para serem usadas.
154
Quadro 11 – Verbos e significados HTTP
Verbo URI Description

Get /posts Obtenha a lista de postagens.
Get /posts/42 Obtenha uma única postagem (com o ID 42).
Delete /posts/42 Exclua a publicação 42.
Post /posts Crie uma postagem.
Put /posts/42 Atualize a postagem.
Patch /post/42 Atualize parcialmente.
Options /post/42 Recupere a operação disponível no recurso.
Head /post/42 Retorne apenas o cabeçalho HTTP.
Como mostrado, usando o URI correto e o verbo correto, temos as operações Crud (criar, ler, atualizar,
excluir) prontas para serem usadas.
Depois que uma solicitação é emitida para o servidor, este a analisa e cria a resposta para retornar
os dados ou resultados ao cliente. Cada resposta é representada com um estado e um status HTTP, que
deve ser usado semanticamente para informar o cliente do resultado.
A operação get é usada para ler um recurso. O URI especifica o recurso que estamos lendo e podemos
usar o cabeçalho accept para solicitar um formato específico.
Quando o post é usado para criar um recurso, os dados do recurso são enviados ao servidor como
parte do corpo da solicitação. O servidor responde com o status “201 created” se tudo correr bem.
Quando um novo recurso é criado, é uma prática recomendada usar o cabeçalho location na resposta
para especificar o URI do recurso recém-criado.
O put é usado para modificar o recurso. O URI especifica o recurso que queremos modificar e o corpo
contém os novos valores de recurso. O código de status HTTP da resposta deve ser “200 OK” ou “204 sem
conteúdo” se a resposta não contiver o recurso modificado. Não é necessário retornar o URI do próprio
recurso no cabeçalho location, porque o cliente já o conhece.
O put deve ser idempotente, o que significa que o resultado de uma solicitação bem-sucedida é
independente do número de vezes que é executada. Tem que ser possível fazer duas chamadas iguais
para o servidor, e este não deve retornar erros; a segunda chamada simplesmente refaz a atualização,
mesmo que não altere o recurso.
Delete é usado para excluir o recurso. O resultado pode ser “200 OK” ou “204 sem conteúdo” se a
resposta não contiver um corpo. Pode ser “404 não encontrado” se o URI não estiver correto e o recurso
não puder ser encontrado.
155
Unidade IV
7.5 Exemplo de API Web
Então um aplicativo Web ASP.NET MVC 4 é criado e, na segunda etapa, escolhe-se o modelo de API
Web. Uma vez criado, o projeto é quase idêntico a um projeto clássico do ASP.NET MVC e, na verdade,
mantém muitos conceitos desse tipo de projeto.
Aqui está: a estrutura da solução como aparece após a criação do projeto, conforma
Figura 132 – A estrutura do projeto da API Web
As coisas mais importantes a serem observadas são:
• As pastas controladores, modelos e exibições são obtidas do ASP.NET MVC. Como veremos
mais adiante, a API Web usa o mesmo padrão MVC, portanto teremos controladores e
modelos. Também existe uma pasta views, mas não é muito útil em um contexto de API,
mesmo que possamos retornar uma visualização ao nosso chamador.
• Além da pasta visualizações, existem pastas imagens, scripts e conteúdo. Elas não são
usadas com frequência, pois uma API geralmente é usada para retornar dados, não uma
interface do usuário.
• A pasta App_Start é usada para configurar a API. Ela contém vários configuradores para
ajustar o comportamento da API. Essa pasta também possui algumas configurações para a
parte do ASP.NET MVC.
156
Como você pode observar com esse modelo de projeto, podemos criar aplicativos ASP.NET MVC
e aplicativos API, já que os dois têm muito em comum.
Vamos aprofundar um pouco, abrindo a pasta controllers e dando uma olhada na classe
ValuesController, conforme apresentado nas figuras a seguir.
Figura 133 – Controller: API Web
Figura 134 – Continuação do controller: API Web
157
Unidade IV
Após o uso e o namespace, encontramos uma declaração de classe. A classe ValuesController herda
de ApiController. Ela não é relativa à classe base do controlador usada no ASP.NET MVC, embora tenha
muitas semelhanças. Ela serve como uma classe base para todos os recursos que decidimos expor
por meio da API.
Dentro dessa classe, encontramos todos os verbos padrão para manipular o recurso value: get, post,
put e delete. O nome dos métodos aqui é importante, pois o tempo de execução da API Web do ASP.NET
usa convenções para encontrar a ação a ser chamada em uma solicitação HTTP. Portanto, o método get
é utilizado para obter uma coleção de valores e um único valor, considerando seu ID. O método put é
utilizado para inserir e modificar o recurso de valor (value), enquanto o método delete é utilizado para
excluir um recurso com o ID.
Como podemos observar, os cinco métodos são as ações chamadas contra uma solicitação HTTP get,
post, put ou delete.
Como um aplicativo Web ASP.NET MVC, os projetos de API Web usam um sistema de roteamento.
A configuração das rotas está em um arquivo chamado WebApiConfig.cs na pasta App_Start. Aqui está
o conteúdo desse arquivo, conforme apresentado:
Figura 135 – WebApiConfig.cs
Essa classe possui um método que é chamado a partir da classe WebApiApplication no global.
asax. Esse método registra as rotas necessárias pelo aplicativo. Por padrão, o ValuesController
definido antes responde ao URI / api / Values, como podemos ver no código anterior. Observe que
essas rotas, apesar de muito semelhantes às rotas do ASP.NET MVC, são uma pilha completamente
diferente. Nesse caso, o tipo de rota é IHttpRoute e a implementação está contida no assembly
System.Web.Http, portanto é integralmente novo e não está vinculado ao System.Web.
Mesmo se forem diferentes, eles são implementados quase da mesma maneira: cada rota possui
um nome e um modelo que são “tokenizados” para corresponder aos padrões de entrada.
158
Até agora, vimos o controlador Values, que tem o dever de gerenciar o recurso Values e um
sistema de roteamento simples para rotear a solicitação para o controlador correspondente. Vamos,
então, simular a execução do aplicativo API Web para ver como ele funciona.
Uma vez executado, ele abre um servidor web local para uma porta específica. E em seguida,
construiremos uma API Web, para tratar o retorno de informações dos alunos, tais como: nome,
RA e idade em formato json.
Este exemplo será desenvolvido de maneira sequencial em suas figuras, utilizando-se o Visual
Studio 2019. Na figura a seguir, observa-se a seleção do template aplicativo Web ASP.NET (.NET
Framework). Deve-se atentar à linguagem que será utilizada no back-end, que será o C#. Após
validar as informações, acionar o botão próximo.
Figura 136 – Criando um projeto API Web
159
Unidade IV
Define-se o nome do projeto na caixa “Nome do projeto” e em qual local do computador será
armazenado o exemplo. Após o preenchimento dos campos, acionar o botão “Criar”:
Escolhe-se o template API Web e aciona-se o botão “Criar”:
160
A seguir, é possível visualizar um Solution Explorer (gerenciador de soluções), com as pastas

“Controllers” (controle) e “Models” (modelo):
Figura 139 – Estruturando um projeto API Web
Nesta etapa, criaremos as classes:
• AlunoController.cs na pasta Controllers.
• Aluno.cs, AlunoRepositorio.cs e IAlunoRepositorio.cs na pasta Models.
Nas figuras a seguir, demonstra-se como criar uma classe dentro da pasta Models, clicando
com o botão direito e selecionando a opção “Adicionar”, depois Classe, e nomeando-a, no
exemplo, Aluno.cs.
161
Unidade IV
Este passo deve ser seguido sempre que for solicitada a criação de uma classe na pasta
Models, Controller etc.
Figura 140 – Adicionando uma classe
Figura 141 – Adicionando uma classe
162
Conforme indicado nas figuras a seguir, desenvolve-se dentro da classe AlunoController os

seguintes métodos:
• GetAllAlunos: responsável por apresentar todos os dados dos alunos cadastrados.
• GetAluno: responsável por apresentar o registro de um aluno específico que foi solicitado
através do seu RA.
• GetAlunosPorIdade: responsável por apresentar o registro de um aluno específico que foi

solicitado através da sua idade.
• GetPostAluno: responsável por adicionar um registro de aluno.
• GetPutAluno: responsável por atualizar os dados do aluno.
• DeleteAluno: responsável por excluir o registro do aluno.
Figura 142 – Implementando a classe AlunoControllers
163
Unidade IV
Figura 143 – Continuação da implementação da classe AlunoControllers
Figura 144 – Continuação da implementação da classe AlunoControllers
164
Então cria-se a classe “aluno”, com os atributos nome, RA e idade. A tipagem dos atributos
(string nome, int ra, int idade) tem relação com a tabela criada que recebeu os dados com as
tipagens corretas:
Figura 145 – Implementando a classe Aluno
Assim, inicia-se a implementação na classe AlunoRepositorio, que irá herdar a interface

IAlunoRepositorio, em que serão desenvolvidos os métodos:
• GetAll: retorna todos os dados de alunos.
• Get: retorna o dado de aluno através do filtro RA.
• Add: adiciona o registro do aluno (nome, RA e idade).
• Remove: exclui o registro do aluno.
• Update: atualiza o registro do aluno.
165
Unidade IV
Na classe AlunoRepositorio, deve-se informar os dados de alunos cadastrados (Salatiel, Dorgival,

Doralice e Doracy) e seus respectivos dados de RA (registro acadêmico) e idade:
Figura 146 – Implementando a classe AlunoRepositorio
Figura 147 – Continuação da implementação da classe AlunoRepositorio
166
Figura 148 – Continuação da implementação da classe AlunoRepositorio
Inicia-se a implementação na classe IAlunoRepositorio com os métodos GetAll, Get, Add,

Remove e Update:
Figura 149 – Implementação da classe IAlunoRepositorio
167
Unidade IV
Localiza-se no Solution Explorer o arquivo WebApiConfig (dentro da pasta App_Start):
Figura 150 – Implementação da classe WebApiConfig
168
Inicia-se, então, a implementação do código que será responsável por proporcionar a inicialização
da API, e configura-se a rota, conforme já mencionado:
Figura 151 – Implementação da classe WebApiConfig
Neste momento, deve-se clicar no botão IIS Express para iniciar a API; nas figuras a seguir
pode-se observar o funcionamento de uma consulta de todos os alunos e uma consulta por um
aluno específico.
Figura 152 – Executando o projeto API Web
169
Unidade IV
Nesse exemplo, utilizou-se um código do repositório definido pela classe AlunoRepositorio,

para implementar a API Web 2, expondo os seguintes serviços:
• GetAllAlunos: retorna todos os alunos.
• GetAluno: retorna um aluno.
• GetAlunosPorIdade: retorna os alunos por idade.
• PostAluno: inclui um novo aluno.
• PutAluno: altera um aluno.
• DeleteAluno: exclui um aluno.
7.6 Desenvolvimento de aplicações MVC
As imagens apresentadas a seguir são concebidas por meio de desenvolvimento MVC. Na sequência,
iremos exercitar de maneira prática como podemos desenvolver um projeto WebForms, com alguns
conceitos de HTML, CSS e JavaScript para o fron-end e a linguagem de programação orientada a objetos
C# para o desenvolvimento do back-end.
Vale ressaltar também que o banco de dados aplicado neste capítulo foi SQL Server, porém existem
diversos outros no mercado, como: SQL Lite, Mongo DB etc.
170
Caso opte por utilizar o seu banco de preferência, altere o endereçamento da linha – connectionString,
conforme ilustrado a seguir.
Figura 155 – Endereçamento do banco de dados
Lembrete
No JavaScript, os objetos são o centro do seu desenvolvimento: quase

tudo é um objeto ou age como um.
8 ACESSANDO DADOS COM MS ADO.NET
Existem atualmente diversas maneiras de conexão com o banco de dados: Oracle, SQL, Access, entre
outros, porém, para que a conexão seja efetuada de maneira amigável, neste livro-texto teremos como
base a construção de conexão utilizando a linguagem C#, que será utilizada como ponto entre a view
(aspx) e a codificação de itens de conexão (C#).
Observação
É importante conseguir assimilar os conceitos vistos sobre bancos de

dados para que este conteúdo possa ser absorvido de maneira clara e objetiva.
A seguir, iremos dar sequência nas figuras que exemplificam como elaborar a aplicação em três
camadas. A figura a seguir demonstra a inclusão dos registros nome, e-mail e idade:
Figura 156 – Exemplo de aplicação em três camadas: página Default.aspx
171
Unidade IV
Para iniciar a criação desse projeto, deve-se criar um projeto Asp.NET Web Forms no Visual Studio 2019:
Figura 157 – Criando projeto Web Forms
Como ilustrado, inicia-se a criação do projeto Web Forms acionando o botão “Criar um projeto”:
Figura 158 – Criando projeto Web Forms: ASP.NET WebForms
Então seleciona-se o Aplicativo Web ASP.NET(.NET Framework). Utilizar a caixa de busca para digitar
o nome do template facilita a sua localização. Após efetuar essa seleção, aciona-se o botão “Próximo”:
172
Figura 159 – Criando projeto Web Forms: atribuindo o nome do Projeto
Preenche-se o nome do projeto (TresCamadasAdoNet) e aciona-se o botão “Criar”:
Figura 160 – Criando projeto Web Forms: selecionando Web Forms
173
Unidade IV
Em seguida, deve-se escolher o Web Forms e acionar o botão “Criar”:
Figura 161 – Criando projeto Web Forms: selecionando Web Forms
174
Na figura a seguir, será apresentada a estrutura criada para o projeto Web Forms Três Camadas ADO.
NET. Deve-se clicar da página Default.aspx e desenvolver o layout proposto nas próximas figuras. Essa
tela será responsável por alocar os campos Nome, Idade e E-mail e o botão “Submeter” terá a função de
enviar os registros preenchidos para o banco de dados.
Figura 162 – Layout sugerido para a página Default.aspx
Figura 163 – Continuação do layout sugerido para a página Default.aspx
175
Unidade IV
Figura 164 – Continuação do layout sugerido para a página Default.aspx
Em seguida a essas etapas, adiciona-se o projeto BLL (business logic layer – camada de regra de negócio).
Para adicionar um projeto, deve-se selecionar o nome da solução Três Camadas ADO.NET, acionar o
botão direito do mouse e selecionar “adicionar”, depois “novo projeto”:
Figura 165 – Adicionar um novo projeto
176
Localiza-se a biblioteca de classe (.NET Framework) e certifica-se de que a linguagem definida é C#.
Após realizar a seleção, aciona-se o botão próximo.
Figura 166 – Adicionando biblioteca de classes
Escreve-se o nome do projeto BLL e aciona-se o botão “Criar”:
Figura 167 – Nomeando a biblioteca como BLL
177
Unidade IV
Figura 168 – Camada BLL criada com a classe Class1
Em seguida, deve-se escrever o nome do projeto BLL e novamente acionar o botão “Criar”:
Figura 169 – Camada BLL criada com a classe Class1
178
Deve-se renomear a classe para “Negócios”. Para realizar essa ação, clica-se com o botão direito do
mouse sobre a Class1 e seleciona-se a opção renomear.
Figura 170 – Renomeando Class1 para Negócios
A figura a seguir, ilustra o momento em que terminamos de renomear a classe, então o Visual
Studio “pergunta” se gostaríamos de assumir o novo nome para classe. Nesse instante, deve-se
acionar o botão “Sim”.
Figura 171 – Classe Negócios
179
Unidade IV
Na figura a seguir, é apresentado o nome classe Negócios:
Figura 172 – Incluindo summary
Para acionar o summary, basta digitar acima do nome da classe ///:
Figura 173 – Desenvolvimento da classe BLL
180
Nas figuras a seguir, pode-se observar o desenvolvimento dos métodos insert, update, load e delete,
que terão responsabilidade de filtrar a regra de negócio e conservar a persistência no banco de dados.
Figura 174 – Desenvolvimento da classe BLL
Figura 175 – Continuação do desenvolvimento efetuado na classe BLL (classe Negócio)
181
Unidade IV
Figura 176 – Continuação do desenvolvimento efetuado na classe BLL (classe Negócio)
Figura 177 – Camada DAL com a classe Acesso a Dados
182
A seguir, é apresentado o projeto DAL, do inglês data access layer (camada de acesso a dados). Esse
projeto será adicionado da mesma maneira que a camada BLL foi adicionada anteriormente, e a classe
será renomeada para AcessoDados:
Figura 178 – Classe AcessoDados dentro da camada DAL
Nas figuras a seguir, pode-se ver a criação dos métodos insert (que será utilizado na aplicação),
update, load e delete. Eles serão utilizados para realizar a persistência no banco de dados SQL.
Figura 179 – Desenvolvimento efetuado na classe DAL
183
Unidade IV
Figura 180 – Continuação do desenvolvimento efetuado na classe DAL
Na figura anterior, linha 20, pode-se observar a chave de conexão [“EADUNIPSqlServer”], que será
utilizada para alocar o endereço do banco de dados SQL.
184
185
Unidade IV
Figura 184 – Realizar referência na camada BLL
186
Conforme pode ser visto nas figuras a seguir, clica-se com o botão direito do mouse sobre a
pasta de referências e aciona-se a opção “Adicionar Referência”, em seguida, deve-se selecionar
Projetos>>DAL e OK.
Figura 185 – Realizar referência na camada BLL da camada DAL
187
Unidade IV
Figura 186 – Realizar referência na camada TresCamadasAdoNet
188
Figura 187 – Realizar referência na camada BLL na camada TresCamadasAdoNet
189
Unidade IV
Figura 188 – Referência da camada BLL na camada TresCamadasAdoNet
Conforme demonstrado na figura a seguir, deve-se ir à página Default.aspx e efetuar um duplo

clique no botão “Submeter”. Nesse instante, será criado o btnSubmit_Click. Nessa classe, tem-se que
atribuir o nome da camada BLL utilizando a palavra using, e na sequência digitar o trecho do código
que se encontra na figura a seguir. Esse código realiza a instância do objeto pBLL para que seja possível
190
acessar o método insert, que está localizado na classe Negócios, e que, por sua vez, dará acesso ao
método insert, localizado na classe AcessoDados.
Com as informações digitadas na tela de nome, idade e e-mail, o método insert contido na classe
AcessoDados irá gravar os dados no banco de dados.
Figura 189 – Evento bntSubmit_Click
Observação
Classe BLL é a camada de negócio, e Classe DAL é a camada de dados.

O exemplo tratado nesta unidade tem por finalidade realizar a junção do
front-end (tela) com o back-end (linguagem de programação C#) utilizando
um projeto Web Forms.
191
Unidade IV
Por fim, deve-se acessar o arquivo web.config e alocar o endereçamento do banco de dados, para
que ele seja localizado dentro da aplicação quando solicitado através da chave [“EADUNIPSqlServer”].
Figura 190 – Arquivo web.config
Figura 191 – ConnectionString
Lembrete
Criar o banco de dados EADUNIP e a tabela com os atributos código,

nome, idade e e-mail é necessário para que a aplicação funcione. O banco
de dados utilizado para esse exemplo é o SQL Server.
192
8.1 Instalar/configurar o banco de dados SQLite
Para instalar e configurar o banco de dados SQLite, é necessário acessar o link, conforme apresentado
na figura a seguir. Após realizar o download, iniciar a instalação no seu computador, conforme descrito:
Figura 192 – Tela de download do SQLiteStudio
Figura 193 – Download realizado em formato .zip do SQLStudio
193
Unidade IV
Após a extração do arquivo gerado e mencionado na figura anterior, será gerada a pasta SQLiteStudio,
conforme apresentado a seguir:
Figura 194 – Pasta do SQLiteStudio
Após acessar a pasta SQLiteStudio, localizar o arquivo SQLiteStudio e acessá-lo conforme

apresentado a seguir:
Figura 195 – Executável do SQLiteStudio
194
Figura 196 – SQLiteStudio
Para criar o banco de dados de estudo, precisa clicar em Database → Add a database, conforme
apresentado a seguir:
Figura 197 – Adicionar banco de dados no SQLiteStudio
195
Unidade IV
Figura 198 – Criar banco de dados no SQLiteStudio
Agora é necessário nomear o banco de dados, conforme apresentado a seguir:
Figura 199 – Criar banco de dados unidade4 no SQLiteStudio
196
Após adicionar o nome do banco de dados (unidade4) precisa clicar no botão Test Connection, para
verificar a estabilidade da conexão local, conforme apresentado a seguir:
Figura 200 – Test connection no SQLiteStudio
Após o teste de conexão ter sinalizado com sucesso, clicar no botão OK. Nesse momento, o banco
de dados está pronto e já é possível criar uma tabela clicando com o botão direito em cima do nome do
banco de dados (unidade4) → Create a table, conforme apresentado a seguir:
Figura 201 – Criar tabela aluno no SQLiteStudio
197
Unidade IV
Após nomear a tabela, é preciso adicionar os campos necessários para a construção da tabela.
Clicando duas vezes no espaço vazio da aba Structure será apresentado o que segue na figura:
Figura 202 – Acionar coluna na tabela aluno no SQLiteStudio
198
Para efetivar a construção da tabela, precisa clicar no botão verde Commit structure changes,
conforme apresentado a seguir:
Figura 205 – Botão Commit structure changes
199
Unidade IV
A seguir, a figura apresenta a mensagem de sucesso. Após essa tela, clicar no botão OK.
Figura 206 – Efetivação da criação da tabela aluno
Figura 207 – Tabela aluno criada
200
Figura 208 – Tabela aluno criada e armazenada na pasta do SQLiteStudio
Figura 209 – Exemplo de ConnectionString do SQLiteStudio
201
Unidade IV
Resumo
Nesta unidade, vimos como podemos combinar e integrar técnicas de

desenvolvimento web, tais como o JavaScript, que, de fato, enriquece todo
o processo do aplicativo web, principalmente tratando de suas funções e
métodos, disponibilizando, assim, praticidade e facilidades no front-end na
atuação de desenvolvimento de software para internet.
Vimos também conceitos de conexão com banco de dados, utilizando

como base a linguagem C#. Trabalhando com desenvolvimento de aplicativos
web, utilizamos recursos da linguagem C# para efetuar a codificação de banco
de dados, bem como toda a lógica de botões inseridos nas páginas aspx.
Finalmente, ressaltamos toda a construção de arquitetura web e sua

execução, lembrando da preocupação atual em desenvolver com qualidade,
agilidade e principalmente com a intenção de visualização de página em
qualquer dispositivo conectado à internet.
Exercícios
Questão 1. (AOCP 2019) Sabendo que, nas linguagens de programação, existem diferentes palavras
reservadas, é correto afirmar que são apenas palavras reservadas em linguagem de programação Java:
A) Strictfp, private, byte, transient.
B) Function, void, real, procedure.
C) Protected, finally, if, yield.
D) Public, void, del, elif.
E) Void, var, int, def.
Justificativa: todas as palavras da alternativa são palavras reservadas para linguagem Java.
202
Justificativa: as palavras function e real não são palavras reservadas.
Justificativa: yield é nome de uma função da classe Thread, mas pode ser usada livremente.
Justificativa: as palavras del e elif não são palavras reservadas.
Justificativa: as palavras var e def não são palavras reservadas.
Questão 2. (Cespe 2019) Assinale a opção que apresenta corretamente a saída gerada pelo código
Java precedente.
Figura 210
A) 36
B) 1 2 3 4 5 6
C) 1 2 3 4 5
D) 0 1 2 3 4 5
E) 0 1 2 3 4 5 6
Resposta correta: alternativa D.
203
Unidade IV
1ª rodada
i = 0 0 × 0 = 0 (menor que 36)
2ª rodada
i = 1 1 × 1= 1 (menor que 36)
3ª rodada
i = 2 2 × 2 = 4 (menor que 36)
4ª rodada
i = 3 3 × 3 = 9 (menor que 36)
5ª rodada
i = 5 5 × 5 = 25 (menor que 36)
6ª rodada
i = 6 6 × 6 = 36 ( igual a 36 )
Resposta: 0 1 2 3 4 5
204
REFERÊNCIAS
Textuais
APRESENTANDO o Bootstrap. GetBootstrap. Disponível em: http://twitter.github.com/bootstrap/index.

html. Acesso em: 25 set. 2020.
BISQUE. Colors Commutercreative. Disponível em: http://www.colors.commutercreative.com. Acesso

em: 22 set. 2020.
BRASIL. Presidência da República. Casa Civil. Subchefia para Assuntos Jurídicos. Lei n. 13.709, de 14 de
agosto de 2018. Lei Geral de Proteção de Dados Pessoais (LGPD). Brasília, 2018. Disponível em: http://
www.planalto.gov.br/ccivil_03/_ato2015-2018/2018/lei/l13709.htm. Acesso em: 17 set. 2020.
COYIER, C. Named colors and hex equivalentes. CSS-Tricks, janeiro de 2012. Disponível em: https://css-
tricks.com/snippets/css/named-colors-and-hex-equivalents/. Acesso em: 22 set. 2020.
DOWNLOADS. Visual Studio. Microsoft. 2020. Disponível em: https://visualstudio.microsoft.com/pt-br/

downloads/. Acesso em: 24 set. 2020.
DURÃES, R. Desenvolvendo para web usando o Visual Studio 2008. Rio de Janeiro: Brasport, 2011.
FAÇA mais com o novo Chrome. Google. Disponível em: https://www.google.pt/intl/pt-PT/chrome/.

FONT Squirrel. Webfont Generator. Disponível em: https://www.fontsquirrel.com/tools/webfont-

generator. Acesso em: 22 set. 2020.
FORMULÁRIOS HTML. w3schools. 2020. Disponível em: https://www.w3schools.com/html/html_forms.

asp. Acesso em: 21 set. 2020.
GETBOOTSTRAP. Introdução. Disponível em: https://getbootstrap.com/docs/4.4/getting-started/

introduction/. Acesso em: 22 set. 2020.
GROFFE, R. J. ASP.NET MVC: desenvolvendo soluções para web. DevMedia, Rio de Janeiro, 2011.
Disponível em: http://www.devmedia.com.br/asp-net-mvc-desenvolvendo-solucoes-para-web-revista-
net-magazine-91/22878. Acesso em: 15 set. 2020.
GT acessibilidade. W3C. 2011. Disponível em: https://www.w3c.br/GT/GrupoAcessibilidade. Acesso

em: 15 set. 2020.
INTRODUÇÃO ao JSON. In: CROCKFORD, D. How JavaScript works. Califórnia, EUA: Virgule-Solidus LLC,
2018. Disponível em: https://www.json.org/json-pt.html. Acesso em: 23 set. 2020.
205
ISHIDA, R. Servindo HTML & XHTML. Internacionalização. Traduzido por Maurício Samy Silva. W3C.
2016. Disponível em: https://www.w3.org/International/articles/serving-xhtml/index.pt-br. Acesso
em: 21 set. 2020.
JANONES, R. de S. Qualidade de software: uma questão de eficiência. DevMedia, Rio de Janeiro,

2010. Disponível em: http://www.devmedia.com.br/qualidade-de-software-uma-questao-de-
eficiencia/17803. Acesso em: 15 set. 2020.
KLEINA, N. A história da internet: pré-década de 60 até anos 80 [infográfico]. Tecmundo, Curitiba, 29

abr. 2011. Disponível em: http://www.tecmundo.com.br/infografico/9847-a-historia-da-internet-pre-
decada-de-60-ate-anos-80-infografico-.htm. Acesso em: 15 set. 2020.
LOTAR, A. Programando com ASP.NET MVC. São Paulo: Novatec, 2011.
MANZANO, J. A. N.; TOLEDO, S. A. Guia de orientação e desenvolvimento de sites: HTML, XHTML, CSS e
JavaScript/JScript. 2. ed. São Paulo: Erica, 2010.
MATERIALIZE. Materializecss. Disponível em: https://materializecss.com/. Acesso em: 22 set. 2020.
ROBERT, M. C. Código limpo. São Paulo: Alta Books, 2020.
SENDIN, R. Artigo.net Magazine 65. ASP.NET: WebForms X MVC. Comparando as duas formas de
desenvolver aplicações ASP.NET com WebForms e MVC. DevMedia. Rio de Janeiro, 2009. Disponível
em: http://www.devmedia.com.br/artigo-net-magazine-65-asp-net-webforms-x-mvc/13896. Acesso
em: 25 set. 2020.
SERVIÇO de validação de marcação. Validator. W3C. 2013. Disponível em: http://validator.w3.org/.

SILVA, M. S. CSS Grid layout: Criando layouts CSS profissionais. São Paulo: Novatec, 2019.
SILVA, M. S. HTML5: A linguagem de marcação que revolucionou a web. São Paulo: Novatec, 2019.
SILVA, M. S. Servindo HTML & XHTML. W3, fev. 2016. Disponível em: https://www.w3.org/International/
articles/serving-xhtml/index.pt-br. Acesso em: 25 set. 2020.
SOBRE O W3C. W3C. 2011. Disponível em: https://www.w3c.br/Sobre/. Acesso em: 15 set. 2020.
STANDARD built-in objects. JavaScript reference. Developer.Mozilla. Disponível em: https://developer.

mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects. Acesso em: 23 set. 2020.
USE as ferramentas de desenvolvedor do Google Chrome para verificar tags. Ajuda do Campaign
Manager. Support Google. 2020. Disponível em: https://support.google.com/dcm/answer/2828688?hl=pt-
BR. Acesso em: 21 set. 2020.
206
W3C PRESS RELEASES. Novo roteiro para o futuro das publicações está em andamento: W3C e IDPF
estão agora oficialmente unificados. W3C, fev. 2017. Disponível em: https://www.w3c.br/Noticias/
NovoRoteiroParaFuturoDasPublicacoes. Acesso em: 24 set. 2020.
Sites
http://www.colors.commutercreative.com
http://www.microsoft.com/pt-br
https://code.visualstudio.com
https://github.com/
https://www.dafont.com/pt/
https://www.iso.org/home.html
https://www.lgpdbrasil.com.br
https://www.sqlite.org/index.html
https://www.sublimetext.com
Exercícios
Unidade II – Questão 1: CENTRO DE SELEÇÃO E DE PROMOÇÃO DE EVENTOS (CESPE). Tribunal de Justiça

do Pará (TJ-PA) 2020: Analista Judiciário. Questão 46. Disponível em: https://arquivos.qconcursos.
com/prova/arquivo_prova/67268/cespe-2020-tj-pa-analista-judiciario-programador-prova.pdf?_
ga=2.35186337.1627829085.1601481671-441665092.1601481671. Acesso em: 30 set. 2020.
Unidade II – Questão 2: FUNDAÇÃO CARLOS CHAGAS (FCC). Técnico Judiciário – Área Apoio Especializado
Especialidade Informática 2019: Concurso Público. Questão 56. Disponível em: https://arquivos.
qconcursos.com/prova/arquivo_prova/66072/fcc-2019-trf-3-regiao-tecnico-judiciario-informatica-
prova.pdf?_ga=2.26914621.1627829085.1601481671-441665092.1601481671. Acesso em: 30 set. 2020.
Unidade III – Questão 1: CENTRO DE SELEÇÃO E DE PROMOÇÃO DE EVENTOS (CESPE). Tribunal

de Justiça do Pará (TJ-PA) 2020: Analista Judiciário. Questão 47. Disponível em: https://arquivos.
qconcursos.com/prova/arquivo_prova/67268/cespe-2020-tj-pa-analista-judiciario-programador-prova.
pdf?_ga=2.35186337.1627829085.1601481671-441665092.1601481671. Acesso em: 30 set. 2020.
Unidade III – Questão 2: AOCP. Prefeitura de Juiz de Fora 2016: Programador. Questão 30. Disponível
em: https://arquivos.qconcursos.com/prova/arquivo_prova/66099/aocp-2016-prefeitura-de-juiz-de-
fora-mg-programador-prova.pdf?_ga=2.68717329.1627829085.1601481671-441665092.1601481671.
Unidade IV – Questão 1: AOCP. Empresa Municipal de Informática (EMPREL) 2019: Analista de

Sistemas. Questão 32. Disponível em: https://questoes.grancursosonline.com.br/prova/emprel-pe-
2019-aocp-2-analista-de-sistemas/1178180. Acesso em: 30 set. 2020.
207
Unidade IV – Questão 2: CENTRO DE SELEÇÃO E DE PROMOÇÃO DE EVENTOS (CESPE). Tribunal de
Justiça do Pará (TJ-PA) 2019: Analista Judiciário. Questão 44. Disponível em: https://cdn.cebraspe.org.
br/concursos/tj_pa_19_servidor/arquivos/MATRIZ_507_TJPA013_PAG_4.PDF. Acesso em: 30 set. 2020.
208
Informações:
www.sepi.unip.br ou 0800 010 9000

Desenvolvimento Software

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

Desenvolvimento Software

Enviado por

Direitos autorais:

Formatos disponíveis

Desenvolvimento de

Software para Internet

Formado em Engenharia da Computação pela Universidade Paulista (UNIP) e pós-graduado em

Trabalha há mais de 15 anos no desenvolvimento de aplicações desktop e web, tendo prestado

Dados Internacionais de Catalogação na Publicação (CIP)

M338d Marinho, Salatiel Luz.

Desenvolvimento de Software para Internet / Salatiel Luz

208 p., il.

Nota: este volume está publicado nos Cadernos de Estudos e

1. HTML. 2. CSS3. 3. Cores. I. Título.

Prof. Fábio Romeu de Carvalho

Profa. Melânia Dalla Torre

Profa. Dra. Marília Ancona-Lopez

Profa. Dra. Marília Ancona-Lopez

Unip Interativa – EaD

Profa. Elisabete Brihy

Material Didático – EaD

• Configuração de estação de trabalho: instalação/configuração de IDE, do inglês integrated

• Configuração de banco de dados: instalação/configuração do banco de dados sugerido

• Json (JavaScript object notation, notação de objetos JavaScript)

• XML (extensible markup language)

• Front-end (desenvolvimento da interface do site): abordaremos conceitos de desenvolvimentos

• Back-end (desenvolvimento e implementação da regra de negócio do site): abordaremos conceitos

Esta disciplina apresentará, de forma estruturada, os principais conceitos teóricos e práticos de

• elevada velocidade de processamento de dados;

• grande capacidade de armazenamento de dados e informações;

• realização de tarefas repetitivas com rapidez e precisão.

Entrada de dados Processamento – execução de

Figura 1 – Esquema simplificado (computador)

Figura 2 – Base para o desenvolvimento web

• CSS 3: o responsável por estilizar a informação, deixar a página mais atraente.

• JS (JavaScript): o responsável por manipular a nossa estrutura, através de eventos de click ou

Lotar (2011), definiu, conforme figura a seguir, essa arquitetura em:

• model, que contém o código da camada de dados;

• controller, que recebe as requisições do usuário;

• view, que implementa o design da aplicação.

Figura 3 – Arquitetura MVC

Figura 5 – API Web

1.1 Editor Sublime Text

Para criar nosso ambiente de estudos, precisamos seguir os seguintes passos:

Figura 6 – Demonstrativo do site Sublime Text

— OS X (10.7, ou posteriormente será necessário)

— Windows (também disponível como uma versão portátil)

— Windows 64 bits (também disponível como uma versão portátil)

— Linux Repository (também disponível como tarball de 64 ou 32 bits)

Windows é um sistema operacional que foi desenvolvido pela Microsoft.

OS X (Mac OS) é um sistema operacional desenvolvido pela Apple.

Figura 7 – Download efetuado na pasta Downloads

Figura 8 – Inicialização da instalação do Sublime Text

Figura 9 – Tela de instalação do Sublime Text

Figura 10 – Conclusão da instalação do Sublime Text

Figura 11 – Acessando o Sublime Text no computador com sistema operacional Windows

Figura 12 – Pasta criada para alocação dos exercícios

Figura 13 – Início da digitação da tag HTML

Figura 14 – Estrutura inicial de uma página HTML

Figura 15 – Editor Sublime Text

Figura 16 – Definição de cores do Sublime Text

Um dos facilitadores contidos no Sublime Text é a opção de preferências

1.2 Visual Studio Code

O diretório de trabalho é uma pasta no seu computador ou em um compartilhamento de rede. Cada

Para obter mais informações a respeito do tema abordado, acesse o site:

1.2.1 Por que código do Visual Studio?

1.2.2 Baixando e configurando o Visual Studio Code

Figura 17 – Site do Visual Studio Code