Livro-Texto - Unidade II

Unidade II
Unidade II
3 ESTRUTURANDO DOCUMENTOS COM HTML
HTML e XHTML são dois idiomas nos quais as páginas web são gravadas, sendo que o HTML tem
como base de concepção o SGML (standard generalized markup language). Em contrapartida, o XHTML
tem como base de concepção o XML (extensible markup language), conforme ilustrado a seguir.
Exemplo de SGML:
<QUOTE TYPE=”SGML”>
Desenvolvimento de Software para <ITALICS>internet</ITALICS>
</QUOTE>
Exemplo de XML:
Figura 66 – Exemplo de arquivo XML
76
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
Saiba mais
Para agregar conhecimento aos estudos de HTML e XHTML, leia o artigo:
ISHIDA, R. Servindo HTML & XHTML. Internacionalização. Traduzido

por Maurício Samy Silva. W3C. 2016. Disponível em: https://www.w3.org/
International/articles/serving-xhtml/index.pt-br. Acesso em: 21 set. 2020.
No contexto histórico, o XHTML foi uma derivação do HTML para estar inserido dentro de uma
conformidade com os padrões de XML. Portanto, o XHTML é extremamente alinhado e padronizado
quando colocado em comparação ao HTML e não possibilita ao usuário escapar de falhas de codificação
e estrutura no código, ou seja, o XHTML foi uma derivação do HTML para estar inserido dentro de
uma conformidade com os padrões de XML. Logo, ele é extremamente alinhado e padronizado quando
colocado em comparação ao HTML e não possibilita ao usuário escapar de falhas de codificação e
estrutura no código.
Sendo assim, o motivo para o XHTML ser concebido foram as tags específicas do browser,
extremamente complicadas e de difícil aprendizado no HTML. As páginas desenvolvidas em HTML eram
apresentadas sem padrão algum nos browsers.
Considera-se, assim, o HTML uma linguagem de marcação direcionada para páginas web. Ele
possibilita a criação de documentos estruturados, apresentando uma semântica constante e estrutural
para textos como títulos, listas, links, citações etc. Possibilita também que imagens e objetos possam
ser incorporados para geração de formulários interativos, que podem ser escritos como tags entre
colchetes angulares, por exemplo <html>, e scripts em idiomas como JavaScript ainda podem ser
apresentados em páginas web.
XHTML é definido como uma agregação de linguagens XML que tem como requisito estender
ou espelhar versões do HTML, ou seja, não possibilitar a omissão de nenhuma tag ou a utilização de
minimização de atributo. O XHTML tem por exigência que exista uma tag final para cada tag inicial, e
todas as tags alinhadas devem ser fechadas na ordem e de maneira correta.
Por exemplo, embora <br> seja uma tag válida em HTML, seria necessário então escrever <br />em
XHTML. O quadro demonstra uma comparação:
77
Unidade II
Quadro 5 – Comparação HTML × XHTML
HTML XHTML
XHTML (extensible hypertext markup language) é considerada
A linguagem de marcação HTML ou hypertext é considerada, como da família de linguagens de marcação XML que tem por
de forma mundial, a principal linguagem de marcação para finalidade o espelhamento, ou até mesmo a extensão de versões
efetuar a criação de páginas web e outras informações que utilizadas em hypertext markup language (HTML), a linguagem
podem proporcionar a exibição em um browser. na qual as páginas de atuação da web são gravadas.
html, .htm .xhtml, .xht, .xml, .html, .htm
text / html application / xhtml + xml
W3C & WHATWG Consórcio na World Wide Web
Formato de arquivo do documento Linguagem de marcação
SGML XML, HTML
As páginas da web são escritas em HTML. A versão estendida do HTML é mais rígida e baseada em XML.
Estrutura flexível que requer analisador específico de HTML Subconjunto restritivo de XML e precisa ser analisado com
branda. analisadores XML padrão.
Proposta por Tim Berners-Lee em 1987. Recomendação do World Wide Web Consortium em 2000.
3.1 Recursos de documentos HTML à XHTML
Os documentos HTML têm como composição a base de elementos com três componentes, que são
um par de tags de elemento (de início e de término), atributos de elemento disponibilizados nas tags e o
conteúdo real, textual e gráfico, em que um elemento HTML é considerado tudo o que existe entre elas.
Os documentos XHTML têm por finalidade apenas a definição de um elemento raiz, ou seja, todos os
elementos, incluindo variáveis, devem estar por definição em letras minúsculas, e os valores atribuídos
devem necessariamente estar entre aspas, fechados e alinhados para serem devidamente reconhecidos.
Esse, por sinal, é um requisito obrigatório em XHTML, que, diferentemente do HTML, é tratado de forma
opcional, de maneira que, a declaração do doctype delimitaria e colocaria regras a serem seguidas pelos
documentos que estão desenvolvidos.
Além das diferenças das declarações de abertura de um documento que existe entre um documento
HTML 4.01 e XHTML 1.0, em que cada uma das DTDs (document type definition) correspondentes
são, com certeza, tratadas de forma gradativa e sintática. A sintaxe subjacente do HTML possibilita
diversos atalhos que o XHTML não permite, como, por exemplo, elementos com tags de abertura ou
fechamento opcionais ou até mesmo o propósito de trabalho de elementos vazios que não devem ter
como premissa uma tag final.
Por outro lado, o XHTML tem um nível de exigência de que todos os elementos possibilitem uma
definição de abertura ou uma definição de fechamento, atuando, assim, o XHTML, que também
possibilita introduzir um novo atalho: uma tag XHTML pode ser aberta e fechada dentro da mesma tag,
incluindo‑se para fins de desenvolvimento uma barra antes do final da tag, por exemplo: <br/>.
78
A inserção dessa abreviação, que não é utilizada na declaração do SGML para HTML 4.01, pode gerar
um cenário de confusão entre os softwares anteriores não familiarizados com essa nova convenção
estabelecida. Uma correção para isso é a inclusão de um espaço antes de fechar a tag, por exemplo: <br />.
HTML e XHTML podem estar considerados diretamente relacionados e, portanto, podem ser
documentados juntos: o HTML 4.01 e o XHTML 1.0 possibilitam três subespecificações definidas, como:
estrito, flexível e conjunto de quadros, considerando que a diferença de inicialização de declarações para
um documento distingue HTML e XHTML.
O HTML possibilita também atalhos como elementos com tags opcionais, elementos vazios sem tags
finais. Já o XHTML é muito rigoroso com relação à inicialização e finalização de tags.
O XHTML utiliza o atributo de funcionalidade, que tem por definição a linguagem incorporada,
ou seja, todos os requisitos de sintaxe do XML estão incluídos diretamente em um documento
XHTML bem formado.
Observação
MIME é a sigla em inglês que corresponde a multipurpose internet mail

