GRA0465 DESIGN PARA WEB GR0644211 - 202110 ead-15205 01

Prévia do material em texto

13/02/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_667170_… 1/45
DESIGN PARA WEBDESIGN PARA WEB
Me. Paulo Sérgio Pádua de Lacerda
I N I C I A R
13/02/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_667170_… 2/45
introdução
Introdução
Caro(a) aluno(a), seja bem-vindo(a) à disciplina Design para web. A proposta
principal desta unidade é de�nir e estimular práticas acerca dos conceitos
fundamentais de design para web. Assim, você compreenderá o fascinante
“mundo” dos sistemas do desenvolvimento web.
Esta unidade foi organizada em quatro tópicos. No primeiro, discutem-se
fundamentos importantes, como a história da internet e a fundamentação
relacionada aos sistemas web. No segundo tópico, são apresentados os
elementos essenciais para a diagramação dos layouts. No terceiro, são
expostas as ferramentas, os editores utilizados no desenvolvimento de
sistemas web. No último tópico, há os códigos HTML5, fundamentais para a
construção de sites.
Resumidamente, você identi�cará e compreenderá os princípios do
desenvolvimento web. Vamos lá?
13/02/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_667170_… 3/45
Atualmente, os dispositivos de acesso à informação, como tablets,
smartphones e computadores, utilizam sistemas baseados no protocolo
Hypertext Transfer Protocol (http). Esses sistemas são conhecidos como
serviços web e são executados por um software, denominado navegador ou
browser, em inglês. Os navegadores estão presentes em todos os dispositivos
modernos que acessam a rede mundial de informações, a internet.
Segundo Miletto e Bertagnolli (2014), os sistemas web potencializam a
mobilidade e o acesso à informação de qualquer dispositivo que tenha um
navegador. A Agência Nacional de Telecomunicações (Anatel) registrou 229
milhões de linhas móveis em dezembro de 2018, ou seja, há, praticamente,
uma linha para cada cidadão brasileiro. Esses números ilustram as
necessidades e a demanda de serviços web para o mercado, tanto no
desenvolvimento de sistemas quanto em relação aos pro�ssionais com
habilidades e competências para tal serviço.
Nesse contexto, apresentaremos aqui conceitos fundamentais para que você,
caro(a) aluno(a), possa desenvolver sites web e ter oportunidades competitivas
Apresentação da DisciplinaApresentação da Disciplina
13/02/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_667170_… 4/45
no mercado de trabalho.
 
