Anhembi Morumbi Desenvolvimento Web Cliente A1

Prévia do material em texto

06/09/2022 22:45 Desenvolvimento Web Cliente
https://student.ulife.com.br/ContentPlayer/Index?lc=etiHEgtaACyeE83EdTaeDA%3d%3d&l=Jg1z8%2baf%2bkLjPxl3%2bY8pBQ%3d%3d&cd=… 1/31
DESENVOLVIMENTO	WEB	CLIENTE
UNIDADE 1 - QUAL E� A ESTRUTURA E COMO E�
DEFINIDO O CONTEU� DO DE UMA PA� GINA
WEB?
Kátia Cristina Lage dos Santos
06/09/2022 22:45 Desenvolvimento Web Cliente
https://student.ulife.com.br/ContentPlayer/Index?lc=etiHEgtaACyeE83EdTaeDA%3d%3d&l=Jg1z8%2baf%2bkLjPxl3%2bY8pBQ%3d%3d&cd=… 2/31
Introdução
Vamos começar essa primeira unidade apresentando a tecnologia que permite inserir conteúdo na Internet
que é hoje considerada uma das maiores invenções do mundo moderno. Mas você sabe como isso tudo
começou e por que hoje estamos na chamada era da Informação?
A Internet como conhecemos hoje se tornou popular na década de 1990, sendo, portanto, algo bem recente.
Ela foi resultado da evolução da primeira rede de computadores criada na década de 1960. Mais recentemente,
a evolução dos dispositivos e aplicações faz com que o arcabouço de informações disponibilizadas na
Internet esteja mais acessı́vel graças às chamadas tecnologias base como o HTML, o CSS e o Javascript. Você
sabe como elas surgiram e a importância que essas tecnologias têm para o surgimento de todo esse contexto
de ferramentas e demandas pela geração de novos sistemas e aplicativos?
Apesar de serem apresentadas em forma isolada, cada uma destas tecnologias tem um papel bem de�inido e
quando empregadas conjuntamente proporcionam a criação de aplicações web e até para aplicativos móveis.
Sabendo disso, é esperado que nos perguntemos sobre como essas tecnologias funcionam conjuntamente.
Qual será a complexidade para dominar cada uma delas? Quais as evoluções vindas dessas tecnologias base?
Nessa unidade daremos destaque à tecnologia HTML que viabiliza a inclusão de conteúdo em uma página da
Internet. Acompanhe!
1.1 O HTML: funcionamento, versões e estrutura
A Internet nasceu em 1969, nos Estados Unidos. Originalmente, era uma rede que apenas interligava
laboratórios de pesquisa e se chamava ARPAnet (Advanced	Research	Projects	Agency). Naquela época ocorria
uma disputa de tecnologias entre os Estados Unidos e a extinta União Soviética, a Guerra Fria. A intenção da
rede de computadores, à época, era manter a integridade dos dados em caso de um bombardeio.
Desse contexto, surgiram o protocolo de comunicação chamado HTTP (HyperText	 Transfer	 Protocol) e a
linguagem HTML (HyperText	Markup	 Language), que viabilizaram de fato a interligação de documentos a
computadores distantes uns dos outros.
A padronização da Internet, em termos de padrões para criação e interpretação de conteúdo, é realizada pelo
World	Wide	Web	Consortium (W3C). A W3C é um consórcio internacional com quase 400 membros formados
por empresas, órgãos governamentais e organizações independentes. 
06/09/2022 22:45 Desenvolvimento Web Cliente
https://student.ulife.com.br/ContentPlayer/Index?lc=etiHEgtaACyeE83EdTaeDA%3d%3d&l=Jg1z8%2baf%2bkLjPxl3%2bY8pBQ%3d%3d&cd=… 3/31
Para entender como essa interconexão funciona, nessa unidade veremos o modelo de arquitetura cliente-
servidor que permite que conteúdo disponibilizado na rede possa ser acessado por diversos clientes na rede e
em seguida daremos um enfoque na linguagem HTML.
1.1.1 Arquitetura cliente-servidor
A tecnologia cliente/servidor é uma arquitetura na qual o processamento da informação é dividido em
módulos ou processos distintos. Um processo é responsável pela manutenção da informação (servidores) e
outros responsáveis pela obtenção dos dados (os clientes). Os processos clientes enviam pedidos para o
processo servidor, por meio de requisições do protocolo HTTP traduzidas como o acesso a uma determinada
url ou endereço de um sistema web. Observe a �igura abaixo.
VOCÊ QUER VER?
A série Download:	 The	 true	 story	 of	 Internet (Download: a verdadeira história da
Internet) é uma série de documentários produzida pelo Discovery	Channel em 2008.
Com 4 episódios com cerca de 45 minutos de duração, a série propõe mostrar o
contexto histórico da Web, desde sua criação no inıćio dos anos 1990, passando pela
icônica Guerra dos Navegadores, pela bolha ponto-com no inıćio dos anos 2000 e,
�inalmente, o surgimento da Web. Leia mais sobre o documentário e acesse todos os
episódios em: http://www.jlgregorio.com.br/2018/04/15/a-verdadeira-historia-da-
internet-documentario/ (http://www.jlgregorio.com.br/2018/04/15/a-verdadeira-
historia-da-internet-documentario/) (GREGO� RIO, 2018).
http://www.jlgregorio.com.br/2018/04/15/a-verdadeira-historia-da-internet-documentario/
06/09/2022 22:45 Desenvolvimento Web Cliente
https://student.ulife.com.br/ContentPlayer/Index?lc=etiHEgtaACyeE83EdTaeDA%3d%3d&l=Jg1z8%2baf%2bkLjPxl3%2bY8pBQ%3d%3d&cd=… 4/31
No servidor �icam localizadas a aplicação web e o banco de dados. Ao receber a requisição HTTP, o servidor
identi�ica o mapeamento entre o endereço e as aplicações que estão nele armazenados e envia uma resposta
aos pedidos. A resposta é formada por tecnologias ditas estáticas (HTML, CSS e Javascript) que não
demandam muito processamento do lado do cliente. Por isso, geralmente, as máquinas clientes são menos
poderosas, pois não rodam aplicativos que requerem tantos recursos das máquinas.
1.1.2 Tecnologias estáticas e dinâmicas
Conforme foi visto, a resposta da requisição de um determinado endereço na Internet contém as chamadas
tecnologias estáticas. O termo se opõe ao conceito de tecnologias dinâmicas que envolvem o acesso a banco
de dados e processamento mais complexo.
Figura 1 - Funcionamento da arquitetura cliente/servidor.
Fonte: WATANABE, 2013.
06/09/2022 22:45 Desenvolvimento Web Cliente
https://student.ulife.com.br/ContentPlayer/Index?lc=etiHEgtaACyeE83EdTaeDA%3d%3d&l=Jg1z8%2baf%2bkLjPxl3%2bY8pBQ%3d%3d&cd=… 5/31
As tecnologias HTML, CSS e JavaScript retornadas pelo servidor são executadas no lado do cliente de forma
conjunta. No HTML é obtido o conteúdo a ser exibido. O CSS, ou folhas de estilo, contém detalhes sobre como
o conteúdo será apresentado em termos de layout, máscara para campos (como telefone e datas), além de
cores, formatação do texto etc. O JavaScript contém código que pode auxiliar na apresentação dos dados e
algum processamento mais leve, como a validação de campos ou a busca por algum dado no lado do servidor.
Nessa unidade daremos enfoque ao HTML.
1.1.3 Versões e funcionamento do HTML
A linguagem HTML (Hypertext	Markup	 Language) tem o objetivo de formatar textos através de marcações
especiais denominadas tags. Uma tag é formada por um nome representado entre os sinais < e >. Ou seja,
<html> e </html> é um par de tags. A diferença entre as tags de abertura e fechamento está no uso da barra na
tag de fechamento.
Essas tags têm nome pré-de�inido e são reconhecidas pelos navegadores em um processo chamado de
renderização. Cada navegador tem uma máquina ou motor de renderização especı́�ico, o que pode acarretar em
diferenças na visualização de uma página quando acessada em navegadores distintos.
As tags podem conter outras tags de�inidas dentro dela. A estrutura seria simular a uma hierarquia de tags.
Além disso, associado com uma tag pode ser de�inido um conjunto de atributos. Os atributos de uma tag
ajudam a especi�icar o comportamento do conteúdo que nela é inserido.
Dentre as caracterı́sticas básicas da linguagem HTML é importante destacar alguns pontos. Clique na interação
a seguir.
VOCÊ QUER LER?
Para muitos alunos, o desenvolvimento Web é uma porta de entrada no mundo da
tecnologia, mas investir em conhecimento deve ser algo recorrente e a área está em
constante evolução. No livro “Guia do Mestre Programador: pensando como pirata,
evoluindo como jedi” (2015), Carlos Bueno mostra, por meio de metáforas cativantes,
que aplicar a sabedoria à outra variável de sucesso - o foco - é possıv́el potencializar
suas habilidadesao máximo para aproveitar toda sua carga de recursos para gerenciar
o caminho que você deseja trilhar. Como um pirata, você deve buscar recursos além
das formas institucionais. O pro�issional diferenciado é aquele que trilha o percurso
para se tornar um Padawan.
06/09/2022 22:45 Desenvolvimento Web Cliente
https://student.ulife.com.br/ContentPlayer/Index?lc=etiHEgtaACyeE83EdTaeDA%3d%3d&l=Jg1z8%2baf%2bkLjPxl3%2bY8pBQ%3d%3d&cd=… 6/31
Devido ao rápido crescimento do HTML na Web, foi necessário criar um padrão para que todos os autores e
navegadores pudessem reconhecer quaisquer versões do HTML, a saber: HTML 2.0, HTML 3.2, HTML 4.0 e o
HTML 4.01. Cada versão tem uma diferença em termos de elementos suportados e junto com cada uma delas
há sempre uma evolução dos navegadores.
documentos HTML são arquivos de texto escritos em ASCII (American	 Standard	 Code	 for
Information	 Interchange). O ASCII é o formato mais comum usado em arquivos-texto em
computadores e na Internet. Num arquivo ASCII, cada caractere alfabético, numérico ou especial,
é representado por um número binário de sete. Essa caracterı́stica viabiliza que possamos
escrever um código HTML em qualquer aplicativo de edição de texto como o Bloco de Notas
(Windows) ou VI (Linux); 
o HTML não faz diferença entre letras maiúsculas e minúsculas em suas marcações. Em outras
palavras, escrever um código HTML usando as tags em minúsculo, como <html> e </html> ou
<HTML> e </HTML>, será renderizado da mesma forma pelo navegador;
nem todas as marcações e seus correspondentes recursos são suportados por qualquer
navegador. Quando um navegador Web não entende uma marcação, ele simplesmente a ignora.
Esse fato indica que a maior parte dos arquivos HTML, mesmo com erros de sintaxe, terão algum
tipo de exibição de dados no navegador que fará sempre uma tentativa de apresentar o conteúdo
da forma mais correta;
arquivos HTML podem possuir as extensões “html” ou “htm”. A primeira é normalmente utilizada
em sistemas UNIX e a segunda em sistemas Windows. Os browsers são capazes de exibir
documentos com ambas as extensões.
06/09/2022 22:45 Desenvolvimento Web Cliente
https://student.ulife.com.br/ContentPlayer/Index?lc=etiHEgtaACyeE83EdTaeDA%3d%3d&l=Jg1z8%2baf%2bkLjPxl3%2bY8pBQ%3d%3d&cd=… 7/31
O HTML5 é a nova versão do HTML4 e um dos seus principais objetivos é facilitar a manipulação dos
elementos, possibilitando ao desenvolvedor modi�icar as caracterı́sticas dos objetos de forma não intrusiva,
fazendo com que isso �ique transparente para o usuário �inal.
1.1.4 Estrutura de um documento HTML
A estrutura principal de um documento HTML possui duas partes básicas: o cabeçalho e o corpo do programa.
O cabeçalho contém informações que, geralmente, são utilizados pelos programas que indexam conteúdo na
Internet para criar as máquinas de busca por conteúdo, como o Google. O conteúdo que está no corpo do
documento é que efetivamente corresponde ao conteúdo da página acessada.
Todo documento deve ser iniciado com a marcação <html> e �inalizado com </html>. Este par de tags é
essencial. A área do cabeçalho deve ser delimitada pelas marcações <head> e </head>. Dentro das tags de
cabeçalho pode ser de�inido o tı́tulo da página, através das marcações <title> e </title>. O tı́tulo especi�icado
será exibido na barra de tı́tulo do navegador/browser, no alto, à esquerda. Para que os caracteres especiais
sejam exibidos corretamente no seu navegador, utilize a metatag “<meta http-equiv="Content-type"
content="text/html; charset=UTF-8">”. Dessa forma, não há necessidade de recorrer a tabelas de mapeamento
de acentuação.
VOCÊ O CONHECE?
Tim Bernes-Lee é o criador da World	Wide	Web, cuja proposta para sua criação foi em
12 de março de 1989. Em 25 de dezembro de 1990, com a ajuda de Robert Cailliau e
um jovem estudante do CERN, Bernes-Lee implementou a primeira comunicação bem-
sucedida entre um cliente HTTP e o servidor através da Internet. Leia o artigo completo
em: https://politics.org.br/sites/default/�iles/downloads/politics26-versao-web.pdf
(https://politics.org.br/sites/default/�iles/downloads/politics26-versao-web.pdf ).
https://politics.org.br/sites/default/files/downloads/politics26-versao-web.pdf
06/09/2022 22:45 Desenvolvimento Web Cliente
https://student.ulife.com.br/ContentPlayer/Index?lc=etiHEgtaACyeE83EdTaeDA%3d%3d&l=Jg1z8%2baf%2bkLjPxl3%2bY8pBQ%3d%3d&cd=… 8/31
O exemplo anterior ilustra a estrutura de um programa HTML. Neste exemplo será apresentado o tı́tulo
“Primeiro exemplo” na barra do navegador e no corpo da página será apresentado o texto “Bem-vindo ao
mundo do HTML!”. Para ver o funcionamento, copie o conteúdo abaixo e cole em um arquivo salvo com a
extensão .html. No Bloco de Notas, utilize as aspas duplas na hora de de�inir o nome do arquivo a ser salvo,
por exemplo, “meuteste.html”. Clique duas vezes no arquivo que será aberto pelo navegador padrão de�inido
em sua máquina.
Figura 2 - Estrutura básica de um documento HTML.
Fonte: Elaborado pela autora, 2019.
1.2 Principais Tags HTML
Agora que já conhecemos a de�inição e o funcionamento do HTML, vamos aprender algumas das principais
tags utilizadas para inserção de texto, links, listas e imagens em uma página Web.
1.2.1 Parágrafos, cabeçalhos , quebras de linha e formatação de texto
A marcação <p> é utilizada para de�inir o inı́cio de um novo parágrafo, deixando uma linha em branco entre o
parágrafo e o texto anterior. Ela ocorre aos pares, então, para escrever um novo parágrafo, é necessário
envolver entre <p> e </p>. Mas, como dito anteriormente, se for utilizada somente a tag de abertura, o
navegador entenderá que é um parágrafo e exibirá corretamente.
06/09/2022 22:45 Desenvolvimento Web Cliente
https://student.ulife.com.br/ContentPlayer/Index?lc=etiHEgtaACyeE83EdTaeDA%3d%3d&l=Jg1z8%2baf%2bkLjPxl3%2bY8pBQ%3d%3d&cd=… 9/31
Um parâmetro comumente utilizado junto à tag de parágrafo é o align. Este de�ine o alinhamento do texto do
parágrafo e pode assumir os valores left, right, center e justify, correspondendo respectivamente aos
alinhamentos à esquerda, à direita, ao centro e justi�icado. Se o parâmetro align não for especi�icado, por
padrão o parágrafo será alinhado à esquerda.
A utilização de aspas na de�inição de parâmetros só será obrigatória em duas situações: quando o valor do
parâmetro for composto de duas ou mais palavras ou quando não for dado nenhum espaço entre os
parâmetros na tag.
A marcação <br> ou <br/> insere uma quebra de linha sem acrescentar espaços. Não há necessidade de
utilizar as duas tags. Geralmente, somente a de fechamento é utilizada. A aplicação de <p> e <br> pode ser
visualizada no exemplo abaixo. Copie ou digite-o em seu computador e salve-o como ‘exemploParagrafo.html'
e veja o resultado.
VOCÊ SABIA?
Que o primeiro site da história da Internet criado em dezembro de 1990 pelo Tim
Bernes-Lee até hoje está no ar? O "info.cern.ch" foi desenvolvido quando Bernes-
Lee trabalhava na entidade e contém informações sobre o funcionamento da rede,
com explicação de detalhes técnicos e funcionalidades, além de contar a história
do projeto. Tudo isso na interface HTML clássica, ou seja, apenas textos e links. 
Figura 3 - Sintaxe da tag < p >.
Fonte: Elaborado pela autora, 2019.
06/09/2022 22:45 Desenvolvimento Web Cliente
https://student.ulife.com.br/ContentPlayer/Index?lc=etiHEgtaACyeE83EdTaeDA%3d%3d&l=Jg1z8%2baf%2bkLjPxl3%2bY8pBQ%3d%3d&cd=… 10/31
Outra forma usada para mudar o tamanho da letra e aplicar o estilo negrito a um texto é o uso das marcações
<h>. A linguagem HTML possui seis nı́veis de tı́tulos, de h1 a h6, que aplicam um tamanho de fonte
diferenciado para o texto que venham a envolver. Além de modi�icar o tamanho, os comandos h inserem
linhas em branco acima e abaixo da linha de texto formatada. O comando h1 possui o maior tamanho,
enquanto que h6 possui o menor tamanho de fonte.
Observe o exemplo aseguir:
Figura 4 - Exemplo de uso da tag < p >.
Fonte: Elaborado pela autora, 2019.
Figura 5 - Sintaxe básica do uso das tags < h1 >, < h2 >, ...< h6 >.
Fonte: Elaborado pela autora, 2019.
06/09/2022 22:45 Desenvolvimento Web Cliente
https://student.ulife.com.br/ContentPlayer/Index?lc=etiHEgtaACyeE83EdTaeDA%3d%3d&l=Jg1z8%2baf%2bkLjPxl3%2bY8pBQ%3d%3d&cd=… 11/31
O exemplo permite visualizar os tamanhos de cabeçalhos. Digite-o em um editor de texto e salve com a
extensão “.html”. Visualize o arquivo em diferentes navegadores e veja a diferença de tamanho entre o texto
para cada um dos valores.
1.2.2 Marcadores de estilo de texto
Estes comandos permitem que o desenvolvedor crie uma série de efeitos no texto, alterando a forma e o
tamanho da fonte. Todas as tags deste tipo devem ser especi�icadas em pares, marcando o inı́cio e o �im do
texto a ser formatado. Os principais comandos de estilo de texto e sua sintaxe são apresentados a seguir.
Clique nos itens.
Negrito: <strong> texto </strong>.
Itálico: <i> texto </i>.
Sublinhado: <u> texto </u>.
Figura 6 - Exemplo comparativo do uso das tags < hn >, onde n é igual a 1, 2, 3...6.
Fonte: Elaborado pela autora, 2019.
•
•
•
06/09/2022 22:45 Desenvolvimento Web Cliente
https://student.ulife.com.br/ContentPlayer/Index?lc=etiHEgtaACyeE83EdTaeDA%3d%3d&l=Jg1z8%2baf%2bkLjPxl3%2bY8pBQ%3d%3d&cd=… 12/31
Sobrescrito: <sup> </sup>.
Subscrito: <sub> </sub>.
1.2.3 Imagens
O marcador img insere uma imagem no corpo do documento. Essa é uma tag que não possui fechamento,
como apresentado no exemplo a seguir:
O atributo src é responsável por armazenar o caminho fı́sico até o arquivo de imagem. Esse caminho pode ser
um diretório no servidor onde a aplicação está hospedada ou pode ser a url de um arquivo na Internet. Esse
parâmetro é o único obrigatório na de�inição de uma imagem. O atributo alt exibe o texto especi�icado quando
o navegador não encontra a imagem ou quando o cursor passa por cima da �igura. Apesar de ser opcional, o
atributo alt tem um papel muito importante, pois é um recurso que viabiliza a acessibilidade das imagens do
seu sistema para usuários que possuem de�iciência visual.
Os atributos width e heigth de�inem, respectivamente, a largura e a altura da imagem. Eles podem ser
especi�icados por um valor cardinal correspondente ao número de pixels ou pode ser informado em valores
percentuais em relação à largura da janela onde o sistema está sendo exibido.
Associado com a inserção de imagens na página, o HTML 5 introduziu duas novas tags especı́�icas para
imagem: <�igure> e <�igcaption>. Veja o exemplo a seguir:
• texto
•
texto
Figura 7 - Exemplo de uso da tag < img >.
Fonte: Elaborado pela autora, 2019.
06/09/2022 22:45 Desenvolvimento Web Cliente
https://student.ulife.com.br/ContentPlayer/Index?lc=etiHEgtaACyeE83EdTaeDA%3d%3d&l=Jg1z8%2baf%2bkLjPxl3%2bY8pBQ%3d%3d&cd=… 13/31
A tag <�igure> de�ine um bloco onde uma ou mais imagens podem ser inseridas com a conhecida tag <img>
. Além disso, permite também adicionar uma legenda para o bloco de imagens por meio da tag 
<�igcaption>. 
1.2.4 Links
As tags <a> e </a> podem marcar um texto ou uma imagem como um link “clicável”, assim como permite
criar um endereço para uma parte especı́�ica de um documento que será referida por um link. O exemplo a
seguir mostra o uso da tag <a>:
O atributo href indica o endereço da URL que deverá ser acessada. Pode ser usado para referências dentro e
fora do documento. Em referências fora do documento terá o nome do arquivo a ser acessado. No caso de
referências dentro do documento iniciará com o caractere cerquilha (#) seguido do nome do atributo id da
seção a ser acessada. O valor de href pode ainda ser vazio, o que indica que o link ao ser clicado não será
redirecionado para qualquer lugar.
Figura 8 - Exemplo de uso conjunto das tags < �igure >, < img > e < �igcaption > no HTML 5.
Fonte: Elaborado pela autora, 2019.
Figura 9 - Exemplo de uso da tag < a >.
Fonte: Elaborado pela autora, 2019.
06/09/2022 22:45 Desenvolvimento Web Cliente
https://student.ulife.com.br/ContentPlayer/Index?lc=etiHEgtaACyeE83EdTaeDA%3d%3d&l=Jg1z8%2baf%2bkLjPxl3%2bY8pBQ%3d%3d&cd=… 14/31
Outro atributo comumente incluı́do na tag <a> é o target. Ele especi�ica onde o recurso apontado pelo href
será exibido. Dentre as possibilidades está o valor de target=”blank” que faz com que uma nova janela seja
aberta para carregar o documento. Caso o parâmetro target não seja utilizado, o documento carregado será
exibido na mesma janela onde está o link.
Com algumas alterações no conteúdo do atributo href é possı́vel também acionar o programa padrão de e-mail
diretamente de uma página HTML. Para isso, é necessário utilizar o termo mailto precedendo o endereço de e-
mail.
Veja o quadro a seguir:
Nela observamos que é possı́vel preencher automaticamente o campo “Assunto” acrescentando a variável
subject seguida do texto que se deseja exibir.
1.2.5 Listas
Uma forma muito conveniente de estruturar um documento HTML é a utilização de listas. As listas podem
funcionar como um sumário, um menu ou um resumo do conteúdo do documento e são excelentes para serem
usadas como ponto de partida ao acesso de outras partes do documento.
Existem dois tipos de listas que mais comumente utilizadas: as não ordenadas, que contém uma série de itens
sem numerá-los, e as ordenadas, que atribuem um número para cada elemento da lista.
As marcações <ul> e </ul> são utilizadas para gerar listas não ordenadas (unordered	lists). Estas tags devem
envolver todo o conjunto de itens da lista e cada item deve ser precedido da marcação <li> (line item). 
Figura 10 - Sintaxe básica da tag criação de link para e-mail do destinatário.
Fonte: Elaborado pela autora, 2019.
Figura 11 - Sintaxe básica da tag < a > criação de link para destinatário e assunto do e-mail.
Fonte: Elaborado pela autora, 2019.
06/09/2022 22:45 Desenvolvimento Web Cliente
https://student.ulife.com.br/ContentPlayer/Index?lc=etiHEgtaACyeE83EdTaeDA%3d%3d&l=Jg1z8%2baf%2bkLjPxl3%2bY8pBQ%3d%3d&cd=… 15/31
O principal parâmetro do comando ul é o parâmetro type, que permite que sejam especi�icadas variações para
o marcador utilizado na lista. Os valores possı́veis de se atribuir ao parâmetro type são:
O exemplo a seguir ilustra a construção de uma lista não ordenada. Copie o código em um editor de texto e
veri�ique a forma como a lista é exibida.
Figura 12 - Sintaxe para uso de listas não ordenadas.
Fonte: Elaborado pela autora, 2019.
Quadro 1 - Quadro resumo: valores e sı́mbolo correspondente para atributo type de uma lista não ordenada.
Fonte: Elaborado pela autora, 2019.
06/09/2022 22:45 Desenvolvimento Web Cliente
https://student.ulife.com.br/ContentPlayer/Index?lc=etiHEgtaACyeE83EdTaeDA%3d%3d&l=Jg1z8%2baf%2bkLjPxl3%2bY8pBQ%3d%3d&cd=… 16/31
As marcações utilizadas para gerar listas ordenadas (ordered	 lists) são <ol> e </ol>. Estas tags devem
envolver todo o conjunto de itens da lista e cada item deve ser precedido da marcação <li>. Os principais
parâmetros do comando ol são apresentados a seguir. Clique nas abas.
Figura 13 - Exemplo de criação de uma lista não ordenada com uso de cı́rculo preto como marcador dos
itens da lista.
Fonte: Elaborado pela autora, 2019.
Permite escolher o primeiro número da lista. Se este parâmetro não for especi�icado, a numeração
começará do número 1. 
Permite escolher o tipo de marcador da lista. Seus possı́veis valores são:
type=”1”: cria uma lista numérica normal (valor padrão);
type=”A”: cria uma lista alfabética com letras maiúsculas começando pelo “A”;
type=”a”: cria uma lista alfabética com letras minúsculas começando pelo “a”.
•
•
start=”número” 	
type=”tipo” 	
06/09/2022 22:45 Desenvolvimento Web Cliente
https://student.ulife.com.br/ContentPlayer/Index?lc=etiHEgtaACyeE83EdTaeDA%3d%3d&l=Jg1z8%2baf%2bkLjPxl3%2bY8pBQ%3d%3d&cd=… 17/31
E� importante ressaltar que,independentemente do tipo de marcador utilizado, atribuiremos sempre um
número ao parâmetro start. Se, por exemplo, o programador escrever start=”3” para uma lista alfabética com
letras maiúsculas, o primeiro marcador da lista será a letra “C”, pois é a terceira letra do alfabeto. O mesmo
acontece com listas alfabéticas com letras minúsculas e listas cujos marcadores são algarismos romanos.
Veja o exemplo a seguir: 
Observe que o exemplo ilustra a construção de uma lista ordenada. 
1.2.6 Tags HTML 5 de Layout
Figura 14 - Sintaxe para a construção de listas ordenadas.
Fonte: Elaborado pela autora, 2019.
Figura 15 - Exemplo de criação de uma lista ordenada.
Fonte: Elaborado pela autora, 2019.
06/09/2022 22:45 Desenvolvimento Web Cliente
https://student.ulife.com.br/ContentPlayer/Index?lc=etiHEgtaACyeE83EdTaeDA%3d%3d&l=Jg1z8%2baf%2bkLjPxl3%2bY8pBQ%3d%3d&cd=… 18/31
Entre as várias mudanças que o HTML 5 traz para o desenvolvimento Web, existem algumas novas	tags para o
código-fonte. Não são apenas novas regras para tags antigas, mas tags completamente novas que não existiam
antes no HTML 4.01.
Entre estas novidades estão as tags chamadas de tags de layout. Elas servem para classi�icar seções de sua
página Web como áreas de signi�icado sem que você precise de uma <div> para de�ini-las. O cabeçalho da
página pode ser encapsulado dentro da tag <header> (não confundir com <head>…) e sua navegação pode ser
encapsulada pela tag <nav>, por exemplo.
Segue uma breve descrição de cada uma das tags de layout introduzidas no HTML 5. Clique nos itens e veja.
VOCÊ SABIA?
Que é possıv́el testar todas as tags do HTML 5 e as demais vistas nessa unidade
em uma ferramenta online e gratuita? Para isso, basta acessar o site do w3cschool
e selecionar a tecnologia HTML. Esse recurso pode ser utilizado por outras
tecnologias. Os exemplos podem ser alterados e sua visualização pode ser
veri�icada pelo próprio renderizador dentro do site. Acesse o link direto e comece
a praticar tudo o que você tem aprendido no curso: 
https://www.w3schools.com/tags/ (https://www.w3schools.com/tags/). 
<article>	
E� um indicador de uma área de conteúdo do seu site, o núcleo de uma determinada
página, a porção mais central e relevante da página. 
<aside>		
E� um indicador de uma área de conteúdo paralelo, complementar ao conteúdo
principal em sua página. 
<footer>	
E� um indicador de uma área de conteúdo que vem ao �inal de um conteúdo,
popularmente chamado de “rodapé”. 
<header>	
E� um indicador de uma área de conteúdo que vem no começo de um conteúdo,
popularmente chamado de “cabeçalho”. 
<nav>	
E� um indicador de uma área na página que contém majoritariamente links de
navegação. 
https://www.w3schools.com/tags/
06/09/2022 22:45 Desenvolvimento Web Cliente
https://student.ulife.com.br/ContentPlayer/Index?lc=etiHEgtaACyeE83EdTaeDA%3d%3d&l=Jg1z8%2baf%2bkLjPxl3%2bY8pBQ%3d%3d&cd=… 19/31
No tópico a seguir, falaremos sobre tabelas em HTML. Acompanhe!
<section>	
E� um indicador de seção, capı́tulo, divisão de um determinado capı́tulo, cujo
conteúdo está agrupado pelo mesmo tema. 
1.3 Tabelas em HTML
Um dos elementos mais comumente empregados no HTML são as tabelas. Simular ao conceito empregado
para construção de planilhas formadas por linhas e colunas, as tabelas são as formas mais simples de
organizar o conteúdo a ser apresentado que tem esse formato.
1.3.1 Tags table, td e tr
O uso de tabelas melhora muito a aparência de uma página, pois permite o alinhamento de textos e imagens,
além de ordenar as informações de uma forma padronizada.
Observe a seguir um exemplo de uma tabela com duas linhas e três colunas:
06/09/2022 22:45 Desenvolvimento Web Cliente
https://student.ulife.com.br/ContentPlayer/Index?lc=etiHEgtaACyeE83EdTaeDA%3d%3d&l=Jg1z8%2baf%2bkLjPxl3%2bY8pBQ%3d%3d&cd=… 20/31
Uma tabela é constituı́da de linhas e colunas e a interseção entre estes dois elementos é denominada célula.
As tabelas são criadas pela tag <table> e </table>. Suas linhas são criadas pela tag <tr> e </tr> e as
células/colunas de uma linha são criadas pelos comandos <td> e </td> ou <th> e </th>. 
1.3.2 Expansão de células em linhas e colunas
Uma vez de�inida a estrutura básica de uma tabela, ou seja, o número de linhas e colunas, podemos “apagar” a
divisão entre células vizinhas de maneira a aumentar a largura ou a altura de uma célula, criando, assim,
tabelas mais bem de�inidas. Em uma planilha do Excel, seria similar ao conceito de realizar uma operação de
Merge entre colunas ou linhas. Veja o exemplo a seguir:
Figura 16 - Exemplo de criação de uma tabela com duas linhas e três colunas.
Fonte: Elaborado pela autora, 2019.
06/09/2022 22:45 Desenvolvimento Web Cliente
https://student.ulife.com.br/ContentPlayer/Index?lc=etiHEgtaACyeE83EdTaeDA%3d%3d&l=Jg1z8%2baf%2bkLjPxl3%2bY8pBQ%3d%3d&cd=… 21/31
Figura 17 - Exemplo de tabela com expansão de linha e de coluna.
Fonte: Elaborado pela autora, 2019.
06/09/2022 22:45 Desenvolvimento Web Cliente
https://student.ulife.com.br/ContentPlayer/Index?lc=etiHEgtaACyeE83EdTaeDA%3d%3d&l=Jg1z8%2baf%2bkLjPxl3%2bY8pBQ%3d%3d&cd=… 22/31
O atributo colspan da tag <td> permite aumentar o tamanho de uma célula fazendo com que ela ocupe colunas
adjacentes. Já o atributo rowspan, associado à tag <tr>, faz com que a célula aumente ocupando linhas
adjacentes. O exemplo acima ilustra estas expansões. Copie o exemplo em um arquivo do bloco de notas, salve
com a extensão “.html” e veri�ique o funcionamento. 
1.3.3 Incluindo legendas
Se o desenvolvedor desejar criar um tı́tulo ou legenda para a tabela, basta usar a tag <caption> imediatamente
após a abertura do comando table.
O principal parâmetro do comando caption é o parâmetro align. Se atribuirmos ao parâmetro align o valor
“top”, a legenda especi�icada será exibida na parte superior da tabela. Por outro lado, se a ele for atribuı́do o
valor “bottom”, o navegador exibirá a legenda especi�icada abaixo da tabela. Em ambos os casos a legenda é
centralizada de acordo com a tabela. Observe o exemplo abaixo:
Modi�ique o código da tabela anterior para inserir uma legenda na sua parte superior.
Figura 18 - Sintaxe de legendas em tabelas.
Fonte: Elaborado pela autora, 2019.
Figura 19 - Exemplo de criação de tabela com legenda.
Fonte: Elaborado pela autora, 2019.
06/09/2022 22:45 Desenvolvimento Web Cliente
https://student.ulife.com.br/ContentPlayer/Index?lc=etiHEgtaACyeE83EdTaeDA%3d%3d&l=Jg1z8%2baf%2bkLjPxl3%2bY8pBQ%3d%3d&cd=… 23/31
1.4 Formulário HTML
Quando o sistema Web precisa enviar uma série de dados do lado do cliente para o lado do servidor, ou
quando ele deseja enviar informações entre páginas, é utilizado o elemento chamado de formulário. Veremos
agora os principais elementos e detalhes acerca dele.
Os formulários eletrônicos são um dos mais fascinantes recursos da linguagem HTML, pois através deles um
usuário pode interagir com o servidor enviando-lhe dados para serem processados. Os comandos de criação
de formulários são, portanto, os principais responsáveis pela troca de informações entre cliente e servidor
1.4.1 Form
 Um formulário é um elemento HTML de grande relevância em um documento HTML, pois ele viabiliza a
transmissão de dados entre o lado cliente e o lado servidor. A maior parte dos sistemas web tem formulários
implementados, seja para o envio de uma �icha de inscrição, uma pesquisa/questionário online e até mesmo
para de�inir o nı́vel de pro�iciência em uma tecnologia ou idioma.
As marcações <form> e </form> são usadas para de�inir um formulário. A tag	<form> em si tem duas funções
importantes: especi�icar o local do programa que controlará o formulário e de�inir a forma ou método como
os dados serão enviados. 
A tag <form> possui os atributos elencados nas abas a seguir. Clique e veja.
E� importante ressaltar aqui a diferença entre os valores do atributo method. Quando o valor ‘get” é utilizado,asinformações são enviadas como se �izessem parte da url, seguindo a sintaxe
“nomeVariavel1=valor1&nomeVariavel2=valor2”. O tamanho da URL pode se estender a até 3000 caracteres.
Figura 20 - Sintaxe de criação de um formulário.
Fonte: Elaborado pela autora, 2019.
Especi�ica o local (url) do servidor e do programa CGI que vai processar os dados do formulário. 
Indica o método usado pelo servidor para receber os dados do formulário. As opções possı́veis
para este parâmetro são: get e post. 
•
•
action=”url” 	
method=”método	de	troca	de	dados” 	
06/09/2022 22:45 Desenvolvimento Web Cliente
https://student.ulife.com.br/ContentPlayer/Index?lc=etiHEgtaACyeE83EdTaeDA%3d%3d&l=Jg1z8%2baf%2bkLjPxl3%2bY8pBQ%3d%3d&cd=… 24/31
Devido ao seu funcionamento, o método “get” não deve ser utilizado quando são transmitidos dados
sensı́veis, ou seja, que podem mostrar detalhes da implementação do sistema que está no lado do servidor,
como o nome das variáveis e os valores dos campos enviados. Para visualizar essa informação, considere um
formulário de autenticação no sistema onde deve ser informada a senha de acesso. Qualquer pessoa com
acesso a URL saberia a senha de acesso de diferentes usuários.
 Quando o valor do atributo method é “post”, as informações são enviadas num bloco de dados separado da
url. Assim, nem o nome das variáveis, nem o valor delas é exibido em qualquer local do sistema. Somente o
lado do servidor consegue ler esses dados e interpretar corretamente cada campo de entrada. Por esse motivo,
é um método mais seguro para envio dos dados e não tem limitações no tamanho da URL.
A transmissão de dados entre cliente e servidor é possı́vel, pois entre as tags de abertura e o fechamento do
formulário podem ser declaradas tags de entrada de dados e de ação. As tags de entrada de dados e de ação
mais conhecidas são do tipo <input>. Elas podem ter atributos com valores distintos que facilitam a interação
do usuário com o objeto de entrada de dados ou ação. As tags de ação (os botões de ação) são responsáveis
por de�inir o que será feito com os dados informados nas tags de entrada de dados. Além das tags do tipo
<input>, nas próximas seções serão apresentadas duas outras tags de entrada de dados: <selection> e
<option>.
1.4.2 Marcador input
A tag <input> de�ine um campo de entrada de dados no qual o usuário digita as informações requeridas pelo
formulário. Cada campo de um formulário atribui seu conteúdo a uma variável que possui nome e tipo
especı́�icos. O exemplo abaixo corresponde a uma �icha de inscrição construı́da com um formulário. Copie o
exemplo e visualize em diferente navegadores:
06/09/2022 22:45 Desenvolvimento Web Cliente
https://student.ulife.com.br/ContentPlayer/Index?lc=etiHEgtaACyeE83EdTaeDA%3d%3d&l=Jg1z8%2baf%2bkLjPxl3%2bY8pBQ%3d%3d&cd=… 25/31
Os parâmetros do marcador input são os seguintes:
type=”tipo de variável”: especifica o tipo de dado para a variável.
Suas opções possíveis são: 
- text: aceita dados do tipo caractere. É o tipo de variável mais
utilizado para a digitação de um campo de texto com tamanho
conhecido. Por padrão, a caixa de digitação criada para este tipo
de variável terá largura equivalente a 20 caracteres, não impõe
limite para a quantidade de caracteres digitados; 
- password: aceita dados do tipo caractere. Funciona exatamente
como uma variável do tipo text, porém, exibe um asterisco no
lugar de cada caractere digitado para impedir sua visualização na
Figura 21 - Exemplo de um formulário com campos de entrada e botão de envio dos dados.
Fonte: Elaborado pela autora, 2019.
•
06/09/2022 22:45 Desenvolvimento Web Cliente
https://student.ulife.com.br/ContentPlayer/Index?lc=etiHEgtaACyeE83EdTaeDA%3d%3d&l=Jg1z8%2baf%2bkLjPxl3%2bY8pBQ%3d%3d&cd=… 26/31
tela. É ideal para a digitação de senhas e palavras-chave; 
- radio: aceita campos do tipo sim/não. Permite a exibição de
várias opções, mas só aceita que uma delas seja escolhida. O
campo de entrada de dados criado para este tipo de variável é um
pequeno círculo, que pode ser marcado com um clique. Dois
círculos associados à mesma variável não podem estar marcados
simultaneamente, pois quando o usuário clicar sobre o segundo, o
primeiro será automaticamente desmarcado; 
- checkbox: aceita campos do tipo sim/não. Permite a exibição de
várias opções e aceita que o usuário escolha várias delas. O campo
de entrada de dados criado para este tipo de variável é um
pequeno quadrado, que pode ser marcado com um clique.
- submit: cria um botão que envia o conteúdo do formulário ao ser
pressionado. Os dados são enviados para a url especificada no
parâmetro action e de acordo com o método escolhido no
parâmetro method do comando form. Por padrão, a legenda do
botão criado será “submit”.
name=”nome”: nome da variável que receberá o conteúdo do
campo. Este atributo é essencial na sintaxe de criação de qualquer
campo de entrada de dados, pois será utilizado no destino
definido pelo atributo action da tag <form>.
value=”valor”: permite definir um conteúdo prévio para campos
dos tipos text e password, ou seja, um texto que aparecerá escrito
Figura 22 - Sintaxe dos campos do tipo “text” em um formulário.
Fonte: Elaborado pela autora, 2019.
•
•
06/09/2022 22:45 Desenvolvimento Web Cliente
https://student.ulife.com.br/ContentPlayer/Index?lc=etiHEgtaACyeE83EdTaeDA%3d%3d&l=Jg1z8%2baf%2bkLjPxl3%2bY8pBQ%3d%3d&cd=… 27/31
na caixa de digitação quando o formulário for aberto. Para os
campos do tipo checkbox ou radio, representa o valor que será
atribuído à variável se a opção for marcada. Para o campo submit
indica o texto que aparece no botão. Este parâmetro é obrigatório
apenas para variáveis dos tipos checkbox e radio;
size=”tamanho”: define a quantidade de caracteres exibidos em
campos do tipo text ou password. Este número delimita apenas o
tamanho do campo para digitação e não a quantidade de
caracteres que o campo pode ter;
id=”identificação”: identifica o campo para permitir que seja
criada uma tecla de atalho para ele.
1.4.3 Select e option
Há dois outros tipos de construção de elementos a serem utilizados com formulários: select e option. As tags
<select> e </select> de�inem e exibem uma lista de itens que podem ser selecionados pelo usuário.
Visualmente elas criam uma lista de seleção onde uma caixa é exibida com o valor padrão e o clique em uma
seta faz surgir uma lista de opções. Um ou mais itens podem ser selecionados.
Os parâmetros do comando select são:
name=”nome: especifica o nome da variável que receberá o
conteúdo do campo;
size=”tamanho”: especifica a quantidade de itens que será
exibida de uma vez pela lista. Este parâmetro é opcional;
multiple: este campo é opcional e indica que podem ser
escolhidos vários itens da lista. 
Cada item da lista deve ser especi�icado pela tag <option>, cujos principais parâmetros são:
value=”conteúdo”: define o conteúdo que a variável
correspondente receberá caso a opção seja selecionada;
•
•
•
•
•
Figura 23 - Sintaxe de um campo de seleção em um formulário.
Fonte: Elaborado pela autora, 2019.
•
06/09/2022 22:45 Desenvolvimento Web Cliente
https://student.ulife.com.br/ContentPlayer/Index?lc=etiHEgtaACyeE83EdTaeDA%3d%3d&l=Jg1z8%2baf%2bkLjPxl3%2bY8pBQ%3d%3d&cd=… 28/31
Selected: indica que a opção deve ser previamente marcada
como selecionada.
Vamos agora elaborar um caso prático: criar uma �icha de inscrição online com HTML. A �icha terá a aparência
apresentada na �igura a seguir. Essa é uma �icha que poderia ser aplicada em um processo de seleção para uma
vaga, onde o cadastro inicial dos candidatos é preenchido no momento da entrevista. Note que foram
utilizados diferentes formatos dos campos de entradas de dados: o campo Sexo é do tipo radio, os campos
referentes aos softwares são do tipo checkbox e o cargo é uma caixa de seleção. Dois botões de ação foram
acrescentados: enviar e limpar campos.
A seguir é apresentado o código fonte que viabilizou a apresentaçãodo conteúdo acima. Copie o exemplo e
visualize em diferentes navegadores:
•
Figura 24 - Sintaxe de um campo de opção de um formulário.
Fonte: Elaborado pela autora, 2019.
Figura 25 - Renderização do formulário de inscrição.
Fonte: Elaborado pela autora, 2019.
06/09/2022 22:45 Desenvolvimento Web Cliente
https://student.ulife.com.br/ContentPlayer/Index?lc=etiHEgtaACyeE83EdTaeDA%3d%3d&l=Jg1z8%2baf%2bkLjPxl3%2bY8pBQ%3d%3d&cd=… 29/31
Concluı́mos, assim, a unidade introdutória relativa à origem e ao funcionamento do HTML, tecnologia
responsável por prover o conteúdo na Internet. Foi possı́vel conhecer as principais tags, elementos base do
HTML e os atributos mais utilizados junto a cada uma delas. Apesar de o conteúdo ser extenso, a prática na
construção dos exemplos fará com que o domı́nio das tags ocorra de forma natural. Lembre-se de praticar nas
ferramentas online ou mesmo com o uso de um simples editor de texto. Copie o conteúdo de cada exemplo
apresentado e veja seu funcionamento, altere os valores dos atributos e busque exemplos de uso na Internet. 
Figura 26 - Exemplo de um formulário com diferentes tipos de campos de entrada e botão de submissão.
Fonte: Elaborado pela autora, 2019.
06/09/2022 22:45 Desenvolvimento Web Cliente
https://student.ulife.com.br/ContentPlayer/Index?lc=etiHEgtaACyeE83EdTaeDA%3d%3d&l=Jg1z8%2baf%2bkLjPxl3%2bY8pBQ%3d%3d&cd=… 30/31
Síntese
O Desenvolvimento Web é uma das áreas de maior crescimento na área de Computação. Seja para trabalhar em
uma grande empresa ou para abrir o seu próprio negócio, o setor voltado para aplicações web e mobile podem
ser atingidos com o conhecimento introduzido nessa disciplina. Tratamos aqui do HTML, que é a base para
incluir conteúdo em sites, portais e sistemas web em geral. Como vimos nessa unidade, o HTML é formado
por tags de abertura e fechamento, sendo cada tag responsável por um determinado tipo de conteúdo. As tags
podem ter atributos que ajudam a descrever o seu comportamento, sendo alguns deles importantes para
questões de acessibilidade da sua aplicação web. Vimos as tags para introdução de texto (parágrafos e
cabeçalhos), para inserção de hiperlinks, imagens, tabelas e construção de formulários. Apesar de ser um
conteúdo vasto, com a prática �ica mais fácil de memorizar as tags e seu uso mais comum. 
Bibliografia
GREGO� RIO, J. L. A verdadeira história da Internet (Documentário). Tecnologia,	 Cultura	 Nerd	 e	 Assuntos
Aleatórios - Filmes e Séries, 15 abr. 2018. Disponı́vel em: (http://www.jlgregorio.com.br/2018/04/15/a-
verdadeira-historia-da-internet-documentario/)http://www.jlgregorio.com.br/2018/04/15/a-verdadeira-
historia-da-internet-documentario/ (http://www.jlgregorio.com.br/2018/04/15/a-verdadeira-historia-da-
internet-documentario/). Acesso em: 25 jun. 2019.
INSTITUTO NUPEF. PoliTICs, Rio de Janeiro, n. 26, 2017. Disponı́vel em:
(https://politics.org.br/sites/default/�iles/downloads/politics26-versao-
web.pdf)https://politics.org.br/sites/default/�iles/downloads/politics26-versao-web.pdf
(https://politics.org.br/sites/default/�iles/downloads/politics26-versao-web.pdf). Acesso em: 26 jun. 2019.
LEMAY, L.; COLBURN, R.; TYLER, D. Aprenda	a	criar	páginas	Web	com	HTML	e	XHTML	em	21	dias. São
Paulo: Pearson Education do Brasil, 2002. Disponı́vel em:
(http://aulaaberta.bv3.digitalpages.com.br/users/publications/9788534614283)http://aulaaberta.bv3.digital
pages.com.br/users/publications/9788534614283
(http://aulaaberta.bv3.digitalpages.com.br/users/publications/9788534614283). Acesso em: 26 jun. 2019.
MILETTO, E. M. Desenvolvimento	de	software	ii	introdução	ao	desenvolvimento	web	com	HTML,	CSS,
Javascript	e	Php. Porto Alegre: Bookman 2014.
TERUEL, E. C. HTML	5	-	guia	prático. 2. São Paulo: E� rica, 2014.
W3Schools. HTML	 Element	 Reference, 2019. Disponı́vel em:
(https://www.w3schools.com/tags/)https://www.w3schools.com/tags/
(https://www.w3schools.com/tags/). Acesso em: 25 jun. 2019.
WATANABE, W. Apresentação	 Comunicação	 Cliente/Servidor, 07 mar. 2013. Disponı́vel em:
https://pt.slideshare.net/watinha1/apresentacao-17018075
(https://pt.slideshare.net/watinha1/apresentacao-17018075). Acesso em: 01/07/2019.
http://www.jlgregorio.com.br/2018/04/15/a-verdadeira-historia-da-internet-documentario/
http://www.jlgregorio.com.br/2018/04/15/a-verdadeira-historia-da-internet-documentario/
https://politics.org.br/sites/default/files/downloads/politics26-versao-web.pdf
https://politics.org.br/sites/default/files/downloads/politics26-versao-web.pdf
http://aulaaberta.bv3.digitalpages.com.br/users/publications/9788534614283
http://aulaaberta.bv3.digitalpages.com.br/users/publications/9788534614283
https://www.w3schools.com/tags/
https://www.w3schools.com/tags/
https://pt.slideshare.net/watinha1/apresentacao-17018075
06/09/2022 22:45 Desenvolvimento Web Cliente
https://student.ulife.com.br/ContentPlayer/Index?lc=etiHEgtaACyeE83EdTaeDA%3d%3d&l=Jg1z8%2baf%2bkLjPxl3%2bY8pBQ%3d%3d&cd=… 31/31