Baixe o app para aproveitar ainda mais
Prévia do material em texto
Autor: Prof. Luiz Carlos Machi Lozano Colaboradoras: Profa. Vanessa Santos Lessa Profa. Christiane Mazur Doi Programação Web Responsiva Professor conteudista: Luiz Carlos Machi Lozano Mestre em Engenharia de Produção pela Universidade Paulista (UNIP), em 2017; graduado em Sistemas de Informação, pela mesma universidade, em 2015. Desde 2017 é integrante ativo do grupo de pesquisa de engenharia de software aplicada à criação de sistemas críticos, elaborando, orientando e implementando pesquisas, inclusive de alunos em programas de iniciação científica. Em 2018, mudou seu enfoque da pesquisa para o ensino e passou a ministrar disciplinas para os cursos de Ciência da Computação e de Sistemas de Informação na UNIP. Em 2019, iniciou sua jornada como professor titular do curso de pós-graduação em Engenharia de Software na UNIP. © Todos os direitos reservados. Nenhuma parte desta obra pode ser reproduzida ou transmitida por qualquer forma e/ou quaisquer meios (eletrônico, incluindo fotocópia e gravação) ou arquivada em qualquer sistema ou banco de dados sem permissão escrita da Universidade Paulista. Dados Internacionais de Catalogação na Publicação (CIP) L925p Lozano, Luiz Carlos Machi. Programação Web Responsiva / Luiz Carlos Machi Lozano. – São Paulo: Editora Sol, 2021. 184 p., il. Nota: este volume está publicado nos Cadernos de Estudos e Pesquisas da UNIP, Série Didática, ISSN 1517-9230. 1. Web. 2. Tag. 3. CSS3. I. Título. CDU 800.92 U511.45 – 21 Prof. Dr. João Carlos Di Genio Reitor Prof. Fábio Romeu de Carvalho Vice-Reitor de Planejamento, Administração e Finanças Profa. Melânia Dalla Torre Vice-Reitora de Unidades Universitárias Profa. Dra. Marília Ancona-Lopez Vice-Reitora de Pós-Graduação e Pesquisa Profa. Dra. Marília Ancona-Lopez Vice-Reitora de Graduação Unip Interativa – EaD Profa. Elisabete Brihy Prof. Marcello Vannini Prof. Dr. Luiz Felipe Scabar Prof. Ivan Daliberto Frugoli Material Didático – EaD Comissão editorial: Dra. Angélica L. Carlini (UNIP) Dr. Ivan Dias da Motta (CESUMAR) Dra. Kátia Mosorov Alonso (UFMT) Apoio: Profa. Cláudia Regina Baptista – EaD Profa. Deise Alcantara Carreiro – Comissão de Qualificação e Avaliação de Cursos Projeto gráfico: Prof. Alexandre Ponzetto Revisão: Kleber Souza Lucas Ricardi Sumário Programação Web Responsiva APRESENTAÇÃO ......................................................................................................................................................9 INTRODUÇÃO ...........................................................................................................................................................9 Unidade I 1 INTRODUÇÃO .................................................................................................................................................... 11 1.1 O que é web? .......................................................................................................................................... 11 1.2 Como funciona a web? ...................................................................................................................... 15 1.3 Preparando ambiente de trabalho................................................................................................. 15 1.4 Ambiente de Desenvolvimento Integrado (IDE) – editores de texto ............................... 16 1.4.1 Notepad++ ................................................................................................................................................ 16 1.4.2 Sublime ....................................................................................................................................................... 16 1.4.3 Microsoft Visual Studio Code ............................................................................................................ 17 1.5 Personalizando o Editor ..................................................................................................................... 18 1.6 Criando o primeiro arquivo .............................................................................................................. 19 2 INICIANDO COM O HTML5 .......................................................................................................................... 20 2.1 O que é o HTML? ................................................................................................................................... 20 2.2 Criando o primeiro projeto ............................................................................................................... 20 2.3 DOCTYPE................................................................................................................................................... 22 2.4 TAG <html> ............................................................................................................................................ 22 2.5 User-agents e atributo lang ............................................................................................................. 23 2.6 TAG <head> ............................................................................................................................................ 23 2.7 Metatag charset .................................................................................................................................... 24 2.8 TAG <title> ............................................................................................................................................. 24 2.9 TAG <body> ............................................................................................................................................ 26 2.10 TAG <p> ................................................................................................................................................. 27 2.11 TAG <span> .......................................................................................................................................... 28 2.12 TAG <strong> ...................................................................................................................................... 29 2.13 TAG <em> ............................................................................................................................................. 29 2.14 TAG <h> ................................................................................................................................................ 30 2.15 TAG <br> ............................................................................................................................................... 33 2.16 TAG <header> ..................................................................................................................................... 33 2.17 TAG <section> .................................................................................................................................... 34 2.18 TAG <article> ...................................................................................................................................... 34 3 AVANÇANDO COM O HTML5 ...................................................................................................................... 36 3.1 Criando links ........................................................................................................................................... 36 3.2 Lista ordenada ....................................................................................................................................... 45 3.3 Lista não ordenada .............................................................................................................................. 46 4 APROFUNDANDO COM O HTML5 ............................................................................................................. 47 4.1 Lista de links ...........................................................................................................................................47 4.2 TAG <aside> ........................................................................................................................................... 48 4.3 TAG <main> ........................................................................................................................................... 48 4.4 Imagens .................................................................................................................................................... 49 4.5 TAG <figure> .......................................................................................................................................... 53 4.6 TAG <footer> ......................................................................................................................................... 54 4.7 TAG <time> ............................................................................................................................................ 55 4.8 TAG <cite> e TAG <q> ....................................................................................................................... 55 4.9 Links em imagens ................................................................................................................................. 56 4.10 Trabalhando com tabelas ................................................................................................................ 57 4.11 TAG <div> ............................................................................................................................................. 58 4.12 TAG <font> .......................................................................................................................................... 59 4.13 Style background color ................................................................................................................... 59 4.14 Explicações sobre o código das cores ........................................................................................ 62 4.15 Formulários .......................................................................................................................................... 65 Unidade II 5 INICIANDO COM O CSS3 .............................................................................................................................. 85 5.1 Criando e organizando o projeto ................................................................................................... 85 5.2 Chamando o CSS3 ............................................................................................................................... 87 5.3 Sintaxe do CSS....................................................................................................................................... 88 5.4 Estilizando o <body> com as propriedades de background .............................................. 88 5.5 Utilizando fontes de terceiros ......................................................................................................... 95 5.6 Inserindo e estilizando o <main> e aprendendo sobre o canal alpha ........................... 98 5.7 Containers <div> e classificação de tag ...................................................................................100 5.8 Estilizando tags de título ................................................................................................................102 5.9 Inserindo vídeo na nossa página .................................................................................................103 5.10 Estilizando a tag <article>, fazendo um primeiro artigo, e utilizando a tag <hr> ....................................................................................................................................................105 5.11 Trabalhando com estilização de tabelas .................................................................................107 6 AVANÇANDO COM O CSS3 .......................................................................................................................109 6.1 Nova paginação ..................................................................................................................................109 6.2 Criando menus ....................................................................................................................................110 6.3 Pseudoclasse e pseudoelemento ..................................................................................................114 6.4 Estilizando o texto .............................................................................................................................115 6.4.1 Text-align .................................................................................................................................................117 6.4.2 Text-decoration ..................................................................................................................................... 118 6.4.3 Text-transform ....................................................................................................................................... 119 6.4.4 Text-indent ............................................................................................................................................. 120 6.4.5 Letter-spacing ....................................................................................................................................... 120 6.4.6 Line-height ..............................................................................................................................................121 6.4.7 Text-direction ........................................................................................................................................ 122 6.4.8 Word-spacing ........................................................................................................................................ 122 6.4.9 Text-shadow .......................................................................................................................................... 123 6.5 Estilizando fontes ...............................................................................................................................124 6.5.1 Font-family ............................................................................................................................................. 125 6.5.2 Font-style ................................................................................................................................................ 126 6.5.3 Font-size .................................................................................................................................................. 127 Unidade III 7 JAVASCRIPT .....................................................................................................................................................135 7.1 O que é o JavaScript .........................................................................................................................135 7.2 Iniciando com o JavaScript ............................................................................................................136 7.3 JavaScript em arquivo externo .....................................................................................................138 7.4 Eventos ...................................................................................................................................................142 7.5 Função.....................................................................................................................................................143 7.6 DOM .........................................................................................................................................................144 7.6.1 Métodos ................................................................................................................................................... 144 8BOOTSTRAP ......................................................................................................................................................151 8.1 O que é Bootstrap ..............................................................................................................................151 8.2 Instalando o Bootstrap ....................................................................................................................151 8.3 Criando um menu responsivo .......................................................................................................158 8.4 Criando um menu responsivo do zero .......................................................................................161 8.5 Criando um menu responsivo utilizando a documentação do Bootstrap ..................171 9 APRESENTAÇÃO Caro aluno, O desenvolvimento da web é fundamental para o entendimento dos conceitos referentes à área de front-end. Ela está presente em nosso dia a dia e, a cada momento, há aumento da necessidade de desenvolvimento de aplicações para essa plataforma. Esta disciplina aborda os conceitos básicos do surgimento da internet e sua evolução a caminho do mundo interconectado que vivenciamos atualmente. Este livro-texto inicia com o estudo sobre a linguagem de marcação HTML em sua versão 5, em que são destacadas e implementadas as principais tags utilizadas para o desenvolvimento de uma página web. Em seguida, mostra-se o funcionamento das folhas de estilo por meio do estudo do CSS em sua versão 3. Mais adiante, aborda-se a linguagem de programação JavaScript com os intuitos de dar interatividade às páginas e de criar sites responsivos. Para finalizar, unem-se os conhecimentos adquiridos anteriormente em HTML, CSS e JavaScript para o estudo do framework Bootstrap. Os objetivos aqui incluem capacitar os futuros desenvolvedores a empregarem as técnicas e as práticas fundamentais que envolvem o desenvolvimento web e instruí-los a aplicarem o conhecimento das atividades de programação web responsiva em suas vidas profissionais, nas empresas e nas instituições. Com intuito de alcançar essas finalidades, precisamos compreender o papel do desenvolvimento web no contexto da ciência da computação e as formas de desenvolvimento front-end. Bons estudos! INTRODUÇÃO Vivemos em um mundo no qual a internet é acessada por uma quantidade gigantesca de pessoas diariamente. Podemos dizer que, para algumas atividades, o seu uso é essencial e que sem ela milhares de empresas sequer existiriam. O cientista da computação é peça fundamental nesse cenário, pois ele trabalha efetivamente no desenvolvimento de novas tecnologias e de soluções para a evolução dessa plataforma. A cada dia as corporações investem mais na área da computação a fim de conquistarem vantagens competitivas e de estarem um passo à frente no mundo dos negócios. Neste livro-texto, abordaremos desde os conceitos básicos do desenvolvimento HTML até conteúdos mais avançados utilizando o CSS, o JavaScript e o framework Bootstrap. A divisão aqui será efetuada em três unidades, que abordarão o seguinte: • Unidade I: o conceito de internet e seu surgimento, a estrutura básica de uma página web e as principais tags utilizadas nessa linguagem de marcação. 10 • Unidade II: o uso de folhas de estilo com o CSS e detalhes da customização das páginas web de maneira estruturada e dinâmica. • Unidade III: o emprego da linguagem de programação JavaScript com intuito de inserir interatividade nas páginas web, criando páginas responsivas. Utilizaremos também o Bootstrap, o framework mais usado no mundo de desenvolvimento web. 11 PROGRAMAÇÃO WEB RESPONSIVA Unidade I 1 INTRODUÇÃO 1.1 O que é web? Antes de entendermos o que é a web, precisamos compreender como ela surgiu. Portanto, vamos voltar algumas décadas e analisar certos fatos. Em meados das décadas de 1960 e de 1970, estava acontecendo no mundo a chamada Guerra Fria, que você já deve conhecer das aulas de história. Observação Chamamos de Guerra Fria o período que se estendeu de 1945, final da Segunda Guerra Mundial, até 1991, com a extinção da União das Repúblicas Socialistas Soviéticas, a URSS. Vale notar que alguns autores consideram que o final da Guerra Fria ocorreu em 1989, com a queda do Muro de Berlim. A história da humanidade mostra que sempre houve avanços e evoluções em meio a grandes conflitos. Com a internet não foi diferente: no período citado, ela começou a ser rascunhada, mas para fins ligados à comunicação militar. Em meados de 1962, Joseph Licklider, engenheiro do Instituto Tecnológico de Massachusetts (MIT), começava a planejar como seria a internet da maneira como a conhecemos hoje. Sete anos mais tarde, em 1969, com o surgimento da Arpanet, tivemos o “nascimento” da internet (BARROS, 2013). Na década de 1980, o termo internet começou a se popularizar. Além disso, seu uso teve ampla expansão. O que era inicialmente uma aplicação destinada somente a fins de comunicação militar passou a ser uma rede de conhecimento que interligava universidades do mundo todo (BARROS, 2013). Na década de 1990, a internet tem seu uso disseminado em larga escala por meio dos personal computers (PCs). Em 1992, cria-se o world wide web, o famoso www, visando a gerar hipertextos que possibilitassem o trabalho em grupo em um mesmo documento. Eram utilizados CDs de provedores que, muitas vezes, eram entregues em nossas residências pelos correios. Precisávamos deles para que pudéssemos acessar a internet discada, em que era necessária uma linha de telefone fixo ligada a um modem. Tais provedores faziam o link entre nossas linhas telefônicas e a internet (BARROS, 2013). No final da década de 1990 e no início dos anos 2000, a web 1.0 começava a brilhar e determinados sites ganhavam fama e popularidade. Nessa época, tínhamos o Orkut, uma rede social associada ao Google que foi criada em 2004 e desativada em 2014. 12 Unidade I Figura 1 – Screenshot de uma página de comunidade do Orkut Também faz parte desse período o MSN Messenger, que não tem relação com o Messenger do Facebook. Era um sistema de troca de mensagens da Microsoft por meio do qual as pessoas podiam conversar com amigos e parentes. Tratava-se de algo similar ao atual WhatsApp, mas que podia ser usado apenas no PC. Para um usuário acessar o MSN, bastava que ele tivesse uma conta de e-mail do Hotmail. Observando a figura a seguir, podemos ver como era a interface da primeira versão do MSN, antes de ser repaginado por volta de 2005. Figura 2 – Tela de contatos do MSN 13 PROGRAMAÇÃO WEB RESPONSIVA O MSN evoluiu no tempo e, em 2010, passou ser chamado de Windows Live Messenger. Essa versão tinha uma aparência distinta da versão original. Nela, houve a inserção de diversos recursos novos. Naquela época, não havia a circulação das memes que temos hoje e boa parte do humor na internet era feita por meio de charges, muitas delas disponibilizadas em sites específicos e compartilhadas via e-mail. Um exemplo disso é o Humortadela, ilustrado na figura a seguir, um dos sites de humor mais famosos da época. Figura 3 – Screenshot do site Humortadela A UOL, uma empresa nacional de conteúdo, serviços e produtos da internet, tal qual a conhecemos atualmente, ainda não existia. No seu início, como podemos ver na figura a seguir, ela exibia uma mistura de assuntos, chats, anúncios e jogos, ou seja, tratava-se de um mix de situações diversas. 14 Unidade I Figura 4 – Screenshot da página UOL, em 2002 Nesse momento, o Cadê?, visualizado na figura a seguir, era um site de busca que representava uma alternativa brasileira ao Google. Ele foi comprado pelo Yahoo! e absorvido pelo buscador deles. Figura 5 – Screenshot da página Cadê? 15 PROGRAMAÇÃO WEB RESPONSIVA 1.2 Como funciona a web? Explicando de maneira objetiva, entrar em um site é como acessar um arquivo de outro computador por intermédio de algumas ferramentas. Nesse sentido, podemos visualizar,na figura a seguir, como funciona o fluxo de dados de forma simplificada e ignorando várias etapas intermediárias, mas sem que isso comprometa uma visão macro da situação. Browser Servidor Site Figura 6 – Esquema de funcionamento da web Digamos que, por exemplo, você esteja acessando um site que mostre fotos de gatinhos em seu celular. Para executar tal feito, seu celular instalou previamente um navegador, também chamado de browser. O navegador é um programa que tem como objetivo acessar e exibir páginas da web. Logo após acessar o navegador e digitar a URL desejada, que pode ser, por exemplo, www.fotosdegatinhos.com.br, o browser entra em contato com um servidor da web que procura os arquivos do site que estavam nele guardados. Em seguida, o servidor devolve ao navegador os arquivos solicitados. No entanto, o browser enxerga primeiramente a página HTML que veio com os arquivos e, a partir dela, ele acessa os outros arquivos. Após o navegador estar de posse dos arquivos é que você consegue manipulá-los e interagir com o site, ou seja, é possível baixá-los ou enviá-los de maneira visual e dinâmica, não importando a plataforma que esteja usando. 1.3 Preparando ambiente de trabalho Agora que já conhecemos um pouco da história que engloba a tecnologia com a qual iremos trabalhar, temos propriedade suficiente para aprendermos os primeiros passos no desenvolvimento web. Assim, prepararemos o nosso ambiente de trabalho utilizando ferramentas que irão propiciar maior produtividade ao desenvolvimento de nossas páginas web. A seguir, veremos um passo a passo dos primeiros contatos com a linguagem de forma didática e eficaz para o aprendizado. Siga-os tomando nota das explicações, quando necessário. 16 Unidade I 1.4 Ambiente de Desenvolvimento Integrado (IDE) – editores de texto É fundamental escolhermos adequadamente o IDE (Integrated Development Environment ou Ambiente de Desenvolvimento Integrado) com o qual iremos trabalhar no desenvolvimento de nossas habilidades, o que inclui a definição do editor de texto. Por mais que seja possível utilizar apenas o bloco de notas do Windows, isso não é recomendável, pois há uma grande possibilidade de erros inadvertidos aparecerem e passarem despercebidos. Existe uma gama enorme de IDEs. A seguir, listaremos os mais utilizados no mercado. Assim, será possível se enquadrar na versão que mais lhe agrade. No decorrer dos estudos, utilizaremos o ambiente do Microsoft Visual Studio Code. 1.4.1 Notepad++ O Notepad++ é uma ferramenta gratuita para editar código-fonte e que apresenta suporte para vários idiomas. Muitas pessoas avaliam o Notepad++ como um excelente editor, pois ele é simples e leve e cumpre o que promete de maneira rápida. Figura 7 – Opções para download do Notepad++ 1.4.2 Sublime O sublime é outro editor de texto muito utilizado no mercado. Trata-se de uma ferramenta bastante completa, que disponibiliza recursos capazes de facilitar a codificação de projetos. Muitos avaliam que sua única desvantagem se refere ao valor da licença, que custa cerca de 80 dólares. 17 PROGRAMAÇÃO WEB RESPONSIVA Figura 8 – Opções para download do Sublime 1.4.3 Microsoft Visual Studio Code O Visual Studio Code é uma versão mais leve do Microsoft Visual Studio voltada para o desenvolvimento web. Trata-se de uma ferramenta veloz e eficiente, que tem conexão direta com o GitHub, outra ferramenta muito poderosa de desenvolvimento e de versionamento de códigos. Há desenvolvedores que avaliam que o Microsoft Visual Studio Code é mais potente do que o Sublime e, além disso, tem a vantagem de ser distribuído gratuitamente. Com ele também é possível usar vários plugins para outras linguagens de programação, como, por exemplo, a linguagem Python. Figura 9 – Opções para download do MS-USC 18 Unidade I Saiba mais Neste material, utilizaremos como base a ferramenta do Microsoft Visual Studio Code, que pode ser adquirida gratuitamente por meio do seguinte site: Disponível em: https://code.visualstudio.com/. Acesso em: 19 abr. 2021. 1.5 Personalizando o editor Agora que apresentamos as principais ferramentas utilizadas no desenvolvimento web, chegou a hora de prepararmos o ambiente de trabalho. A tela inicial da ferramenta apresenta diversas opções, entre elas Color theme, que possibilita a alteração das cores do tema. Figura 10 – Tela inicial do Microsoft Visual Studio Code Por padrão, utilizaremos o tema Light (Visual Studio). Como essa configuração é apenas visual, é possível configurar o ambiente conforme suas próprias preferências. 19 PROGRAMAÇÃO WEB RESPONSIVA Figura 11 – Tela de escolha de tema do Microsoft Visual Studio Code 1.6 Criando o primeiro arquivo Para criar o primeiro arquivo no Visual Studio Code, selecione a opção “File” e depois “New File”, conforme mostrado na imagem a seguir. Figura 12 – Criação de novo arquivo no Microsoft Visual Studio Code Após a criação do novo arquivo, estamos com o ambiente pronto para trabalhar nos arquivos do nosso projeto. Nesse caso, o arquivo ainda não foi salvo e está com nome Untitled-1. Podemos salvá-lo com diversas extensões, sendo que as mais conhecidas são txt, php, HTML, css e js. As três últimas serão utilizadas com grande frequência no decorrer deste material. Figura 13 – Criação de novo arquivo no Microsoft Visual Studio Code 20 Unidade I Agora que você já está com o ambiente pronto para o desenvolvimento de seus projetos, podemos seguir à próxima etapa: iniciar a elaboração de páginas utilizando HTML. 2 INICIANDO COM O HTML5 2.1 O que é o HTML? A linguagem de marcação conhecida como HTML foi criada pelo físico e cientista da computação britânico Tim Berners-Lee. Seu acrônimo HTML significa: HyperText Markup Language, o que pode ser traduzido diretamente para o português como “Linguagem de Marcação de Hipertexto”. O HTML pode ser considerado o componente básico em uma página web, visto que ele possibilita inserir o conteúdo em um site. Isso estabelece uma estrutura que pode ser avaliada como fundamental, gerando significado para informações e as organiza dentro de uma página (FLATSCHART, 2011). De modo geral, podemos dizer que uma página web (ou webpage) é escrita utilizando-se o padrão HTML. O hipertexto é definido como um sistema ou documento composto de blocos de informação distintos, como textos, imagens, vídeos e sons, que podem ser interligados por meio de associações (FLATSCHART, 2011). Observe a seguinte situação: quando visitamos uma página web, percebemos diferentes tipos e tamanhos de informações, como títulos, parágrafos, imagens, vídeos e sons, dentre outros elementos. Tal estrutura é feita pelo HTML. No início da web, as páginas eram, de certa maneira, simples, pois continham somente uma espécie de esqueleto do HTML. Isso mudou muito. Hoje, podemos inserir nessas páginas elementos diversos, como JavaScript e Css, que ajudam a dar vida ao que visualizamos. Por meio do HTML, o navegador consegue fazer a leitura e renderizar os conteúdos dos arquivos, interpretando-os e devolvendo ao navegador algo que pode ser, de fato, compreendido pelo usuário final (MAZZA, 2014). De agora em diante, estudaremos os elementos que existem dentro de uma página web. De modo específico, nesta unidade, veremos as estruturas que compõem uma página HTML. 2.2 Criando o primeiro projeto Com sua IDE configurada e pronta para o trabalho, chegou a hora de entendermos o básico da estrutura do HTML. Para isso, vamos, detalhadamente, acrescentar recursos principais e explicar suas funções. Começaremos com um novo projeto. Na aba “File”, selecione a opção “New File” ou apenas use as teclas de atalho CRTL + N. Criaremos uma pasta com o intuito de armazenar o projeto. Para isso, em sua área de trabalho, crie uma pasta chamada projeto_html. Dentro dela, iremos salvar o novo arquivo que criamos anteriormente. 21 PROGRAMAÇÃO WEB RESPONSIVA Figura 14 – Criação de nova pasta na área de trabalho do Microsoft Windows No Microsoft VisualStudio Code, selecione as opções “File” e “Save As” e salve seu arquivo com o nome index e a extensão HTML, conforme mostrado na imagem a seguir. Observação No decorrer deste livro-texto explicaremos melhor porque utilizar o nome index.html. No momento, basta sabermos que arquivo inicial do projeto deve ter esse nome para que o servidor possa localizar o ponto de início do site. Figura 15 – Gravação do arquivo index.html no Microsoft Visual Studio Code 22 Unidade I 2.3 DOCTYPE Agora, já estamos prontos para começar a estruturar nosso código. Devemos lembrar que não apresentaremos neste livro-texto o termo programar quando estivermos falando de HTML, pois não se trata de uma linguagem de programação, mas de uma linguagem de marcação. Logo, nesse caso, temos uma linguagem que não executa comandos lógicos, ela apenas realiza alterações visuais sem complexidade. Começaremos com o DOCTYPE. Para isso, digite o comando indicado na figura a seguir. Figura 16 – DOCTYPE O DOCTYPE destina-se a ser uma marcação para o navegador e para outras ferramentas (Google, por exemplo) entenderem qual é o tipo de código que está sendo usado. No caso, significa dizer que o navegador irá escrever em HTML. 2.4 TAG <html> O HTML é estruturado de maneira hierárquica, de modo que um elemento é inserido em outro e assim sucessivamente, o que divide as tags. Elas são o equivalente aos comandos de linguagem de programação. Porém, no HTML, como dito anteriormente, não existem comandos, mas pontos de marcação, e esses recebem o nome de tag em blocos de fácil visualização. Logo, para efetivamente começarmos a escrever as tags dentro do arquivo HTML é necessário abrir a tag principal, que no caso é a tag <html>. Figura 17 – Abrindo e fechando a tag <html> Praticamente todas as tags utilizadas no HTML precisam ser abertas e fechadas, ou seja, devemos ter <inicio> e </fim> para diferenciar início de fim. De maneira mais simples, no </fim>, utilizamos o mesmo nome da tag, mas adicionando o caractere “/”. 23 PROGRAMAÇÃO WEB RESPONSIVA Dentro da tag <html> fica concentrado todo o restante da estrutura da página, como outras tags e outros elementos, que serão filhos da tag <html>. Observação Uma página HTML é composta de diversas tags, porém as tags <html> e </html> são responsáveis, respectivamente, pelo início e pelo fim de uma página. Portanto, todas as demais tags devem ser inseridas entre as tags de início e fim do HTML. 2.5 User-agents e atributo lang Os user-agents funcionam como usuários robôs dos navegadores ou de ferramentas de busca e fazem a varredura do conteúdo dos sites. Assim, quanto mais aderente a eles a página estiver, maior é a chance de o site ser recomendado por eles nos buscadores. Nesse sentido, dizemos aos user-agents qual é a linguagem nativa do documento, ou seja, em qual idioma os leitores do site encontram o conteúdo que nele está disposto. Para isso, utilizamos o elemento lang dentro da tag <html>. No entanto, é preciso salientar que não se trata de um elemento restrito à tag <html>, isto é, que pode ser usado a qualquer momento para indicar trechos do site em outro idioma, por exemplo. Figura 18 – Utilizando elemento lang dentro da tag <html> 2.6 TAG <head> O HTML pode ser comparado ao corpo humano, pois seus elementos base são cabeça e corpo. Nesse momento, concentraremos nossos esforços na cabeça. Dentro da cabeça do HTML, assim como no corpo humano, temos vários elementos inteligentes da página: eles são chamados de metadados. Para inserirmos esses dados inteligentes na página, precisamos, primeiramente, ter uma cabeça. Isso é feito pela inserção da tag <head>. 24 Unidade I Figura 19 – Abertura e fechamento da tag <head> 2.7 Metatag charset Havendo uma cabeça conseguiremos colocar os metadados necessários na página com o que chamamos em HTML de Metatag. Trata-se de tags que possuem metadados, mas que se diferenciam das demais, pois não necessitam ser fechadas. Começaremos com a Metatag charset. Figura 20 – Metatag charset A Metatag charset é responsável por informar ao navegador quais são os tipos de caracteres que a página utiliza, ou seja, os acentos e as pontuações necessários para escrever corretamente em português. Precisamos lembrar que utilizamos em nossa região demográfica o utf-8 como padrão, mas, dependendo da região do planeta, existem outros padrões. 2.8 TAG <title> Ainda, tratando de elementos especiais da nossa página, daremos um título (aquele nome que aparece na aba do navegador). Para isso, utilizaremos a tag <title>. 25 PROGRAMAÇÃO WEB RESPONSIVA Figura 21 – Tag <title> Se quisermos ver a alteração feita na página, precisaremos salvar o arquivo. Para isso, no menu “file”, selecione a opção “salvar”, ou apenas utilize as teclas de atalho “Ctrl+S”. Note que na pasta onde criamos o projeto aparece um arquivo chamado de index.html, que será lido automaticamente pelo navegador principal instalado em seu computador. No caso da máquina aqui utilizada é o Chrome, mas poderia ser qualquer navegador. Figura 22 – Arquivo index.html dentro da pasta do projeto Se você clicar no arquivo index.html, o navegador será aberto e será apresentada a página inicial do projeto. Até o momento, ela está em branco, mas podemos perceber que a aba do navegador exibirá a mensagem que foi inserida dentro da tag <title>. Portanto, o título da página que foi criada. 26 Unidade I Figura 23 – Arquivo index.html aberto no navegador 2.9 TAG <body> Já tratamos da cabeça do HTML. Agora, partiremos para o corpo utilizando a tag <body>. Efetivamente, o conteúdo da página ficará dentro da tag <body>. Pelo fato de a página ainda não possuir a tag <body>, quando o arquivo index.html foi aberto na sessão anterior, ela não apresentou nenhum conteúdo. A partir desse momento, focaremos em inseri-lo. Na tag <body> entrarão todos os elementos que o usuário do site de fato vai visualizar na página, por exemplo, textos, tabelas, artigos e imagens. Figura 24 – Tag <body> vazia Podemos escrever dentro da tag <body> e verificar no navegador se algo acontece na página. Para isso, digitamos um texto qualquer dentro da tag <body>. Figura 25 – Texto não formatado dentro da tag <body> Ao executarmos a página index.html no navegador ou ao atualizarmos o navegador com ela aberta, poderemos notar que o texto digitado já aparecerá no corpo da página. Logicamente, ele ainda não estará formatado. No entanto, iremos, nas próximas etapas, aprender a formatá-lo e a configurar novas tags para deixarmos a página com visual mais atraente. 27 PROGRAMAÇÃO WEB RESPONSIVA Figura 26 – Apresentação de texto não formatado dentro da tag <body> Adicionaremos outra linha ao texto que foi inserido dentro da tag <body>, conforme mostrado na imagem a seguir. Figura 27 – Texto não formatado com duas linhas dentro da tag <body> Agora ao executarmos ou ao atualizarmos a página index.html no navegador, notaremos que os textos inseridos nas linhas 8 e 9 do bloco de códigos da página index.html foram apresentados na mesma linha dentro do navegador. Isso se dá porque estamos trabalhando com um texto não formatado. Há algumas tags que podem ser utilizadas para melhor formatação e padronização do texto nas páginas HTML. Figura 28 – Apresentação de texto não formatado com duas linhas dentro da tag <body> 2.10 TAG <p> Introduziremos nosso primeiro parágrafo ao projeto. Agora, não deixaremos o texto sem formatação, pois ele deixará de estar no meio da tag <body> e passará a ficar dentro de um parágrafo, no caso, tag <p>. Figura 29 – Utilização da tag <p> A tag <p> é utilizada na criação de parágrafos e ajuda o navegador a entender do que se trata exatamente aquele trecho de texto. Note que abrimos e fechamos a tag na mesma linha. 28 Unidade I Figura 30 – Site em execução após inserir a tag <p> Inseriremos outro parágrafo em nossa página, a fim de acrescentarmos informações. Já fizemos isso anteriormente, mas sem utilizar um parágrafo dentrodo <body>. Agora, faremos conforme mostrado na figura a seguir. Figura 31 – Utilização de dois parágrafos dentro do <body> O site em execução após a utilização dos dois parágrafos ficará da forma mostrada a seguir. Figura 32 – Site em execução após a inserção da segunda tag <p> Vemos que cada parágrafo utiliza o seu próprio espaço. Logo, usam-se dois parágrafos para inserir informações em duas linhas distintas. Iremos abordar posteriormente tags para a quebra de linha e outras parametrizações, mas é importante que entendamos o funcionamento da tag <p>, pois ela é muito utilizada. 2.11 TAG <span> O próximo elemento que podemos colocar em nosso site, pensando no futuro, é também associado a um container. Um container é um bloco isolado do resto de outros elementos, assim como em um navio cargueiro no qual existem vários containers que levam produtos diferentes. Figura 33 – Utilização da tag <span> 29 PROGRAMAÇÃO WEB RESPONSIVA Podemos notar que, nesse momento, visualmente a tag <span> não altera nada em nossa página. Mais adiante, iremos utilizá-la quando abordarmos os conceitos relativos ao CSS (Cascading Style Sheets ou Folhas de Estilo em Cascata). Veremos que elas podem criar identidades visuais para cada bloco <span> que tivermos. 2.12 TAG <strong> Se for necessário deixar alguma parte do texto em negrito, usamos a tag <strong> para cumprir essa função. Figura 34 – Utilização da tag <strong> Note que, ao atualizar o seu navegador (ou apertar F5), a palavra “pizzas” aparece em negrito. Figura 35 – Site em execução com utilização da tag <strong> 2.13 TAG <em> Caso você precise utilizar o recurso itálico no texto, existe a tag <em> para cumprir essa função. Figura 36 – Utilização da tag <em> Observe no seu navegador que a palavra “parágrafo” ficou em itálico. Figura 37 – Site em execução com utilização da tag <em> 30 Unidade I Veja também que, durante a produção do código, é necessário tomar cuidado com a indentação, ou seja, com os espaços que antecedem o código, para que sua visualização seja melhor identificada. Figura 38 – Código-fonte indentado Veja que a tag <html> está alinhada com o seu fechamento </html>. Enquanto a tag <head> está alinhada com o seu fechamento </head>. Já a tag <body> está alinhada com o seu fechamento </body>. A esse alinhamento entre as tags ou mesmo dentro de um bloco de código em alguma linguagem de programação, damos o nome indentação. 2.14 TAG <h> Para inserirmos títulos e subtítulos, temos a tag <h>. Devemos ressaltar que ela sempre deve ser adicionada na tag <body>, como mostrado no código a seguir. Figura 39 – Exemplo de utilização da tag <h1> Note no seu navegador que a palavra “Pizzas”, que foi inserida dentro da tag <h1>, ficou com um padrão diferente de um parágrafo comum, ela está com o estilo de um título. Figura 40 – Site em execução com a utilização da tag <h1> 31 PROGRAMAÇÃO WEB RESPONSIVA Quando falamos de títulos e de subtítulos podemos percorrer a tag <h>, indo de <h1> até <h6>, sendo que <h1> é o título com maior nível hierárquico e <h6> é o menor subtítulo. Figura 41 – Exemplo de utilização da tag <h1> até a tag <h6> Observe no seu navegador que, além de títulos, foram criados subtítulos em cada uma das tags. Figura 42 – Execução no navegador de exemplo de utilização da tag <h1> até a tag <h6> Intercalaremos parágrafos aos títulos e subtítulos que criamos. Para isso, fazemos uma mescla das tags utilizadas para trabalhar com texto. 32 Unidade I Figura 43 – Exemplo intercalando tags de texto Ao atualizar o site no navegador, você, provavelmente, terá algo parecido com o que se apresenta a seguir. Figura 44 – Execução no navegador de exemplo intercalando tags de texto 33 PROGRAMAÇÃO WEB RESPONSIVA 2.15 TAG <br> Por enquanto, o site ainda não é bonito e muito menos responsivo, mas isso ocorre porque estamos apenas começando nossos estudos sobre o HTML. Um recurso que você pode estar querendo adicionar ao projeto é a tecla “Enter” no texto, ou seja, trata-se de responder à seguinte pergunta: como podemos fazer para pular linhas? A tag responsável por fazer isso é a tag <br>. Veja que ela não precisa ser fechada. Figura 45 – Exemplo de utilização da tag <br> Observe, na figura a seguir, a diferença vista no navegador em comparação ao que tínhamos anteriormente em nossa página. Obviamente, quanto mais tags <br> inserirmos, mais espaço daremos. Figura 46 – Execução da página com exemplo de utilização da tag <br> 2.16 TAG <header> Para melhorar a visualização de nosso texto, podemos utilizar a tag <header>, que não deve ser confundida com a tag <head>, pois sua função é completamente diferente. O <header> nada mais é do que um cabeçalho que antecede um texto ou um formulário. Utilizá-lo deixa o código limpo e eficiente. Devemos ressaltar que essa tag se situa dentro do <body>. 34 Unidade I Figura 47 – Exemplo de utilização da tag <header> Verificamos que, visualmente, a tag <header> em nada altera a nossa página. No entanto, como mencionado, ela deixa o código mais limpo e estruturado e auxilia os user-agents na classificação do conteúdo da página nos buscadores da internet. 2.17 TAG <section> Para dividir nosso texto em seções bem definidas, existe o elemento <section>, que representa uma seção dentro de um documento, por exemplo, uma parte de um texto que terá outras etapas posteriormente. Comumente, é colocado um título dentro da seção para diferenciá-la das outras. Figura 48 – Exemplo de utilização da tag <section> O tag <section> é mais um elemento que visualmente não tem efeitos significativos, mas que, dentro do código, serve para fins de organização e auxilia os user-agents na classificação do conteúdo. 2.18 TAG <article> Utilizamos o elemento <article> na hora de elaborar algum conteúdo que não precisa ter ligação direta com outro para fazer sentido em um documento HTML, como, por exemplo, um artigo de blog ou uma postagem em rede social. Figura 49 – Exemplo de utilização da tag <article> A tag <article> é outro elemento que não tem efeitos visuais, mas que, dentro do código, serve para fins de organização e auxilia os user-agents na classificação do conteúdo. 35 PROGRAMAÇÃO WEB RESPONSIVA Agora que já conhecemos as principais tags utilizadas no desenvolvimento de uma página HTML, vamos ver, na figura a seguir, como ficou a nossa página index.html. Figura 50 – Código-fonte da página index.html atualizado Visivelmente, não conseguimos notar a diferença entre o que é um artigo, uma seção ou um cabeçalho. Mas essa falta de percepção irá acabar logo. No nosso primeiro site, estamos experimentando elementos que são fundamentais, mas as tags estudadas serão importantíssimas no momento em que tivermos um aprofundamento maior no desenvolvimento de nossas páginas web em HTML. A seguir, podemos ver a página web que criamos, que é exatamente aquela devida ao código-fonte mencionado na figura anterior. 36 Unidade I Figura 51 – Execução da página index.html atualizado 3 AVANÇANDO COM O HTML5 3.1 Criando links Além das formas básicas aqui expostas para alterarmos textos, há outras maneiras de realizarmos tais modificações. Muitas vezes, temos a necessidade de ligar um conteúdo a outro (ou uma página a outra). Para fazermos isso, precisamos de algum elemento de hyperlink. Um deles é a tag <a>, cujos principais atributos são: • href: indica uma URL que será carregada. • target: indica onde a página será carregada (se na mesma janela do navegador ou em outra). • name: indica links dentro da própria página (por exemplo, ao clicar no link “voltar ao topo”, você será remetido para um elemento no topo da página). 37 PROGRAMAÇÃO WEB RESPONSIVA Lembrete Nesta etapa do projeto básico de uma página HTML, utilizaremos os conceitos abordados no tópico anterior, que incluem as tags <html>, <head> e <body>, entre outras. Dentro da pasta do projeto criada anteriormente, criaremos uma subpasta chamada de “Páginas”. Figura52 – Criação de pasta chamada de “Páginas” Dentro da pasta “Páginas”, criaremos um arquivo HTML sem precisar do Microsoft Visual Studio Code. Para isso, geraremos um arquivo TXT e mudaremos a sua extensão. Clique com o botão direito do mouse em qualquer lugar da tela dentro da pasta “Páginas” e selecione a opção “Novo” e depois “Documento de Texto”, conforme figura a seguir. Figura 53 – Criação de arquivo fora do Microsoft Visual Studio Code 38 Unidade I Colocaremos o nome “sabores”. Figura 54 – Renomear o arquivo para “sabores” Observação Estamos elaborando o arquivo fora do Microsoft Visual Studio Code para mostrar que podemos criar arquivos HTML utilizando um simples editor de texto. Se você estiver usando outro sistema operacional, poderá utilizar o editor de texto padrão do sistema. Altere o modo de exibição do Windows para “Detalhes”, conforme imagem a seguir, e verifique que o arquivo “sabores” que criamos tem extensão (tipagem) de documento de texto. Figura 55 – Alteração de modo de exibição dos arquivos do Windows Após alterarmos a visualização dos arquivos do Windows, podemos confirmar que o arquivo “sabores” é do tipo documento de texto, conforme mostrado na sequência. Figura 56 – Exibição do arquivo “sabores” dentro da pasta “Páginas” do projeto Agora, entre no arquivo sabores.txt que acabamos de criar e vá na opção “Arquivo” e depois “Salvar Como” do Bloco de Notas, conforme mostrado a seguir. 39 PROGRAMAÇÃO WEB RESPONSIVA Figura 57 – Opções do Menu “Arquivo” do Bloco de Notas Vamos alterar o tipo de arquivo para “Todos os arquivos”, conforme mostrado a seguir. Figura 58 – Alteração do tipo do arquivo Após modificarmos para “Todos os arquivos”, alteraremos o nome do nosso arquivo para sabores.html, inserindo a extensão HTML ao nome. Ao fazermos isso, vincularemos o arquivo à tipagem HTML. 40 Unidade I Figura 59 – Alteração da extensão do nome do arquivo para HTML Vemos que foi criado um segundo arquivo, o sabores.html. Excluiremos o arquivo sabores.txt criado inicialmente, deixando apenas o arquivo sabores.html na pasta “Páginas” do nosso projeto. Figura 60 – Exibição de arquivo sabores.html com sabores.txt criado anteriormente Editaremos o nosso arquivo utilizando o Bloco de Notas para mostrar que podemos editar um arquivo HTML com um editor de arquivos simples. Faremos isso uma única vez neste livro-texto, pois, nas demais alterações e criações de arquivos, utilizaremos a ferramenta Microsoft Visual Studio Code. Clique com o botão direito do mouse no arquivo sabores.html, selecione a opção “Abrir com” e depois “Bloco de notas”, conforme mostrado na imagem a seguir. Figura 61 – Abrindo arquivo sabores.html com Bloco de Notas 41 PROGRAMAÇÃO WEB RESPONSIVA Criaremos a estrutura básica de um arquivo HTML dentro do nosso arquivo sabores.html, conforme aprendemos até aqui, ou seja, inserindo as tags <html>, <head>, <body>, <title> e <h1>. Figura 62 – Página sabores.html editada no Bloco de Notas Após salvar o arquivo, execute-o no navegador. Veja que o navegador irá exibir uma página que tem um título na aba superior e uma tag <h1>, também utilizada para título, mas dentro do corpo da página. Figura 63 – Página sabores.html executada no navegador Se abrirmos o arquivo sabores.html com o Microsoft Visual Studio Code, clicando com o lado direito do mouse em sabores.html e selecionando a opção “Abrir com” e depois “Visual Studio Code”, notaremos que o nosso arquivo tem a estrutura que criamos no Bloco de Notas. No entanto, o Visual Studio Code possui indentações, contagem de linhas e diversos recursos que nos auxiliam quando trabalhamos com páginas HTML. Portanto, de agora em diante, trabalharemos em nossos projetos apenas com o Microsoft Visual Studio Code. 42 Unidade I Figura 64 – Página sabores.html aberta no Microsoft Visual Studio Code Agora, voltamos a editar o arquivo index.html para começarmos a trabalhar com links. Primeiramente, faremos o link entre páginas diferentes. Dentro do <body>, coloque o código indicado na figura a seguir. Figura 65 – Link na página index.html que aponta para a página sabores.html Note que dentro da tag colocamos o caminho segundo o qual se encontra a página que queremos acessar. Em seguida, inserimos um nome para o link e fechamos a tag <a>. Se, por um acaso, trocarmos de local, a página (ou talvez o nome dela), o link não funcionará. Figura 66 – Página index.html executada no navegador Observe que, ao clicarmos no link, seremos levados diretamente para a página “sabores”. No entanto, a página index é substituída pela “sabores”. Caso a intenção seja abrir uma nova aba com a página “sabores”, deixando ainda aberta a página index, precisaremos adicionar o elemento target no link, conforme mostrado na imagem a seguir. 43 PROGRAMAÇÃO WEB RESPONSIVA Figura 67 – Elemento target adicionado ao link Note que, ao clicarmos no link, a página “sabores” será aberta em uma nova aba. Figura 68 – Página sabores.html aberta por meio do link que utiliza elemento target De agora em diante, vamos trabalhar de uma maneira diferente com links: criaremos um link para nossa própria página. Você já deve ter notado que a nossa página index já está grande o suficiente para aparecer uma barra de rolagem em sua lateral. Isso significa que, em determinado momento, podemos querer que o usuário vá direto a determinado ponto da página que ele pode não ter visualização no momento por conta da barra de rolagem. Para isso, criamos um link âncora e depois um link que chama a âncora. Vamos por partes. Inicialmente, coloque a âncora mostrada a seguir no código, logo depois do <body>. Figura 69 – Link âncora criado no início da página, logo após a abertura do <body> Note que, pela primeira vez, utilizamos o recurso comentário dentro de nosso código. Ao escrevermos dentro do <!-- e do -->, fizemos um comentário no código, que não será exibido na página, mas que ajudará quem posteriormente ler o código a entender o motivo de aquela tag estar ali. Depois, coloque o código indicado na figura a seguir antes do final do <body>. Figura 70 – Link para a âncora criada no fim da página Veja que foi criado um link no final da página com o texto “Vai para o topo da página”. Ao clicarmos nele, seremos direcionados para a âncora que criamos anteriormente com o nome topo. Veja que o “#topo” criado no link dentro do <href> vai diretamente para a referência topo que criamos na âncora. 44 Unidade I Figura 71 – Site em execução com link para o âncora no fim da página Podemos também fazer o link com uma página de algum outro site específico. Para isso, utilizamos um recurso bem parecido com o que foi usado no início na página “sabores”. No entanto, em vez de usarmos esse caminho, colocaremos o link da web para outro site, conforme código mostrado na figura a seguir. Figura 72 – Link para página externa Observe que utilizamos a tag <br>, pois, se tivéssemos inserido apenas os links, eles ficariam encavalados um ao lado do outro. Ao testar o link, seremos redirecionados para uma nova aba do navegador com o site externo em execução. Figura 73 – Página em execução com links criados 45 PROGRAMAÇÃO WEB RESPONSIVA 3.2 Lista ordenada Agora que o site já tem uma página exclusiva para os sabores de pizzas, podemos listar todos os sabores desejados. Para isso, utilizaremos os elementos <ol> e <li> a fim de montarmos uma lista numerada dentro da página de sabores, conforme código mostrado na figura a seguir. Figura 74 – Criação de uma lista de sabores de pizzas na página sabores.html Como resultado, no nosso navegador teremos uma lista bem completa de sabores de pizzas, conforme mostrado na figura a seguir. 46 Unidade I Figura 75 – Site em execução com lista de sabores na página sabores.html 3.3 Lista não ordenada Agora que já aprendemos a fazer listas numeradas, ou ordenadas, podemos também fazer listas não numeradas utilizando os elementos <ul> e <li>. Nesse sentido, veja o código mostradona figura a seguir, ainda na página “sabores”. Figura 76 – Criação de uma lista de sabores não ordenada em sabores.html 47 PROGRAMAÇÃO WEB RESPONSIVA Temos, assim, uma lista não numerada (não ordenada) de sabores de pizza doces, conforme mostrado na figura a seguir. Figura 77 – Site em execução com lista de sabores não ordenada na página sabores.html 4 APROFUNDANDO COM O HTML5 4.1 Lista de links Com o conhecimento adquirido até o momento, você deve estar se perguntando: e se eu quiser fazer uma lista de links? Isso é possível, mas, para tanto, precisamos articular alguns conceitos que aprendemos. Para fazê-lo, utilizamos o elemento <nav>. Dentro da página index.html, criaremos uma lista de links conforme mostrado no código da figura a seguir. Figura 78 – Lista de links dentro da página index.html 48 Unidade I Podemos declarar o <nav> em qualquer lugar que contenha uma lista de links. Ele representa uma seção na página que aponta para outras áreas ou páginas. Figura 79 – Página index.html executada no navegador com lista de links 4.2 TAG <aside> Quando utilizamos uma lista de links relacionada com o conteúdo que estamos discutindo na página, que poderia ser separado do conteúdo principal, mas que apresenta uma ligação tangencial com tal conteúdo, usamos o elemento <aside>. Muitas vezes, quanto precisamos escrever um glossário ou os links relacionados, também empregamos esse recurso, que visualmente não muda a aparência do conteúdo, mas diz ao navegador do que se tratam os links. Figura 80 – Tag <aside> que visualmente não altera nada na página 4.3 TAG <main> O elemento <main> diz para o navegador qual é o conteúdo principal, de maior relevância, do site. Uma página bem construída possui apenas um elemento <main>. O uso dessa tag também não gera efeitos visuais aparentes. Contudo, trata-se de um elemento de extrema importância para o Google, por exemplo, pois ele conseguirá saber qual é o conteúdo principal da sua página. Como no nosso caso o conteúdo principal refere-se às pizzas, deixaremos o <main> da forma apresentada na figura a seguir. 49 PROGRAMAÇÃO WEB RESPONSIVA Figura 81 – Tag <main> que visualmente não altera nada na página 4.4 Imagens Agora, chegamos a uma etapa bastante aguardada, começaremos a inserir imagens no nosso site. Para isso, utilizaremos a tag <img>, que apresenta as seguintes características: • src: aponta o caminho da imagem nas pastas do projeto do seu site. • alt: utilizado por deficientes visuais e/ou quando a imagem não é carregada corretamente no site. Trata-se de um recurso específico no qual a imagem é descrita por um texto. • height: insere a altura da imagem na página. Trata-se de um recurso de extrema importância para o navegador alocar previamente um espaço à imagem ser carregada. • width: define a largura da imagem. Trata-se também de um recurso de extrema importância para o navegador alocar previamente um espaço à imagem ser carregada. É necessário ressaltar que existia ainda o elemento <border>. Entretanto, esse recurso foi descontinuado no HTML5 e, por enquanto, funciona somente no navegador Mozilla Firefox. Para começarmos nosso trabalho com imagens, retornaremos à pasta do nosso projeto e criaremos uma subpasta para elas. Essa nova pasta será chamada de “Imagens”, conforme mostrado na figura a seguir. Figura 82 – Criação de uma pasta para o armazenamento das imagens do site 50 Unidade I Precisaremos fazer o download de alguma imagem para inserir em nossa página. Você pode utilizar uma imagem de sua preferência ou seguir os passos desenvolvidos a seguir para conseguir uma. Saiba mais A fim de adquirir imagens gratuitas, acesse o site a seguir. Disponível em: https://pixabay.com/. Acesso em: 19 abr. 2021. Figura 83 – Site pixabay.com, próprio para fazer download de imagens gratuitas É possível digitar a palavra “pizza” na barra de busca do site. Com isso, você será direcionado para outra página do site, que disponibiliza centenas de imagens de pizzas, conforme mostrado na figura a seguir. Figura 84 – Busca por pizza no site Pixabay 51 PROGRAMAÇÃO WEB RESPONSIVA Escolha a imagem que queira utilizar no site e clique nela. Você será direcionado para outra página na qual aparecerá apenas a imagem selecionada. Figura 85 – Imagem da pizza escolhida no site Pixabay Ao lado direito, aparecerá o botão “Free Download”. Clique nele para fazer o download da imagem selecionada. Na sequência, irá surgir a opção para escolher a resolução da imagem. Escolha a menor disponível, pois, quanto maior for a resolução da imagem, mais lenta a página ficará. Figura 86 – Imagem da pizza escolhida no site Pixabay Opte, no caso, pela resolução 640x426. Caso não apareça exatamente essa resolução, selecione, como dissemos, a menor resolução possível. A imagem ficará disponível na pasta de downloads do Windows, conforme mostrado na figura a seguir. Figura 87 – Pasta de downloads do Windows após efetuar o download da imagem selecionada 52 Unidade I Clique com o botão direito do mouse na imagem, selecione a opção renomear e renomeie-a para pizza1. Note que, nos detalhes, podemos verificar que ela é do tipo jpg, conforme mostrado na coluna “Tipo” da figura a seguir. Figura 88 – Pasta de downloads do Windows após renomearmos para pizza1 a imagem selecionada Copiaremos essa imagem para a pasta de imagens que criamos dentro da pasta do nosso projeto. Finalizada essa cópia, nossa pasta de imagens ficará da seguinte maneira. Figura 89 – Pasta de imagens do projeto Agora que já escolhemos uma imagem para o site, iremos inserir o código mostrado na figura a seguir no início da tag <body> do arquivo index. Figura 90 – Link para a imagem pizza1.jpg dentro da página index.html Assim, ao atualizarmos nosso navegador, notaremos a presença da imagem que colocamos na pasta, conforme mostrado na figura a seguir. 53 PROGRAMAÇÃO WEB RESPONSIVA Figura 91 – Página index.html executada após a inserção da imagem Caso seja necessário, altere os valores de tamanho e de largura para ajustar o tamanho da imagem corretamente no seu site. Ao longo dos próximos tópicos, será ensinado como fazemos para colocar a imagem como background. Abordaremos essa situação quando estivermos estilizando as páginas com o uso do CSS3. 4.5 TAG <figure> Já que colocamos uma imagem, é necessário dizer ao navegador do que se trata tal inserção. Então, utilizaremos o elemento <figure>, conforme mostrado na figura a seguir. Figura 92 – Tag <figure> Visualmente, a tag <figure> não altera nada na página. Assim, usaremos o elemento <figcaption> para adicionarmos também uma descrição a ela. Figura 93 – Tag <figcaption> 54 Unidade I Após inserirmos o <figcaption>, nossa página index.html ficará conforme mostrado na figura a seguir. Figura 94 – Site em execução no navegador após inserirmos o elemento 4.6 TAG <footer> Estamos já na finalização de nosso primeiro contato com o HTML. Logo, chegou o momento de aprendermos a colocar as informações que ficam no rodapé do site, local onde geralmente estão o nome do criador, os direitos, o ano e as informações adicionais. O elemento que usamos para isso é o <footer>. Ele se encontra no final da página, conforme mostrado na figura a seguir. Figura 95 – Tag <footer> no final da tag <body> da página index.html Ao final da página index.html, encontraremos os dados inseridos dentro do elemento <footer>. Precisamos lembrar que os dados que vemos aparecem pelo fato de eles estarem dentro das tags <p>, visto que o <footer> visualmente não altera em nada a página. Trata-se mais de uma tag que refina a página e serve como referência para os user-agents localizarem a página nos navegadores e nos buscadores. 55 PROGRAMAÇÃO WEB RESPONSIVA Figura 96 – Final da página index.html em execução Nosso site ainda apresenta um visual retrô, dos anos de 1990. Por enquanto não faz muita diferença colocarmos as informações no <footer>, pois parecem apenas mais dados do site. Contudo,quando começarmos a trabalhar o visual da nossa página, o <footer> fará todo o sentido. 4.7 TAG <time> O HTML apresenta também uma tag para o tempo, a tag <time>. Já que colocamos no <footer> a data de publicação do site, nada mais justo do que dizer para o navegador que essa informação não é apenas um texto, mas sim uma data. Figura 97 – Tag <time> Nesse momento, a tag <time> não muda o visual observado no navegador. 4.8 TAG <cite> e TAG <q> Enquanto elaboramos nosso site, pode ser necessário o uso de material de terceiros, e esse precisa ser referenciado. Nesse sentido, podemos fazer citações a conteúdos que não foram escritos pelo autor principal. Para isso, normalmente utilizamos o elemento <cite> em conjunto com <q>, responsável por apresentar o conteúdo retirado de outra fonte. Figura 98 – Tags <q> e <cite> Ao executarmos a página index.html após a inserção das tags <q> e <cite>, teremos o resultado mostrado na figura a seguir. 56 Unidade I Figura 99 – Site em execução no navegador utilizando as tags <q> e <cite> 4.9 Links em imagens Em determinado momento, podemos querer associar imagens do nosso site a conteúdos que se encontram fora de nossa página. Para vermos como isso pode ser feito, vamos voltar a trabalhar com a imagem da pizza, associando-a a um link que irá direcionar o leitor à página que remete ao conteúdo adicional da imagem. Figura 100 – Link para a página sabores.html dentro da imagem pizza1.jpg Note que trabalhamos bastante com a imagem da pizza. Por meio de pequenas alterações, fomos agregando elementos que deram novas funcionalidades ao nosso conteúdo. Veja o fluxo que seguimos até o momento na figura a seguir. <figure> <figure> <a> </figure> </figure> </a> <figure> </figure> <img> <img> <img> <img> <figcaption> </figcaption> <figcaption> </figcaption> Figura 101 – Fluxograma explicando código da tag <figure> Observe que agora, em seu navegador, ao passar o mouse pela imagem, aparece aquela conhecida “mãozinha”, que significa que aquilo é um link clicável. Então, ao clicar, você será redirecionado para outra página. 57 PROGRAMAÇÃO WEB RESPONSIVA Neste passo, a seu critério, é possível utilizar o atributo target=“_blank” para abrir o link em outra aba. 4.10 Trabalhando com tabelas Em determinado momento, precisaremos utilizar tabelas para descrever algum conteúdo. A forma mais prática de fazermos isso é com o uso da tag <table> em conjunto com as tags <tr>, <th> e <td>. Lembrete Vale lembrarmos as funções das tags descritas a seguir. • tag <tr>: define uma linha da tabela. • tag <th>: define uma célula de título. • tag <td>: define uma célula da tabela. Coloque o complemento mostrado na figura a seguir na página “sabores”. Figura 102 – Criação de tabela dentro da página sabores.html Podemos observar o resultado obtido no nosso navegador. Vemos que o conteúdo está descentralizado. Entretanto, vamos arrumar isso quando trabalharmos com o CSS3, na próxima unidade deste livro-texto. 58 Unidade I Figura 103 – Trecho final da página sabores.html executado no navegador, com ênfase na tabela desenvolvida 4.11 TAG <div> Você lembra quando falamos de seções? Pois bem, a tag <div> é responsável por dividir nossa página em seções. Ela faz divisões não apenas no texto, mas em todo o conteúdo, ou seja, pode ser usada como forma de particionar o nosso conteúdo. Esse elemento será fundamental quando estudarmos o framework Bootstrap. Figura 104 – Implementação da tag <div> na página index.html 59 PROGRAMAÇÃO WEB RESPONSIVA Visualmente, ainda não é possível ver as mudanças no navegador, mas, assim que aprendermos o CSS, conseguiremos padronizar essas tags de maneira personalizada e individualizada. 4.12 TAG <font> Em HTML, temos uma tag para definir a formatação das fontes de nossas páginas. Embora atualmente não seja comum padronizar as famílias de fontes e de estilos dentro do HTML, veremos, posteriormente, que o CSS3 é utilizado para esses fins e iremos abordar aqui as padronizações básicas possíveis dentro do HTML. Dentro da página index.html, logo após a tag <figure> criada anteriormente, inseriremos o parágrafo mostrado na figura a seguir. Figura 105 – Implementação da tag <font> na página index.html Ao executarmos nossa página no navegador, veremos o resultado mostrado na figura a seguir. Note que o tipo, o tamanho e a cor da fonte foram alterados no parágrafo inserido. Figura 106 – Página index.html executada no navegador após inserção do parágrafo com padronização de fonte 4.13 Style background color Podemos alterar a cor de diversos elementos. Começaremos com o fundo de nossas páginas dentro do HTML. Apesar de essa configuração normalmente ser feita dentro do CSS3, mostraremos, a seguir, como fazê-la diretamente no HTML. 60 Unidade I Acesse a página sabores.html e faça a alteração mostrada na figura a seguir. Figura 107 – Alteração da cor de fundo dentro do body da página sabores.html Após realizar a alteração no <body>, ao executar a página no navegador, teremos o resultado mostrado na figura a seguir. Figura 108 – Página sabores.html executada no navegador após a alteração da cor de fundo Podemos alterar a cor do background de outros elementos, como, por exemplo, o elemento <h1>, conforme mostrado no código da figura a seguir. Figura 109 – Alteração da cor de fundo dentro do elemento <h1> Após realizarmos a alteração no elemento <h1>, ao executar a página no navegador, teremos o resultado mostrado na figura a seguir. 61 PROGRAMAÇÃO WEB RESPONSIVA Figura 110 – Página sabores.html executada no navegador após a alteração da cor de fundo do elemento <h1> Para finalizarmos a alteração de cores dentro do HTML em nosso material, lembrando que outros elementos, além dos mencionados, podem ter a cor do background mudada, alteraremos a cor de uma tabela. Portanto, na página sabores.html, iremos modificar a cor da tabela que criamos anteriormente. Figura 111 – Alteração da cor de fundo dentro do elemento <table> Após realizarmos a alteração no elemento <table>, ao executarmos a página no navegador, teremos o resultado mostrado na figura a seguir. 62 Unidade I Figura 112 – Página sabores.html executada no navegador após a alteração da cor de fundo do elemento <table> 4.14 Explicações sobre o código das cores Vamos agora entender um pouco mais sobre a tabela de cores que utilizamos em nossas páginas HTML. Abriremos o Paint 3D do Windows 10, conforme mostrado na figura a seguir. Figura 113 – Tela inicial do Microsoft Paint 3D do Windows 10 63 PROGRAMAÇÃO WEB RESPONSIVA No canto inferior direito, você vai encontrar um botão chamado de “Adicionar cor”. Clique nele e será direcionado para a tela mostrada na figura a seguir. Figura 114 – Opção de adicionar cor na paleta do Microsoft Paint 3D do Windows 10 Note que foi aberta uma janela que disponibiliza várias informações sobre cores, aí está o segredo das cores. Ao arrastarmos o quadradinho mostrado na figura a seguir para outro lugar, teremos outra cor e outros códigos irão aparecer. Vamos entender, em breve, o motivo de isso acontecer. Figura 115 – Opção de adicionar cor na paleta do Microsoft Paint 3D do Windows 10 após alteração de cor Para nosso exemplo, escolhemos um tom de rosa que tem determinados códigos. A fim de entendê-los, é necessário sabermos que a quantidade total de tons de cada cor é especificamente 255. Assim, as cores que trabalhamos são o tão falado trio RGB, que são tons de vermelho, verde e azul, que nada mais são do que as cores primárias. 64 Unidade I Para um vermelho puro, temos R = 255; G = 0; B = 0. Faça o teste no Paint e veja qual cor aparece se colocarmos 255 no vermelho, 0 no verde e 0 no azul. Figura 116 – Opção de adicionar cor na paleta do Microsoft Paint 3D do Windows 10 após a alteração de cor para vermelho Note que, além de a cor mudar para o vermelho mais puro, digamos assim, aquele campo chamado de “Hexa” mudou. Vamos entender como isso funciona. Os códigosde cores HTML possuem seis valores hexadecimais. No caso do exemplo, temos F249A3. Tais letras representam 2 para o vermelho, 2 para o verde e 2 para azul, ou seja, F2 é a quantidade de vermelho, 49 é a quantidade de verde e A3 é a quantidade de azul. Os valores começam a partir de 00 e vão até o FF, pois, de acordo com os números hexadecimais, só é possível contar de 0 até F. No CSS3, será possível trabalharmos com três tipos de códigos para chamarmos as cores, poderemos chamá-las pelo nome, pelo código RGB ou por seu código Hexa. Nos exemplos anteriores, em que alteramos o background color, eles foram alterados pelo nome, mas poderíamos ter utilizado o código RGB ou mesmo o Hexa. Figura 117 – Tabela de cores 65 PROGRAMAÇÃO WEB RESPONSIVA Saiba mais Para conhecer diversas cores extras com seus respectivos nomes, códigos hexadecimais e códigos RGB, acesse: CELKE. Tabela de cores HTML (nome, hexadecimal e RGB). Celke, 1º jan. 2018. Disponível em: https://cutt.ly/vvIudjX. Acesso em: 19 abr. 2021. 4.15 Formulários Os formulários são usados para permitir a entrada de dados pelos usuários. Em HTML5, há diferentes tipos de campos de entrada, tais como: campo de texto simples, campo de texto longo (múltiplas linhas), data, caixa de seleção, caixa de marcação etc. Agora, criaremos uma nova página dentro do nosso projeto. Ela será chamada de delivery.html e sua localização estará dentro da pasta “Páginas”. Figura 118 – Página delivery.html criada dentro da pasta “Página” Para exercitarmos o aprendizado no tópico de links, também criaremos um link dentro da página index.html, na lista de links que criamos, para, assim, abrirmos a página delivery indicada na figura a seguir. Figura 119 – Link dentro da lista de links na página index.html A página delivery.html precisa ser editada. Para isso, iremos criar, dentro dela, a estrutura básica de uma página HTML, conforme aprendemos até o momento. 66 Unidade I Figura 120 – Link dentro da lista de links na página index.html Vamos aprender como usar cada tipo de campo dentro de um formulário. Inseriremos um formulário dentro do <body> na página delivery.html. A tag utilizada para os formulários é <form>. Introduziremos também um título, dentro da tag <h1>. Figura 121 – Utilização da tag <form> dentro da página delivery.html Agora que inserimos um formulário na página utilizando a tag <form>, precisamos entender todos os atributos que esse elemento possui para, assim, conseguirmos concluir a inserção do formulário, visto que a tag <form> sozinha não altera em nada o visual da página. Ela apresenta os seguintes atributos: • name: nome do formulário. • id: identificação de qualquer outro elemento HTML. • action: função que define qual página será chamada quando o formulário for enviado. Geralmente, é um script em uma linguagem server-side, como PHP e JSP. • method: com o valor get, envia os dados do formulário pela URL; já com o valor post, envia os dados implicitamente, modo não visível ao usuário. • rnctype: usado para fazer o upload de arquivos, quando é definido o valor multipart/form-data. 67 PROGRAMAÇÃO WEB RESPONSIVA Criaremos um campo para receber um texto simples, ou seja, <input type=”text” />. Ele será criado com tamanho de 40 caracteres, comprimento máximo de 150 caracteres, nome = “endereço” e texto padrão da caixa igual a “Digite o endereço”, conforme mostrado na figura a seguir. Figura 122 – Criação de um campo para receber endereço dentro do formulário Nosso formulário deverá ficar da forma mostrada na figura a seguir. Figura 123 – Site em execução no navegador após criação de um campo para receber endereço dentro do formulário Criaremos um campo para receber uma data, ou seja, <input type=”date” />. Ele será criado com nome = “data_pedido”, conforme mostrado na figura a seguir. Figura 124 – Criação de um campo para receber data dentro do formulário Nosso formulário deverá ficar da maneira mostrada na figura a seguir. Figura 125 – Site em execução no navegador após criação de um campo para receber data dentro do formulário Note que, ao clicar dentro do campo “Data do Pedido”, é aberto automaticamente um calendário no qual o usuário pode navegar e escolher o dia, o mês e o ano desejados, sem precisar utilizar o teclado, apenas com clique no mouse. 68 Unidade I Figura 126 – Site em execução no navegador demonstrando o campo de data criado no formulário Criaremos um campo para receber uma senha, ou seja, <input type=”password” />. Ele será criado com nome = “senha”, conforme mostrado na imagem a seguir. Figura 127 – Criação de um campo para receber senha dentro do formulário Inseriremos o elemento <br> entre os campos endereço, data_pedido e senha em nosso formulário. Figura 128 – Inserção de <br> entre os campos do formulário Nosso formulário deverá ficar da forma mostrada na figura a seguir. Figura 129 – Site em execução no navegador após a criação de um campo para a senha e a inserção da tag <br> entre os campos dentro do formulário 69 PROGRAMAÇÃO WEB RESPONSIVA Podemos notar que, ao digitarmos algum valor no campo “Senha de Autorização” que criamos, ele aparecerá com caracteres especiais por conta de o campo ser do tipo “password”. Figura 130 – Site em execução no navegador mostrando o campo de senha criado no formulário Criaremos um campo para receber data e hora, ou seja, <input type=”datetime-local”/>. Ele será criado com nome = “datahora_pedido”, conforme imagem a seguir: Figura 131 – Criação de um campo para receber data e hora dentro do formulário Nosso formulário deverá ficar da forma mostrada na figura a seguir. Figura 132 – Site em execução no navegador após a criação de um campo para receber data e hora dentro do formulário Note que, ao clicarmos dentro do campo “Data e Hora do Pedido”, é aberto automaticamente um calendário onde o usuário pode navegar escolhendo o dia, o mês, o ano e o horário desejados, sem precisar utilizar o teclado, apenas com clique no mouse. 70 Unidade I Figura 133 – Site em execução no navegador mostrando o campo de data e hora criado no formulário Criaremos uma caixa de marcação única, ou seja, <input type=”radio” />. Ele será criado com nome = “alternativa”. O exemplo a seguir exibe 4 opções para que o usuário selecione apenas uma. Observe que o atributo name tem que ser igual para todas as caixas, havendo mudanças apenas nos atributos value e id. Figura 134 – Criação da caixa de marcação Nosso formulário deverá ficar da forma mostrada na figura a seguir. Note que a caixa de marcação, da maneira como a criamos, aceita apenas que uma opção seja selecionada por vez. Figura 135 – Site em execução no navegador após a criação da caixa de marcação Criaremos uma caixa de marcação múltipla, ou seja, <input type=”checkbox”/>. O campo será criado com nome = “alternativa”. O exemplo mostrado na figura a seguir exibe quatro opções para que o 71 PROGRAMAÇÃO WEB RESPONSIVA usuário selecione uma ou mais. Observe que o atributo name tem que ser igual para todas as caixas, havendo mudanças apenas nos atributos value e id. Figura 136 – Criação da caixa de marcação múltipla Nosso formulário deverá ficar da forma mostrada na figura a seguir. Note que a caixa de marcação múltipla aceita que várias opções sejam selecionadas ao mesmo tempo. Figura 137 – Site em execução no navegador após a criação da caixa de marcação múltipla Para alguns tipos de informações comuns em formulários, o HTML5 possui tipos específicos de input, que funcionam da mesma forma que o input do tipo text. Isso existe para dar semântica (significado) ao campo de entrada. Caso contrário, usando apenas o tipo text, seria mais difícil trabalharmos com diferentes números de telefones, por exemplo. Inseriremos um campo para trabalhar com números de telefone, conforme mostrado na figura a seguir. Figura 138 – Criação da caixa para o telefone Nosso formulário deverá ficar da forma mostrada na figura a seguir. 72 Unidade I Figura 139 – Site
Compartilhar