História da Internet
A Agência para Projetos de Pesquisa Avançada (Arpanet) é uma rede de
computadores, inicialmente, �nanciada pela agência de projetos e pesquisa
avançada (ARPA), do Departamento de Defesa dos Estados Unidos (DoD), no
�m da década de 1960, com a �nalidade de implementar o conjunto de
protocolos Transfer Control Protocol (TCP) e Internet Protocol (IP), também
conhecidos como TCP/IP.
Essas tecnologias são a base da internet dos tempos atuais. No início, a
missão era mobilizar recursos para pesquisas sobre tecnologia,
principalmente para os centros universitários. As pesquisas tinham o objetivo
de melhorar o poderio militar dos Estados Unidos. Naquela época, havia uma
disputa mundial por domínio mercadológico e político entre os capitalistas
(Estados Unidos e países aliados) e os socialistas (antiga União Soviética e
países aliados).
No meio da década de 1970, a Arpanet foi transferida para a Agência de
Defesa de Comunicação (DCA), com o intuito de tornar disponível o acesso à
rede pelos diversos departamentos das forças armadas americanas. Nessa
época, a rede Defense Data Network foi estabelecida sob os fundamentos dos
protocolos TCP/IP. Anos depois, no início da década de 1980, o departamento
de defesa americano, preocupado com a segurança da rede, criou o MILNET.
Essa rede tinha �nalidades especí�cas para o sistema militar.
Em 1984, a National Science Foundation (NSF) criou uma rede própria para
comunicação entre computadores, denominada NSFNET, e, no �m da década
de 1980, utilizou a ARPA-INTERNET como seu canal principal de transmissão
de dados (backbone). Essa rede, Arpanet, �cou obsoleta e foi retirada de
operação. Nesse momento, a internet estava independente do controle dos
militares, e o governo americano passou o controle dessa rede para a NSF.
Nesse período, praticamente todos os computadores dos Estados Unidos
13/02/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_667170_… 5/45
tinham a capacidade de entrar na rede. Ademais, conforme expõe Castells
(2003),
com a desenvolvimento dos servidores web no início da década de
90, muitos serviços foram criados e diversas portas de comunicação
de rede foram estabelecidas com bases comerciais. Esse fato levou
ao crescimento rápido da rede como uma rede global de
computadores. Uma rede estruturada numa arquitetura em
múltiplas camadas, descentralizada [...] e fazendo uso de protocolos
abertos como o HyperTexto Transfer Protocolo (HTTP) tornando-se a
Internet de hoje em dia (CASTELLS, 2003, p. 13-16).
No Brasil, foi somente a partir de 1989, com o surgimento da Rede Nacional
de Ensino e Pesquisa (RNP), que a internet começou a ser divulgada. O
principal objetivo era difundir o uso dessa tecnologia com a �nalidade de
fazer a comunicação entre os centros de pesquisas.
Nessa época, o mundo começou a girar em torno dessa tecnologia disruptiva,
a internet. Ademais, os sistemas web começavam a ser desenvolvidos, assim
como sites de busca de informações, páginas de vendas de produtos e a
estrutura de redes de computadores com novos servidores, como os de e-
mail e os web.
Introdução a Sistemas Web
Nos sistemas web, muitas tecnologias foram introduzidas, tanto na área de
sistemas como no conceito de redes de computadores. Antes de
prosseguirmos com os conceitos de sistemas web, algumas noções devem ser
bem de�nidas, conforme exposto a seguir.
13/02/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_667170_… 6/45
Internet: rede mundial física de computadores. Ao citar a internet,
caro(a) aluno(a), você deve entender os conceitos dos tipos de
sistemas existentes como cliente-servidor e distribuído. Ambos os
sistemas estão presentes na internet atual.
Web: serviços executados mediante a internet, como as páginas web
e os sistemas, que são visualizados pelos navegadores web, como
Internet Explorer, Firefox, Google Chrome, dentre outros.
Na área de redes de computadores, conceitos de sistemas distribuídos foram
potencializados com o advento e o crescimento da internet.
O conceito inicial de estrutura era o sistema cliente-servidor. Nesse
sistema de rede, há um computador central que fornece serviços
para os demais computadores da rede. Por exemplo, ao analisar um
sistema escolar de uma determinada instituição, sendo executado
localmente, ou seja, somente dentro da instituição, pode-se dizer que
esse sistema possui um computador centralizado chamado de
servidor e vários computadores ligados a esse servidor via rede,
acessando o sistema escolar denominado cliente (MILETTO;
BERTAGNOLLI, 2014, p. 1-7).
Nesse modelo, todo o sistema �ca armazenado dentro do servidor,
fornecendo os serviços, via rede, aos clientes. Em um modelo web de
arquitetura de camadas, esse sistema é executado via navegador web pelos
clientes, e o servidor é denominado servidor web, pois armazena o sistema
desenvolvido, utilizando tecnologias como HTML, CSS e Javascript, como
demonstra a Figura 1.2.
13/02/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_667170_… 7/45
A programação visualizada pelo cliente na tela do computador é denominada
front-end e, por meio dela, o cliente visualizatextos, links, imagens, vídeos, etc.
A programação lógica do sistema, como validação de login, cadastramento de
clientes, alunos, funcionários, etc., é denominada back-end e �ca armazenada
no servidor web. Essa camada não é visualizada pelos clientes e os arquivos
dela só podem ser visualizados com acesso ao servidor. Por último, na
camada três, também denominada camada de persistência, �ca o banco de
dados, como expõe a Figura 1.3.
Porém, segundo Miletto e Bertagnolli (2014), na análise de um sistema de
vendas de passagens de avião, por exemplo, a busca de passagens é realizada
em vários servidores espalhados na internet, relacionados às devidas
empresas de avião, e mostrada na mesma página web. Esse sistema é
considerado descentralizado ou distribuído.
Figura 1.3 - Elementos das camadas front-end, back-end e persistência 
Fonte: Elaborada pelo autor.
13/02/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_667170_… 8/45
Em um sistema distribuído, os serviços são distribuídos em diversos
servidores, para atender à solicitação do computador-cliente. Tanto no
sistema cliente-servidor centralizado como no sistema distribuído, a
disponibilidade das informações na internet é 24 x 7, a qual signi�ca 24 horas
por dia e 7 dias por semana, como exposto na Figura 1.4.
O princípio básico da internet é a navegação. Esse conceito nasceu da
ideologia de hipertextos de Tim Berners-Lee, britânico, físico e professor do
Massachusetts Institute of Technology (MIT), que criou uma forma de
organização das informações na web. Essa organização é realizada por meio
de hipertextos linkados, denominados hyperlinks ou somente links (Figura 1.5).
Textos e imagens em forma de links apontam para outras páginas na web.
Assim, o usuário só precisa clicar nesses links para abrir outras páginas, para
obter uma navegação dentro da web (KALBACH, 2009). Esse apontamento de
páginas é possível, porque cada página tem um endereço virtual na web,
denominado Uniform Resource Locator (url).
O acesso ao url pode ser realizado digitando-se o endereço na barra de
endereços de qualquer navegador web, como Google Chrome, Edge, dentre
outros. Um Uniform Resource Locator (url), endereço eletrônico, é composto
pelas seguintes partes:
13/02/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_667170_… 9/45
http – hypertext transfer protocol, protocolo de transferência de
hipertexto;
www – serviço de página usado na web;
nomeEmpresa – nome da empresa relacionada à página;
com – o tipo de serviço na web (com: comercial; edu: educacional; mil:
militar);
br – país de origem da empresa.
Assim, uma url completa é: <http://www.empresa.com.br>. Parte dessa url é
chamada de domínio, que é composto pela parte <www.empresa.com.br>.
Um sistema web, também denominado aplicação web ou sistema de
plataforma web, é caracterizado pelo dinamismo ou por seu conteúdo
estático. No dinâmico, os conteúdos das páginas são construídos
dinamicamente, os dados são oriundos dos bancos de dados e as linguagens
de camada dois (lógica) enviam as informações, na forma de textos, aos
navegadores, como Edge ou Google Chrome (camada um, front-end). Nessas
aplicações, algumas características são determinantes, conforme exposto a
seguir.
Disponibilidade: a aplicação web deve estar disponível a quem deve
acessá-la.
Usabilidade: capacidade de o cliente navegar entre as páginas, com
facilidade.
Figura 1.5 - Páginas linkadas 
Fonte: freepik / Freepik.
13/02/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_667170… 10/45
Portabilidade: a aplicação web pode ser executada em qualquer
sistema que possua um navegador.
Design: aspectos de design são importantes na composição da
programação visual do site ou da aplicação.
Desempenho: capacidade do sistema de retornar à informação
procurada, dentro da expectativa do cliente.
13/02/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_667170… 11/45
atividade
atividade
No início da década de 1970, o mundo era dividido entre Ocidental, liderado pelos
Estados Unidos, e Oriental, liderado pela antiga União Soviética. Havia, então, o
conceito de Guerra Fria entre esses dois mundos. Nesse contexto, qual rede foi
formada pelo Departamento de Defesa Americano e com qual propósito?
a) ARPANET, para �ns de inteligência militar somente, com relação a fatos da
sociedade americana na época.
b) IPTO, para �ns de segurança militar, para transitar informações entre os
setores militares.
c) NFSNET, para �ns de inteligência militar somente, com relação a fatos da
sociedade americana na época.
d) ARPA, para �ns de inteligência militar apenas e mobilização de recursos de
pesquisa.
e) SATET, para �ns de inteligência militar somente, com relação a fatos da
sociedade americana na época.
13/02/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_667170… 12/45
No desenvolvimento de uma aplicação web, diversos aspectos devem ser
considerados, com a �nalidade de atender a todos os requisitos do sistema.
Um requisito de sistema pode ser dividido em duas partes: requisitos
funcionais e não funcionais.
Segundo Somerville (2007), os requisitos funcionais são as funcionalidades
que o sistema tem que executar na ação do usuário ou em relação à
interatividade com o usuário. Os requisitos não funcionais, por sua vez, são os
aspectos que o sistema deve possuir, mas que não são executados, como
conceitos de design, segurança, regulamentos, usabilidade, etc.
Outro aspecto fundamental no desenvolvimento do sistema web é a
interatividade, que corresponde à forma como o usuário interage com o
sistema. Toda página web tem que fazer uma comunicação fácil com usuário,
para que ele tenha facilidade em memorizar os passos para atingir
determinada funcionalidade, assim, o design deve ser simples e entendível.
Esse entendimento é conhecido como usabilidade.
Fundamentos de Fundamentos de Design Design para apara a
WebWeb
13/02/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_667170… 13/45
A usabilidade pode ser a somatória da interatividade, da comunicação e da
funcionalidade. Esses aspectos são fundamentais na programação visual para
o design de um sistema de plataforma web.
Elementos de Interfaces Web
Toda aplicação web é, basicamente, constituída por diversas páginas
interligadas por meio de links. Assim, de acordo com Miletto e Bertagnolli
(2014), uma página web tem diversos elementos, como:
as imagens com diversos tipos de extensão, como jpg e png;
os sons, utilizados na internet sob diversas compressões, como mp3,
e que podem ser vozes, músicas, beeps, etc.;
os links, que são hipertextos que apontam para outras páginas ou
outro domínio;
os textos, ou seja, as informações apresentadas nas páginas web;
os botões, usados para acionar as funcionalidades de uma aplicação;
os menus, empregados no agrupamento de funcionalidades;
as páginas: quadros (frames), tabelas e caixas;
os vídeos multimídias.
13/02/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_667170… 14/45
Combinados, esses elementos formam a página web visualizada pelo usuário.
Um exemplo de um pequeno código de combinação desses elementos está
exposto a seguir.
   <!DOCTYPE html>
   <html>
   <body>
   <button type="button">Botão</button>
   <video width="320" height="240" controls>
      <source src="movie.mp4" type="video/mp4">
      <source src="movie.ogg" type="video/ogg">
      Your browser does not support the video tag.
   </video>
   <p><strong>Note:</strong> Video.</p>
   <img src="imagem.gif" alt="Casa" height="42" width="42">
   </body>
   </html>Esse trecho de código identi�ca os elementos “botão” (button), “inserção de
