FERRAMENTAS DE DESENVOLVIMENTO WE B

Prévia do material em texto

<p>FERRAMENTAS DE</p><p>DESENVOLVIMENTO</p><p>WEB</p><p>OBJETIVOS DE APRENDIZAGEM</p><p>> Reconhecer o papel do HTML na confecção de páginas web.</p><p>> Identificar as principais tags HTML.</p><p>> Criar páginas web utilizando HTML.</p><p>Introdução</p><p>O desenvolvimento web refere-se à construção e criação de sites (coleção</p><p>de páginas da web relacionadas). Para criar um site, precisamos de algumas</p><p>linguagens que são utilizadas para projetar sua estrutura e aprimorar sua</p><p>aparência e suas funções. O desenvolvimento web é feito principalmente em</p><p>duas partes: desenvolvimento front-end (aparência e organização) e desenvolvi-</p><p>mento back-end (procedimentos, dados e banco de dados). O HTML (HyperText</p><p>Markup Language, ou linguagem de marcação de hipertexto) é usado na parte</p><p>front-end para criar o esqueleto ou estrutura da página da web.</p><p>O HTML foi desenvolvido por Tim Berners Lee em 1993. É uma linguagem</p><p>que os navegadores da web entendem e é usada para exibir texto, imagens,</p><p>áudio e vídeo na web.</p><p>Criação e</p><p>formatação de</p><p>páginas web</p><p>com HTML</p><p>Victor de Andrade Machado</p><p>Neste capítulo, você vai apreender a construir páginas HTML entendendo</p><p>seus conceitos e importância no desenvolvimento web. Além disso, vai identifi-</p><p>car as principais tags utilizadas na construção de sites, bem como os elementos</p><p>que fazem parte da organização das páginas. Por fim, serão apresentados alguns</p><p>exemplos mais completos de páginas em HTML utilizando as tags apresentadas</p><p>e suas formatações adequadas.</p><p>Importância e conceitos do HTML</p><p>HTML é a linguagem de construção básica de qualquer site que vemos na</p><p>internet. Portanto, é importante e amplamente utilizado. A versão mais recente</p><p>do HTML é o HTML5. Essa linguagem de marcação é suportada por quase todos</p><p>os navegadores e plataformas. É importante considerar algumas diferenças</p><p>entre linguagem de marcação e hipertexto (Miletto; Bertagnolli, 2014):</p><p>� Linguagem de marcação: é um sistema para anotar um documento a fim</p><p>de diferenciar facilmente as informações extras contidas nele. Pense</p><p>nisso como as notas extras que um professor pode escrever ao corrigir</p><p>provas com uma caneta vermelha, junto com correções de ortografia,</p><p>pontuação ou conteúdo. No HTML, você utilizará as chamadas tags,</p><p>responsáveis por iniciar parágrafos, listas, tabelas, quebras de linhas</p><p>e diversas outras marcações.</p><p>� Hipertexto: um texto codificado para conter links para outros textos.</p><p>É isso que torna possível criar links para páginas. O hipertexto pode</p><p>ser mais do que apenas texto; pode significar imagens, vídeo e som.</p><p>Você ativa hiperlinks clicando neles com o mouse. Pense nisso como um</p><p>método para vincular e fazer referências cruzadas de coisas diferentes.</p><p>Você pode ser completamente estático ou tão dinâmico quanto desejar</p><p>com o hipertexto.</p><p>Esses dois elementos se unem para formar a linguagem de marcação de</p><p>hipertexto, ou HTML.</p><p>Evolução do HTML</p><p>A primeira versão oficial do HTML (HTML 1.0, em 1993) era bastante simples,</p><p>oferecendo apenas elementos básicos para formatação de textos, criação de</p><p>Criação e formatação de páginas web com HTML2</p><p>links e inclusão de imagens. Esse conjunto inicial de funcionalidades permitiu</p><p>a criação das primeiras páginas web estáticas (Miletto; Bertagnolli, 2014).</p><p>A versão 2.0 consolidou os elementos da versão inicial e adicionou no-</p><p>vos recursos, como formulários. Essa versão foi padronizada pela Internet</p><p>Engineering Task Force (IETF), o que ajudou a unificar as práticas de desen-</p><p>volvimento web.</p><p>A World Wide Web Consortium (W3C) assumiu a responsabilidade de desen-</p><p>volver o HTML a partir da versão 3.2. Essa versão trouxe avanços significativos,</p><p>incluindo suporte para tabelas, scripts (por meio do JavaScript) e a capacidade</p><p>de aplicar estilos aos elementos HTML (Sanders, 2012).</p><p>Mais tarde, o HTML 4.01 foi um marco importante na padronização da web,</p><p>introduzindo atributos que melhoraram a acessibilidade e a separação entre</p><p>conteúdo e apresentação. Ele incentivou o uso de Cascading Style Sheets (CSS)</p><p>para estilização, promovendo uma web mais organizada e fácil de manter</p><p>(Sanders, 2012). Dentro dessa versão, houve três variantes principais:</p><p>� HTML 4.01 Strict: utilizado para renderizar as tags da versão 4, não</p><p>aceitando tags de versões anteriores.</p><p>� HTML 4.01 Transitional: conta com os recursos do 4.01 Strict, mas aceita</p><p>também tags antigas.</p><p>� HTML 4.01 Frameset: utilizado quando o documento contém molduras</p><p>("frames"). Esse doctype consiste no mesmo que o Transitional mais</p><p>os elementos relacionados com as molduras.</p><p>A evolução continuou com o XHTML, que trouxe suporte a XML, dessa vez</p><p>com quatro variantes:</p><p>� XHTML 1.0 Strict: equivalente ao HTML 4.01 Strict, mas com suporte</p><p>a XML.</p><p>� XHTML 1.0 Transitional: equivalente ao HTML 4.01 Transitional, mas</p><p>com suporte a XML.</p><p>� XHTML 1.1: baseado no XHTML 1.0 Strict, mas permitindo a integração</p><p>de módulos adicionais.</p><p>� XHTML Mobile 1.0: utilizado para sites com suporte a dispositivos móveis</p><p>utilizando XHTML.</p><p>Criação e formatação de páginas web com HTML 3</p><p>Por fim, o HTML5 representou uma revolução na maneira como as páginas</p><p>web eram desenvolvidas. Essa versão introduziu novos elementos semânticos,</p><p>como , , e , que melhoraram a estrutura e</p><p>a acessibilidade das páginas (Miletto; Bertagnolli, 2014). Na atual versão 5.0,</p><p>o HTML é simplesmente declarado como "DOCTYPE html".</p><p>Além disso, o HTML5 incorporou suporte nativo para áudio e vídeo, eli-</p><p>minando a necessidade de plugins externos como o Flash. Também trouxe</p><p>avanços significativos em Application Programming Interfaces (APIs), que</p><p>permitiram o desenvolvimento de aplicações web mais ricas e interativas.</p><p>Uma vez que todos os arquivos HTML são escritos em texto ASCII</p><p>(American Standard Code for Information Interchange), você pode</p><p>usar qualquer editor de texto para escrever uma página. Você não precisa de</p><p>ferramentas sofisticadas e pode visualizar os resultados do seu trabalho em</p><p>qualquer navegador, porque tem suporte universal, o que é uma das vantagens</p><p>mais significativas que existe no uso de HTML.</p><p>Cada arquivo HTML contém vários elementos aninhados, junto com as</p><p>chamadas tags (Figura 1), que serão estudadas um pouco mais adiante. Prati-</p><p>camente qualquer pessoa pode escrever um arquivo .HTML com um editor de</p><p>texto básico e depois carregá-lo na internet para começar a criar seu próprio</p><p>site. Em seguida, os servidores de dados da web precisam saber o que fazer</p><p>com os arquivos que você carrega e como enviá-los ao computador do cliente</p><p>para entendê-los. É para isso que o código do HTML é usado para decidir.</p><p>É o que mantém tudo unido (Harold, 2010).</p><p>Figura 1. Estrutura básica de um HTML.</p><p>Criação e formatação de páginas web com HTML4</p><p>O HTML permitiu a interoperabilidade entre diferentes sistemas</p><p>e dispositivos. A mesma página web pode ser visualizada em um</p><p>computador, tablet ou smartphone, adaptando-se às diversas telas e resoluções.</p><p>A evolução do HTML impulsionou o desenvolvimento de outras tecnologias</p><p>web, como CSS e JavaScript, que juntos formam a base do desenvolvimento</p><p>web moderno. O HTML5, em particular, possibilitou a criação de aplicações web</p><p>complexas e interativas, rivalizando com as aplicações desktop tradicionais.</p><p>De modo geral, o HTML transformou a maneira como consumimos e compar-</p><p>tilhamos informações, impactando setores como educação, comércio, entreteni-</p><p>mento e comunicação. A web, construída sobre HTML, tornou-se uma ferramenta</p><p>indispensável na vida cotidiana. Na próxima seção, veremos as principais tags</p><p>HTML e suas funções e características para geração de páginas web.</p><p>Principais tags do HTML</p><p>As tags HTML são elementos de marcação utilizados para definir e estruturar</p><p>o conteúdo de uma página web. Elas são compostas por um nome de tag,</p><p>delimitado por colchetes angulares “”. Normalmente, uma tag HTML possui</p><p>uma tag de abertura e uma tag de fechamento (Miletto; Bertagnolli, 2014).</p><p>A tag de abertura indica o início de um elemento e a tag de fechamento</p><p>indica o fim desse</p><p>elemento, sendo que a tag de fechamento é precedida</p><p>por uma barra “/”.</p><p>A tag de parágrafo, por exemplo, coloca seu conteúdo em pequenos</p><p>parágrafos organizados, enquanto a tag de cabeçalho coloca as palavras</p><p>como um título adequado em uma página. Você deve iniciar uma tag, incluir</p><p>o conteúdo de texto simples no meio e, em seguida, fechar a tag para que o</p><p>computador saiba que você terminou de usar essa tag (Miletto; Bertagnolli,</p><p>2014). Vejamos a seguir as principais tags utilizadas em HTML e seu exemplo</p><p>de uso, começando pela estrutura básica.</p><p>� : declara o tipo de documento e a versão de HTML</p><p>utilizada. Por exemplo, indica que o documento</p><p>está em HTML5.</p><p>� : tag-raiz que encapsula todo o conteúdo da página. Deve conter</p><p>os elementos e .</p><p>Criação e formatação de páginas web com HTML 5</p><p>� : contém metadados sobre o documento, como título, links</p><p>para estilos, scripts e informações de codificação.</p><p>� : contém todo o conteúdo visível da página, como textos, ima-</p><p>gens, vídeos e links, caracterizado como o “corpo” de sua página HTML.</p><p>Além das tags estruturais básicas, existem as mais específicas, examinadas</p><p>caso a caso a seguir.</p><p>Tags de texto</p><p>As tags de texto são fundamentais no desenvolvimento de páginas web,</p><p>pois permitem a formatação e organização do conteúdo textual de maneira</p><p>eficiente. O uso correto dessas tags não apenas garante uma apresentação</p><p>visualmente agradável, mas também melhora a acessibilidade e a otimização</p><p>para motores de busca (search engine optimization – SEOs). Vamos começar</p><p>pelas tags relacionadas a textos (Harold, 2010):</p><p>� : tag que indica o início do trecho que define um parágrafo.</p><p>� a : tags de cabeçalho, usadas para definir títulos e subtítulos.</p><p>A é a “mais importante” e a é a “menos importante”.</p><p>� : insere uma quebra de linha no local de uso.</p><p>� : define um texto em negrito, indicando maior importância.</p><p>� : define o texto em itálico, indicando ênfase.</p><p>A Figura 2 mostra um exemplo de utilização dessas tags relacionadas a</p><p>textos.</p><p>Figura 2. Utilização de tags HTML para textos.</p><p>Criação e formatação de páginas web com HTML6</p><p>Agora veja na Figura 3 o resultado da página sendo exibida em um nave-</p><p>gador web.</p><p>Figura 3. Resultado da codificação mostrada na Figura 2.</p><p>Tags de imagem e mídia em HTML</p><p>As tags de imagem e mídia em HTML são utilizadas para inserir elementos</p><p>visuais e auditivos nas páginas web, permitindo aos desenvolvedores en-</p><p>riquecer o conteúdo e proporcionar uma experiência mais interativa aos</p><p>usuários (Miletto; Bertagnolli, 2014). Cada uma dessas tags tem uma função</p><p>específica, sendo essenciais para a criação de páginas dinâmicas e atrativas.</p><p>A seguir, são mostradas as principais tags a serem utilizadas em imagens e</p><p>mídias em HTML.</p><p>� A tag é utilizada para inserir imagens nas páginas web. Ela</p><p>não possui uma tag de fechamento e requer pelo menos um atributo</p><p>obrigatório, que é src, especificando o caminho para a imagem a ser</p><p>exibida. O atributo alt também é recomendado para descrever o</p><p>conteúdo da imagem, importante para acessibilidade e para casos em</p><p>que a imagem não pode ser exibida.</p><p>� A tag é utilizada para incorporar arquivos de áudio nas páginas</p><p>web. Ela suporta diferentes formatos de áudio e pode incluir controles</p><p>de reprodução, como play, pause e volume.</p><p>� A tag é usada para incorporar arquivos de vídeo nas pági-</p><p>nas web. Ela suporta vários formatos de vídeo e também pode incluir</p><p>controles de reprodução para permitir que os usuários controlem a</p><p>reprodução do vídeo (play, pause, volume, entre outros).</p><p>Criação e formatação de páginas web com HTML 7</p><p>A Figura 4 mostra um exemplo de código utilizando essas três tags de</p><p>imagem e mídia.</p><p>Figura 4. Utilização de tags HTML para imagem e mídia.</p><p>A Figura 5 mostra o resultado das tags utilizadas na Figura 4.</p><p>Figura 5. Resultado da codificação da Figura 4.</p><p>Criação e formatação de páginas web com HTML8</p><p>Tags de link e navegação</p><p>As tags de link e navegação em HTML são fundamentais para criar interati-</p><p>vidade e facilitar a navegação dentro das páginas web. Elas permitem aos</p><p>desenvolvedores criar links entre diferentes documentos e seções da mesma</p><p>página e facilitar a organização e acessibilidade do conteúdo (Miletto; Bertag-</p><p>nolli, 2014). Veja a seguir as principais tags relacionadas com links e navegação</p><p>em páginas web.</p><p>� A tag , ou âncora, é essencial para criar links de navegação entre</p><p>páginas web ou dentro da mesma página. Ela pode ser usada para</p><p>direcionar o usuário para outros documentos, recursos, seções da</p><p>mesma página, ou para enviar e-mails.</p><p>� A tag define uma seção de links de navegação dentro da página.</p><p>É utilizada para agrupar links que direcionam o usuário para diferentes</p><p>partes do site ou para diferentes seções da mesma página. Seu principal</p><p>uso é organizar esses links para a geração de menu em sua página.</p><p>Veja na Figura 6 um exemplo de utilização de tags de link e navegação.</p><p>Figura 6. Utilização de tags HTML para link e navegação.</p><p>A Figura 7 mostra o resultado da codificação em um navegador web.</p><p>Criação e formatação de páginas web com HTML 9</p><p>Figura 7. Resultado de tags HTML para link e navegação.</p><p>Tags de lista</p><p>As tags de link e navegação em HTML são fundamentais para criar interatividade</p><p>e facilitar a navegação dentro das páginas web. Elas permitem aos desenvolve-</p><p>dores criar links entre diferentes documentos e seções da mesma página, além</p><p>de facilitar a organização e acessibilidade do conteúdo (Miletto; Bertagnolli,</p><p>2014). As principais e mais usuais tags de listas são mostradas a seguir:</p><p>� As tags (unordered list) e (ordered list) são utilizadas para</p><p>criar listas de itens. A cria listas não ordenadas (com marcadores)</p><p>e a cria listas ordenadas (numeradas).</p><p>� A tag é usada para definir itens dentro de listas ( ou ).</p><p>Cada representa um item da lista.</p><p>A Figura 8 apresenta exemplos de código utilizando tag de listas.</p><p>Figura 8. Utilização de tags HTML para listas.</p><p>Criação e formatação de páginas web com HTML10</p><p>O resultado da utilização das tags da Figura 8 são exibidas em um nave-</p><p>gador na Figura 9, a seguir.</p><p>Figura 9. Utilização de tags HTML para listas mostrado em navegador web.</p><p>Tags de tabela</p><p>As tags de tabela em HTML são utilizadas para organizar dados em um formato</p><p>tabular, facilitando a exibição de informações estruturadas e comparativas.</p><p>Elas permitem criar tabelas com linhas e colunas, onde os dados podem</p><p>ser apresentados de maneira clara e ordenada (Miletto; Bertagnolli, 2014).</p><p>As principais tags para exibição e construção de tabela são mostradas a</p><p>seguir:</p><p>� : define a tabela como um todo.</p><p>� : define uma linha na tabela.</p><p>� : define uma célula de cabeçalho de tabela (opcional dentro de</p><p>).</p><p>� : define uma célula de tabela (obrigatório dentro de ).</p><p>Veja na Figura 10 um exemplo de uso de tags de tabela.</p><p>Criação e formatação de páginas web com HTML 11</p><p>Figura 10. Utilização de tags HTML para tabela.</p><p>A Figura 11 mostra o resultado do código da tabela em um navegador</p><p>para internet.</p><p>Figura 11. Exibição do resultado do HTML para tabela.</p><p>Tags semânticas</p><p>As tags semânticas em HTML5 são usadas para definir a estrutura e o signi-</p><p>ficado do conteúdo, proporcionando uma melhor organização e acessibili-</p><p>dade (Miletto; Bertagnolli, 2014). Veja a seguir as principais tags semânticas</p><p>utilizadas em HTML5.</p><p>� : define o cabeçalho de um documento ou seção.</p><p>� : define o rodapé de um documento ou seção.</p><p>� : define uma seção genérica em um documento.</p><p>� : define um conteúdo independente e autocontido.</p><p>� : define conteúdo relacionado ao conteúdo principal, como</p><p>uma barra lateral.</p><p>Criação e formatação de páginas web com HTML12</p><p>As tags semânticas foram introduzidas com o HTML5 para melhorar a</p><p>acessibilidade e a SEO (otimização para motores de busca). Antes do</p><p>HTML5, muitos desenvolvedores usavam para tudo, resultando em "div-</p><p>-ite", uma prática que tornava o código menos legível e menos acessível. As tags</p><p>semânticas, como e , ajudam a resolver esse problema,</p><p>ao proporcionar uma estrutura mais clara e intuitiva para o conteúdo da web.</p><p>Veja na Figura 12 um exemplo de código usando essas tags semânticas.</p><p>Figura 12. Utilização de tags semânticas em HTML.</p><p>Na Figura 13, a seguir, é apresentado em um navegador o resultado da</p><p>codificação utilizada na Figura 12.</p><p>Figura 13. Resultado da utilização de tags semânticas em HTML.</p><p>Criação e formatação de páginas web com HTML 13</p><p>Agora que exploramos as principais tags HTML e entendemos suas funções</p><p>e importâncias, estamos prontos para ver como elas podem ser aplicadas na</p><p>prática. Na próxima seção, veremos exemplos de construção de sites usando</p><p>HTML, em que combinaremos essas tags para criar páginas web um pouco</p><p>mais completas, bem estruturadas e funcionais. Isso nos permitirá consolidar</p><p>o conhecimento adquirido e entender melhor como essas tags trabalham</p><p>juntas para formar a base da web.</p><p>Criação de páginas web usando HTML</p><p>Vamos criar dois exemplos completos e explicativos de páginas web em HTML</p><p>usando as tags que examinamos anteriormente. Cada exemplo incluirá uma</p><p>introdução, o código HTML relevante e comentários explicativos para cada</p><p>parte do código.</p><p>Página simples com estrutura básica</p><p>Neste exemplo, vamos criar uma página web simples que inclui um cabeça-</p><p>lho, uma navegação, uma seção principal com texto e imagem e um rodapé.</p><p>Utilizaremos as tags de estrutura básica, de link e navegação e de imagem</p><p>(Figura 14).</p><p>Criação e formatação de páginas web com HTML14</p><p>Figura 14. Código simples em HTML utilizando as principais tags sintáticas e semânticas.</p><p>Vejamos um pouco mais detalhadamente as tags utilizadas nesse nosso</p><p>primeiro exemplo:</p><p>Criação e formatação de páginas web com HTML 15</p><p>� : declara o tipo de documento como HTML5, garan-</p><p>tindo compatibilidade e interpretação correta pelo navegador.</p><p>� : define o idioma da página como português</p><p>do Brasil.</p><p>� : contém metadados da página, como o conjunto de caracteres</p><p>() e o título da página ().</p><p>� : define o cabeçalho da página com o título principal utili-</p><p>zando .</p><p>� : define a seção de navegação que contém uma lista não ordenada</p><p>() de links () para diferentes seções da página.</p><p>� : define seções distintas da página com um identificador</p><p>(id) único para cada uma.</p><p>� : inclui uma imagem na seção "Início" utilizando um URL externo.</p><p>O atributo alt fornece uma descrição alternativa para a imagem, o que</p><p>é importante para a acessibilidade e para casos em que a imagem não</p><p>pode ser carregada.</p><p>� : define o rodapé da página, que geralmente contém infor-</p><p>mações de direitos autorais ou de contato.</p><p>É possível carregar imagens externas como a que está sendo usada neste</p><p>exemplo. É importante considerar a origem e o direito de uso dessas ima-</p><p>gens. Sempre forneça o atributo alt para todas as imagens para garantir</p><p>acessibilidade (Harold, 2010). O HTML suporta vários tipos de formatos de</p><p>imagem, como JPEG, PNG, GIF, entre outros. A escolha do formato depende das</p><p>necessidades de qualidade, tamanho de arquivo e suporte de transparência</p><p>(Miletto; Bertagnolli, 2014). A Figura 15 exibe o resultado do código sendo</p><p>mostrado no navegador.</p><p>Criação e formatação de páginas web com HTML16</p><p>Figura 15. Resultado exibido no navegador.</p><p>A seguir, veremos outro exemplo de construção de site usando HTML, no</p><p>qual inserimos tags e listas.</p><p>Página web com tabela e listas</p><p>Neste exemplo, vamos criar uma página web que inclui um cabeçalho, uma</p><p>navegação, uma seção com uma tabela para exibir dados e uma lista de itens.</p><p>Utilizaremos as tags de tabela e lista, além das tags de estrutura básica e</p><p>navegação (Figura 16).</p><p>Criação e formatação de páginas web com HTML 17</p><p>Figura 16. Código em HTML utilizando as principais tags estruturais, lista e tabela.</p><p>(Continua)</p><p>Criação e formatação de páginas web com HTML18</p><p>Figura 16. Código em HTML utilizando as principais tags estruturais, lista e tabela.</p><p>Vejamos a seguir alguns comentários a respeito desse código:</p><p>� : contém o título principal da página.</p><p>� : contém a lista de navegação com links para diferentes seções</p><p>da página.</p><p>� : seção que contém uma tabela para</p><p>exibir informações estruturadas.</p><p>� : define a tabela. Dentro dela, temos para linhas,</p><p>para cabeçalhos de colunas e para células de dados.</p><p>� : seção que contém listas de itens.</p><p>� : define uma lista não ordenada com itens .</p><p>� : define uma lista ordenada com itens .</p><p>� : contém informações de rodapé da página.</p><p>A Figura 17 mostra o resultado dessa codificação em um navegador web.</p><p>(Continuação)</p><p>Criação e formatação de páginas web com HTML 19</p><p>Figura 17. Resultado da página web codificada na Figura 16.</p><p>A linguagem HTML não apenas define a estrutura básica de uma página,</p><p>como também oferece a flexibilidade necessária para integrar diferentes</p><p>tipos de conteúdo, como texto, imagens e links. A utilização adequada de</p><p>atributos, como o alt para imagens, é crucial para melhorar a acessibilidade</p><p>e a indexação de motores de busca. Além disso, a capacidade de incorporar</p><p>imagens de fontes externas amplia as possibilidades de design e persona-</p><p>lização, desde que sejam respeitados os direitos autorais e as diretrizes de</p><p>uso responsável na web.</p><p>Criação e formatação de páginas web com HTML20</p><p>Referências</p><p>HAROLD, E. R. Refatorando HTML: como melhorar o projeto de aplicações web existentes.</p><p>Porto Alegre: Bookman, 2010.</p><p>MILETTO, E. M.; BERTAGNOLLI, S. C. Desenvolvimento de software II: introdução ao</p><p>desenvolvimento web com HTML, CSS, JavaScript e PHP. Porto Alegre: Bookman, 2014.</p><p>SANDERS, B. Smashing HTLM5: técnicas para a nova geração da web. Porto Alegre:</p><p>Bookman, 2012.</p><p>Leituras recomendadas</p><p>ALVES, W. P. HTLM e CSS: aprenda a construir páginas web. São Paulo: Expressa, 2021.</p><p>ALVES, W. P. Projetos de sistemas web: conceitos, estruturas, criação de banco de dados</p><p>e ferramentas de desenvolvimento. São Paulo: Érica, 2015.</p><p>TERUEL, E. C. HTML 5: guia prático. São Paulo: Érica, 2014.</p><p>Os links para sites da web fornecidos neste capítulo foram todos</p><p>testados, e seu funcionamento foi comprovado no momento da</p><p>publicação do material. No entanto, a rede é extremamente dinâmica; suas</p><p>páginas estão constantemente mudando de local e conteúdo. Assim, os edito-</p><p>res declaram não ter qualquer responsabilidade sobre qualidade, precisão ou</p><p>integralidade das informações referidas em tais links.</p><p>Criação e formatação de páginas web com HTML 21</p>