Programação WEB I - Multivix

Prévia do material em texto

1
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017
Programação Web I
SUMÁRIO
PROGRAMAÇÃO WEB I
2
Programação Web I
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017SUMÁRIO
A Faculdade Multivix está presente de norte a sul 
do Estado do Espírito Santo, com unidades em 
Cachoeiro de Itapemirim, Cariacica, Castelo, Nova 
Venécia, São Mateus, Serra, Vila Velha e Vitória. 
Desde 1999 atua no mercado capixaba, des-
tacando-se pela oferta de cursos de gradua-
ção, técnico, pós-graduação e extensão, com 
qualidade nas quatro áreas do conhecimen-
to: Agrárias, Exatas, Humanas e Saúde, sem-
pre primando pela qualidade de seu ensino 
e pela formação de profissionais com cons-
ciência cidadã para o mercado de trabalho.
Atualmente, a Multivix está entre o seleto 
grupo de Instituições de Ensino Superior que 
possuem conceito de excelência junto ao 
Ministério da Educação (MEC). Das 2109 institui-
ções avaliadas no Brasil, apenas 15% conquistaram 
notas 4 e 5, que são consideradas conceitos 
de excelência em ensino.
Estes resultados acadêmicos colocam 
todas as unidades da Multivix entre as 
melhores do Estado do Espírito Santo e 
entre as 50 melhores do país.
 
mISSão
Formar profissionais com consciência cida-
dã para o mercado de trabalho, com ele-
vado padrão de qualidade, sempre mantendo a 
credibilidade, segurança e modernidade, visando 
à satisfação dos clientes e colaboradores.
 
VISão
Ser uma Instituição de Ensino Superior reconheci-
da nacionalmente como referência em qualidade 
educacional.
GRUPO
MULTIVIX
3
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017
Programação Web I
SUMÁRIO
eDITorIaL
FaCULDaDe CaPIXaba Da Serra • mULTIVIX
Diretor Executivo
Tadeu Antônio de Oliveira Penina
Diretora Acadêmica
Eliene Maria Gava Ferrão Penina
Diretor Administrativo Financeiro
Fernando Bom Costalonga
Diretor Geral
Helber Barcellos da Costa
Diretor da Educação a Distância
Pedro Cunha
Conselho Editorial
Eliene Maria Gava Ferrão Penina (presidente 
do Conselho Editorial)
Kessya Penitente Fabiano Costalonga
Carina Sabadim Veloso
Patrícia de Oliveira Penina
Roberta Caldas Simões
Revisão de Língua Portuguesa
Leandro Siqueira Lima
Revisão Técnica
Alexandra Oliveira
Alessandro Ventorin
Graziela Vieira Carneiro
Design Editorial e Controle de Produção de Conteúdo
Carina Sabadim Veloso
Maico Pagani Roncatto
Ednilson José Roncatto
Aline Ximenes Fragoso
Genivaldo Félix Soares
Multivix Educação a Distância
Gestão Acadêmica - Coord. Didático Pedagógico
Gestão Acadêmica - Coord. Didático Semipresencial
Gestão de Materiais Pedagógicos e Metodologia
Direção EaD
Coordenação Acadêmica EaD
bIbLIoTeCa mULTIVIX (Dados de publicação na fonte)
As imagens e ilustrações utilizadas nesta apostila foram obtidas no site: http://br.freepik.com
Charles Edward Costa Boncompagni
Programação Web I / Charles Edward Costa Boncompagni. – Serra: Multivix, 2019.
Catalogação: Biblioteca Central Anisio Teixeira – Multivix Serra
2019 • Proibida a reprodução total ou parcial. Os infratores serão processados na forma da lei.
4
Programação Web I
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017SUMÁRIO
Aluno (a) Multivix,
Estamos muito felizes por você agora fazer parte 
do maior grupo educacional de Ensino Superior do 
Espírito Santo e principalmente por ter escolhido a 
Multivix para fazer parte da sua trajetória profissional.
A Faculdade Multivix possui unidades em Cachoei-
ro de Itapemirim, Cariacica, Castelo, Nova Venécia, 
São Mateus, Serra, Vila Velha e Vitória. Desde 1999, 
no mercado capixaba, destaca-se pela oferta de 
cursos de graduação, pós-graduação e extensão 
de qualidade nas quatro áreas do conhecimento: 
Agrárias, Exatas, Humanas e Saúde, tanto na mo-
dalidade presencial quanto a distância.
Além da qualidade de ensino já comprova-
da pelo MEC, que coloca todas as unidades do 
Grupo Multivix como parte do seleto grupo das 
Instituições de Ensino Superior de excelência no 
Brasil, contando com sete unidades do Grupo en-
tre as 100 melhores do País, a Multivix preocupa-
-se bastante com o contexto da realidade local e 
com o desenvolvimento do país. E para isso, pro-
cura fazer a sua parte, investindo em projetos so-
ciais, ambientais e na promoção de oportunida-
des para os que sonham em fazer uma faculdade 
de qualidade mas que precisam superar alguns 
obstáculos. 
Buscamos a cada dia cumprir nossa missão que é: 
“Formar profissionais com consciência cidadã para o 
mercado de trabalho, com elevado padrão de quali-
dade, sempre mantendo a credibilidade, segurança 
e modernidade, visando à satisfação dos clientes e 
colaboradores.”
Entendemos que a educação de qualidade sempre 
foi a melhor resposta para um país crescer. Para a 
Multivix, educar é mais que ensinar. É transformar o 
mundo à sua volta.
Seja bem-vindo!
APRESENTAÇÃO 
DA DIREÇÃO 
EXECUTIVA
Prof. Tadeu Antônio de Oliveira Penina 
Diretor executivo do grupo multivix
5
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017
Programação Web I
SUMÁRIO
 > QUADRO 1 - Histórico a partir de 1991 17
 > QUADRO 2 - Alguns elementos HTML 29
 > QUADRO 3 - Principais atributos globais de tags html 41
 > QUADRO 4 - Principais atributos específicos de tags html 42
 > QUADRO 5 - Principais metatags incluídas na tag <head> 46
 > QUADRO 6 - Unidades de comprimento absolutos 70
 > QUADRO 7 - Unidades de comprimento relativos 71
 > QUADRO 8 - – Operadores da linguagem C# 138
LISTa De QUaDroS
6
Programação Web I
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017SUMÁRIO
 > FIGURA 1 - Tim Berners-Lee, inventor da WWW 17
 > FIGURA 2 - Estrutura de sistema cliente-servidor 19
 > FIGURA 3 - Marcações HTML da página ola-mundo.html 30
 > FIGURA 4 - Resultado renderizado pelo navegador Chrome 30
 > FIGURA 5 - Tags <!DOCTYPE> e <html> em um documento HTML 44
 > FIGURA 6 - Tag <head> e <body> em um documento HTML 45
 > FIGURA 7 - Uso das tags <h1>...<h6> internas ao corpo do 
documento HTML 47
 > FIGURA 8 - Uso da tag <blockquote> 48
 > FIGURA 9 - Uso da tag <ol> 49
 > FIGURA 10 - Uso da tag <ul> 49
 > FIGURA 11 - Uso das tags <em>, <strong> 50
 > FIGURA 12 - Uso das tags para estruturação de tabelas 52
 > FIGURA 13 - Formulário básico de login em HTML 54
 > FIGURA 14 - Formulário com input de botão “radio” 55
 > FIGURA 15 - Formulário com input tipo checkbox 56
 > FIGURA 16 - Formulário com controle de seleção de lista suspensa 57
 > FIGURA 17 - Formulário com controle de texto com 
múltiplas linhas 57
 > FIGURA 18 - Uma divisão básica no conteúdo 59
 > FIGURA 19 - Tags <section> e <span> 60
 > FIGURA 20 - Abstração do uso de tags para estruturação 
de layout HTML 61
 > FIGURA 21 - Estrutura de declarações CSS 65
 > FIGURA 22 - Exemplo com diferentes seletores 66
 > FIGURA 23 - Alguns nomes interpretados como cores em CSS 72
 > FIGURA 24 - Fonte com/sem serifa 74
 > FIGURA 25 - padding em uma <div> contendo uma tag <p> interna 80
 > FIGURA 26 - Exemplo de float texto com imagem 82
LISTa De FIgUraS
7
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017
Programação Web I
SUMÁRIO
LISTa De FIgUraS
 > FIGURA 27 - Exemplo de estrutura HTML utilizando o 
framework Bootstrap 87
 > FIGURA 28 - Grades usando classe col-sm-3 88
 > FIGURA 29 - Grades de duas/quatro colunas de conteúdo 89
 > FIGURA 30 - Abstraindo a compreensão do sistema de 
grades em 12 colunas 91
 > FIGURA 31 - Resultados de cálculo no console do DevTools – 
Google Chrome 97
 > FIGURA 32 - CamelCase 101
 > FIGURA 33 - UtilizandogetElementById – encontrando 
elemento por ID 103
 > FIGURA 34 - Alerta da função Somar(2,4) 106
 > FIGURA 35 - Exemplo jQuery de ocultar/mostrar elemento 114
 > FIGURA 36 - Exemplo básico de index.php 120
 > FIGURA 37 - Cálculo com duas variáveis 121
 > FIGURA 38 - Exemplo de consulta MySQL utilizando PHP 128
 > FIGURA 39 - Recursos do Windows 133
 > FIGURA 40 - Definindo o tipo de projeto 134
 > FIGURA 41 - Adicionando item ao projeto 135
 > FIGURA 42 - Tipo do item para novo projeto 136
 > FIGURA 43 - Código OlaMundo.cshtml 136
 > FIGURA 44 - OlaMundo.cshtml após renderização do browser 137
 > FIGURA 45 - Abstração dos níveis de tecnologias web Microsoft 141
 > FIGURA 46 - Ciclo de vida clássico 146
 > FIGURA 47 - Modelo espiral 147
 > FIGURA 48 - Técnicas de Quarta geração 148
 > FIGURA 49 - Exemplo diagrama caso de uso 153
 > FIGURA 50 - Exemplo de diagrama de classes 155
 > FIGURA 51 - Representação de relacionamento entre classes 156
 > FIGURA 52 - Representação de uma Sprint em SCRUM 159