vídeo “(video) e “imagem” (src). O planejamento acerca do uso dos elementos
passa pela fase inicial de análise dos requisitos necessários para elaboração
da página. 
13/02/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_667170… 15/45
Na  Figura 1.7, de forma ilustrativa, há os elementos de uma página web. Há
diversas ferramentas para a edição de uma página (site) web, as quais serão
discutidas no próximo tópico. 
Figura 1.7 – Página web 
Fonte: Freepik.com.
13/02/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_667170… 16/45
atividade
atividade
Ao se desenvolver a página, a comunicação com o leitor deve ser clara e objetiva.
Dentre as opções relacionadas a seguir, assinale a alternativa que apresenta
somente conceitos relacionados à interação homem e máquina em relação a uma
página.
a) Acessibilidade, memorização e balanceamento.
b) Usabilidade, balanceamento e desempenho.
c) Usabilidade, memorização e acessibilidade.
d) Balanceamento, memorização e desempenho.
e) Usabilidade, balanceamento e desempenho.
13/02/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_667170… 17/45
Como exposto anteriormente, uma aplicação web é construída por diversas
páginas, organizadas de forma navegável, com base em hipertextos. Essas
páginas devem ser editadas e publicadas seguindo padrões web. Os padrões
web (web standards) são um conjunto de padrões e métodos estabelecidos
pelo consórcio World Web (W3C).  
A missão do W3C é liderar a World Wide Web em todo o seu
potencial, desenvolvendo protocolos e diretrizes que garantam o
crescimento de longo prazo da Web [...], discutimos aspectos
importantes desta missão, os quais contribuem para a visão da W3C
de One Web (W3C, 2019, on-line).
Para regulamentar a internet, cada país tem os próprios organismos
reguladores. No Brasil, o órgão responsável é o Comitê Gestor da Internet
(CGI), que
tem a atribuição de estabelecer diretrizes estratégicas relacionadas
ao uso e desenvolvimento da Internet no Brasil e diretrizes para a
Fundamentos para Edição eFundamentos para Edição e
Publicação de um SitePublicação de um Site
13/02/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_667170… 18/45
execução do registro de Nomes de Domínio, alocação de Endereço IP
(Internet Protocol) e administração pertinente ao Domínio de
Primeiro Nível “.br”. Também promove estudos e recomenda
procedimentos para a segurança da Internet e propõe programas de
pesquisa e desenvolvimento que permitam a manutenção do nível de
qualidade técnica e inovação no uso da Internet (CGI, 2019, on-line).
Esses padrões web especi�cam as características que uma página web deve
conter. Os padrões foram criados devido à falta de padrão dos navegadores
web. Esses padrões são regras rígidas, bem de�nidas e documentadas, que
determinam como documentos para a internet devem ser escritos, usando as
sintaxes e os parâmetros de forma correta, além de terem uma evolução
constante, como HTML1.0, HTML4.1 e HTML5, em relação às folhas de estilos
CSS, CSS2 e CSS3. A Figura 1.8 ilustra essas informações. 
Após o desenvolvimento da página, o site deve ser publicado, para que o seu
domínio seja indexado dentro da internet. A indexação é a forma como uma
página é encontrada na web.
Toda página possui um Domain Name System (DNS), que se refere ao
endereço de internet que o domínio recebe, ou seja, é a representação, na
internet, de um domínio. Esse endereço é público e registrado, além de ser
denominado internet protocolo (IP) e ter o formato semelhante a
200.200.10.10. Esse registro pode ser feito, diretamente, na empresa
Figura 1.8 - Estrutura de uma página web 
Fonte: Elaborada pelo autor.
13/02/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_667170… 19/45
escolhida para hospedar a aplicação web. A empresa hospedeira registra e
publica o domínio, mediante os servidores web que possui. 
Apresentação dos Principais Editores de
Texto e Editores de Conteúdo de Mercado
As aplicações web são desenvolvidas em ferramentas como editores de textos
especiais, os quais são de fácil manipulação, leves, em termos de
processamento, e facilitam o desenvolvimento do site. Esses editores, além de
permitirem a gravação em diversas extensões, como HTML, CSS, Javascript,
etc., têm uma característica muito importante em relação ao código-fonte: o
destaque com cores diferentes, para realçar valores, funcionalidades e
marcações. Essa funcionalidade permite, dentre outras coisas, a correção pelo
visual de erros no código. A seguir, são apresentados alguns desses editores. 
Tanto o Sublime quanto o Notepad são softwares gratuitos, ou seja, não há a
necessidade de licença ou de pagamento para que seja concedida a
permissão para o uso. Há outros ambientes de desenvolvimento mais
completos que, internamente, têm editores de textos semelhantes ao Sublime
(Figura 1.10) e ao Notepad++. Essas interfaces de desenvolvimento são
denominadas ambientes integrados de desenvolvimento (IDE). Os IDEs são
13/02/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_667170… 20/45
ambientes mais completos que os editores de textos e permitem instalação
de plugins utilizados em determinadas linguagens, como Java e PHP. 
Eclipse: esse IDE, presente na Figura 1.11, é um projeto da Eclipse
Foundation que fornece um ambiente maduro, escalável e amigável
para negócios, para colaboração e inovação de software de código
aberto, e que pode ser encontrado em ambientes para 32 ou 64 bits
no seguinte endereço virtual:
<https://www.eclipse.org/downloads/download.php?
�le=/oomph/epp/2018-12/R/eclipse-inst-win64.exe>. Acesso em: 3
abr. 2019. 
Figura 1.11 – IDE Eclipse 
Fonte: Elaborada pelo autor.
https://www.eclipse.org/downloads/download.php?file=/oomph/epp/2018-12/R/eclipse-inst-win64.exe
13/02/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_667170… 21/45
NetBeans: patrocinado pelo Apache Software Foundation, é um IDE
de código livre, para o desenvolvimento de aplicações desktop,
HTML5, Java, etc., e pode ser encontrado no seguinte endereço
virtual: <https://netbeans.apache.org/download/index.html>. Acesso
em: 3 abr. 2019.
Há outros ambientes para desenvolvimento, como o Dreamweaver, da Adobe,
e o bloco de notas, do próprio Windows. A escolha do ambiente de
desenvolvimento depende muito do conforto proporcionado pelo IDE ao
programador 
https://netbeans.apache.org/download/index.html
13/02/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_667170… 22/45
atividade
atividade
Um IDE é uma ferramenta usada por desenvolvedores para a edição dos códigos de
uma aplicação web. Qual alternativa apresenta uma ferramenta que deve ser
utilizada para a elaboração de páginas web?
a) Unity.
b) Notepad++.
c) Studio Android.
d) Word.
e) WorkBench.
13/02/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_667170… 23/45
Tim Berners-Lee foi o criador das linguagens de marcação. Na década de
1980, o cientista inglês, como pesquisador independente do European
Organization for Nuclear Research Organisation (CERN), na Suíça, sugeriu um
projeto de compartilhamento de informações entre os pesquisadores de
diferentes localizações geográ�cas, baseado no uso de hipertextos, ou seja, os
textos seriam compartilhados eletronicamente, por meio do protocolo HTTP.
A primeira linguagem foi denominada ENQUIRE. Berners-Leeusou a internet
(criada no início da década de 1960) e a combinou com o hipertexto e a ideia
de domínio. O cientista a�rmava que a tecnologia envolvida já tinha sido
desenvolvida e que ele apenas fez a combinação na web (world wide web,
www). Informações adicionais acerca do projeto inicial de Berners-Lee podem
ser encontradas no seguinte endereço eletrônico:
<http://info.cern.ch/hypertext/WWW/TheProject.html>. Acesso em: 3 abr.
2019.
Em 1994, Tim Berners-Lee fundou, no Instituto de Tecnologia de
Massachusetts (MIT), em Boston, o W3C (World Wide Web Consortium), no
Noções Básicas de HTML5Noções Básicas de HTML5
13/02/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_667170… 24/45
Laboratório de Ciência da Computação (LCS) pertencente ao MIT. O W3C cria
e especi�ca os padrões web no mundo.
Descendente da Generalized Markup Language (GML) da IBM, desenvolvida
na década de 1960, a Standard Generalized Markup Language (SGML) é uma
metalinguagem, por meio da qual documentos são de�nidos mediante
marcações no texto e padrões da ISO 8879:1986.
A linguagem de marcação de HyperText Markup Language, ou somente HTML,
criada para criar e acessar páginas a partir de um navegador, surgiu após
inúmeras revisões, com base em alguns elementos da linguagem SGML. O
HTML passou por diversos aprimoramentos e revisões e, em 1996, foi lançada
a versão HTML.4. Em 1988, a reformulação do HTML gerou a linguagem XML
e, em 1991, após revisões, principalmente na sintaxe da linguagem, foi
lançado o XHTML 1.0.
Com a evolução da internet, no início da década de 2000, e as necessidades
de ambientes mais interativos, com foco no usuário, surgiu o HTML5, que
incorpora animações e elementos mais interessantes, com valor semântico,
para buscadores de web como o Google.
reflitare�ita
O HTML5 é uma linguagem de programação que substituirá as linguagens-padrão dos
futuros computadores desktop?
13/02/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_667170… 25/45
Uma linguagem de marcação é determinada por elementos de marcação de
textos, denominados tags (rótulos), como expõe a Figura 1.12. As tags podem
ser simples ou compostas e fazem referência à língua inglesa, como <img>,
que corresponde à image, ou <h1>, que se refere a header one. Toda tag �ca
cercada pelos símbolos menor (<) e maior (>), os quais determinam a abertura
e o fechamento da tag.
As tags podem ser simples ou compostas, conforme ilustradas na Figura 1.13,
e são interpretadas por qualquer navegador web, como Internet Explorer,
Firefox, etc. Algumas tags têm opções internas, que determinam outros
efeitos, como a tag “img”, que possui opções como “src”, local de origem da
�gura, “with”, largura da �gura, e “height”, altura da �gura. Observe as Figuras
1.13 e 1.14.
Figura 1.12 – Estrutura genérica das tags 
Fonte: Elaborada pelo autor.
Figura 1.14 – Opções da tag “img” 
Fonte: Elaborada pelo autor.
13/02/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_667170… 26/45
Qualquer texto HTML é gravado com a extensão “.html”. Esse texto pode ser
lido em qualquer dispositivo que interprete a extensão, mas,
preferencialmente, os navegadores são padronizados para essa leitura (Figura
1.15).
O Quadro 1.1 apresenta as principais tags de estrutura da linguagem de
marcação utilizada no desenvolvimento de páginas web (MILETTO;
BERTAGNOLLI, 2014).
Figura 1.15 – Gravação de um arquivo com extensão “.html” 
Fonte: Elaborada pelo autor.
13/02/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_667170… 27/45
Quadro 1.1 – Elementos estruturais de uma página web 
Fonte: Elaborado pelo autor.
Informações adicionais a respeito do documento web podem ser inseridas por
meio da tag <meta>, como: nome do autor da página, palavras-chave,
descrição do site, etc. Outra informação importante, de�nida no início do
documento, é o tipo de caracterização do texto, que, no Brasil, é “utf-8”, o que
também pode representar qualquer caractere universal padrão do Unicode.
Esse conjunto de caracteres garante que, no navegador, sejam visualizados
itens como “ç” e “é”.
Comentários podem ser de�nidos dentro do documento, e não são
interpretados pelo navegador. Qualquer comentário deve ser escrito entre as
tags “<!--   -->” e pode ser inserido em qualquer parte do documento web.
Como no exemplo:
<!-- Isso é um comentário →
Quanto ao texto que será escrito, algumas tags são especí�cas para a
formatação da informação, como exposto no Quadro 1.2.
13/02/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_667170… 28/45
Quadro 1.2 – Elementos estruturais de uma página web 
Fonte: Elaborado pelo autor.
Observe o exemplo de um documento formatado com tags de textos: as
imagens e os links são inseridos nos documentos web por meio das tags <a> e
<img>. Ambas as tags possuem opções e são demonstradas no Quadro 1.3. O
link é o elemento que determina a ligação entre as páginas e proporciona a
navegação no site.
Tag De�nição Exemplo
<p> .. </p>
Determina o
parágrafo.
<p> isso é um parágrafo
</p>
<strong>..
</strong>
Aplica o negrito.
<strong> informação
</strong>
<em> ...</em>
Aplica ênfase
(itálico).
<em> informação </em>
<u> .. </u> Aplica o sublinhado. <u> informação</u>
<font> ...
</font>
Especi�ca, com as
opções, o tipo de
fonte, a cor e o
tamanho.
<font color=’blue’ size=’+3’
face=”arial”>  informação
</font>
13/02/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_667170… 29/45
Quadro 1.3 – Elementos estruturais de uma página web 
Fonte: Elaborado pelo autor.
Um elemento muito importante no documento web é o formulário e, por meio
 dele, são passadas informações ao servidor web, as quais são armazenadas
