Desenvolvimento de Software para Internet

Prévia do material em texto

Autor: Prof. Salatiel Luz Marinho
Colaboradores: Prof. Angel Antonio Gonzalez Martinez
 Prof. José Carlos Morilla
Desenvolvimento de 
Software para Internet
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.
© 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.
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
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
9
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
10
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;
11
• 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
Resultado (vídeo, impressora etc.)
Processamento – execução de 
cálculos e reorganização de dados
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
12
• 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 
13
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.
14
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.
15
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
16
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.
17
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
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
18
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.
19
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
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.
20
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
21
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
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.
22
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/
23
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
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 gerenciardiferentes 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.
24
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
25
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
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:
26
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.
27
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
 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 oportunidadese tecnologias que irão surgir hoje e sempre.
28
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:
1993 1997 20001995 1999 20141991
HTML HTML 2.0 XHTML 1.0HTML+ HTML 3.2 HTML 5.0
Versão inicial Com recomendações 
do W3C
Com 
recomendações 
do W3C
Não teve 
recomendações 
do W3C
Com 
recomendações 
do W3C
Com 
recomendações 
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
HTML 3.2 1997 Recomendações do W3C
HTML 4.01 1999 Recomendações do W3C
XHTML 1.0 2000 Recomendações do W3C
HTML 5 2014 Recomendações do W3C
29
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
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, 
30
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 
31
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
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 
umavasta 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.
32
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.
33
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
• 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
Motor de renderização
Motor do navegador
Rede Interpretador JavaScript Analisador XML
Apresentar 
back-end
Persistir dados
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.
34
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 / 
35
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
 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
36
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 Á &Aacute;
E maiúsculo com acento agudo É &Eacute;
I maiúsculo com acento agudo Í &Iacute;
O maiúsculo com acento agudo Ó &Oacute;
U maiúsculo com acento agudo Ú &Uacute;
A minúsculo com acento agudo á &aacute;
E minúsculo com acento agudo é &eacute;
I minúsculo com acento agudo í &iacute;
O minúsculo com acento agudo ó &oacute;
U minúsculo com acento agudo ú &uacute;
A maiúsculo com acento circunflexo  &Acirc;
E maiúsculo com acento circunflexo Ê &Ecirc;
37
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
Descrição Caractere Representação do caractere
O maiúsculo com acento circunflexo Ô &Ocirc;
A minúsculo com acento circunflexo â &acirc;
E minúsculo com acento circunflexo ê &ecirc;
O minúsculo com acento circunflexo ô &ocirc;
A maiúsculo com crase À &Agrave;
A minúsculo com crase à &agrave;
U maiúsculo com trema Ü &Uuml;
U minúsculo com trema ü &uuml;
C com cedilha maiúsculo Ç &Ccedil;
C com cedilha minúsculo ç &ccedil;
A com til maiúsculo à &Atilde;
O com til maiúsculo Õ &Otilde;
A com til minúsculo ã &atilde;
O com til minúsculo õ &otilde;
N com til maiúsculo Ñ &Ntilde;
N com til minúsculo ñ &ntilde;
E comercial (ampersand) & &amp;
Aspa dupla “ &quot;
Aspa simples ‘ ‘
Menor que < &lt;
Maior que > &gt;
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.
38
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
39
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
• 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.
Figura 27 – Exemplo de estrutura de página HTML
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>
40
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>
41
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
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>
42
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
43
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
Nome da cor Código HEX HTML
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 #FFD700GoldenRod #DAA520
Gray #808080
Green #008000
GreenYellow #ADFF2F
HoneyDew #F0FFF0
HotPink #FF69B4
44
Unidade I
Nome da cor Código HEX HTML
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
45
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
Nome da cor Código HEX HTML
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
46
Unidade I
Nome da cor Código HEX HTML
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>
47
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
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>
48
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.
49
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
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%.
50
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>
51
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
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>
52
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.
53
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
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.
54
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.
55
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
• 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>
56
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 partesprincipais 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.
57
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
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
58
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.
59
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
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>
60
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>
61
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
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>
62
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>
63
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
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>
64
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>
65
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
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.
66
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
Quebra de linha <p> algum texto <br> quebrado </p>
Algum
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
Texto colorido
<p style=”color:red;”>
Texto colorido vermelho
Texto colorido vermelho </p>
Alterar fonte
<p style=”font-family:serif;”>
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).
Figura 59 – Exemplo de estrutura de página HTML
67
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
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.