extensions, que tem como referência um padrão da internet para o formato
das mensagens de correio eletrônico, ou seja, ela tem como premissa de
trabalho incluir diversos tipos de conteúdo dentro de uma única mensagem.
Determinar, por exemplo, qual aplicativo deve abrir um formato de

arquivo específico por padrão. Registrar, por exemplo, outros aplicativos
que também podem abrir um formato de arquivo específico. Fornecer,
por exemplo, uma mensagem especificando o tipo de um arquivo, ou até
mesmo, em um diálogo de propriedades de arquivo de um aplicativo; bem
como um ícone representando um formato de arquivo específico, ou até
em um diálogo de propriedades de arquivo de um aplicativo.
Um documento XHTML atrelado com um tipo MIME de texto / html deve ser analisado e interpretado
de forma obrigatória como HTML, sendo assim, as regras HTML teriam aplicação nesse caso.
Uma folha de estilo escrita para um documento XHTML que está sendo atrelado com um tipo de
texto / html MIME pode, por exemplo, não funcionar conforme o esperado se o documento for atrelado,
como a um tipo de aplicativo MIME / xhtml + xml.
Onde os termos “XHTML” e “documento XHTML” forem apresentados no restante dessa seção de
marcação, eles terão como referência a marcação XHTML veiculada com um tipo XML MIME, ou seja,
essa marcação XHTML atribuída como text / html é um documento HTML no que se refere aos browsers.
79
Unidade II
Para que possamos, de maneira objetiva, entender as pequenas diferenças entre HTML e XHTML,
podemos considerar a transformação de um documento XHTML 1.0 válido e bem formatado em
um documento HTML 4.01 válido. Para a realização dessa tradução precisamos executar alguns
passos, por exemplo:
• A linguagem para definição de um elemento deve ser especificada com um lang atributo e não
com o xml:lang atributo XHTML, ou seja, o XHTML utiliza o atributo de funcionalidade que tem
por definição a linguagem do XML.
• Remover o espaço para nome XML (xmlns=URI): o HTML não possui recursos para namespaces.
Observação
URI, do inglês uniform resource identifier, tem como definição uma
sequência de caracteres que possibilita a identificação de um recurso
específico, ou seja, para garantir sua granularidade, todos os URIs seguem
um conjunto predefinido de regras determinadas de sintaxe, que consistem
com sua extensão um meio de esquema de nomeação hierárquico
estabelecido de forma separada, por exemplo: http://.
Essa identificação tem por finalidade possibilitar, assim, a interação

