Desenvolvimento Web Cliente vol1

Prévia do material em texto

- -1
DESENVOLVIMENTO WEB CLIENTE
UNIDADE 1 - QUAL É A ESTRUTURA E COMO 
É DEFINIDO O CONTEÚDO DE UMA PÁGINA 
WEB?
Kátia Cristina Lage dos Santos
- -2
Introdução
Vamos começar essa primeira unidade apresentando a tecnologia que permite inserir conteúdo na queInternet
é 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 como conhecemos hoje se tornou popular na década de 1990, sendo, portanto, algo bem recente. ElaInternet
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 definido e
quando empregadas conjuntamente proporcionam a criação de aplicações e até para aplicativos móveis.web
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 
. Acompanhe!Internet
1.1 O HTML: funcionamento, versões e estrutura
A nasceu em 1969, nos Estados Unidos. Originalmente, era uma rede que apenas interligavaInternet
laboratórios de pesquisa e se chamava ARPAnet ( ). Naquela época ocorriaAdvanced Research Projects Agency
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 ( ) e aHyperText Transfer Protocol
linguagem HTML ( ), que viabilizaram de fato a interligação de documentos aHyperText Markup Language
computadores distantes uns dos outros.
A padronização da , em termos de padrões para criação e interpretação de conteúdo, é realizada pelo Internet
 (W3C). A W3C é um consórcio internacional com quase 400 membros formadosWorld Wide Web Consortium
por empresas, órgãos governamentais e organizações independentes. 
Para entender como essa interconexão funciona, nessa unidade veremos o modelo de arquitetura cliente-
VOCÊ QUER VER?
A série (Download: a verdadeira história da Internet) éDownload: The true story of Internet
uma série de documentários produzida pelo em 2008. Com 4 episódios comDiscovery Channel
cerca de 45 minutos de duração, a série propõe mostrar o contexto histórico da , desdeWeb
sua criação no início dos anos 1990, passando pela icônica Guerra dos Navegadores, pela bolha
ponto-com no início dos anos 2000 e, finalmente, 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-
 (GREGÓRIO, 2018).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/
- -3
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 . Observe a figura abaixo.web
Figura 1 - Funcionamento da arquitetura cliente/servidor.
Fonte: WATANABE, 2013.
No servidor ficam localizadas a aplicação e o banco de dados. Ao receber a requisição HTTP, o servidorweb
identifica 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 contém as chamadasInternet
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.
- -4
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 , máscara para campos (como telefone e datas), além de cores,layout
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 ( ) tem o objetivo de formatar textos através de marcaçõesHypertext Markup Language
especiais denominadas . Uma é formada por um nome representado entre os sinais < e >. Ou seja, <html>tags tag
e </html> é um par de . A diferença entre as de abertura e fechamento está no uso da barra na detags tags tag
fechamento.
Essas têm nome pré-definido e são reconhecidas pelos navegadores em um processo chamado detags
renderização. Cada navegador tem uma máquina ou motor de renderização específico, o que pode acarretar em
diferenças na visualização de uma página quando acessada em navegadores distintos.
As podem conter outras definidas dentro dela. A estrutura seria simular a uma hierarquia de . Alémtags tags tags
disso, associado com uma pode ser definido um conjunto de atributos. Os atributos de uma ajudam atag tag
especificar 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.
documentos HTML são arquivos de texto escritos em ASCII (American Standard Code for Information
). O ASCII é o formato mais comum usado em arquivos-texto em computadores e na . NumInterchange Internet
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 ( ) ou VI ( );Windows 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 em minúsculo, como <html> e </html> ou <HTML> e </HTML>, serátags
renderizado da mesma forma pelo navegador;
nem todas as marcações e seus correspondentes recursos são suportados por qualquer navegador. Quando um
navegador não entende uma marcação, ele simplesmente a ignora. Esse fato indica que a maior parte dosWeb
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
VOCÊ QUER LER?
Para muitos alunos, o desenvolvimento é uma porta de entrada no mundo da tecnologia,Web
mas investir em conhecimentodeve 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ível potencializar suas habilidades ao 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 profissional
diferenciado é aquele que trilha o percurso para se tornar um Padawan.
- -5
arquivos HTML podem possuir as extensões “html” ou “htm”. A primeira é normalmente utilizada em sistemas
UNIX e a segunda em sistemas Windows. Os são capazes de exibir documentos com ambas asbrowsers
extensões.
Devido ao rápido crescimento do HTML na , foi necessário criar um padrão para que todos os autores eWeb
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.
O HTML5 é a nova versão do HTML4 e um dos seus principais objetivos é facilitar a manipulação dos elementos,
possibilitando ao desenvolvedor modificar as características dos objetos de forma não intrusiva, fazendo com
que isso fique transparente para o usuário final.
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 
 para criar as máquinas de busca por conteúdo, como o Google. O conteúdo que está no corpo doInternet