8
Programação Web I
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017SUMÁRIO
SUmÁrIo
2UNIDADE
1UNIDADE 1 VISão geraL De Programação Para Web 16
1.1 HISTÓRICO DA WEB 16
1.2 CONTEXTO CLIENTE E SERVIDOR EM PROGRAMAÇÃO WEB 18
1.2.1 NAVEGADORES DE INTERNET 19
1.2.2 SERVIDORES WEB 21
1.2.3 PROTOCOLOS FUNDAMENTAIS PARA PROGRAMAÇÃO WEB 22
1.3 CONCEITO DE APLICAÇÃO WEB 27
1.4 FRONT-END E BACK-END 28
1.5 LINGUAGENS PARA WEB 29
1.5.1 LINGUAGEM DE MARCAÇÃO HTML 29
1.5.2 LINGUAGENS DE PROGRAMAÇÃO 31
1.6 FERRAMENTAS PARA PROGRAMAÇÃO WEB 32
1.6.1 EDITORES DE TEXTO PARA PROGRAMAÇÃO 32
1.6.2 AMBIENTES DE DESENVOLVIMENTO INTEGRADO 34
1.6.3 OUTRAS FERRAMENTAS NO CENÁRIO DE PROGRAMAÇÃO WEB 36
CoNCLUSão 36
2 FUNDameNToS HTmL 39
2.1 HTML 39
2.1.1 ATRIBUTOS EM TAGS HTML 40
2.2 COMENTÁRIOS EM HTML 43
2.3 TAGS DE ESTRUTURA DO DOCUMENTO HTML 44
2.4 CABEÇALHO E CORPO DO DOCUMENTO 44
2.5 METATAGS 45
2.6 TAGS TEXTUAIS 46
2.7 TÍTULOS (H1... H6) 47
2.8 BLOCOS TEXTUAIS (P, Q, BLOCKQUOTE) 47
2.9 LISTAS ORDENADAS E NÃO ORDENADAS (OL, UL, LI) 48
2.10 TEXTOS ENFATIZADOS (EM, STRONG) 50
2.11 TAGS PARA ESTRUTURAÇÃO DE TABELAS 51
2.12 TAG DE FORMULÁRIO E CONTROLES 53
2.12.1 CONTROLE DE TEXTO SIMPLES (INPUT TEXT) 53
2.13 CONTROLE BOTÃO DE OPÇÃO (INPUT RADIO) 54
9
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017
Programação Web I
SUMÁRIO
3UNIDADE
2.14 CONTROLE CAIXA DE SELEÇÃO (INPUT CHECKBOX) 55
2.15 CONTROLE DE LISTA SUSPENSA (SELECT) 56
2.16 CONTROLE DE TEXTO COM MÚLTIPLAS LINHAS (TEXTAREA) 57
2.17 BOTÃO (BUTTON) 58
2.18 TAGS DE DIVISÕES, SEÇÕES E DE LAYOUT 59
2.19 CONTÊINER DE DIVISÃO (DIV) 59
2.20 SEÇÕES E TAGS DE LAYOUT (SECTION, HEADER, FOOTER...) 59
CoNCLUSão 62
3 FUNDameNToS CSS e FrameWorK booTSTraP 64
3.1 FUNDAMENTOS CSS 64
3.1.1 ESTRUTURA, FORMAS E COMBINADORES DE DECLARAÇÃO 65
3.1.2 COMENTÁRIOS EM CSS 69
3.1.3 UNIDADES DE COMPRIMENTO 70
3.1.4 CORES, FUNDOS E BORDAS (COLOR, BACKGROUND, BORDER) 72
3.1.5 FONTE E TEXTO 74
3.1.6 TAMANHO (WIDTH, MAX-WIDTH, HEIGHT, MAX-HEIGHT) 78
3.1.7 PREENCHIMENTO E MARGENS (PADDING, MARGIN) 80
3.1.8 FLUTUAÇÃO (FLOAT) 82
3.2 FUNDAMENTOS DO FRAMEWORK BOOTSTRAP 83
3.2.1 CARACTERÍSTICAS 84
3.2.2 COMPONENTES 85
3.2.3 SISTEMA DE GRADES 87
CoNCLUSão 92
SUmÁrIo
10
Programação Web I
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017SUMÁRIO
SUmÁrIo
4 FUNDameNToS JaVaSCrIPT e bIbLIoTeCa JQUerY 94
4.1 FUNDAMENTOS JAVASCRIPT 94
4.1.1 FORMAS DE INTEGRAR JAVASCRIPT E HTML 95
4.1.2 TIPOS DE SAÍDA JAVASCRIPT 96
4.1.3 BÁSICO DA SINTAXE JAVASCRIPT 97
4.1.4 COMENTÁRIOS EM JAVASCRIPT 101
4.1.5 ENCONTRAR TAGS HTML / ALTERAR ESTILOS CSS 102
4.1.6 FUNÇÕES 104
4.1.7 CONDICIONAL (IF, ELSE IF) 107
4.1.8 REPETIÇÕES (FOR, WHILE) 109
4.2 FUNDAMENTOS DA BIBLIOTECA JQUERY 111
4.2.1 CARACTERÍSTICAS 111
4.2.2 SINTAXE BÁSICA DO JQUERY 112
4.2.3 EVENTO DOCUMENT READY 113
CoNCLUSão 116
5 FUNDameNToS DaS LINgUageNS PHP e C# 118
5.1 FUNDAMENTOS PHP 118
5.1.1 BÁSICO DA SINTAXE PHP 119
5.1.2 COMENTÁRIOS EM PHP 122
5.1.3 TIPOS DE DADOS PHP 123
5.1.4 FUNÇÕES EM PHP 124
5.1.5 CONDICIONAL (IF, ELSE IF) 125
5.1.6 REPETIÇÕES (FOR, WHILE) 126
5.1.7 PHP E BANCO DE DADOS MYSQL 127
5.2 INTRODUÇÃO AOS FUNDAMENTOS ASP.NET E C# 130
5.2.1 ASP.NET E AS MARCAÇÕES RAZOR 132
5.2.2 BÁSICO DA SINTAXE C# – VARIÁVEIS E OPERADORES 137
5.2.3 REPETIÇÃO (WHILE) 139
5.2.4 TESTE CONDICIONAL (IF, ELSE) 140
CoNCLUSão 142
4UNIDADE
5UNIDADE
11
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017
Programação Web I
SUMÁRIO
SUmÁrIo
6 eNgeNHarIa Web, UmL e DeSeNVoLVImeNTo ÁgIL -SCrUm 144
6.1 CONCEITOS BÁSICOS DE ENGENHARIA DE SOFTWARE 144
6.1.1 CICLO DE VIDA CLÁSSICO 145
6.1.2 PROTOTIPAÇÃO 146
6.1.3 MODELO EM ESPIRAL 147
6.1.4 TÉCNICA DE 4ª GERAÇÃO 148
6.2 EQUIPE DO PROCESSO DE DESENVOLVIMENTO 149
6.3 ESTIMATIVAS DE CUSTO, PRAZOS E DE PESSOAL 149
6.4 ENGENHARIA WEB (WEB-E) 150
6.4.1 MELHORES PRÁTICAS DA WEB-E 151
6.5 UML 152
6.5.1 DIAGRAMA DE CASOS DE USO 153
6.5.2 DIAGRAMA DE CLASSES 154
6.6 INTRODUÇÃO AO DESENVOLVIMENTO ÁGIL COM SCRUM 157
6.6.1 FERRAMENTAS SCRUM 160
CoNCLUSão 161
reFerÊNCIaS 162
6UNIDADE
12
Programação Web I
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017SUMÁRIO
ICoNograFIa
ATENÇÃO 
PARA SABER
SAIBA MAIS
ONDE PESQUISAR
DICAS
LEITURA COMPLEMENTAR
GLOSSÁRIO
ATIVIDADES DE
APRENDIZAGEM
CURIOSIDADES
QUESTÕES
ÁUDIOSMÍDIAS
INTEGRADAS
ANOTAÇÕES
EXEMPLOS
CITAÇÕES
DOWNLOADS
13
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017
Programação Web I
SUMÁRIO
APRESENTAÇÃO DA DISCIPLINA
No âmbito de desenvolvimento geral e programação de sistemas de informação, exis-
te uma grande área de concentração sobre a qual um futuro analista e desenvolvedor 
precisa apresentar domínio em relação a conhecimentos fundamentais. Essa área é 
a programação de aplicações para plataformas on-line (web). A relação das pessoas 
no mundo inteiro mudou drasticamente com o advento da internet e os recursos 
que ela proporciona em vários aspectos: obtenção de conhecimento, simples entre-
tenimento, realização de compras e acompanhamento de entregas, marcação de 
atendimentos para os mais variados fins, relacionamento interpessoal, descobrimen-
to de rotas para deslocamento e até mesmo a visualização simplificada no mundo e 
do espaço através de aplicações web voltadas para mapas e localizações. Entender 
o funcionamento da web e como criar aplicações úteis e de grande relevância às 
pessoas levou um ainda estudante de graduação norte-americano a encabeçar a lista 
de pessoas mais influentes e com maior poder aquisitivo do planeta, como aconteceu 
com Mark Elliot Zuckerberg, um dos criadores da plataforma web Facebook – rede 
social mais acessada da história. Na disciplina de Programação Web I, serão observa-
dos conceitos fundamentais para guiar sua carreira em desenvolvimento de aplica-
ções. Iremos inicialmente entender de forma generalizada, mas de maneira objetiva, 
os principais pontos de funcionamento da web e do modelo cliente servidor, passan-
do por conceitos importantes de tecnologias front-end na segunda unidade de estu-
dos com foco específico em HTML e XML. Na terceira unidade, veremos de maneira 
objetiva o que compõe o mecanismo de estilização CSS e as formas fundamentais de 
interação que podemos obter em uma aplicação com uso da tecnologia JavaScript. 
Mais adiante na disciplina, iremos observar conceitos importantes de desenvolvimen-
to ágil e metodologias de programação web. Já nas últimas duas unidades, veremos 
conceitos específicos de modelagem de aplicações para ambiente web e as lingua-
gens de programação e frameworks para implementar regrasde negócio com acesso 
a banco de dados relacionais. É importante que você sempre consulte a bibliografia 
deste material, além da participação ativa nos fóruns de discussão. Bons estudos!
14
Programação Web I
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017SUMÁRIO
Objetivos da disciplina
Ao final desta disciplina, esperamos que você seja capaz de: 
• Compreender aspectos gerais de programação para web.
• Entender e aplicar os fundamentos da linguagem HTML e XML.
• Entender e aplicar os fundamentos de estilização CSS e interação JavaScript.
• Assimilar os conceitos de desenvolvimento ágil e metodologias.
• Identificar o que são e como são usadas as linguagens de modelagem.
• Entender e aplicar os fundamentos de linguagem de programação para web.
• Identificar o que são frameworks e como eles são úteis no cenário de desen-
volvimento para web.
15
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017
Programação Web I
SUMÁRIO
OBJETIVO 
Ao final desta 
unidade, 
esperamos 
que possa:
> Definir o histórico de criação da web.
> Explicar o contexto cliente servidor.
> Descrever o funcionamento básico dos protocolos 
HTTP e FTP.
> Definir o que back-end e front-end de uma 
aplicação web.
> Identificar a diferença entre linguagem de 
marcação e linguagem de programação.
> Identificar as principais ferramentas para 
programação web.
UNIDADE 1
16
Programação Web I
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017SUMÁRIO
1 VISÃO GERAL DE 
PROGRAMAÇÃO PARA WEB
Como surgiu o conceito web? Como conseguimos através de uma conexão de inter-
net interagir com pessoas de todo o mundo em milésimos de segundo, por exemplo, 
quando acessamos e interagimos em uma rede social ou simplesmente iniciamos 
uma partida de xadrez com outro jogador do outro lado do mundo? O que permite 
e qual é contexto fundamental para que isso aconteça? 
Essa unidade irá tratar especificamente das respostas dessas perguntas, além de 
apresentar a conceituação fundamental do cenário de desenvolvimento e ferramen-
tas utilizadas. Neste momento, será dado o passo inicial para que você consiga desen-
volver sua primeira aplicação web. 
O caminho percorrido na unidade será embasado na teoria visando à diferenciação 
no mercado de trabalho em tecnologia da informação. Vamos juntos?!
“Pra trás, nem pra pegar impulso!”
- Clóvis de Barros Filho 
1.1 HISTÓRICO DA WEB
A internet como é conhecida e os recursos disponíveis os quais ela oferece como uma 
rede, e que consumimos como usuários, tiveram início a partir da criação do inglês 
Tim Berners-Lee (veja a figura, a seguir), a partir de pesquisas para interligar e realizar 
compartilhamento de arquivos entre diferentes pesquisadores de instituições distin-
tas. Nesse momento, foi introduzido o conceito de hipertexto em prol da existência 
de uma organização de informações. A ideia com isso é percorrer partes de um dado 
documento ou ter acesso a outro fazendo uso de ligações, ou ainda, palavras que são 
exibidas em destaque em um texto, denominadas como hiperlinks ou apenas links. 
Estamos altamente familiarizados com essa ideia, e seu entendimento se tornou algo 
elementar na atuação com qualquer tecnologia que estabeleça comunicação por 
meio de uma rede (local ou de internet).
17
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017
Programação Web I
SUMÁRIO
FIGURA 1 - TIM BERNERS-LEE, INVENTOR DA WWW
Fonte: SHUTTERSTOCK, 2019.
O desenvolvimento inicial da World Wide Web, ou apenas WWW (outra forma de se 
remeter à web), se deu na década de 1980, quando Tim Bernes-Lee, em 1989, criou 
uma proposta para o desenvolvimento de um banco de dados que armazenasse os 
hiperlinks. Em 1990, Tim criou a primeira versão da web incluindo o protocolo de 
comunicação (HTTP), uma linguagem de marcação (HTML), um navegador de inter-
net e o primeiro servidor web acessível até os dias atuais (janeiro de 2019).
O quadro a seguir apresenta o acontecimento histórico a partir de 1991 com os prin-
cipais fatos do surgimento de tecnologias até o ano de 2007.
QUADRO 1 - HISTÓRICO A PARTIR DE 1991
ANO ACONTECIMENTO
1991
Surgimento da lista de discussão eletrônica WWW-talk, cujo foco é compartilhar experiên-
cias relacionadas com a linguagem HTML.
1992 Desenvolvimento do navegador Mosaic.
1993 Criação do navegador de texto Lynx.
1994
Estabelecimento da especificação HTML 2 (unificação das diferentes formas de HTML). Cria-
ção da empresa Netscape Communications Corporation. Surgimento do W3C (World Wide 
Web Consortium).
18
Programação Web I
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017SUMÁRIO
ANO ACONTECIMENTO
1995
Definição de novas marcações para o HTML. Criação do conceito de frames. Lançamento do 
navegador Internet Explorer 2.0.
1996 Lançamento do HTML versão 4.
1997
O HTML passa a incorporar tabelas, applets, subscritos, sobrescritos e texto combinado com 
imagens.
1998 Reformulação do HTML em XML.
1999 Lançamento do XHTML 1.0.
2004 Criação do grupo WHATWG (Web Hypertext Application Technology Working Group)
2007 Início do desenvolvimento do HTML 5, que incorpora TAGs para animações.
Fonte: adaptado de MILLETO, 2014.
Conforme mencionado no quadro, em 1994 surgiu o W3C, sendo um consór-
cio de empresas que tem por objetivo o desenvolvimento de padrões para 
criação/interpretação dos conteúdos presentes na web. As aplicações criadas 
segundo tais padronizações podem ser mais facilmente acessadas e visuali-
zadas, com utilização de qualquer tecnologia, independentemente do hard-
ware ou software. Você poderá conhecer mais a respeito do W3C acessando 
seu site oficial.
1.2 CONTEXTO CLIENTE E SERVIDOR EM 
PROGRAMAÇÃO WEB
Para que seja possível programar um ambiente web, é necessário como premissa o 
conceito de funcionamento do sistema/modelo cliente-servidor. 
19
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017
Programação Web I
SUMÁRIO
Em um sistema cliente-servidor, parte do processamento de uma aplicação ocorre 
na máquina local do usuário, como, por exemplo, em um computador desktop, um 
notebook ou um smartphone, e outra parte do processamento acontece no ambien-
te do servidor em que está hospedado o website. Este website pode ser um simples 
site informativo ou uma aplicação avançada como uma rede social ou um e-com-
merce, por exemplo. 
A figura a seguir demonstra a estrutura cliente-servidor.
FIGURA 2 - ESTRUTURA DE SISTEMA CLIENTE-SERVIDOR
Fonte: adaptado de MILLETO, 2014, p. 5.
Em um modelo cliente-servidor, têm-se máquinas de clientes que executam navega-
dores realizando requisições em uma aplicação que se encontra em operação em um 
servidor, fazendo uso da internet como meio de comunicação. O servidor tem o papel 
de receber as requisições e responder com dados em forma de páginas web. Entenda 
nos próximos tópicos o que são os navegadores e o que são os servidores web.
1.2.1 NAVEGADORES DE INTERNET
Um navegador de internet, também conhecido como browser, é uma aplicação 
desenvolvida para funcionar localmente em um conjunto de hardware do usuário, 
como se sabe: um computador ou um smartphone, por exemplo. Tem como prin-
cipal objetivo ser a interface para realização de requisições do usuário na internet e 
receber respostas de um servidor. Independentemente de qual navegador o usuário 
utiliza, existe uma conformidade em relação à presença dos elementos:
20
Programação Web I
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017SUMÁRIO
• Barra de endereço.
• Botões de início, para avançar e voltar páginas.• Funções para adicionar páginas e recursos como favoritos.
• Botões para parar ou atualizar o processamento.
• Guias para abertura de diferentes páginas.
Internamente a um navegador, estão presentes os elementos:
1. a própria interface: incluindo os elementos, conforme citados anteriormente, 
e todas as áreas visuais do software, com exceção da janela em que é visualiza-
da uma página web solicitada.
2. mecanismo de navegação: responsável por realizar triagem em relação às 
ações de interface e a renderização.
3. mecanismo de renderização: tem por função a exibição em si do conteúdo ao 
qual foi solicitado do servidor remoto. Um exemplo seria solicitar um recurso 
escrito em HTML e CSS (veremos o significado adiante neste material), onde o 
mecanismo de renderização é responsável direto por analisar este HTML e por 
exibi-lo na janela de visualização.
4. mecanismo de networking: usado para tratar as chamadas de rede, como ex-
emplo: solicitações do tipo HTTP (veremos o significado adiante neste materi-
al). Apenas como informação, o componente de networking de um navegador 
possui interface independente de plataforma e subimplementações para cada 
plataforma. 
5. Interpretador Java Script: sendo responsável pela análise e execução de inter-
ações escritas em código Java Script.
6. armazenamento: é responsável por gerenciar dados que ficam salvos no 
navegador, como cookies, por exemplo.
7. back-end de interface: usado para definir widgets básicos como caixas de 
combinação e também janelas. Ele exibe uma interface genérica que não é es-
pecífica a uma plataforma específica. Sob esta interface, utilizam-se métodos 
da interface do usuário do sistema operacional.
21
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017
Programação Web I
SUMÁRIO
Tem-se como principais exemplos de navegadores de internet: Google Chro-
me, Mozilla Firefox, Internet Explorer e atualmente o Edge, sendo os dois 
últimos criados pela Microsoft.
1.2.2 SERVIDORES WEB
Como já foi compreendido até aqui, em um sistema cliente-servidor, o usuário utiliza 
um navegador para realizar requisições e renderizar respostas HTML provenientes de 
um servidor. 
Especificamente tratando agora do que vem a ser o servidor nesse contexto, tem-se 
por definição sendo um software que aceita os pedidos de clientes e os serve com 
respostas, sendo páginas web (ou outros recursos) havendo ou não elementos como 
imagens de forma embutida. Estes são implementados em data-centers que apre-
sentam em suas arquiteturas de infraestrutura diversas tecnologias e características, 
como um ambiente de hospedagem existindo back-up redundante, arquitetura para 
revenda de hospedagem facilitada para empreendedores, até soluções personaliza-
das em cloud-computing para apoiar grandes aplicações de e-commerce e redes 
sociais, por exemplo. 
O tema “servidor web” é bastante amplo e demanda que você estude as característi-
cas específicas de forma própria e também com auxílio de outras disciplinas, como a 
disciplina de redes e infraestrutura de TI.
Comumente em relação à plataforma têm-se no mercado como principais servidores 
web o servidor Apache, operando em ambientes de hospedagem Linux, e o deno-
minado IIS – Internet Information Services, voltado para plataforma de hospedagem 
22
Programação Web I
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017SUMÁRIO
Windows. A escolha de servidor está diretamente ligada ao fato de qual linguagem 
de programação se necessita fazer uso. Por exemplo, temos que, para fazer uso da 
linguagem C# utilizando o framework .NET, é aconselhável a implementação de um 
servidor sobre plataforma Microsoft se beneficiando do servidor IIS. Por outro lado, 
quando se implementam aplicações utilizando PHP, é mais comum fazer uso de 
servidor Apache em plataforma Linux. É aconselhável que, nesse momento, você 
pesquise mais a respeito de diferenças entre servidores web em diferentes platafor-
mas (Windows/Linux) e suas relações com as linguagens de programação. 
Um servidor web pode se apresentar como um servidor remoto ou local. No 
cenário de desenvolvimento, pode-se criar um servidor local para servir de 
ambiente de programação local propriamente dito a uma equipe ou simples-
mente a você como desenvolvedor. Dessa forma, é possível implementar local-
mente um servidor web tanto em Apache, para lidar com a linguagem PHP, 
quanto em IIS, para lidar com linguagem ASP.NET. O mesmo raciocínio para 
outras linguagens como Java, por exemplo. Para Apache, existe a forma de 
implementar o servidor utilizando, para isso, a iniciativa de componentes de 
servidor conhecida como XAMPP. Em momentos certos dessa disciplina, você 
verá algoritmos em PHP que poderão ser implementados por você utilizando 
essa tecnologia. Em relação ao IIS, a Microsoft disponibiliza várias tutorias para 
habilitar tais recursos em máquinas com sistema operacional Windows.
1.2.3 PROTOCOLOS FUNDAMENTAIS PARA 
PROGRAMAÇÃO WEB
Dentro do âmbito de programação web independente de linguagem de programa-
ção e plataforma de servidor, a todo momento, utilizam-se protocolos de comunica-
ção, seja para a aplicação em si ser operada ou também para realização de deploy, 
que trata do envio de arquivos e estrutura da solução para o servidor web. 
23
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017
Programação Web I
SUMÁRIO
Em computação, um protocolo de comunicação tem por definição ser um 
conjunto de regras convencionadas de controle que possibilitam uma cone-
xão, comunicação ou transferência de dados entre dois sistemas, além de 
serem aplicados de acordo com o propósito desejado. 
Você verá posteriormente dois dos principais protocolos no contexto de programação 
iniciando pelo protocolo HTTP. É importante entender que existem diversos outros 
tipos de protocolos, mas o foco nesta unidade se resume nos protocolos fundamen-
tais no estudo de programação para web.
1.2.3.1 HTTP
O protocolo HTTP é a base de comunicação da web. Tendo como significado Hyper-
text Transfer Protocol, o HTTP opera como um protocolo de requisição e resposta em 
um modelo cliente-servidor. Para que esse protocolo consiga transferir dados na web, 
é preciso que os outros protocolos conhecidos como TCP e IP tornem possível realizar 
conexão entre clientes e servidores através de sockets. Tal aprofundamento em TCP/
IP pode ser obtido através da disciplina de redes de computadores.
É muito habitual requisitar um serviço na internet utilizando um navegador e infor-
mando na barra de endereço uma requisição, tal como:
http://www.site-destino.com.br
Ao acessar o endereço apresentado, requisita-se a um servidor que responda com 
recurso o qual o programador implementou para que ocorra, comumente, nesse 
caso, a página inicial do site. Conforme destacado no início do endereço, faz-se essa 
requisição utilizando-se para isso o protocolo HTTP.
http://www.site-destino.com.br
24
Programação Web I
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017SUMÁRIO
Nesse momento, você pode estar assimilando tudo aqui de forma muito óbvia, mas, 
no decorrer do conteúdo, verá que esses conceitos são de extrema importância, pois, 
além do usuário, a própria aplicação desenvolvida pode realizar chamadas utilizan-
do o protocolo HTTP. Não menos importante, se faz necessário o entendimento do 
que são os métodos inerentes ao protocolo, os quais se utilizam quando se programa 
uma aplicação web.
O protocolo HTTP estabelece a comunicação entre as partes (cliente e servi-
dor) através de mensagens. Essas mensagens são entendidas como mensa-
gens de requisição e mensagens de resposta. As mensagens possuem um 
cabeçalho (header) e corpo, quando em mensagens derespostas o corpo 
se torna o recurso que o usuário requisitou, por exemplo, a página inicial de 
um website, ou também um erro quando esse recurso não existe (erro 404), 
ou que por ventura resultou em um erro interno no servidor (erro 500). Você 
poderá entender mais a respeito das especificações de cabeçalho, corpo de 
mensagem e erros consultado a especificação RFC2616, que define de forma 
completa o todo o universo do protocolo HTTP desde sua primeira versão. 
Em sua leitura no aprofundamento do protocolo HTTP, explore o conceito de 
tipos MIME em mensagens de retorno que especificam o recurso retornado, 
como exemplo o MIME text/html, que condiz a um arquivo HTML (um arqui-
vo estruturado de uma página web).
 