com representações do recurso em uma rede, baseada em vias da World
Wide Web, utilizando assim, protocolos específicos.
Um exemplo de aplicação URI:
Quadro 6
https://exemplounip.com/caminho/unidade.txt#fragmento
//exemplounip.com/caminho/unidade.txt
/caminho/unidade.txt
caminho /unidade.txt
/caminho/unidade.txt
Efetua-se o ajuste da declaração do tipo de documento de XHTML 1.0 para HTML 4.01. Se atribuído,
remover a declaração XML: <?xml version=”1.0” encoding=”utf-8”?>.
Deve-se também verificar no arquivo se o tipo MIME do documento está definido como text/html,
porém, para HTML e XHTML, isso vem por definição do Content-Type, cabeçalho HTTP enviado previamente
pelo servidor.
Por fim, deve-se ajustar a sintaxe do elemento vazio XML para um elemento vazio do estilo HTML
(<br/>para<br>).
80
3.2 Diferenças entre HTML e XHTML
Estrutura do documento XHTML:
• DOCTYPE XHTML é obrigatório.
• o atributo xmlns em <html> é obrigatório.
• <html>, <head>, <title> e <body> são obrigatórios.
Os elementos XHTML devem:
• estar adequadamente alinhados;
• sempre estar fechados;
• estar em minúsculas;
• ter um elemento raiz.
Atributos XHTML:
• Os nomes dos atributos devem estar em minúsculas.
• Os valores dos atributos devem ser citados.
• A minimização de atributos é proibida.
3.2.1 Como converter de HTML para XHTML
A conversão de um documento que está em HTML para XHTML acontece com os seguintes passos:
• Adicionar um XHTML <! DOCTYPE> à primeira linha de cada página.
• Acrescentar um atributo xmlns ao elemento html de cada página.
• Alterar todos os nomes de elementos para minúsculas.
• Fechar todos os elementos vazios.
• Alterar todos os nomes de atributo para minúsculas.
• Citar todos os valores de atributo.
81
Unidade II
Segue um exemplo de marcação em XHTML:
Figura 67 – Exemplo de aplicação da estrutura XHTML
Segue um exemplo de marcação em HTML:
Figura 68 – Exemplo de aplicação da estrutura HTML
3.3 Formulários
Os formulários nos permitem automatizar o envio e o recebimento de dados de uma página

web e são úteis para logins de sites e fóruns, assinatura de livros de visitas, e-mail baseado na web,
questionários on-line etc.
3.3.1 Formulário: <form> … </form>
Todos os elementos do formulário, como entradas e botões, devem estar dentro das tags form.
Na maioria dos casos, um formulário deve ter os atributos name, action e method definidos:
82
• name=””: um nome exclusivo que identifica o formulário, usado pelo script de ação;
• action=”url”: o endereço (URL – uniform resource locator ou localizador de padrão de recursos)

do script que processará os dados do formulário quando enviado. Em alguns casos, o URL da ação
não é necessário, por exemplo, quando uma função JavaScript do cliente é programada na página
web para processar os dados do formulário;
• method=””: o método usado pelo script de ação efetuou o get. Por exemplo, post poderia ser
usado para enviar dados a um formulário de registro do usuário e get é utilizado para pesquisas
ou formulários que devem retornar informações.
3.3.2 Campo de entrada: <input>
Usado para criar um campo de entrada de texto simples ao seu formulário, mas também é a base
para muitos outros tipos de entrada de formulário usando o type para o atributo:
• name=””: nome exclusivo para a entrada a ser usada pelo script de ação;
• type=””: existem vários tipos de campos de entrada de formulário, text, password, checkbox,
radio, file, image, e hidden, entre os mais comuns;
• value=””: valor inicial ou dados exibidos no campo de entrada quando o formulário é carregado
pela primeira vez;
• size=””: define o tamanho ou a largura da entrada, normalmente definida em termos de caracteres

numéricos, em vez de pixels;
• maxlength=””: comprimento máximo do campo de entrada, como o número máximo de