documento é que efetivamente corresponde ao conteúdo da página acessada.
Todo documento deve ser iniciado com a marcação <html> e finalizado com </html>. Este par de étags
essencial. A área do cabeçalho deve ser delimitada pelas marcações <head> e </head>. Dentro das detags
cabeçalho pode ser definido o título da página, através das marcações <title> e </title>. O título especificado será
exibido na barra de título do navegador/ , no alto, à esquerda. Para que os caracteres especiais sejambrowser
exibidos corretamente no seu navegador, utilize a “<meta http-equiv="Content-type" content="textmetatag
/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 , cuja proposta para sua criação foi em 12 deWorld Wide Web
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 . Leia o artigo completo em: Internet https://politics.org.br
./sites/default/files/downloads/politics26-versao-web.pdf
https://politics.org.br/sites/default/files/downloads/politics26-versao-web.pdf
https://politics.org.br/sites/default/files/downloads/politics26-versao-web.pdf
- -6
Figura 2 - Estrutura básica de um documento HTML.
Fonte: Elaborado pela autora, 2019.
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 definir o nome do arquivo a ser salvo, por exemplo,
“meuteste.html”. Clique duas vezes no arquivo que será aberto pelo navegador padrão definido em sua máquina.
1.2 Principais HTMLTags
Agora que já conhecemos a definição e o funcionamento do HTML, vamos aprender algumas das principais tags
utilizadas para inserção de texto, , listas e imagens em uma página .links Web
1.2.1 Parágrafos, cabeçalhos , quebras de linha e formatação de texto
A marcação <p> é utilizada para definir 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 de abertura, o navegadortag
entenderá que é um parágrafo e exibirá corretamente.
Um parâmetro comumente utilizado junto à de parágrafo é o . Este define o alinhamento do texto dotag align
VOCÊ SABIA?
Que o primeiro da história da criado em dezembro de 1990 pelo Tim Bernes-Leesite Internet
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
- -7
Um parâmetro comumente utilizado junto à de parágrafo é o . Este define o alinhamento do texto dotag align
parágrafo e pode assumir os valores , , e , correspondendo respectivamente aosleft right center justify
alinhamentos à esquerda, à direita, ao centro e justificado. Se o parâmetro não for especificado, por padrãoalign
o parágrafo será alinhado à esquerda.
Figura 3 - Sintaxe da tag < p >.
Fonte: Elaborado pela autora, 2019.
A utilização de aspas na definiçã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 . Geralmente, somente a de fechamento é utilizada. A aplicação de <p> e <br> pode ser visualizada notags
exemplo abaixo. Copie ou digite-o em seu computador e salve-o como ‘exemploParagrafo.html' e veja o resultado.
Figura 4 - Exemplo de uso da tag < p >.
Fonte: Elaborado pela autora, 2019.
Outra forma usada para mudar o tamanho da letra e aplicar o estilo negrito a um texto é o uso das marcações
- -8
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 modificar 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.
Figura 5 - Sintaxe básica do uso das tags < h1 >, < h2 >, ...< h6 >.
Fonte: Elaborado pela autora, 2019.
Observe o exemplo a seguir:
Figura 6 - Exemplo comparativo do uso das tags < hn >, onde n é igual a 1, 2, 3...6.
Fonte: Elaborado pela autora, 2019.
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.
- -9
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 deste tipo devem ser especificadas em pares, marcando o início e o fim do textotags
a ser formatado. Os principais comandos de estilo de texto e sua sintaxe são apresentados a seguir. Clique nos
itens.
• 
Negrito: <br> texto </br>.
• 
Itálico: <i> texto </i>.
• 
Sublinhado: <u> texto </u>.
• 
Sobrescrito: <sup> texto </sup>.
• 
Subscrito: <sub> texto </sub>.
1.2.3 Imagens
O marcador img insere uma imagem no corpo do documento. Essa é uma que não possui fechamento, comotag
apresentado no exemplo a seguir:
Figura 7 - Exemplo de uso da tag < img >.
Fonte: Elaborado pela autora, 2019.
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 . EsseInternet
parâmetro é o únicoobrigatório na definição de uma imagem. O atributo alt exibe o texto especificado quando o
navegador não encontra a imagem ou quando o cursor passa por cima da figura. 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 deficiência visual.
Os atributos width e heigth definem, respectivamente, a largura e a altura da imagem. Eles podem ser
especificados por um valor cardinal correspondente ao número de ou pode ser informado em valorespixels
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 específicas para imagem:tags
<figure> e <figcaption>. Veja o exemplo a seguir:
•
•
•
•
•
- -10
Figura 8 - Exemplo de uso conjunto das tags < figure >, < img > e < figcaption > no HTML 5.
Fonte: Elaborado pela autora, 2019.
A <figure> define um bloco onde uma ou mais imagens podem ser inseridas com a conhecida <img> .tag tag
Além disso, permite também adicionar uma legenda para o bloco de imagens por meio da <figcaption>.tag
1.2.4 Links
As <a> e </a> podem marcar um texto ou uma imagem como um “clicável”, assim como permite criartags link
um endereço para uma parte específica de um documento que será referida por um . O exemplo a seguirlink
mostra o uso da <a>:tag
Figura 9 - Exemplo de uso da tag < a >.
Fonte: Elaborado pela autora, 2019.
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 ao ser clicado não será redirecionado paralink
qualquer lugar.
Outro atributo comumente incluído na <a> é o target. Ele especifica onde o recurso apontado pelo href serátag
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
- -11
Figura 10 - Sintaxe básica da tag criação de link para e-mail do destinatário.
Fonte: Elaborado pela autora, 2019.
Veja o quadro a seguir:
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.
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 do documento e são excelentes para seremum resumo do conteúdo
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 ( ). Estas devemunordered lists tags
envolver todo o conjunto de itens da lista e cada item deve ser precedido da marcação <li> ( item).line
Figura 12 - Sintaxe para uso de listas não ordenadas.
Fonte: Elaborado pela autora, 2019.
O principal parâmetro do comando ul é o parâmetro , que permite que sejam especificadas variações para otype
marcador utilizado na lista. Os valores possíveis de se atribuir ao parâmetro são:type
- -12
Quadro 1 - Quadro resumo: valores e símbolo correspondente para atributo type de uma lista não ordenada.
Fonte: Elaborado pela autora, 2019.
O exemplo a seguir ilustra a construção de uma lista não ordenada. Copie o código em um editor de texto e
verifique a forma como a lista é exibida.
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.
As marcações utilizadas para gerar listas ordenadas ( ) são <ol> e </ol>. Estas devem envolverordered lists tags
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.
•
start=”número”
Permite escolher o primeiro número da lista. Se este parâmetro não for especificado, a numeração
começará do número 1.
•
type=”tipo”
Permite escolher o tipo de marcador da lista. Seus possíveis valores são:
•
•
- -13
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”.
É importante ressaltar que, independentemente do tipo de marcador utilizado, atribuiremos sempre um número
ao parâmetro . Se, por exemplo, o programador escrever start=”3” para uma lista alfabética com letrasstart
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.
Figura 14 - Sintaxe para a construção de listas ordenadas.
Fonte: Elaborado pela autora, 2019.
Veja o exemplo a seguir:
Figura 15 - Exemplo de criação de uma lista ordenada.
Fonte: Elaborado pela autora, 2019.
Observe que o exemplo ilustra a construção de uma lista ordenada.
- -14
1.2.6 Tags HTML 5 de Layout
Entre as várias mudanças que o HTML 5 traz para o desenvolvimento , existem algumas novas para oWeb tags
código-fonte. Não são apenas novas regras para antigas, mas completamente novas que não existiamtags tags
antes no HTML 4.01.
Entre estas novidades estão as chamadas de de . Elas servem para classificar seções de suatags tags layout
página como áreas de significado sem que você precise de uma <div> para defini-las. O cabeçalho da páginaWeb
pode ser encapsulado dentro da <header> (não confundir com <head>…) e sua navegação pode sertag
encapsulada pela <nav>, por exemplo.tag
Segue uma breve descrição de cada uma das de introduzidas no HTML 5. Clique nos itens e veja.tags layout
<article>
É um indicador de uma área de conteúdo do seu , o núcleo de uma determinada página, asite
porção mais central e relevante da página.
<aside> 
É um indicador de uma área de conteúdo paralelo, complementar ao conteúdo principal em
sua página.
<footer>
É um indicador de uma área de conteúdo que vem ao final de um conteúdo, popularmente
chamado de “rodapé”.
<header>
É um indicador de uma área de conteúdo que vem no começo de um conteúdo, popularmente
chamado de “cabeçalho”.
<nav> É um indicador de uma área na página que contém majoritariamente s de navegação.link
<section>
É um indicador de seção, capítulo, divisão de um determinado capítulo, cujo conteúdo está
agrupado pelo mesmo tema.
No tópico a seguir, falaremos sobre tabelas em HTML. Acompanhe!
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.
VOCÊ SABIA?
Que é possível testar todas as do HTML 5 e as demais vistas nessa unidade em umatags
ferramenta e gratuita? Para isso, basta acessar o do e selecionar aonline site w3cschool
tecnologia HTML. Esse recurso pode ser utilizado por outras tecnologias. Os exemplos podem
ser alterados e sua visualização pode ser verificadapelo próprio renderizador dentro do .site
Acesse o direto e comece a praticar tudo o que você tem aprendido no curso: link https://www.
.w3schools.com/ /tags
https://www.w3schools.com/tags/
https://www.w3schools.com/tags/
- -15
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:
Figura 16 - Exemplo de criação de uma tabela com duas linhas e três colunas.
Fonte: Elaborado pela autora, 2019.
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 <table> e </table>. Suas linhas são criadas pela <tr> e </tr> e as células/colunastag tag
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 definida 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 definidas. 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:
- -16
entre colunas ou linhas. Veja o exemplo a seguir:
Figura 17 - Exemplo de tabela com expansão de linha e de coluna.
Fonte: Elaborado pela autora, 2019.
- -17
O atributo colspan da <td> permite aumentar o tamanho de uma célula fazendo com que ela ocupe colunastag
adjacentes. Já o atributo rowspan, associado à <tr>, faz com que a célula aumente ocupando linhastag
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 verifique o funcionamento.
1.3.3 Incluindo legendas
Se o desenvolvedor desejar criar um título ou legenda para a tabela, basta usar a <caption> imediatamentetag
após a abertura do comando table.
Figura 18 - Sintaxe de legendas em tabelas.
Fonte: Elaborado pela autora, 2019.
O principal parâmetro do comando é o parâmetro . Se atribuirmos ao parâmetro o valor “top”,caption align align
a legenda especificada será exibida na parte superior da tabela. Por outro lado, se a ele for atribuído o valor
“bottom”, o navegador exibirá a legenda especificada abaixo da tabela. Em ambos os casos a legenda é
centralizada de acordo com a tabela. Observe o exemplo abaixo:
Figura 19 - Exemplo de criação de tabela com legenda.
Fonte: Elaborado pela autora, 2019.
Modifique o código da tabela anterior para inserir uma legenda na sua parte superior.
- -18
1.4 Formulário HTML
Quando o sistema precisa enviar uma série de dados do lado do cliente para o lado do servidor, ou quandoWeb
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 tem formuláriosweb
implementados, seja para o envio de uma ficha de inscrição, uma pesquisa/questionário e até mesmo paraonline
definir o nível de proficiência em uma tecnologia ou idioma.
As marcações <form> e </form> são usadas para definir um formulário. A em si tem duas funçõestag <form>
importantes: especificar o local do programa que controlará o formulário e definir a forma ou método como os
dados serão enviados.
Figura 20 - Sintaxe de criação de um formulário.
Fonte: Elaborado pela autora, 2019.
A tag <form> possui os atributos elencados nas abas a seguir. Clique e veja.
•
action=”url”
Especifica o local (url) do servidor e do programa CGI que vai processar os dados do formulário.
•
method=”método de troca de dados”
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.
É importante ressaltar aqui a diferença entre os valores do atributo method. Quando o valor ‘get” é utilizado,as
informações são enviadas como se fizessem parte da url, seguindo a sintaxe
“nomeVariavel1=valor1&nomeVariavel2=valor2”. O tamanho da URL pode se estender a até 3000 caracteres.
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
•
•
- -19
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 de abertura e o fechamento dotags
formulário podem ser declaradas de entrada de dados e de ação. As de entrada de dados e de ação maistags tags
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 de ação (os botões de ação) são responsáveis portags
definir o que será feito com os dados informados nas de entrada de dados. Além das do tipo <input>,tags tags
nas próximas seções serão apresentadas duas outras de entrada de dados: <selection> e <option>.tags
1.4.2 Marcador input
A <input> define um campo de entrada de dados no qual o usuário digita as informações requeridas pelotag
formulário. Cada campo de um formulário atribui seu conteúdo a uma variável que possui nome e tipo
específicos. O exemplo abaixo corresponde a uma ficha de inscrição construída com um formulário. Copie o
exemplo e visualize em diferente navegadores:
Figura 21 - Exemplo de um formulário com campos de entrada e botão de envio dos dados.
- -20
Figura 21 - Exemplo de um formulário com campos de entrada e botão de envio dos dados.
Fonte: Elaborado pela autora, 2019.
Os parâmetros do marcador são os seguintes:input
• 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 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 estarmarcados 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 e de acordo com o método escolhido no parâmetro do comando action method
. Por padrão, a legenda do botão criado será “submit”.form
Figura 22 - Sintaxe dos campos do tipo “text” em um formulário.
Fonte: Elaborado pela autora, 2019.
• 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 <form>.tag
• value=”valor”: permite definir um conteúdo prévio para campos dos tipos e , ou seja, um text password
texto que aparecerá escrito na caixa de digitação quando o formulário for aberto. Para os campos do tipo 
 ou , representa o valor que será atribuído à variável se a opção for marcada. Para o campo checkbox radio
 indica o texto que aparece no botão. Este parâmetro é obrigatório apenas para variáveis dos tipos submit
 e ;checkbox 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.
