Livro-Texto - Unidade I

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
apresentado a seguir.
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.
Resposta correta: alternativa A.
Análise das alternativas
A) Alternativa correta.
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.
B) Alternativa incorreta.
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.
C) Alternativa incorreta.
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
D) Alternativa incorreta.
Justificativa: essa tag não existe.
E) Alternativa incorreta.
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

Livro-Texto - Unidade I

Enviado por

Dados do documento

Título original

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

Livro-Texto - Unidade I

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