caracteres para uma entrada de texto;
• checked: usado com checkbox para entradas; define o padrão do campo para já ser verificado.
3.3.3 Botão: <button>
Um botão de formulário, é semelhante a outras entradas de formulário, mas possui seu próprio
conjunto de atributos:
• name=””: nome exclusivo para o botão a ser usado pelo script de ação;
• type=””: o tipo de botão, submit ou reset, determina se o formulário deve ser enviado ou limpo
após pressioná-lo;
83
Unidade II
• value=””: texto que aparece no botão, como “OK” ou “enviar”;
• size=””: determina o comprimento (ou largura) do botão.
3.3.4 Lista de seleção: <select> … </select>
Uma lista suspensa, também chamada de caixa de combinação, permitindo a seleção de

uma lista de itens:
• name=””: nome do seletor;
• size=””: o tamanho mínimo (largura) da lista de seleção; geralmente não é necessário, pois o tamanho
dos itens definirá o tamanho da lista;
• multiple: permite que um usuário selecione vários itens da lista, normalmente limitados a um.
3.3.5 Item de seleção: <option> </option>
Uma tag option é necessária para cada item da lista e deve aparecer dentro das tags select. O texto
a ser mostrado para a opção precisa aparecer entre as tags option:
• value=”?”: o valor; são os dados enviados para o script de ação com a opção selecionada; esse
não é o texto que aparece na lista;
• selected: define a opção padrão que é selecionada automaticamente quando o formulário

é mostrado.
3.3.6 Área de texto: <textarea> </textarea>
Uma entrada que permite que uma grande quantidade de texto seja inserida e que possibilite a
altura da caixa de entrada seja especificada, diferente da tag input padrão:
• name=””: o nome exclusivo atribuído ao campo do formulário;
• rows=””: o número de linhas de texto define o tamanho vertical da área de texto;
• cols=””: o tamanho horizontal da caixa de texto, definido como o número de caracteres

(ou seja, colunas).
84
Exemplo de aplicação
Considere uma aplicação de formulários, conforme ilustrado nas figuras a seguir:
Figura 69 – Exemplo de construção de formulário em HTML
Para o formulário ilustrado, é necessário:
• Abrir o Sublime Text.

• Criar um documento HTML.
• Dentro da tag <body>, digitar as tags:
— <h3>Avaliar a Unidade 2: </h3>
Isso cria o cabeçalho Avaliar a Unidade 2.
— <form name=”formUnidade2 action=unidade2.php method=”post”>
Isso cria um formulário formUnidade2, que através do método post, será responsável por enviar
as informações preenchidas quando o botão submit for acionado.
— <input type=”text” name=”name” value=”Martins”>
Cria-se uma caixa de texto Nome e dentro dela fixa-se o nome Martins.
— <input type=”radio” name = “rating” value =”1>
Cria-se a opção de 1 à 3 para selecionar através do radio button.
— <textarea name=”comment”>
85
Unidade II
Cria-se uma caixa de texto para informar o comentário.
— <input type=”Submit” value=”Avaliar”>
Cria-se um botão para submeter os dados preenchidos para outra página ou um banco de dados.
Figura 70 – Página exibida no browser: formulário
Para o formulário ilustrado, é necessário:
• Abrir o Sublime Text.
• Criar um documento HTML.
• Dentro da tag <body>, digitar as tags:
— <h3>Avaliar a Unidade 2: </h3>
Isso cria o cabeçalho Avaliar a Unidade 2.
— <form name=”formUnidade2 action=unidade2.php method=”post”>
Isso cria um formulário formUnidade2, que através do método post, será responsável por enviar
as informações preenchidas quando o botão submit for acionado.
— <input type=”text” name=”name” value=”Martins”>
Cria-se uma caixa de texto Nome e dentro da caixa fixa-se o nome Martins.
— <input type=”radio” name = “rating” value =”1>
86
Cria-se a opção de 1 à 3 para selecionar através do radio button.

— <textarea name=”comment”>
Cria-se uma caixa de texto para informar o comentário.
— <input type=”Submit” value=”Avaliar”>
Cria-se um botão para submeter os dados preenchidos para uma outra página ou um banco de dados.
Assim, temos o resultado da construção de um formulário e seus componentes.
3.3.7 Os elementos <fieldset> e <legend>

