Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
HTML e XHTML: Estruturação de Documentos
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
76 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 77 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: 78 Unidade II Quadro 5 – Comparação HTML × XHTML HTML XHTML A linguagem de marcação HTML ou hypertext é considerada, de forma mundial, a principal linguagem de marcação para efetuar a criação de páginas web e outras informações que podem proporcionar a exibição em um browser. XHTML (extensible hypertext markup language) é considerada como da família de linguagens de marcação XML que tem por finalidade o espelhamento, ou até mesmo a extensão de versões utilizadas em hypertext markup language (HTML), a linguagem 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 branda. Subconjunto restritivo de XML e precisa ser analisado com 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/>. 79 DESENVOLVIMENTO DE SOFTWARE PARA INTERNET 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 veiculadacom um tipo XML MIME, ou seja, essa marcação XHTML atribuída como text / html é um documento HTML no que se refere aos browsers. 80 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>). 81 DESENVOLVIMENTO DE SOFTWARE PARA INTERNET 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. 82 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: 83 DESENVOLVIMENTO DE SOFTWARE PARA INTERNET • 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; 84 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). 85 DESENVOLVIMENTO DE SOFTWARE PARA INTERNET 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ésdo radio button. — <textarea name=”comment”> 86 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> 87 DESENVOLVIMENTO DE SOFTWARE PARA INTERNET 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 88 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 89 DESENVOLVIMENTO DE SOFTWARE PARA INTERNET 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. 90 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> 91 DESENVOLVIMENTO DE SOFTWARE PARA INTERNET 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> 92 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, realmentese 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: 93 DESENVOLVIMENTO DE SOFTWARE PARA INTERNET 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. 94 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 95 DESENVOLVIMENTO DE SOFTWARE PARA INTERNET 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 96 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. 97 DESENVOLVIMENTO DE SOFTWARE PARA INTERNET 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 98 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. 99 DESENVOLVIMENTO DE SOFTWARE PARA INTERNET 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> 100 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.
Materiais relacionados
176 pág.
Perguntas relacionadas
Compartilhar