•
•
•
•
•
- -21
1.4.3 Select e option
Há dois outros tipos de construção de elementos a serem utilizados com formulários: e . As select option tags
<select> e </select> definem 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 são:select
• 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.
Figura 23 - Sintaxe de um campo de seleção em um formulário.
Fonte: Elaborado pela autora, 2019.
Cada item da lista deve ser especificado pela <option>, cujos principais parâmetros são:tag
• value=”conteúdo”: define o conteúdo que a variável correspondente receberá caso a opção seja 
selecionada;
• Selected: indica que a opção deve ser previamente marcada como selecionada.
Figura 24 - Sintaxe de um campo de opção de um formulário.
Fonte: Elaborado pela autora, 2019.
Vamos agora elaborar um caso prático: criar uma ficha de inscrição com HTML. A ficha terá a aparênciaonline
apresentada na figura a seguir. Essa é uma ficha 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 , os campos referentes aos radio
 são do tipo e o cargo é uma caixa de seleção. Dois botões de ação foram acrescentados:softwares checkbox
enviar e limpar campos.
•
•
•
•
•
- -22
Figura 25 - Renderização do formulário de inscrição.
Fonte: Elaborado pela autora, 2019.
A seguir é apresentado o código fonte que viabilizou a apresentação do conteúdo acima. Copie o exemplo e
visualize em diferentes navegadores:
- -23
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.
Concluímos, assim, a unidade introdutória relativa à origem e ao funcionamento do HTML, tecnologia
responsável por prover o conteúdo na . Foi possível conhecer as principais , elementos base doInternet tags
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 ocorra de forma natural. Lembre-se de praticar nastags
ferramentas ou mesmo com o uso de um simples editor de texto. Copie o conteúdo de cada exemploonline
apresentado e veja seu funcionamento, altere os valores dos atributos e busque exemplos de uso na .Internet
- -24
Síntese
O Desenvolvimento é uma das áreas de maior crescimento na área de Computação. Seja para trabalhar emWeb
uma grande empresa ou para abrir o seu próprio negócio, o setor voltado para aplicações e mobile podemweb
ser atingidos com o conhecimento introduzido nessa disciplina. Tratamos aqui do HTML, que é a base para
incluir conteúdo em , portais e sistemas em geral. Como vimos nessa unidade, o HTML é formado por sites web
 de abertura e fechamento, sendo cada responsável por um determinado tipo de conteúdo. As podemtags tag tags