Consideramos o elemento <fieldset> como via de realização de grupos que dispõem como possibilidade
realizar o seu compartilhamento. Um elemento <fieldset> por ter atribuído como rótulo de um elemento
chamado <legend>. Este tem como responsabilidade realizar a descrição formal do elemento <fieldset>.
Tecnologias cotidianas realizam a aplicação de <legend> para encapsular informações em formato
de etiqueta dentro de um elemento <fieldset> de cada formulário apresentado ao usuário.
Podemos ver os exemplos de aplicação de formulários com legend e fieldset, conforme
ilustrado na figura:
Figura 71 – Exemplo de aplicação de fieldset e legend
87
Unidade II
Na figura anterior, foi implementada a tag <fieldset>, para ser uma caixa que envolve todos os
componentes adicionados a ela, tais como: <input> e <label>. Adicionou-se a tag <legend> para
registrar o rótulo da caixa, conforme ilustrado no resultado final da implementação na figura a seguir.
Figura 72 – Página exibida no browser: formulário legend e fieldset
Na figura a seguir, implementou-se a tag <form> para ser um formulário que envia dados através do
método post. Todos os componentes adicionados a ela, tais como <input> e <textarea> serão enviados para
outra página ou para um banco de dados através da ação do botão “enviar” e o resultado é ilustrado a seguir.
Figura 73 – Exemplo de aplicação de formulário com input
88
Figura 74 – Página exibida no browser: formulário de contato
No quadro, ilustram-se alguns atributos que podem ser utilizados para facilitar a construção de um
formulário HTML.
Quadro 7 – Atributos para serem utilizados no form
Atributos Descrição
accept-charset Especifica o conjunto de caracteres usados no formulário enviado (padrão: o conjunto de páginas).
action Especifica um endereço (URL) para o qual enviar o formulário (padrão: a página de envio).
autocomplete Especifica se o navegador deve preencher automaticamente o formulário (padrão: ativado).
enctype Especifica a codificação dos dados enviados (padrão: é codificado por URL).
method Especifica o método HTTP usado ao enviar o formulário (padrão: GET).
name Especifica um nome usado para identificar o formulário (para uso do DOM: document.forms.name).
novalidate Especifica que o navegador não deve validar o formulário.
target Especifica o destino do endereço no atributo action (padrão: _self).
3.3.8 Utilizar o método Get
O método HTTP padrão, que pode ser utilizado ao enviar dados de formulário, é Get, no entanto,
quando ele é utilizado, todos os dados do formulário ficam visíveis no campo de endereço da página web.
Exemplo: /action_page.htm?disciplina=DSI&unidade=2
Dados importantes:
• Anexar todos os dados do formulário ao URL nos pares nome / valor, que transitam na URL.
• O tamanho de um URL é limitado (2.048 caracteres).
• Evitar a utilização do Get para enviar dados confidenciais, pois ficará visível na URL.
• Útil para envios de formulários nos quais um usuário possa efetuar uma marcação de
resultado como favorito.
• O Get pode ser considerado eficaz para dados não seguros, como cadeias de consulta no Google,
que auxiliam na busca e obtenção de dados.
89
Unidade II
3.3.9 Utilizar o método Post
Sempre utilizar o método Post quando os dados do formulário possam conter informações
confidenciais ou pessoais, sendo assim, ele não apresentará os dados do formulário no campo de
endereço da página web.
Dados importantes:
• O Post não possui limitações de tamanho e, com isso, pode proporcionar sua utilização para enviar
grandes quantidades de dados na web.
• Os envios de formulários com Post não possibilitam ser marcados como favoritos.
Exemplo: <form action=”unip.br” method=”post”>
4 VALIDAÇÕES HTML
A opção de usar HTML puro, às vezes com um toque de CSS, para complementar a validação de
formulário JavaScript, era até recentemente impensável. Certamente, ao longo dos anos, houve todos
os tipos de plug-ins desenvolvidos, mas nunca um único padrão no qual pudéssemos trabalhar.
Neste livro-texto, pretendemos apresentar apenas alguns exemplos simples para você começar a
entender os elementos básicos do formulário.
Saiba mais
Para uma introdução mais detalhada à validação de formulário HTML5, é

possível encontrar mais informações em:
FORMULÁRIOS HTML. w3schools. 2020. Disponível em: https://www.

w3schools.com/html/html_forms.asp. Acesso em: 21 set. 2020.
Esses exemplos funcionam nos seguintes browsers: Safari 5, Chrome 6, Opera 9, Firefox 4 Beta e
iPhone/iPad. Além disso, cada browser tem um comportamento padrão ligeiramente diferente.
4.1 Atributo obrigatório
A alteração mais simples que você pode fazer em seus formulários é marcar um campo de entrada
de texto como “obrigatório”:
Informe seu nome: <input type=”text” name=”name” required>
90
Lembrete
Um dos verbos mais comuns do HTTP é o Get. Quando o utilizamos, os