em um banco de dados. A linguagem de marcação possui elementos para a
construção de um formulário e quase todos os elementos de formulário têm
opções como as detalhadas no Quadro 1.4.
13/02/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_667170… 30/45
Tag De�nição Opções
<form> ..</form>
Determina a área
do formulário.
action: determina o
arquivo que receberá a
informação do lado
servidor. 
method: determina o
método (post ou get) que
será usado para enviar
as informações ao
servidor (padrão de
formulário é post).
<input>
Determina os 
elementos de  um
formulário.
text: cria uma caixa de
texto editável. 
password: cria uma caixa
de texto, do tipo senha
de login. 
submit: cria um botão
para enviar. 
reset: cria um botão para
limpar o conteúdo do
formulário. 
radio: cria um botão de
“opção”. 
checkbox: cria uma caixa
de veri�cação.
<textarea>,
</textarea>
Determina um
campo de inserção
de informação
como observações.
cols: número de colunas
da caixa de entrada. 
rows: número de linhas.
<label> </label> Cria rótulos. Essa tag somente
13/02/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_667170… 31/45
Quadro 1.4 – Elementos estruturais de uma página web 
Fonte: Elaborado pelo autor.
Considere o seguinte exemplo de um documento formatado com elementos
de formulário: um navegador possui dimensões, ou seja, largura e altura,
como 800 x 600, 1024 x 768 ou 1280 x 600, que determinam a resolução do
monitor, a qual varia conforme a modernidade dele. Essas dimensões
in�uenciam a organização de elementos em uma página, os quais podem não
ser alinhados corretamente. Nesse sentido, o uso de elementos, como
tabelas, facilita a organização de um layout de página ou de elementos
isolados na estrutura de um documento web. O Quadro 1.5 mostra os
elementos de construçãode tabela na página web.
especi�ca nomes rótulos
<select> </select>
Cria uma caixa
suspensa de
opções.
name: nome do
elemento.
<option>
O elemento que
�car entre as tags
<select> determina
as opções.
Default: determina qual
elemento aparecerá
como elemento-padrão.
13/02/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_667170… 32/45
Quadro 1.5 – Elementos básicos de uma tabela 
Fonte: Elaborado pelo autor.
O uso de tabela, atualmente, caiu em desuso, pois desenvolver o layout de
sites, utilizando elementos de tabela, gera problemas futuros de manutenção
e falta de dinamismo, em relação ao conceito de sites responsivos. Um novo
conceito foi denominado tableless, ou seja, sem uso de tabelas, mas que
utiliza folha de estilo (CSS) e é muito empregado na estrutura HTML5.
Tags Básicas de HTML5 para Construção de
Sites
O HTML5 foi implementado devido à necessidade de um ambiente mais
interativo com o usuário e a novos conceitos estruturais de elementos de
página. Todas as outras tags servem para a construção de uma página HTML5,
13/02/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_667170… 33/45
mas a semântica do layout da página foi alterada com novas tags, as quais
estão expostas no Quadro 1.6.
13/02/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_667170… 34/45
13/02/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_667170… 35/45
Quadro 1.6 – Elementos básicos de estrutura de um documento HTML5 
Fonte: Elaborado pelo autor.
Essa estrutura de novos elementos facilita a construção de sites responsivos
(Figura 1.16), ou seja, sites que podem ser executados em quaisquer
dispositivos móveis, pois fazem a adaptação do layout automaticamente.
Outra importante potencialização é o uso do HTML5 para o desenvolvimento
de jogos.
O HTML5 compreende todos os elementos básicos de criação de uma página,
um site ou uma aplicação web, mas incorpora inúmeros recursos,
principalmente de semântica, dos elementos de estrutura, como exposto no
Quadro 1.6, que melhoram a indexação, por meio dos buscadores de
conteúdo da web, principalmente o Google. Assim,
[...] a web semântica é uma tecnologia ao serviço do conhecimento
que visa à acessibilidade e à partilha de conteúdos; facilitar a
interoperabilidade entre diferentes sistemas e, como tal, é um dos
nove pilares tecnológicos fundamentais da TIC (tecnologias de
informação e comunicação) (LAMANDINI, 2011, p. 1).
13/02/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_667170… 36/45
O conceito de web semântica surgiu em 2001, quando Tim Berners-Lee, James
Hendler e Ora Lassila publicaram o artigo “The Semantic Web”, na revista
Scienti�c American: Feature Article. Esse artigo criou novos conceitos de uso
dos elementos de programação. Esses conceitos, por sua vez, propiciaram
que as máquinas pudessem compreender o signi�cado das coisas. Antes da
proposta apresentada por esses autores, os sites eram desenvolvidos
somente para leitura, como em uma revista. Conforme expõem os próprios
autores, “the Semantic Web will enable machines to COMPREHEND semantic
documents and data, not human speech and writings” (BERNERS-LEE;
HENDLER; LASSILA, 2001, p. 2). Com esse conceito, as páginas web ganharam
novas estruturas semânticas, como mostra a Figura 1.17.
Nesta unidade, caro(a) aluno(a), você compreendeu os elementos básicos
tanto da origem quanto da linguagem de marcação de texto HTML5. Na
próxima unidade, você enriquecerá o seu conhecimento a respeito de folha
de estilo, potencializando os recursos para o desenvolvimento de aplicações
web.
Figura 1.17 – Layout padrão HTML5 
Fonte: Elaborada pelo autor.
13/02/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_667170… 37/45
13/02/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_667170… 38/45
atividade
atividade
O HTML teve suas origens em uma linguagem de marcação não proprietária e de
padrão mundialmente conhecido, desenvolvido pela ISO. Qual é a alternativa que
representa essa linguagem?
a) Standard Generalized Markup Language.
b) Extensible Markup Language.
c) eXtensible Hypertext Markup Language.
d) Scalable Vector Graphics.
e) Keyhole Markup Language.
13/02/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_667170… 39/45
indicações
Material Complementar
FILME
A rede social
Ano: 2010
Comentário: Embora o �lme foque em Mark
Zuckerberg, criador do Facebook, vale a pena assisti-lo,
pois o �lme discute o fato de ser preciso conhecer as
necessidades das pessoas para que uma aplicação web
tenha sucesso. O �lme apresenta o conceito de criação
e o projeto de uma aplicação que vale milhões de
dólares e tem milhões de usuários cadastrados. Para
conhecer mais sobre o �lme, assista ao trailer.
T R A I L E R
13/02/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_667170… 40/45
LIVRO
Interação Humano-Computador
Simone Diniz Junqueira Barbosa
Editora: Elsevier
ISBN: 8535234187
Comentário: Esse livro visa fornecer aos leitores um
conhecimento abrangente sobre práticas de projeto e
avaliação de sistemas interativos de alta qualidade.
Inicialmente, são apresentados os principais conceitos
da área de Interação Humano-Computador (IHC).
LIVRO
Use a cabeça! Programação em HTML 5
Eric Freeman
Editora: Alta Books
ISBN: 8576088452
Comentário: O livro “Use a cabeça! Programação em
HTML5”, caro(a) aluno(a), é seu ingresso para aprender
como construir aplicativos web, usando padrões atuais
e as melhores práticas de amanhã.
13/02/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_667170… 41/45
conclusão
Conclusão
Nesta unidade, você compreendeu a evolução da internet, desde a origem
dela, no �m da década de 1960, até os tempos atuais. O processo da evolução
da internet passou pela criação da linguagem de marcação de hipertextos
(HTML), criada por Tim Berners-Lee, utilizada pelos programadores para
desenvolver aplicações para web. Essa linguagem permite que os
programadores utilizem elementos para a construção dos layouts visuais,
como botões, links, menus e imagens.
Nesse contexto, foram apresentadas algumas ferramentas usadas por
programadores na codi�cação HTML5, como o editor Sublime Text 3, e IDEs,
como o Eclipse. Por �m, você foi apresentado(a) a novas estruturas
semânticas do HTML5 e a tags fundamentais para a criação de uma página
web.
referências
Referências Bibliográ�cas
BERNERS-LEE, T.; HENDLER, J.; LASSILA, O. The Semantic Web: A New Form of
Web Content That is Meaningful to Computers Will Unleash a Revolution of
New Possibilities. Scienti�cAmerican.com, p. 1-3, 2001. Disponível em:
<http://bit.ly/2KGzufGf>. Acesso em: 15 abr. 2019.
http://www-sop.inria.fr/acacia/cours/essi2006/Scientific%20American_%20Feature%20Article_%20The%20Semantic%20Web_%20May%202001.pdf
13/02/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_667170… 42/45
CASTELLS, M. A galáxia de internet: re�exões sobre a internet, os negócios e
a sociedade. Rio de Janeiro: Jorge Zahar, 2003.
ISO 8879:1986. Information processing — Text and o�ce systems —
Standard Generalized Markup Language (SGML). Disponível  em:
<https://www.iso.org/obp/ui/#iso:std:iso:8879:ed-1:v1:en> Acesso em: 13 abr.
2019.
KALBACH, J. Design de navegação web: otimizando a experiência do usuário.
Porto Alegre: Bookman,2009.
LAMANDINI, A. Ricerche di Pedagogia e Didattica. Ricerche di Pedagogia e
Didattica, v. 6, n. 1, 2011.
MILETTO, E. M.; BERTAGNOLLI, S. C. Desenvolvimento de software II:
introdução ao desenvolvimento web com HTML, CSS, JavaScript e PHP. Porto
Alegre: Bookman, 2014.
SOBRE o CGI.br. CGI. Disponível em: <https://cgi.br/sobre/>. Acesso em: 18
mar. 2019.
SOBRE o W3C. W3C. Disponível em: <http://www.w3c.br/Sobre/>. Acesso em:
18 mar. 2019.
SOMMERVILLE, I. Engenharia de software. São Paulo: Pearson, 2007.
IMPRIMIR
https://www.iso.org/obp/ui/#iso:std:iso:8879:ed-1:v1:en
https://cgi.br/sobre/
13/02/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_667170… 43/45
13/02/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_667170… 44/45
13/02/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_667170… 45/45