ter atributos que ajudam a descrever o seu comportamento, sendo alguns deles importantes para questões de
acessibilidade da sua aplicação . Vimos as para introdução de texto (parágrafos e cabeçalhos), paraweb tags
inserção de hiper s, imagens, tabelas e construção de formulários. Apesar de ser um conteúdo vasto, com alink
prática fica mais fácil de memorizar as e seu uso mais comum. tags
Bibliografia
GREGÓRIO, J. L. A verdadeira história da Internet (Documentário). Tecnologia, Cultura Nerd e Assuntos
 - Filmes e Séries, 15 abr. 2018. Disponível em: Aleatórios http://www.jlgregorio.com.br/2018/04/15/a-
verdadeira-historia-da-internet-documentario/. Acesso em: 25 jun. 2019.
INSTITUTO NUPEF. , Rio de Janeiro, n. 26, 2017. Disponível em: PoliTICs https://politics.org.br/sites/default
/files/downloads/politics26-versao-web.pdf. Acesso em: 26 jun. 2019.
LEMAY, L.; COLBURN, R.; TYLER, D. . São Paulo:Aprenda a criar páginas Web com HTML e XHTML em 21 dias
Pearson Education do Brasil, 2002. Disponível em: 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,
. Porto Alegre: Bookman 2014.Javascript e Php
TERUEL, E. C. . 2. São Paulo: Érica, 2014.HTML 5 - guia prático
W3Schools. , 2019. Disponível em: HTML Element Reference https://www.w3schools.com/tags/. Acesso em:
25 jun. 2019.
WATANABE, W. , 07 mar. 2013. Disponível em: Apresentação Comunicação Cliente/Servidor https://pt.
. Acesso em: 01/07/2019.slideshare.net/watinha1/apresentacao-17018075
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/
https://politics.org.br/sites/default/files/downloads/politics26-versao-web.pdf
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
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
https://pt.slideshare.net/watinha1/apresentacao-17018075
	Introdução
	1.1 O HTML: funcionamento, versões e estrutura
	1.1.1 Arquitetura cliente-servidor
	1.1.2 Tecnologias estáticas e dinâmicas
	1.1.3 Versões e funcionamento do HTML
	1.1.4 Estrutura de um documento HTML
	1.2 Principais Tags HTML
	1.2.1 Parágrafos, cabeçalhos , quebras de linha e formatação de texto
	1.2.2 Marcadores de estilo de texto
	1.2.3 Imagens
	1.2.4 Links
	1.2.5 Listasstart=”número”
	type=”tipo”
	1.2.6 Tags HTML 5 de Layout
	1.3 Tabelas em HTML
	1.3.1 Tags table, td e tr
	1.3.2 Expansão de células em linhas e colunas
	1.3.3 Incluindo legendas
	1.4 Formulário HTML
	1.4.1 Form
	action=”url”
	method=”método de troca de dados”
	1.4.2 Marcador input
	1.4.3 Select e option
	Síntese
	Bibliografia