parâmetros são passados no cabeçalho da requisição. Por isso podem ser
vistos pela URI, como no caso do formulário de login <form method=”get”>.
No caso de formulários web, é muito comum que esse método seja o Post,
que, ao contrário do Get, envia os parâmetros no corpo da requisição HTTP.
Escondendo-os da URI, por exemplo: <form action=”/logar” method=”post”>.
O atributo required é um atributo booleano, e quando presente, especifica que o elemento deve ser
preenchido antes de enviar o formulário. Ele pode ser utilizado nas tags:
• <input>, <select> e <textarea>
• <form action=”/action_page.html”>
• Nome: <input type=”text” name=”nome” required>
• <input type=”submit”>
• </form>
• <select required>
• <option value=””>None</option>
• <option value=”azul”>Azul</option>
• <option value=”amarelo”>Amarelo</option>
• <option value=”branco”>Branco</option>
• <option value=”preto”>Preto</option>
• </select>
• <form action=”/action_page.html”>
• <textarea name=”comentario” required></textarea>
• <input type=”submit”>
• </form>
91
Unidade II
Isso informa ao navegador da web (compatível com HTML5) que o campo deve ser considerado
obrigatório. Navegadores diferentes podem marcar a caixa de entrada de alguma forma (o Firefox 4
Beta adiciona uma sombra de caixa vermelha por padrão), exibir um aviso (Opera) ou até impedir que o
formulário seja enviado se esse campo não tiver valor.
Antes de digitar qualquer coisa na caixa, é exibido um marcador vermelho. Assim que um único
caractere é inserido, isso muda para um marcador verde, para indicar que a entrada é “válida”.
É aqui que o HTML5, por exemplo, realmente se torna interessante e mais útil. Juntamente com o
tipo de entrada de texto, agora existem várias outras opções, incluindo e-mail, URL, número, telefone,
data e muitas outras.
Alterando o tipo de entrada para e-mail, enquanto também utiliza o atributo necessário, o navegador
pode ser usado para validar (de forma limitada) os endereços de e-mail.
Exemplo: Endereço de e-mail: <input type=”email” name=”email” required

placeholder=”Informar e-mail válido”>
Os tipos de entrada de número e faixa também aceitam parâmetros para min, max e step. Na maioria
dos casos, você pode excluir a etapa, pois o padrão é 1.
Exemplo:
Idade: <input type=”number” size=”6” name=”idade” min=”18” max=”99” value=”21”><br>
Satisfação: <input type=”range” size=”2” name=”satisfacao” min=”1” max=”5” value=”3”>
Lembrete
O atributo required é booleano, e quando presente, especifica que o

elemento deve ser preenchido antes de enviar o formulário.
Seguem exemplos de aplicação de validação HTML, conforme ilustrados nas figuras a seguir, que
utilizam dentro das tags as propriedades readonly e disabled:
92
Figura 75 – Validação com o campo readonly
Figura 76 – Validação com o campo disabled
O HTML válido é o único contrato que há com os fabricantes de browsers. A especificação diz como
devemos escrever documentos e como eles devem interpretá-los. Nos últimos tempos, a conformidade
com os padrões dos navegadores atingiu o ponto em que, desde que possamos escrever um código
válido, todos os principais browsers devem interpretar nosso código da mesma maneira, ou seja, esse
é quase sempre o caso do HTML, pelo menos com outros padrões tendo mais algumas diferenças no
suporte aqui e ali.
93
Unidade II
Saiba mais
Existe o validador do W3C, que auxilia na identificação e validação de

páginas HTML, que se encontra em:
SERVIÇO de validação de marcação. Validator. W3C. 2013. Disponível

em: http://validator.w3.org/. Acesso em: 21 set. 2020.
4.2 Lista ordenada e não ordenada
As listas HTML são usadas para apresentar a lista de informações de maneira bem formada e semântica.
Existem três tipos diferentes de lista em HTML e cada uma tem uma finalidade e significado específicos.
• Lista não ordenada: usada para criar uma lista de itens relacionados, em nenhuma ordem específica.
• Lista ordenada: usada para criar uma lista de itens relacionados, em uma ordem específica.
• Lista de descrição: usada para criar uma lista de termos e suas descrições.
Uma lista não ordenada criada usando o <ul> elemento e cada item da lista começa com o <li>
elemento. Os itens da lista em listas não ordenadas são marcados com marcadores:
Figura 77 – Exemplo de aplicação de lista não ordenada
94
Uma lista ordenada criada usando o <ol> elemento e cada item da lista começa com o <li> elemento.
As listas ordenadas são usadas quando a ordem dos itens da lista é importante:
Figura 78 – Exemplo de aplicação de lista ordenada
Exemplo: 1. Estudar essa unidade
2. Fazer exercícios
3. Realizar provas
A numeração de itens em uma lista ordenada geralmente começa com “1.”. No entanto, se você
deseja alterar, pode usar o start no atributo, conforme apresentado a seguir.
Figura 79 – Exemplo de aplicação de lista ordenada com aplicação do atributo start
Exemplo: 10. Desenvolver o PIM
11. Aplicar os conceitos de HTML
12. Eliminar qualquer dúvida no fórum Unip