Em relação aos métodos de comunicação, o protocolo HTTP estabelece oito deles. 
São os métodos GET, POST, HEAD, PUT, DELETE, TRACE, OPTIONS e CONNECT. Aqui 
será aprofundado o entendimento dos dois principais métodos, GET e POST.
Uma requisição que utiliza o método GET envia os dados em conjunto da URL, como 
se percebe a seguir:
http://www.site-destino.com.br/sobre-a-empresa.php?idioma=portugues
http://www.site-destino.com.br/sobre-a-empresa.php?idioma=portugues 
25
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017
Programação Web I
SUMÁRIO
No exemplo de requisição apresentado, está sendo acessada uma página definida 
como sobre-a-empresa.php, e na própria URL é informado um parâmetro chamado 
idioma, o qual foi informado ser “português”. Dessa forma, o recurso codificado em 
PHP (página sobre a empresa) poderá capturar esse dado e manipulá-lo com intuito 
de trazer para você como usuário a resposta no idioma português. 
Veja outro exemplo:
http://www.loja-virtual.com.br/produtos.php?ordem=valor&tipo=eletronicos
Agora, nesse outro exemplo, o acesso é de uma loja virtual, e se utilizam dois parâ-
metros: um deles relacionado à ordenação dos produtos que preferimos, e o outro 
relacionado ao tipo de produto que deverá ser exibido. A página produtos.php pode-
rá, então, processar os resultados de produtos obedecendo a esses parâmetros (essa 
programação citada, de ordenação e tipos de produtos é implementada pelo progra-
mador e não é um padrão natural de aplicações desenvolvidas). 
Não existe uma convenção para estipular como devem ser os parâmetros 
em uma requisição, e, dessa forma, o programador desenvolve como os 
recursos (as páginas do site, por exemplo) irão se comportar a partir de parâ-
metros informados via método GET. Vale lembrar que, apesar de não existir 
definição, existem, porém, boas práticas para atender a motores de busca. 
Essas práticas são entendidas por URL amigáveis e técnicas de SEO – Search 
Engine Optimization. É altamente recomendado que você explore e enten-
da como os sites de busca realizam a indexação de recursos para exibição 
aos usuários. Além dessa observação em relação à arquitetura de URLs, vale 
lembrar que boas aplicações web devem, por premissa, realizar o tratamen-
to de dados informados via método GET para evitar erros e principalmente 
ataques, que podem até conseguir acessar uma base de dados.
http://www.loja-virtual.com.br/produtos.php?ordem=valor&tipo=eletronicos
26
Programação Web I
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017SUMÁRIO
Em relação ao método POST tem-se um encapsulamento dos dados, não sendo, 
então, visíveis na URL. Ou seja, em uma comunicação HTTP utilizando o método 
POST, os parâmetros são enviados juntamente no corpo da requisição. Um formulário 
de contato de um website é comumente programado utilizando-se o método POST, 
onde os parâmetros de entrada do usuário (nome, telefone, e-mail e mensagem, por 
exemplo) são transferidos de forma encapsulada – não visíveis na URL.
O método GET é o padrão em requisições HTTP, e isso quer dizer que, quan-
do nenhum método é especificado na comunicação, por padrão, é utiliza-
do o método HTTP. Como exemplo para visualizar isso, tem-se que, em um 
formulário HTML, é necessário especificar o atributo method, o valor “POST”; 
caso contrário, os dados serão visíveis na URL de destino do formulário. 
Em relação a tamanho, temos a limitação de 255 caracteres na utilização do 
método GET, pois, nesse método, se utiliza a URL. Já no método POST, não 
existe essa limitação.
1.2.3.2 FTP
O protocolo FTP estabelece a maneira de envio/manipulação dos arquivos que serão 
úteis à aplicação no servidor web. Aqui não será apresentado a fundo em suas espe-
cificações, é preciso apenas entender o FTP como a área onde estarão hospedadas 
nossas soluções. Os servidores web implementam o FTP e disponibilizam o acesso 
através de interfaces de linha de comando (CLI) ou através de uma interface gráfica 
de usuário (GUI). 
Para ambas as formas de acesso FTP, é necessário informar o destino, usuário e senha 
para acesso. Em relação às interfaces gráficas, existem vários softwares específicos para 
realizar conexão FTP, sendo um dos mais conhecidos o chamado Filezilla (gratuito). 
Trata-se de um programa instalado localmente que permite gerenciar uma ou mais 
conexões a servidores web com intuito de interagir diretamente com os arquivos, 
27
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017
Programação Web I
SUMÁRIO
possibilitando enviar arquivos para o servidor (comum em situações de deploy de 
aplicações) ou também para baixá-los (comum em situações de back-up de dados). 
O Filezilla conta também com funções avançadas, como, por exemplo, a função que 
compara os arquivos locais em relação aos arquivos do servidor com intuito de ofere-
cer uma maneira simplificada de controlar arquivos mais novos ou mais antigos (útil 
em rotinas de back-up).
Um navegador de internet promove também a forma de acesso FTP, para tanto basta 
informar na barra de endereço: ftp://site-destino.com.br. Fazendo isso, é comum que 
seja exibido um pop-up solicitando ser informado um nome de usuário e senha para 
acesso. Em caso positivo, a árvore de pastas presentes no servidor será exibida na jane-
la do navegador, em que você poderá navegar e acessar recursos nela hospedados.
1.3 CONCEITO DE APLICAÇÃO WEB
Diferentemente de uma aplicação desktop ou mobile, uma aplicação web, conforme 
já entendido até aqui, são sistemas/softwares desenvolvidos com intuito de serem 
acessados a partir da utilização de um navegador de internet. Eles são construídos 
em linguagens de programação que possilitam a criação dinâmica de conteúdos 
web com resultado em marcações HTML para renderização em browsers. 
Têm-se como exemplos de aplicações web diversas soluções, como websi-
tes corporativos, lojas virtuais que fazem integração com banco de dados e 
meios de pagamento, bem como aplicações complexas como redes sociais 
e os proprios buscadores de internet.
ftp://site-destino.com.br
28
Programação Web I
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017SUMÁRIO
1.4 FRONT-END E BACK-END
Uma aplicação web apresenta em sua composição, no âmbito de programação, duas 
partes distintas: front-end e back-end.
Para apoiar e desenvolver o front-end de uma aplicação web, são utilizadas todas as 
tecnologias as quais os browser consegue renderizar e interpretar, sendo principal-
mente:
• A linguagem de marcação HTML.
• A linguagem de marcação XML.
• A linguagem de programação interpretada JavaScript.
• O mecanismo de estilização CSS.
Para lidar com o processamento de requisições especificadas via métodos (GET e 
POST principalmente) e criar retorno para o navegador, as aplicações web contam 
com tecnologias back-end, tais como:
• Linguagens de programação, como C#, Java, PHP, Ruby e etc.
• Tecnologias de banco de dados (isso vem mudando também para front-end, 
vide tecnologiasNoSQL). 
De forma resumida, as regras de negócio da aplicação são tratadas por linguagens de 
programação, seus frameworks de desenvolvimento e suas arquiteturas (back-end). 
Por outro lado, toda a parte de interação e experiência do usuário é tratada por tecno-
logias de front-end. É comum em grandes equipes de desenvolvimento que existam 
profissionais especializados somente em uma ou outra parte nesse contexto. Antago-
nicamente, em organizações de menor porte, é comum que um mesmo profissional 
atue tanto com front-end da aplicação como com o back-end.
29
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017
Programação Web I
SUMÁRIO
1.5 LINGUAGENS PARA WEB
Como já foi citado até aqui, existem diversas linguagens envolvidas no contexto de 
pogramação web. Sabendo disso, entenda de maneira mais aprofundada o que é 
uma linguagem de marcação versus linguagens de programação. 
1.5.1 LINGUAGEM DE MARCAÇÃO HTML
A principal linguagem de marcação se trata da HTML (Hypertext Markup Language) 
e consiste em uma linguagem que define elementos (tags) que compõem a estru-
tura de uma aplicação web, da mais simples até a mais complexa. Como visto, a 
HTML foi criada por Tim Berners-Lee e revolucionou, desde então, a comunicação 
entre pessoas de todo o mundo. Basicamente o HTML é uma linguagem que define 
elementos de forma estruturada para compor páginas web. Os elementos são escri-
tos utilizando-se os caracteres < (menor que) e > (maior que), tal como exemplos no 
quadro a seguir.
QUADRO 2 - ALGUNS ELEMENTOS HTML
ELEMENTO DESCRIÇÃO
<html> Elemento que define o início de um documento HTML.
<head> Elemento que define metadados em um documento HTML.
<body> Elemento que define o corpo de um documento HTML.
<a> Elemento âncora utilizado para criar links em um documento HTML.
<img> Elemento para definir uma imagem em um documento HTML.
<p> Elemento para definir um parágrafo textual.
Fonte: elaborado pelo autor.
Dessa forma, um documento HTML simples pode ser renderizado em um navegador, 
conforme exemplificado nas figuras apresentadas a seguir.
30
Programação Web I
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017SUMÁRIO
FIGURA 3 - MARCAÇÕES HTML DA PÁGINA OLA-MUNDO.HTML
Fonte: elaborada pelo autor.
Conforme pode-se perceber, nessa figura apresentam-se os elementos HTML dispos-
tos em 11 linhas de código. Na linha 1, tem-se a definição do tipo de documen-
to (doctype), e as linhas 2 e 11 representam a abertura e fechamento do elemento 
<html>, que, portanto, engloba todos os outros internos a ele. Entre as linhas 3 e 6, 
que tratam do cabeçalho do documento, têm-se dois outros elementos que definem 
o metadado de tipo de conteúdo (linha4) e o título do documento (linha 5). Interno 
ao elemento <body> têm-se a definição de um parágrafo de texto e um link simples 
que direciona o usuário ao website google.com. O documento foi salvo na raiz da 
unidade ( D: ) de um computador com o nome ola-mundo.html. Ao executar o docu-
mento com um clique duplo, tem-se o resultado representado no browser, conforme 
figura a seguir.
FIGURA 4 - RESULTADO RENDERIZADO PELO NAVEGADOR CHROME
Fonte: elaborada pelo autor.
31
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017
Programação Web I
SUMÁRIO
1.5.2 LINGUAGENS DE PROGRAMAÇÃO
Diferentemente de uma linguagem de marcação, conforme observado no tópico 
anterior, uma aplicação web necessita de algo para receber as requsições e gerar 
conteúdo web dinâmico, realizar operações e interagir com um banco de dados. 
Veja um exemplo.
Imagine a página de detalhes de um produto em uma loja virtual. Nela têm-se 
o nome do produto de forma destacada, suas informações, seu preço, fotos, 
uma área para cálculo de frete e demais componentes de layout que são 
inerentes a essa parte da aplicação. É possível citar: o botão para adicionar o 
produto no carrinho de compras e etc. Partindo do princípio que se pode ter 
essa página puramente em HTML, é possível pensar em existir um documen-
to HTML específico para cada produto exisistente na loja (ex.: produto-1.html, 
produto-2.html e etc), mas, graças à linguagem de programação operando 
em um servidor web, consegue-se ter apenas um documento específico o 
qual se pode charmar, como exemplo, de detalhes-do-produto. Esse recurso 
criado em uma linguagem de programação (PHP, C#, Java e etc.) fará o rece-
bimento de parâmetros e exibirá as informações que estão presentes em um 
banco de dados. Isso é o significado de conteudo dinâmico, ou seja, um recur-
so acessível via protoloco HTTP, o qual é programado para receber requisições 
com informações de parâmetros (comumente via método GET, para esse 
exemplo de detalhes de um produto), que irá, então, processá-los e retor-
nar ao navegador do cliente uma página montada em HTML, para que ele 
somente a renderize e a mostre ao cliente. Assim, através de linguagens de 
programação para o ambiente web, consegue-se realizar essa e outras tarefas.
32
Programação Web I
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017SUMÁRIO
As principais linguagens utilizadas para o cenário de programação web são: a lingua-
gem C# utilizando o framework .NET (que consolida o que se entende como ASP.
NET), a linguagem Java e a linguagem PHP.
De forma geral, são características de uma linguagem de programação para web, no 
contexto back-end:
• Estabelecer um conjunto de regras lógicas para criação de aplicações.
• Estabelecer integração com banco de dados.
• Realizar operações sobre dados para atender a regras de negócio.
• Realizar integração com outras tecnologias, como, por exemplo, de front-end. 
• Possuir uma sintaxe de alto-nível apresentando estruturação de codificação 
com expressões e notações lógico-matemáticas comumente utilizadas.
Existem ainda diversas outras características em relação a cada linguagem e cada 
framework que se pode utilizar para cada uma delas. 
1.6 FERRAMENTAS PARA PROGRAMAÇÃO WEB
Nesse tópico, será apresentada uma visão geral das principais ferramentas para o 
desenvolvimento de aplicações web. Como premissa, é necessário que você realize 
o download de tais recursos e se interesse por eles. É fundamental que um analista/
desenvolvedor tenha curiosidade e vontade de aprender, certo? A partir disso, veja as 
ferramentas disponíveis para a programação web. 
1.6.1 EDITORES DE TEXTO PARA PROGRAMAÇÃO
A principal ferramenta de um desenvolvedor é algo em que ele possa escrever suas 
aplicações, além de um compilador quando, se lida com linguagens de programa-
ção que têm por premissa serem compiladas (comum em linguagens orientadas a 
objeto). Em se tratando da escrita de código propriamente dita, é possível realizá-la 
utilizando-se, por exemplo, um editor de texto. Pode-se pensar em vários editores, 
como o mais simples bloco de notas presente em computadores Windows, com o 
qual você já teve contato em algum momento. 
33
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017
Programação Web I
SUMÁRIO
Mas pense: o trabalho de um programador não envolve escrever textos e utilizar funções 
como negrito e itálico em prol de salvar uma lista de supermercado e realizar uma 
impressão. Um desenvolvedor aplica múltiplos conhecimentos em tecnologia através 
de uma ou mais sintaxes (regras de construção) de linguagens e mecanismos, em prol 
de atender a regras de negócio na solução de problemas e implementações de facili-
tadores para usuários finais. Aplicar sintaxes requer da ferramenta algumas caracterís-
ticas básicas. Observe, a seguir, alguns editores específicos para programação.
1.6.1.1 NOTEPAD++
O Notepad++ é um editor de textos para programação open-sourcecriado em lingua-
gem de programação C++, específico para operar em ambientes Windows. É um soft-
ware de fácil obtenção e instalação, além de resultar em uma instalação de tamanho 
reduzido na máquina. Como características desse editor têm-se:
• Realce visual de sintaxe, onde o programador pode definir preferência de 
cores e estilização visual do código que irá escrever utilizando o editor.
• Apresenta recurso visual para desenvolvedor perceber e aplicar indexação de 
código para melhor manutenção da programação.
• Apresenta linhas numeradas para melhor codificação e manutenção.
• Apresenta interface simplificada e minimalista, apresentando guias (abas) 
para cada documento aberto ou em criação no editor.
• Preenchimento automático de expressões e funções de linguagens.
• Pode ser utilizado em diferentes idiomas.
• Grava e reproduz macros. Esse recurso significa que tarefas repetidas podem 
ser gravadas e reproduzidas, facilitando escrita ou manutenção de código geral.
1.6.1.2 ATOM
O Atom é um editor de código open-source que opera em sistemas Windows, Linux 
ou OSX (Apple). Assim como o Notepad++, é um software de fácil obtenção e instala-
ção. São suas características:
34
Programação Web I
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017SUMÁRIO
• Apresenta recurso de autocompletar sintaxe de linguagens.
• Apresenta um gerenciador de arquivos simplificado para facilitar a navegação 
entre documentos de um projeto.
• Apresenta recurso de divisão de painéis para comparação de códigos distintos 
entre documentos.
• Apresenta o recurso de instalação de pacotes de linguagens já criados por 
comunidades de desenvolvimento.
• Apresenta integração com o repositório GitHub.
1.6.1.3 VISUAL STUDIO CODE
Também conhecido apenas por VS Code, é um editor de código criado pela Microsoft. 
Ele pode ser instalado gratuitamente em ambientes Windows, Linux e OSX, assim 
como o Atom, abordado anteriormente. Como características desse editor, têm-se:
• Apresenta realce de sintaxe e recurso de preenchimento automático, além de 
proporcionar conclusões com base nos tipos de variáveis, funções e módulos.
• Apresenta um depurador de código embutido no editor.
• Apresenta uma interface mais moderna/robusta e menos minimalista em 
comparação a outros editores.
• Apresenta integração com GitHub.
• Apresenta recursos para estender recursos, como para inclusão de novos 
temas e outras funcionalidades.
• Apresenta recursos para lidar com diversas linguagens e tecnologias, tais 
como: C#, F#, Java, SQL, HTML, Perl, Python, JSON, XML, CSS, JavaScript, PHP, 
entre outras.
1.6.2 AMBIENTES DE DESENVOLVIMENTO INTEGRADO
Além dos editores de textos específicos para programação web, têm-se também 
presente no cenário de desenvolvimento os softwares denominados como ambientes 
de desenvolvimento integrado. Conhecidos pela sigla IDE, do inglês Integrated Deve-
lopment Environment, são programas que têm por objetivo principal não somen-
te serem editores de códigos, mas também apresentarem recursos para agilizar o 
processo de desenvolvimento. Como características gerais de IDE:
35
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017
Programação Web I
SUMÁRIO
• Presença do editor de texto com características avançadas, como vimos ante-
riormente: realce de sintaxe, autocompletador de expressões, gerenciador de 
arquivos da solução (aplicação em desenvolvimento).
• Presença nativa de compilador, o que quer dizer que o código escrito em alto 
nível é facilmente compilado em linguagem de máquina para realização de 
deploy em servidores web.
• Presença de depurador de linguagem específica, que auxilia diretamente a 
construção da aplicação ainda no momento de desenvolvimento. Isso reduz 
drasticamente o cenário de tentativa e erro no procedimento de codificação.
• Presença de criador de modelos para facilitar criação de classes e métodos 
inerentes a linguagens de alto nível orientadas a objetos.
• Presença de funções e módulos internos para integração com servidores web 
para facilitar o deploy direto da IDE para um servidor.
• Presença de analisador e funções para testes automatizados em algoritmos 
criados.
Como principais IDEs no mercado de desenvolvimento de aplicações web, 
têm-se o Visual Studio criado pela Microsoft (não confundir com o VS Code). 
É uma IDE consagrada no mercado, sendo ferramenta gratuita para estu-
dantes, desenvolvedores individuais ou que sejam parte de pequenas equi-
pes (versão community). Apresenta-se como uma ferramenta completa para 
o desenvolvimento não somente de aplicações web, mas também desktop 
e mobile, suportando diversas linguagens de programação. Outra opção de 
IDE, também consagrada entre equipes de desenvolvimento, é a denomina-
da NetBeans. É uma ferramenta gratuita e muito utilizada por desenvolve-
dores que atuam com linguagem PHP e Java. Apresenta suporte a diversos 
frameworks, como Zend, Doctrine, Symfony, CakePHP entre outros.
36
Programação Web I
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017SUMÁRIO
1.6.3 OUTRAS FERRAMENTAS NO CENÁRIO DE 
PROGRAMAÇÃO WEB
Além de editores de texto leves e ambientes de desenvolvimento integrados (IDEs) 
robustos, um desenvolvedor atua diretamente com outras ferramentas que valem 
ser destacadas, principalmente no que tange à questão de criação e manipulação de 
banco de dados. Em relação a esse contexto, têm-se as seguintes ferramentas:
• mySQL Workbench: ferramenta CASE para desenhar modelos de banco de 
dados para SGBD MySQL, com possibilidade direta de criação física de um 
modelo, além de conexão para manipulação de dados.
• Filezilla: trata-se de um software cliente de conexão FTP, SFTP e FTPS que 
opera em ambientes Windows e Linux. Possui funcionalidades especificas 
para envio e recebimento de arquivos para servidores web.
CONCLUSÃO 
O cenário de desenvolvimento de aplicações para web é sem dúvidas desafiador! 
Um analista programador precisa assimilar múltiplos conceitos altamente interco-
nectados em prol de soluções inteligentes que estarão hospedadas em servidores de 
internet de alta complexidade técnica. Nesta unidade, observou-se, de maneira geral, 
o cenário que engloba a prática de programação para essa plataforma. Inicialmente 
você teve contato com um breve histórico da web, e caminhamos com a percepção 
fundamental e objetiva do modelo cliente servidor, conceituando-se os dois princi-
pais protocolos inerentes a esse contexto. 
Você visualizou também uma abordagem introdutória acerca das principais tecno-
logias de front-end e back-end, e, ao final, observaram-se as principais ferramentas 
necessárias para um programador exercer suas funções em uma equipe de desenvol-
vimento. Tais conhecimentos são a base para o início do entendimento aprofundado 
em programação, pois, para obtenção de conhecimento avançado, se faz necessária a 
perfeita assimilação de questões básicas (acredite: vários programadores nível sênior 
no mercado não entendem questões fundamentais, pois preferem pular passos de 
conhecimento). 
37
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017
Programação Web I
SUMÁRIO
Recomenda-se que seus estudos em programação web sejam sempre aprofunda-
dos com a leitura dos livros da bibliografia básica e complementar deste material, 
além também do seu interesse em buscar a obtenção das ferramentas e tecnologias 
apresentadas. Você é o único responsável pelo seu sucesso! 
Dica 1: comece lendo um pouco sobre temas que mais lhe interessaram e, depois, 
aprofunde cada vez mais. O segredo é manter frequência em leitura e não se frus-
trar. O tema programação requer fundamentalmente a leitura constante em fontes 
confiáveis, ter curiosidade, além domais importante: força de vontade para alcançar 
objetivos. 
Dica 2: pesquise e participe ativamente de fóruns e comunidades de linguagens e 
tecnologias que você perceber terem muito valor. Aprende-se muito dessa forma. 
Para finalizar, o importante a ser entendido é que você não deve se guiar para se 
tornar um exímio “operador de quebra-cabeça”, deve se preparar para uma profissão 
que remete à engenharia (conhece o significado literal dessa palavra?). Bons estudos! 
38
Programação Web I
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017SUMÁRIO
OBJETIVO 
Ao final desta 
unidade, 
esperamos 
que possa:
> Identificar as 
principais tags e 
atributos da HTML.
> Aplicar tags em 
documentos 
HTML e perceber 
estruturação de 
layout.
> Explicar tags textuais 
para tabelas e para 
formulários.
> Definir as tags para 
determinação de 
seções, de divisão e 
de layout.
UNIDADE 2
39
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017
Programação Web I
SUMÁRIO
2 FUNDAMENTOS HTML
Um analista e, principalmente, um desenvolvedor que atue com desenvolvimento 
web, precisa: identificar, compreender e construir documentos HTML com fluidez. 
Saber o “vocabulário” básico dessa linguagem de marcação é necessário para atingir 
esse objetivo. 
Esta unidade de estudo tratará especificamente de como escrever os elementos 
necessários para exibir conteúdo web, sendo este conteúdo textual, tabelado, em 
listas, internos a blocos/seções/divisões, e também exibindo controles para entrada 
de dados do usuário final. 
A proposta é que você tenha contato com os fundamentos da linguagem de marca-
ção HTML e possa com isso estabelecer questionamentos com seus próprios testes, 
e consequentemente descobrir conceitos avançados através dos livros indicados nas 
referências dessa disciplina e outras fontes.
2.1 HTML
A HTML é uma linguagem de marcação que contém elementos (tags) utilizados para 
definir/marcar a estrutura de uma aplicação web.
Como exemplo tem-se a tag <a>, que define um hyperlink, conforme a seguir:
<a href=”http://www.google.com.br”>Ir para o site Google</a>
No exemplo, é apresentada a definição de um link simples que redirecionará o usuá-
rio para o website google.com.br. Conforme cores no exemplo, percebemos:
• Em vermelho: abertura e fechamento da tag.
• Em azul: o texto exibido como link ao usuário. 
• Em verde: o endereço de destino interno ao atributo href da tag. 
40
Programação Web I
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017SUMÁRIO
Uma observação importante é que uma tag html pode conter outras tags; 
dessa forma a tag <a> pode conter, por exemplo, uma imagem (ou outro 
elemento). 
Veja um exemplo de hyperlink em uma imagem:
<a href=”http://www.google.com”><img src=”logomarca_google.jpg”></a>
Agora, conforme negrito, você percebe uma tag de imagem interna à tag <a>.
2.1.1 ATRIBUTOS EM TAGS HTML
Como visto no exemplo de criação de um link, apresentado anteriormente, o atribu-
to href criou na tag <a> a ação de destino quando o usuário clicar no elemento ou 
texto definido. Tem-se, então, que os atributos html fornecem informações adicio-
nais em tags.
Atributos podem ser definidos em todos os elementos html e são apresen-
tados com o par nome e valor, como vimos: href=”http://www.google.com.br” 
(href sendo o nome do atributo, e endereço do site, como valor).
41
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017
Programação Web I
SUMÁRIO
Existem diversos atributos aos quais são aplicados tags html, com os mais variados 
fins. O quadro a seguir expõe os chamados atributos globais, ou seja, os atributos 
que podem ser usados em qualquer elemento html (aqui está sendo falado da html 
versão 5). Foram escolhidos os principais atributos globais para compor o quadro.
QUADRO 3 - PRINCIPAIS ATRIBUTOS GLOBAIS DE TAGS HTML
ATRIBUTO DESCRIÇÃO
id
Define um identificador único a um elemento. É utilizado para estiliza-
ção CSS, como veremos adiante nesta unidade, bem como para intera-
ções JavaScript, como veremos na próxima unidade. Um exemplo seria de-
finir o identificador igual a link-google para o elemento <a>, resultando em: 
<a id= "link-google" href= "http://www.google.com.br">Site Google</a>. Assim, pode-
ria ser definido através de CSS, por exemplo, que o elemento link-google tenha o 
tamanho de fonte 12, cor vermelha e etc.
style
O atributo style possibilita a aplicação de estilo no próprio elemento. Ex.:
<a syte= "color:red" href= "http://www.google.com.br">Site Google</a>. Esse exem-
plo resultaria no texto do link em cor vermelha. É importante saber que é desa-
conselhável aplicar estilos nos próprios elementos, pois, dessa forma, em todos os 
momentos que for necessário aplicar a cor vermelha (exemplo) em um link, tería-
mos que reescrever essa definição. Portanto, é aconselhável que atributo sytle seja 
utilizado em casos específicos para existir um código HTML mais limpo e fácil de 
manter. Utilizar o atributo style é o que se entende como a prática de criar “CSS in-
line”, não sendo aconselhavel. É comum que esse atributo tenha interação a partir 
de JavaScript, mas não se preocupe com isso agora.
class
Especifica a definição de um nome de classe que faz referência a um estilo CSS 
definido. Veja o exemplo: <a class= "vermelho" href= "http://www.google.com.br">-
Site Google</a>. Aqui definimos que o elemento de link é da classe vermelho, ou 
seja, na definição de estilo CSS podemos definir que essa classe faz o texto da tag 
ter a cor vermelha. O interessante do uso de classes é que podemos, então, usar 
uma mesma definição para vários elementos. Isso quer dizer que outro elemento 
que precise ter a cor vermelha, basta fazer uso dessa classe. Imagine: um parágrafo 
de texto e os links precisam ser vermelhos. Obviamente este foi exemplo simples, 
mas você verá que o atributo de classe é utilizado para definir informações comuns, 
não só a formatação de textos, mas de posicionamento de elementos, tamanho, 
margens internas/externas e etc. Veremos isso quando observarmos o que é CSS.
title
Esse atributo fornece uma informação extra sobre o elemento. Veja um exemplo: 
<p title="este é um parágrafo de texto simples!">Texto texto</p>.
O atributo title definiu à tag <p> a informação: Este é um parágrafo de texto sim-
ples!, ao qual é exibida ao usuário quando o mesmo parar o mouse sobre este 
elemento.
tabindex
Define uma ordem para navegador entre elementos de um documento html 
quando utilizada a tecla TAB do teclado. Um exemplo seria:
<a href="https://www.site-a.com.br" tabindex="3">Site a</a>
<a href="https://www.site-b.com.br" tabindex="1">Site b</a>
<a href="https://www.site-c.com.br" tabindex="2">Site C</a>
O resultado no navegador é, ao teclar TAB no teclado, primeiramente selecionar o 
site B; depois, site C; e, então, site A.
Fonte: elaborado pelo autor.
42
Programação Web I
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017SUMÁRIO
Existem também atributos específicos de tags HTML, conforme você pode observar 
no quadro a seguir. Foram selecionados os principais deles. Veja!
QUADRO 4 - PRINCIPAIS ATRIBUTOS ESPECÍFICOS DE TAGS HTML
ATRIBUTO DESCRIÇÃO
src
Define o endereço de uma tag <img>, conforme percebemos em exemplos anterio-
res.
alt
Define um texto alternativo de uma tag <img> para quando esta imagem não puder 
ser exibida. Exemplo: 
<img src="imgem-1.jpg" alt="Foto da praia do Rio de Janeiro">.
name
Define um nome para um elemento. É comumente usado em tags de controle de 
formulário, como a tag <input>, a qual especifica o nome de um campo que será en-
viado na ação do formulário. Exemplo:
<input type="text" name="cpf-usuario”>. O valor cpf-usuario éutilizado pelo destino do 
formulário, por exemplo, uma página web de processamento que fará a gravação em 
banco de dados dos dados pessoais de um usuário, o qual precisará saber, entre os 
outros dados do formulário, o que o usuário informou como sendo seu CPF. O atributo 
“name” é utilizado principalmente também em tags, como: <select> e <textarea>.
disabled
Define que um controle de formulário, por exemplo, <input>, deve se apresentar 
como desabilitado para usuário. Exemplo:
<input type="text" name="cpf-usuario” disabled>.
value
O atributo value especifica um valor de uma tag, por exemplo, um controle de formu-
lário de lista suspensa (drop-down list). Exemplo:
<select name="carros">
<option value="1">Novo Gol</option>
<option value="2">Fiat Toro</option>
<option value="3">Chevrolet Onix</option>
</select>
Nesse exemplo, temos um controle de formulário onde o usuário escolhe a definição 
de carro em uma lista suspensa. Após envio desses dados para uma página, que fará 
o processamento dessa requisição, o parâmetro “carros” chegará com o valor numé-
rico (1, 2 ou 3) referente à opção que o usuário escolheu e não o nome textual (Novo 
Gol, Fiat Toro ou Chevrolet Onix).
Fonte: elaborado pelo autor.
É importante que nesse momento você treine em seu computador a criação das 
tags e atributos que foram apresentados e execute o documento HTML em seu nave-
gador. O aprendizado de uma linguagem requer que você opere os códigos/decla-
rações apresentados resultando na absorção do conhecimento. Não menos impor-
tante é requerido que você pesquise mais a respeito dos atributos e tags e HTML em 
livros indicados nas referências desta unidade, além de sites confiáveis na internet.
43
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017
Programação Web I
SUMÁRIO
2.2 COMENTÁRIOS EM HTML
Um documento HTML pode conter comentários não exibidos na renderização do 
browser. Eles são uteis para auxiliar na visualização de manutenção do código front-
-end. Para definir um comentário é utilizada a tag:
<!--...-->
Pode parecer estranho, mas é simples de ser compreendida a partir da utilização no 
código, veja:
<!-- INICIO do elemento paragrafo-textual -->
<p id=”paragrafo-textual”>
Texto do meu parágrafo<br>
Texto do meu parágrafo<br>
Texto do meu parágrafo<br>
</p>
<!-- FIM do elemento paragrafo-textual -->
Conforme negrito na declaração apresentada, têm-se dois comentários indicando, 
nesse exemplo, onde inicia e onde se termina o elemento com identificador paragra-
fo textual. Os comentários devem ser utilizados com propósito e não necessariamen-
te em tudo que se declara no documento HTML. 
44
Programação Web I
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017SUMÁRIO
Conforme mencionado, é interessante utilizar comentários para facilitar o entendi-
mento do HTML criado em prol de uma manutenção futura facilitada. Eles podem ser 
usados também para informar a outro programador de uma mesma equipe o signi-
ficado-contexto daquela parte do código HTML. Assim, a utilização de comentários é 
útil em códigos extensos, facilitando a manutenção de um ou mais programadores.
2.3 TAGS DE ESTRUTURA DO DOCUMENTO HTML
Conheça agora as principais tags no contexto de estrutura do documento HTML. 
A primeira delas é a tag de tipo de documento definida por: <!DOCTYPE>. Trata-se 
da simples declaração ao navegador de que esse é um documento HTML. Ela é a 
primeira tag informada no documento. Para um documento HTML versão 5, declara-
-se simplesmente <!DoCTYPe html>. 
Conforme a figura a seguir, em um documento HTML em sequência, <!DOCTYPE 
html> informa à tag <html> o que tem por papel representar a raiz do documen-
to inteiro. Dessa forma, ela irá englobar todas as outras tags com exceção da 
<!DOCTYPE html>.
FIGURA 5 - TAGS <!DOCTYPE> E <HTML> EM UM DOCUMENTO HTML
Fonte: elaborada pelo autor.
Percebe-se na figura que a tag <html> aberta na linha 2 e fechada na linha 6, engloba 
as tags <body> e <a>, nesse exemplo.
2.4 CABEÇALHO E CORPO DO DOCUMENTO
Continuando o contexto de estrutura de um documento HTML, têm-se as tags <head> 
e <body> (sendo essa última já percebida no exemplo anterior). A tag <head> engloba 
elementos de cabeçalho do documento, como exemplo: título do documento em si, 
metatags, definições de estilos CSS, e interações Javscript. 
45
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017
Programação Web I
SUMÁRIO
Veja a exemplificação na figura a seguir.
FIGURA 6 - TAG <HEAD> E <BODY> EM UM DOCUMENTO HTML
Fonte: elaborada pelo autor.
Na figura apresentada, percebe-se a tag <head> sendo aberta na linha 3 (após abertu-
ra da tag html), e sendo fechada na linha 8 através de </head>. Internas à tag <head> 
temos presente 4 outras tags, sendo uma metatag (linha 4), uma tag de título (linha 5), 
uma tag de chamada de um documento CSS (linha 6), e uma tag de chamada de 
um documento de funções em Javascritp (linha 7). Após fechamento do cabeçalho, 
temos a abertura do corpo do documento sendo realizada com a tag <body> na linha 
9, sendo fechada na linha 17. Interno a ela temos um parágrafo textual. Em relação 
aos arquivos CSS e Javascript citados, não se preocupe, neste momento. Você irá 
entender como funcionam, em breve, nesta disciplina.
2.5 METATAGS
Em relação às metatags, conforme visto, são presentes internamente à tag <head> de 
um documento HTML. Elas definem os chamados metadados, que são dados/infor-
mações sobre os dados. É confuso entender sem exemplificar, mas ficará simples de 
compreender, a seguir. 
Os metadados são definidos utilizando-se a tag <meta>, conforme já visto no exem-
plo anterior. Conforme quadro a seguir, têm-se as principais metatags:
46
Programação Web I
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017SUMÁRIO
QUADRO 5 - PRINCIPAIS METATAGS INCLUÍDAS NA TAG <HEAD>
METATAG DESCRIÇÃO
charset
Especifica a codificação de caracteres do documento HTML. Exemplo:
<meta charset="UTF-8">.
name
Especifica o nome do autor do documento HTML. Exemplo:
<meta name="author" content="Charles Costa">.
description
Especifica a descrição do documento HTML. Exemplo:
<meta name="description" content="Loja virtual de venda de tênis">.
keywords
Especifica as palavras-chave de um documento HTML. Exemplo:
<meta name="keywords" content="tênis esportivo, tênis casual, sapato">.
viewport
Especifica a viewport, ou seja, a área visível do usuário em uma página web. Essa 
janela de visualização apresenta variação de acordo com o dispositivo e será menor 
em um celular, por exemplo, do que em uma tela de computador. Exemplo:
<meta name="viewport" content="width=device-width, initial-scale=1.0">.
Os valores dentro do atributo content, sendo width=device-width, define que a lar-
gura da página web deve seguir a largura da tela do dispositivo (que varia entre 
dispositivos). Já o valor initial-scale=1.0 significa o nível de zoom inicial quando a 
página é carregada pela primeira vez pelo browser.
Fonte: elaborado pelo autor.
As metatags definidas em um documento HTML auxiliam no comporta-
mento do navegador em relação ao documento, mas também em relação 
à indexação do conteúdo em serviços de motores de busca, como Google 
Search, por exemplo. 
2.6 TAGS TEXTUAIS
Entenda agora as tags utilizadas para definições textuais em páginas HTML. Os tópi-
cos a seguir irão apresentar as principais tags nesse contexto, e todas elas são presen-
tes internamente à tag <body> de um documento. São tags bastantes simples de 
serem compreendidas, mas devem ser utilizadas com cuidado em relação ao contex-
to que você precisar representar.
47
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017Programação Web I
SUMÁRIO
2.7 TÍTULOS (H1... H6)
Os títulos e subtítulos em páginas HTML (não confundir com tag <title> do documen-
to!), são definidos através das tags <h1>,<h2>,<h3>,<h4>,<h5> e <h6>.
A tag <h1> deve ser utilizada para definir um título mais importante na página, e 
é uma boa prática que, em uma página HTML, só exista uma tag <h1>. Por padrão, 
o navegador já renderiza as tags <h1>...<h6> com uma formatação padrão, sendo o 
resultado de <h1> com maior destaque do que <h2>, e assim por diante até a <h6>. 
FIGURA 7 - USO DAS TAGS <H1>...<H6> INTERNAS AO CORPO DO DOCUMENTO HTML
Fonte: elaborada pelo autor.
A figura mostra, acima, a marcação HTML contendo as tags <h1>...<h6> e, à direita, o 
resultado renderizado no browser. O documento foi salvo com o nome h1_h6.html 
na unidade D do computador. Crie esse documento você também!
2.8 BLOCOS TEXTUAIS (P, Q, BLOCKQUOTE)
Como foi visto em outros exemplos, é possível declarar blocos de parágrafos, e, para 
isso, utiliza-se a tag <p>. Além dela, tem-se também na especificação da HTML, as 
tags <pre>, <q> e <blockquote>, que são também relacionadas para criação de blocos 
textuais em documentos/páginas HTML.
48
Programação Web I
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017SUMÁRIO
FIGURA 8 - USO DA TAG <BLOCKQUOTE>
Fonte: elaborada pelo autor.
A figura demonstra o uso da tag <blockquote> sendo uma forma de criar uma citação 
tabulada proveniente de outra fonte. No exemplo, percebem-se a abertura da tag, na 
linha 17, e fechamento, na linha 24. Percebe-se na tag também a presença do atributo 
cite, o qual especifica o endereço do qual aquela informação é proveniente. Em casos 
de citações curtas, deve ser utilizada a tag <q> em substituição à tag <blockquote>. 
Portanto, quando é preciso definir blocos textos específicos de citação, é possível 
fazer uso das tags <q> e <blockquote> abrindo-se mão da tag <p>. Utilizar as tags 
certas para o contexto desejado é boa prática de estruturação HTML, pois favorecem 
os sistemas de motores de busca. Aqui foi feito apenas um exemplo em relação a 
tags de citação de texto, mas o mesmo ocorre com outras tags, como exemplo a tag 
<address>, que indica o que é uma informação de contato do autor/proprietário de 
um documento ou artigo presente em um documento HTML. 
Apenas como informação, a tag <br>, presente em diversos exemplos expostos, infor-
ma uma quebra de linha no bloco de texto no qual é inserida.
2.9 LISTAS ORDENADAS E NÃO ORDENADAS 
(OL, UL, LI)
No caso de definições de listas, é uma boa prática fazer uso das tags <ol> e <ul>. A tag 
<ol> define uma marcação de lista ordenada, enquanto a tag <ul> define a marcação 
de uma lista não ordenada. Quer ver exemplos? Acompanhe as figuras apresentadas 
a seguir. 
49
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017
Programação Web I
SUMÁRIO
FIGURA 9 - USO DA TAG <OL>
Fonte: elaborada pelo autor.
Nesta figura você percebe a demonstração do uso de duas listas ordenadas, a primei-
ra (linhas 9 a 13) resulta na renderização do browser, iniciando os itens sequencial-
mente iniciando em 1, como visto na direita da imagem:
1. Água.
2. Suco.
3. Refrigerante.
Já a segunda lista inicia em 50, pois é definido o atributo start= “50” na linha 15.
FIGURA 10 - USO DA TAG <UL>
Fonte: elaborada pelo autor.
Já nesta figura demostra-se a mesma lista, mas agora se utilizando <ul>, que define 
uma lista não ordenada apresentando marcadores no lugar da numeração proposta 
por <ol>.
50
Programação Web I
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017SUMÁRIO
Além do resultado básico obtido com a tag <ul>, apresentando itens em linhas 
separadas, é comum que seja utilizada essa tag também para criação de 
menu de aplicações web, como, por exemplo, os menus horizontais presen-
tes em websites. Dessa forma, através de CSS é definido como será sua apre-
sentação em relação ao posicionamento dos itens, espaçamentos, tamanho, 
cores e demais estilizações. Você verá isso em framework BootStrap.
2.10 TEXTOS ENFATIZADOS (EM, STRONG)
Ainda em relação às tags textuais, têm-se também as tags <em> e <strong>. Perceba 
suas aplicações na figura a seguir.
FIGURA 11 - USO DAS TAGS <EM>, <STRONG>
Fonte: elaborada pelo autor.
Percebe-se na figura a presença de dois parágrafos. No primeiro, temos na linha 11 a 
definição da tag <em>, que faz a palavra enfatizada ser apresentada em itálico. Já no 
segundo parágrafo, temos a definição da tag <strong>, na linha 17, que faz a palavra 
formatada ser apresenta em negrito.
51
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017
Programação Web I
SUMÁRIO
A tag <em> visualmente informa o texto em ênfase como itálico, mas isso 
não é a sua maior proposta! Perceba o que se pode entender a partir da 
explanação do site Mozilla em relação à tag <em> versus a tag <i>:
É frequentemente confuso para novos desenvolvedores porque há 
vários elementos para expressar a ênfase em algum texto. <i> e <em> 
são talvez uns dos mais comuns. Por que usar <em></em> versus 
<i></i>? Eles produzem o mesmo resultado, certo? Não exatamente. 
O resultado visual é, por padrão, o mesmo – ambas as tags renderi-
zam seu conteúdo em itálicos. Mas o significado semântico é dife-
rente. A tag <em> representa ênfase importante de seus conteúdos, 
enquanto que a tag <i> representa o texto que é iniciado de uma 
prosa, como uma palavra estrangeira, pensamentos de um perso-
nagem ficcional, ou quando o texto se refere à definição de uma 
palavra em vez de representar seu significado semântico. (O título 
de um trabalho, tal como o nome de um livro ou filme, deve usar 
<cite>.) Um exemplo para <em> poderia ser: “Apenas já faça isso!”, ou: 
“Nós temos que fazer algo acerca disso”. Uma pessoa ou software 
lendo o texto pronunciaria as palavras em itálico com uma ênfase. 
Um exemplo para <i> poderia ser: “A Rainha Mary velejou na noite 
passada”. Aqui, não é adicionada ênfase ou importância na palavra 
“Rainha Mary”. É meramente indicado que o objeto em questão não 
é uma rainha chamada Mary, mas um navio chamado Rainha Mary. 
Outro exemplo para <i> poderia ser: “A palavra o é um artigo”. 
(MOZILLA. <em>: O elemento de ênfase. Disponível em: https://developer.mozilla.org/
pt-BR/docs/Web/HTML/Element/em#Resultado. Acesso em: 24 jan. 2019)
2.11 TAGS PARA ESTRUTURAÇÃO DE TABELAS
Dados que necessitam ser apresentados em formato de tabela são estruturados em 
HTML através do uso da tag <table>, que engloba a tag <thead> (para linha de cabeça-
lho), <tbody> (para linhas de corpo da tabela), e, caso necessário, <tfoot> (para a linha 
de rodapé). Perceba o exemplo na figura a seguir.
52
Programação Web I
FACULDADE CAPIXABA DA SERRA/EAD
Credenciada pela portaria MEC nº 767, de 22/06/2017, Publicada no D.O.U em 23/06/2017SUMÁRIO
FIGURA 12 - USO DAS TAGS PARA ESTRUTURAÇÃO DE TABELAS
Fonte: elaborada pelo autor.
Na direita da figura, tem-se uma tabela renderizada no browser contendo 4 linhas 
e duas colunas. O código necessário para estruturar essa tabela se dá à esquerda na 
figura, entre as linhas 17 e 40, onde é aberta/fechada a tag <table>. As linhas 18 e 23 
são abertura e fechamento da tag de cabeçalho, onde temos a tag <tr> na linha 19, 
que especifica a primeira linha da tabela, ou seja, a linha de cabeçalho. Contidas a 
ela, temos as tags <th>, que definem colunas que irão escrever mês e lucro no resul-
tado renderizado. Para o corpo da tabela, temos a tag <tbody> abrindo na linha 24 
e fechando na linha 33, sendo internas a ela as tags <tr>, para especificar linhas do 
corpo da tabela, e <td>, para especificar colunas. O mesmo raciocínio é seguido para 
o rodapé definido entre as linhas 34 a 39, sendo, então,