95
Unidade II
Uma lista de descrição é uma lista de itens com uma descrição ou definição de cada um (conforme
apresentado a seguir). A lista de descrição é criada usando o <dl> elemento, em conjunto ao <dt>
elemento, que especifica um termo, e ao <dd> elemento, que especifica a definição do termo.
Os browsers geralmente processam as listas de definições colocando os termos e definições em linhas
separadas, em que as definições do termo são ligeiramente recuadas.
Figura 80 – Exemplo de lista de descrição
4.3 Tipo de marcador <ul type=”disc | circle | square”>
Por padrão, um navegador mostra um marcador redondo. Isso pode ser alterado usando o tipo de
atributo da tag <ul>, que mudará o tipo de marcador para a lista inteira.
Tipo de item <li type=””>
Pode-se definir o tipo de marcador para um item no meio da lista, definindo o tipo de atributo de
uma tag <li>, conforme apresentado a seguir.
96
Figura 81 – Exemplo de tipificação de lista
Valor do item <li value=””>
Você pode definir o valor de um item no meio da lista manualmente, se não desejar que ele siga a
letra ou o número anterior. Basta definir o value do atributo do item que você deseja alterar, conforme
apresentado na figura a seguir. Nota: os itens subsequentes seguirão o novo valor.
Figura 82 – Exemplo de tipificação de lista
97
Unidade II
Resumo
Nesta unidade, vimos como podemos combinar e integrar técnicas
de desenvolvimento web, conhecendo tags que possibilitam enriquecer
e principalmente auxiliar na validação das informações inseridas
em uma página web.
Abordamos conceitos de implementação que foram aplicados em HTML5,
com isso aumentando a consistência do trabalho executado na web. Também
conseguimos trabalhar com formulários que hoje continuam sendo de extrema
importância para cadastro de informações básicas de um cliente, listas
ordenadas e não ordenadas e tags que auxiliam na construção do formulário
Nesta unidade também abordamos métodos que auxiliam no
funcionamento de um formulário, como Get e Post, que são utilizados em
cenários específicos para o desenvolvimento web.
Vale ressaltar que existem inúmeras tags que poderiam agregar muito
no desenvolvimento web, no enriquecimento do layout e tornando as
páginas dinâmicas e agradáveis.
Sendo assim, ressaltamos que toda construção de páginas web trabalhando
com HTML5 convergem principalmente com a preocupação, atuam em desenvolver
aplicativos web com agilidade, qualidade e especialmente com a intenção de
visualizar as páginas em qualquer dispositivo conectado à internet. Vale ressaltar
também que o aprendizado adquirido será de grande importância para aplicação
dos conceitos no dia a dia do desenvolvimento de software para internet.
Exercícios
Questão 1. (Cespe 2020) Na linguagem HTML 5, geralmente considera-se determinado elemento
como o ponto central do conteúdo do documento, o qual pode ser, por exemplo, um post. Esse elemento,
que representa um conteúdo independente e altamente relevante, é o:
A) aside.
B) canvas.
C) embed.
D) article.
E) figure.
Resposta correta: alternativa D.
98
Análise das alternativas
A) Alternativa incorreta.
Justificativa: aside: conteúdo relacionado à seção próxima. Análogo às barras laterais em

conteúdo impresso.
B) Alternativa incorreta.
Justificativa: canvas: não tem relação com a questão.
C) Alternativa incorreta.
Justificativa: embed: não tem relação com a questão.
D) Alternativa correta.
Justificativa: article: conteúdo independente de outras partes do sítio. É autocontido. Exemplo:

comentário enviado por usuário, post de um blog, artigo de uma revista.
E) Alternativa incorreta.
Justificativa: figure: não tem relação com a questão.
Questão 2. (FCC 2019, adaptada) Considere o fragmento a seguir de uma página HTML5 que utiliza
elementos semânticos.
Para inserir a legenda “Figura 1 – Foto das dependências do TRF 3” na imagem, após
<img src=”trf. jpg” alt= “TRF3”>
deve-se colocar a instrução:
A) <label> Figura 1 – Foto das dependências do TRF3 </label>
B) <title> Figura 1 – Foto das dependências do TRF3 </title>
C) <legend> Figura 1 – Foto das dependências do TRF3 </legend>
99
Unidade II
D) <figlable> Figura 1 – Foto das dependências do TRF3 </figlabell>
E) <figcaption> Figura 1 – Foto das dependências do TRF3 </figcaption>
Resposta correta: alternativa E.
Análise da questão
Justificativa: o elemento <figure> é para ser usado em conjunto com o elemento <figcaption>.
Sua finalidade é marcar diagramas, ilustrações, fotos, e fragmentos de código.
100

Livro-Texto - Unidade II

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Livro-Texto - Unidade II

Enviado por

Direitos autorais:

Formatos disponíveis

Unidade II

Desenvolvimento de Software para <ITALICS>internet</ITALICS>

Figura 66 – Exemplo de arquivo XML

Para agregar conhecimento aos estudos de HTML e XHTML, leia o artigo:

ISHIDA, R. Servindo HTML & XHTML. Internacionalização. Traduzido

Quadro 5 – Comparação HTML × XHTML

3.1 Recursos de documentos HTML à XHTML

MIME é a sigla em inglês que corresponde a multipurpose internet mail

Determinar, por exemplo, qual aplicativo deve abrir um formato de

Essa identificação tem por finalidade possibilitar, assim, a interação

Um exemplo de aplicação URI:

3.2 Diferenças entre HTML e XHTML

Estrutura do documento XHTML:

• DOCTYPE XHTML é obrigatório.

• o atributo xmlns em <html> é obrigatório.

• <html>, <head>, <title> e <body> são obrigatórios.

Os elementos XHTML devem:

• estar adequadamente alinhados;

• sempre estar fechados;

• ter um elemento raiz.

• Os nomes dos atributos devem estar em minúsculas.

• Os valores dos atributos devem ser citados.

• A minimização de atributos é proibida.

3.2.1 Como converter de HTML para XHTML

• Adicionar um XHTML <! DOCTYPE> à primeira linha de cada página.

• Acrescentar um atributo xmlns ao elemento html de cada página.

• Alterar todos os nomes de elementos para minúsculas.

• Fechar todos os elementos vazios.

• Alterar todos os nomes de atributo para minúsculas.

• Citar todos os valores de atributo.

Segue um exemplo de marcação em XHTML:

Figura 67 – Exemplo de aplicação da estrutura XHTML

Segue um exemplo de marcação em HTML:

Figura 68 – Exemplo de aplicação da estrutura HTML

Os formulários nos permitem automatizar o envio e o recebimento de dados de uma página

3.3.1 Formulário: <form> … </form>

• action=”url”: o endereço (URL – uniform resource locator ou localizador de padrão de recursos)

3.3.2 Campo de entrada: <input>

• size=””: define o tamanho ou a largura da entrada, normalmente definida em termos de caracteres

• maxlength=””: comprimento máximo do campo de entrada, como o número máximo de

3.3.3 Botão: <button>

• value=””: texto que aparece no botão, como “OK” ou “enviar”;

• size=””: determina o comprimento (ou largura) do botão.

3.3.4 Lista de seleção: <select> … </select>

Uma lista suspensa, também chamada de caixa de combinação, permitindo a seleção de

• name=””: nome do seletor;

3.3.5 Item de seleção: <option> </option>

• selected: define a opção padrão que é selecionada automaticamente quando o formulário

3.3.6 Área de texto: <textarea> </textarea>

• name=””: o nome exclusivo atribuído ao campo do formulário;

• rows=””: o número de linhas de texto define o tamanho vertical da área de texto;

• cols=””: o tamanho horizontal da caixa de texto, definido como o número de caracteres

Considere uma aplicação de formulários, conforme ilustrado nas figuras a seguir:

Figura 69 – Exemplo de construção de formulário em HTML

Para o formulário ilustrado, é necessário:

• Abrir o Sublime Text.

— <h3>Avaliar a Unidade 2: </h3>

Isso cria o cabeçalho Avaliar a Unidade 2.

— <form name=”formUnidade2 action=unidade2.php method=”post”>

— <input type=”text” name=”name” value=”Martins”>

— <input type=”radio” name = “rating” value =”1>

Cria-se a opção de 1 à 3 para selecionar através do radio button.

Cria-se uma caixa de texto para informar o comentário.