Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
ebook - Introducao Web Design [Etepac 2021] (3)
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
Introdução a Web Design Timóteo Gomes da Silva Curso Técnico em Informática Educação a Distância 2021 Introdução a Web Design Timóteo Gomes da Silva Curso Técnico em Informática Escola Técnica Estadual Professor Antônio Carlos Gomes da Costa Educação a Distância Recife 1.ed. | Abril 2021 Catalogação e Normalização Hugo Cavalcanti (Crb-4 2129) Diagramação Jailson Miranda Coordenação Executiva George Bento Catunda Renata Marques de Otero Manoel Vanderley dos Santos Neto Coordenação Geral Maria de Araújo Medeiros Souza Maria de Lourdes Cordeiro Marques Secretaria Executiva de Educação Integral e Profissional Escola Técnica Estadual Professor Antônio Carlos Gomes da Costa Gerência de Educação a distância Professor(es) Autor(es) Timóteo Gomes da Silva Revisão Flavia Vilar Coordenação de Curso José Américo Teixeira de Barros Coordenação Design Educacional Deisiane Gomes Bazante Design Educacional Ana Cristina do Amaral e Silva Jaeger Helisangela Maria Andrade Ferreira Izabela Pereira Cavalcanti Jailson Miranda Roberto de Freitas Morais Sobrinho Descrição de imagens Sunnye Rose Carlos Gomes Sumário Introdução .............................................................................................................................................. 4 1.Competência 01 | Conhecer os Fundamentos de Web Design e HTML 5 .......................................... 6 1.1 Internet ....................................................................................................................................................... 6 1.1.1 Breve histórico da internet ...................................................................................................................... 6 1.1.2 A estrutura da internet (como ela funciona) ........................................................................................... 7 1.1.3 Padronização da Web ............................................................................................................................ 10 1.1.4 Ide .......................................................................................................................................................... 11 1.1.5 HTML ...................................................................................................................................................... 12 1.1.6 CSS .......................................................................................................................................................... 16 1.2 Fundamentos do Web Design ................................................................................................................... 17 1.2.1 O que é Web Design?............................................................................................................................. 17 1.2.2 Planejamento e organização de um website ......................................................................................... 18 1.2.3 Front -end e Back-end (interface gráfica) .............................................................................................. 18 2.Competência 02 | Formatar um Site Usando Técnicas Avançadas em HTML5 ................................ 20 2.1 Sintaxe da HTML ....................................................................................................................................... 20 2.2 Estrutura básica de uma página HTML ..................................................................................................... 20 2.2.1 Tag <html> ............................................................................................................................................. 21 2.2.3 Tag <head> ............................................................................................................................................. 22 2.2.4 Tag <body> ............................................................................................................................................. 23 2.3 Formatação de parágrafos e blocos de texto ........................................................................................... 24 2.3.1 Tag <h1...h6> (cabeçalho) ...................................................................................................................... 24 2.3.2 Tag <p> (parágrafo)................................................................................................................................ 24 2.3.3 Quebras de linha (<br />)....................................................................................................................... 25 2.3.4 Linhas horizontais (<hr>) ....................................................................................................................... 25 2.4 Listas, Tabelas e Formulários .................................................................................................................... 26 2.4.1 Listas ...................................................................................................................................................... 27 2.4.2 Tabelas ................................................................................................................................................... 30 2.4.3 Formulários ............................................................................................................................................ 31 2.5 Imagem ..................................................................................................................................................... 34 2.6 Link e Iframe ............................................................................................................................................. 36 2.6.2 Iframe ..................................................................................................................................................... 37 2.7 Novas tags HTML 5.................................................................................................................................... 39 2.8 Layout HTML ............................................................................................................................................. 39 2.9 Nomenclatura dos arquivos HTML ........................................................................................................... 40 2.10 Exibindo uma página web ....................................................................................................................... 41 3.Competência 03 | Formatar um Site com Recursos Multimídia ...................................................... 43 3.1 Áudio ......................................................................................................................................................... 43 3.2 Vídeo ......................................................................................................................................................... 45 3.3 Reusando o YouTube ................................................................................................................................ 47 4.Competência 04 | Conhecer os Fundamentos do CSS 3 ................................................................... 51 4.1 Conceito de CSS ....................................................................................................................................... 51 4.2 Sintaxe de uma Regra CSS ........................................................................................................................ 52 4.3 Incorporando CSS em HTML ....................................................................................................................54 4.4 Propriedades CSS ..................................................................................................................................... 57 4.4.1 Propriedades de cores e background .................................................................................................... 57 4.4.2 Propriedades de texto e parágrafos ...................................................................................................... 59 4.4.3 Propriedades de fonte ........................................................................................................................... 62 4.4.4 Propriedades de efeitos de link ............................................................................................................. 64 4.4.5 Propriedades de lista ............................................................................................................................. 66 4.4.6 Propriedades de borda .......................................................................................................................... 69 5.Competência 05 | Planejar layouts com CSS 3 ................................................................................. 72 5.1 Box Model (Modelo de caixa) ................................................................................................................... 72 5.1.1 Padding .................................................................................................................................................. 73 5.1.2 Margin .................................................................................................................................................... 75 5.2 Width e Height ......................................................................................................................................... 77 5.2.1 Width ..................................................................................................................................................... 78 5.2.2 Height ..................................................................................................................................................... 79 5.3 Box-sizing .................................................................................................................................................. 81 5.4 Position .................................................................................................................................................... 84 5.5 Display ...................................................................................................................................................... 90 Conclusão ........................................................................................................................................... 101 Referências ......................................................................................................................................... 102 Minicurrículo do Professor ................................................................................................................. 103 4 Introdução Prezado(a) estudante, gostaria de dar as boas-vindas à disciplina Introdução a Web Design. Os assuntos que serão tratados nessa disciplina fazem parte de uma área da Informática chamada de Desenvolvimento Web. A área de Web Design trata da criação e do desenvolvimento de websites, interfaces para sistemas web e páginas na internet de todo tipo, desde redes sociais e páginas de empresas até lojas virtuais. Esse desenvolvimento pode variar desde simples páginas estáticas até aplicações consideradas ricas de recursos. Vale ainda destacar que estamos vivendo em uma sociedade cada vez mais conectada, quer seja pelos celulares, computadores e diversos outros dispositivos, e por isso é essencial profissionais de Web Design no mercado. Se você está buscando como ser um desenvolvedor web e investir nessa carreira, estará fazendo uma ótima escolha. Essa é uma das áreas mais bem pagas para quem está apenas começando sua carreira. Então, se o seu desejo é de construir um site ou começar sua jornada como um desenvolvedor de sucesso, precisa começar de algum lugar. E para auxiliar esse início de caminhada, nós vamos te ajudar a dar os primeiros passos. Desenvolvimento Web consiste em diversos ramos de atuação, no entanto, uma coisa em comum e que precisa fazer parte de um “arsenal” de um desenvolvedor web é justamente conhecer o HTML e o CSS. HTML é utilizado para representar conteúdos diversos como parágrafos de texto, títulos, tabelas, formulários. Considerada como uma das linguagens mais simples de ser aprendida, a HTML um excelente ponto de partida para todo desenvolvedor. Independente da sua área de atuação, HTML faz parte da lista de coisas que todo profissional precisa saber. Já o CSS é utilizado para customizar o material criado com o HTML. Imagine que o seu site é uma caixa de sapato contendo um sapato dentro dela. A HTML é o sapato e os textos existentes na caixa, enquanto o CSS é o design e o layout da referida caixa. Com isso, nas próximas competências você aprenderá sobre: Competência 1: conhecendo os fundamentos de Web Design e HTML5. Competência 2: aprendendo a formatar um site usando técnicas avançadas em HTML5. https://pt.wikipedia.org/wiki/Internet_rica https://pt.wikipedia.org/wiki/Internet_rica 5 Competência 3: formatando um site com recursos multimídia. Competência 4: conhecendo os fundamentos do CSS 3. Competência 5: planejar layouts com CSS 3. Vamos iniciar então a nossa viagem nesse universo do desenvolvimento web? Contamos com a sua dedicação e empenho, de forma que juntos possamos alcançar o objetivo final, que é a construção e agregação do conhecimento na área desta disciplina. Competência 01 6 1.Competência 01 | Conhecer os Fundamentos de Web Design e HTML 5 Caro estudante, esta competência tem por objetivo apresentar os fundamentos de Web Design e da linguagem de marcação de hipertexto HTML (Hypertext Markup Language). Aqui você irá aprender sobre o que é a internet e um pouco da sua história, vendo a diferença entre internet e Web, assim como conhecer o que é Design e Web Design e também entender sobre a linguagem de marcação de hipertextos. Verá ainda sobre IDE’s (Integrated Development Environmen), que podem ser usadas no desenvolvimento de páginas HTML, assim como a distinção entre desenvolvimento front-end e back-end. Vamos então ao que interessa? 1.1 Internet Antes de falar sobre Web ou sobre Web Design, é preciso falar de internet. E, embora muitos utilizem os dois termos (web e internet) de forma indiscriminada, eles não são sinônimos. Quando se fala de internet, está se referindo a uma grande rede de dispositivos computadorizados de alcance mundial, podendos entendê-la como uma grande infraestrutura em rede. A Web (uma derivação abreviada para a expressão World Wide Web (WWW)) é apenas uma das funcionalidades da internet – no caso específico, navegar através do hipertexto. Então, antes de entrar no mundo da internet, vale a pena conhecer um breve relato da sua história. 1.1.1 Breve histórico da internet Antes da internet se tornar como é conhecida hoje, houve um grande percurso na evolução dos computadores e das tecnologias de telecomunicações. Assim como muitas das descobertas da humanidade, a internet também teve forte motivação militar. Durante o período pós-guerra (anos 60 do século 20), especialmente na Guerra Fria (EUA e Rússia), havia um grande temor em relação a possíveis ataques nucleares. Pesquisas buscavam desenvolver uma cadeia de comunicações onde não existisse um ponto central que, ao ser destruído, colocaria em colapso todo o sistema de comunicações (COMER, 2007). Competência01 7 Em 1966, o Departamento de Defesa dos EUA, por meio da ARPANET (Advanced Research Projects Agency – Agência de Projetos e Pesquisas Avançadas), instalou, em 17 locais diferentes, computadores conectados as linhas telefônicas que, a partir de 1969, tornaram-se uma rede de computadores apenas para uso militar. A partir de então, as pesquisas desenvolvidas até aquele momento, que deram origem a cadeia de comunicação distribuída, passaram a ser chamadas de ARPANET (BONIATI, 2013). No decorrer das décadas seguintes (década de 70 e 80), seu alcance se expandiu para universidades, ainda que, com uma capacidade muito pequena de transmissão e troca de informações, fazendo uso de telefones analógicos. Além dos avanços na transmissão de informações, a padronização da forma de troca de dados foi fundamental para expandir a rede. Em 1989, o engenheiro inglês Tim Berners-Lee, do Centro Europeu de Pesquisa Nuclear (CERN), criou um padrão para organizar informações em texto e imagem: o formato de hipertexto (textos conectados através de links) foi responsável por manter as informações interligadas e permitir a consulta de dados em outros documentos sobre o mesmo assunto. É a origem do HTTP (HyperText Transfer Protocol), abreviação em inglês para “protocolo de transferência de hipertexto”. Ainda no início da década de 1990, Berners-Lee lança a “world wide web, ou www” – a rede mundial de computadores –, que logo se transformou no sistema pelo qual circulam as informações organizadas em hipertexto em todo o planeta. 1.1.2 A estrutura da internet (como ela funciona) Você precisa entender como é que escreve um endereço de um site e como posteriormente a página correta aparece em seu navegador. O que será que acontece no meio disso tudo? Como a internet funciona? O acesso à internet se dá, normalmente, por meio de um ISP (Internet Service Provider ou Provedor de Serviço de Internet) e utiliza-se de, pelo menos, três componentes (CPE, Rede de Acesso e POP), que são descritos a seguir e ilustrados na Figura abaixo: Saiba mais! Acesse o site https://pt.wikipedia.org/wiki/Hist%C3%B3ria_da_World_Wide_Web e aprenda um pouco mais sobre a World Wide Web. https://pt.wikipedia.org/wiki/Hist%C3%B3ria_da_World_Wide_Web Competência 01 8 • CPE (Customer Premises Equipment): é o equipamento que conecta o dispositivo a rede de acesso (exemplo: modem). • Rede de acesso: é o tipo de infraestrutura que liga o dispositivo ao provedor de internet (exemplos: cabos de cobre, fibra ótica, Wi-Fi). • POP (Point of Presence): é o ponto de presença do provedor onde estão os equipamentos que atribuem ao dispositivo um endereço IP, dando-lhe acesso à internet. Figura 1 – A estrutura da internet Fonte: Boniati (2013) Descrição: Imagem que exemplifica a estrutura da internet. Do lado esquerdo da imagem está um computador e de um CPE (Customer Premises Equipment – representado por um roteador com uma antena), onde estes estão sendo ligados, por uma seta vermelha de direção nas duas pontas (representando fluxo nas duas direções), a um conjunto de quatro círculos pintados (dois vermelhos, um verde e um azul) que estão interligados, representando assim um POP (Point of Presence) e gerando a rede de IP. Em seguida o conjunto de quatro círculos (o POP) é interligado, através de outra seta vermelha (seta nas duas pontas, representando fluxo nas duas direções), dando-lhe acesso à internet, que é representada por globo terrestre. Como pode ser observado na figura acima, para que um computador possa se conectar a Internet e se comunicar com outros computadores, faz-se necessário que este receba um número de identificação – esse número é conhecido como endereço IP (Internet Protocol). Apesar de que, conhecer profundamente o funcionamento do protocolo HTTP não seja estritamente necessário para um profissional de Web Design, entender como as coisas funcionam internamente ajuda a entender uma série de técnicas e conceitos, resultando em maior qualidade na criação de páginas. A primeira coisa que você deve levar em consideração ao conhecer o ciclo de comunicação entre o navegador (cliente) e o servidor, é que o cliente deve conhecer a localização da página (recurso) que ele deseja obter e exibir ao usuário final. O cliente deve ser informado de qual o endereço do recurso necessário em determinado momento, normalmente o usuário final Competência 01 9 provê essa informação entrando com um endereço na barra de endereços do navegador, ou clicando em um link. Esse endereço é conhecido como URL (Universal Resource Locator) e é composto por cinco partes básicas, conforme exemplo da Figura a seguir: Figura 2 – Partes básicas da URL Fonte: O autor Descrição: Representação das cinco partes básicas que constituem uma URL (http://www.exemplodeURL.com.br), sendo elas: protocolo (tem uma seta saindo desta expressão e apontando para a parte inicial da URL, que é o http:// e que está sombreado com a cor roxa) , World Wide Web (o conhecido WWW, onde tem uma seta saindo desta expressão e apontando para a segunda parte da URL, que é o www e que está sombreado com a cor verde), o nome do domínio (onde tem uma seta saindo desta expressão e apontando para a terceira parte da URL, que é o nome do domínio, nesse caso é exemplodeURL e que está sombreado com a cor azul), a especificação do domínio (onde tem uma seta saindo desta expressão e apontando para a quarta parte da URL, que é o .com e que está sombreado com a cor laranja) e a localidade da página (onde tem uma seta saindo desta expressão e apontando para a quinta parte da URL, que é o .br e que está sombreado com a cor azul ciano). • Protocolo: é o protocolo de comunicação a ser utilizado para a obtenção do recurso. No exemplo acima, o protocolo requerido é o HTTP. A comunicação entre um cliente (geralmente o navegador) e um servidor pode ser feita com o uso de diversos protocolos, por exemplo, o FTP (File Transfer Protocol) para a transferência de arquivos, ou o Protocolo File, de leitura direta de arquivo quando desejamos obter um recurso acessível diretamente pelo computador sem utilizar uma conexão com um servidor Web. • World Wide Web (WWW): é a designação pela qual ficou conhecida a rede mundial de computadores. É um serviço da Internet, que permite o acesso a uma vasta quantidade de informações e dados de forma fácil. • Nome da organização (nome de domínio): é o local na internet identificado por um nome de domínio, constituído por uma ou mais páginas de hipertexto, que podem Competência 01 10 conter textos, gráficos e informações em multimídia. Uma organização pode se registrar com um nome de domínio que melhor descreva sua especificação. Esse nome, no entanto, deve ser único. • A especificação do domínio: a especificação do domínio trata da especificidade da área de atuação, podendo ser, entre outras: o COM – empresas comerciais o GOV – órgãos do governo o EDU – instituições educacionais o IND – empresas industriais o ORG – organizações sem fins lucrativos o NET – companhias que administram redes o MIL – órgãos militares o INT – instituições internacionais • Localidade da página: após a identificação do domínio há a identificação do país de localidade da página, como por exemplo: .br (para o Brasil), .fr (para a França), .us (para os Estados Unidos). 1.1.3 Padronização da Web A internet é uma rede de computadores de acesso público e ilimitado que utiliza a infraestrutura de telecomunicações e embora não exista um dono da internet, existem consórcios internacionais, como o W3C (World Wide Web Consortium), com a tarefa de agregar empresas filiadas na tentativa de, em conjunto, desenvolver padrões para a internet. Hoje, a W3C cuida da reformulação do HTML em um projeto divulgado como HTML5 (você irá aprendersobre isso na Competência 02). Assista ao vídeo! Assista ao vídeo https://www.youtube.com/watch?v=hBRDMaxKB8Q e saiba pouco mais sobre a estrutura da internet e de como ela funciona. https://www.youtube.com/watch?v=hBRDMaxKB8Q Competência 01 11 1.1.4 Ide Apesar de ser possível construir páginas web utilizando o Bloco de Notas (ou algum editor de texto adequado), a utilização de um IDE (Integrated Development Environment ou Ambiente de Desenvolvimento Integrado) economiza seu tempo de alternar entre diferentes aplicativos e ajuda você a manter seu foco no seu código. Uma IDE geralmente inclui: • Um editor de texto que edita o código-fonte • Um compilador • Um depurador (debugger) • Um construtor de GUI (Graphical User Interface ou Interface Gráfica do Usuário) Então, o que você deveria usar? Se sua necessidade é algo simples, uma ferramenta para apenas escrever seu código rapidamente, é melhor escolher um editor de texto. Eles são leves e oferecem muitos recursos convenientes como destaque de sintaxe, interfaces personalizáveis e extensas ferramentas de navegação. Agora se a página a ser desenvolvida exige uma personalização diferenciada, opte por uma IDE. Segue uma lista de IDEs e editores de textos: • Visual Studio Code (VS Code) – é um editor leve, poderoso e possui uma interface bem pensada que funciona em seu desktop e está disponível para Windows, Mac e Linux. Ele é ideal se você precisa de um editor leve que não usa muito espaço e recursos. • Atom – é um editor de texto moderno, acessível, mas ‘hackable to the core’, isso significa que você pode personalizar tudo para fazer qualquer coisa, sem tocar a mão nos arquivos de configurações. • Sublime – é um editor de texto sofisticado para código, marcação e texto com grande desempenho. Ele é útil especialmente para arquivos individuais porque ele DICA IMPORTANTE! Hoje em dia, os navegadores não precisam que explicitemos o protocolo HTTP em sua barra de endereços, sendo ele o padrão para as requisições de páginas Web https://code.visualstudio.com/ https://atom.io/ https://www.sublimetext.com/ Competência 01 12 executa mais rápido do que o VS Code. Oferece um alto nível de personalização, quase nunca falha e inclui plugins que tornam o desenvolvimento realmente divertido. • Netbeans – é uma das melhores IDE open source (código-fonte aberto) de PHP (Hypertext Preprocessor). Ele é enriquecido com recursos e é gratuito, oferecendo suporte em várias línguas como Inglês, Japonês, Português BR, Russo e Chinês simplificado. • Cloud9 – é o IDE na nuvem mais usado e mais famoso para todas as linguagens de programação. Se você usa PHP, então o Cloud9 é ainda melhor para você porque ele oferece depurador para inspeção de código em tempo real. 1.1.5 HTML Até aqui foi tratado diversas vezes sobre arquivos HTML, porém o que são estes arquivos? Lembra-se de Tim Berners-Lee? Pois é, ele buscava uma forma de organizar, eletronicamente, os textos e as pesquisas dos cientistas do CERN (e também de outras partes do mundo) de forma que os documentos produzidos pudessem ser interligados e compartilhados. Partindo-se desse anseio, Tim Berners-Lee desenvolveu um software próprio e um protocolo para recuperar hipertextos que foi denominado de HTTP (Hypertext Transfer Protocol). O formato do texto criado para ser transportado pelo protocolo foi chamado de HTML (Hypertext Markup Language) e consiste de uma linguagem de marcação pela qual é possível, por meio de comandos (tags), incluir ligações entre textos – inclusive entre materiais publicados em diferentes locais. Os documentos disponíveis na internet, independentemente da temática que abordem (notícias, entretenimento, ciência, comercio, etc.), são estruturados através do HTML. Isso se dá pelo fato de que a única linguagem que o navegador consegue interpretar para a exibição de conteúdo é o HTML. Uma linguagem de marcação é um mecanismo para adicionar marcas com algum significado a um texto. Tais marcas são omitidas na versão do texto que é apresentada ao usuário (BONIATI, 2013). Você estudará essas marcas na competência 2. Certamente, com um exemplo, ficará mais simples de entender e apresentar os conceitos subsequentes. Para iniciar a exploração do HTML, imagine o seguinte caso: Comece https://netbeans.org/downloads/index.html https://c9.io/ Competência 01 13 criando uma pasta com o nome de seu projeto em um lugar fácil (pode ser na área de trabalho). Depois abra um editor de texto não formatado (como Bloco de Notas, por exemplo) e digite o texto ilustrado na Figura abaixo. Em seguida, salve o arquivo dentro desta pasta do seu projeto com o nome “exemplo.html”. Figura 3 – Texto para página web transcrito no Bloco de Notas Fonte: O autor Descrição: Representação do Bloco de Notas do Windows, onde existe o texto “Minha Página” na parte superior esquerda. Na parte central do Bloco há outro texto, que é “Essa é a minha primeira página web”. ATENÇÃO: Caso você esteja utilizando o Bloco de Notas do Windows, ao clicar em “salvar como”, modifique o tipo de arquivo para a extensão.html, conforme exemplo da Figura abaixo. Figura 4 – Imagem da tela de “salvar como” Fonte: O autor Descrição: Demonstração da tela Salvar Como do Windows após ser selecionado o comando de salvar como no Bloco de Notas. O arquivo está sendo salvo na pasta Projeto Web Design, tendo como nome “exemplo” e com a extensão .html Competência 01 14 Após salvar, você poderá verificar na pasta com o nome do seu projeto que o arquivo “exemplo.html” estará salvo e com um símbolo do browser padrão ao lado do nome do arquivo, conforme a Figura abaixo. Figura 5 – Imagem da tela do Windows após salvar o arquivo exemplo com formato HTML Fonte: O autor Descrição: Demonstração da tela da pasta Projeto Web Design após salvar o arquivo exemplo no formato html. Na pasta onde foi salvo o artigo, o mesmo aparece com um símbolo do browser padrão ao lado do nome do arquivo. Agora, ao clicar no arquivo “exemplo.html”, se aberto por um navegador (browser), apresentará o resultado conforme pode ser visualizado na Figura abaixo. Competência 01 15 Figura 6 – Imagem da tela do browser ao abrir o arquivo exemplo com formato HTML Fonte: O autor Descrição: Demonstração da tela do browser após abrir o arquivo denominado exemplo.html. É exibida na parte superior da página web, numa única linha, a mensagem Minha página Essa é a minha primeira página web. Parece que você obteve um resultado um pouco diferente do esperado, não? Apesar de ser capaz de exibir texto puro em sua área principal, algumas regras devem ser seguidas caso desejemos que esse texto seja exibido com alguma formatação, para facilitar a leitura pelo usuário final. Agora, copie o código do Quadro abaixo (representa a estrutura básica de uma página HTML). Não se preocupe em entender as tags agora, pois serão explicadas nas próximas competências cada uma delas. Tenha cuidado de copiar exatamente igual a como está descrito no Quadro. Caso erre alguma letra, a apresentação pode não aparecer do mesmo jeito. Salve o arquivo na mesma pasta que você criou para o seu projeto, agora com o nome index.html. <!DOCTYPE html> <html> <head> <title>Minha Página</title> <meta name="author" conten="Timóteo Gomes"/> </head> <body bgcolor="yellow"> Essa é a minha primeira página web. </body> </html> Quadro 01 – Estrutura básica de uma página HTML Fonte: O autor Descrição: Código-fonte na linguagem HTML e demonstra a estrutura básica de uma página HTML. O código apresenta as tags <head>, <title> e <body>, contendo o texto Minha Página na tag <title> e Essa é a minha primeira página web na tag <body>. Todo o conteúdo do código está inserido entreas tags de abertura <html> e de fechamento </html>. Agora, ao clicar no arquivo “index.html”, se aberto por um navegador (browser), apresentará o resultado conforme pode ser visualizado na Figura abaixo. E caso você observe, verá que a página agora possui um título “Minha Página”, assim como recebeu a cor amarela como cor de fundo de tela. Competência 01 16 Figura 7 – Imagem da tela do browser ao abrir o arquivo index com formato HTML Fonte: O autor Descrição: Demonstração da tela do browser após abrir o arquivo index.html. Na barra de título da página web é exibida a mensagem Minha Página. Já na página web em si, é exibida a mensagem “Essa é a minha primeira página web” na parte superior da página, que possui um fundo de tela em amarelo. A especificação atual da linguagem HTML é a versão 5 e é padronizada pelo consorcio W3C (World Wide Web Consortium), como foi visto no subtópico 1.1.4. Vale ainda destacar que a linguagem HTML serve para descrever a estrutura e as informações da página, independentemente da sua apresentação. Quando se deseja trabalhar o estilo (layout), é necessário (correto, profissional) utilizar outra linguagem, a CSS. 1.1.6 CSS À medida que é preciso organizar layouts de forma mais elaborada, o HTML não oferece as ferramentas adequadas e você acaba por inventar alguma “improvisação” para alcançar os objetivos. Folhas de estilo em cascata ou CSS (Cascading Style Sheet) é um mecanismo com a função de adicionar estilos (fontes, cores, espaçamentos, bordas, sombras, etc.) aos elementos de documentos codificados em HTML. A CSS tem por finalidade devolver ao HTML o propósito inicial da linguagem, ou seja, a marcação e a estruturação de conteúdo. Segundo os idealizadores do HTML, não cabe a este fornecer informações ao navegador sobre a apresentação dos elementos – cores de fontes, tamanhos de textos, posicionamento e todo o aspecto visual de um documento não devem ser Competência 01 17 funções do HTML. Todas as funções de apresentação cabem a CSS, sendo esta a sua finalidade maior. Na competência 4 você vai estuar com maior profundidade sobre CSS. 1.2 Fundamentos do Web Design Uma vez que já entendeu o que é a internet e como ela funciona, você verá agora sobre os fundamentos do Web Design. Será conceituado o que é Web Design e sobre planejamento e organização de um website. Em seguida você aprenderá a distinção dos desenvolvimentos Front- end e Back-end. 1.2.1 O que é Web Design? Antes de conceituar Web Design, primeiro é preciso falar do que é Design. De acordo com WILLIANS (1975, apud SCHÜTZ, 2013, p. 15), o design pode ser denominado como qualquer processo criativo que se utiliza as mais variadas técnicas para conceber algum artefato através da elaboração e concepção de um projeto. Como área, o design é multidisciplinar e trata, em outras palavras, de escolher a melhor forma de apresentar uma ideia. Com isso, é importante que se desassocie, inicialmente, o design à produção de imagens ou manipulação de um software específico. Com o advento da web, se abriu espaço para uma nova forma de planejamento de transmissão de ideias/objetivos em materiais publicados em ambientes on-line: web design. De acordo com ZELDMAN (2007, apud DE VILA e FREIRE, 2019, p.72), “Web Design é a criação de ambientes digitais que facilitam e incentivam a atividade humana, reflete ou adapta-se a vontades individuais e conteúdos; e muda graciosamente ao longo do tempo enquanto mantém a sua identidade”. Pode-se concluir, portanto, que o Web Design pode ser visto como uma extensão da prática do design, onde o foco do projeto é a criação de sites e documentos a serem disponibilizados na World Wide Web. Competência 01 18 Tais técnicas consistem da estruturação adequada de informações, utilizando recursos apropriados para veiculação em páginas web, de maneira que o usuário possa alcançar seu objetivo de forma direta e agradável. 1.2.2 Planejamento e organização de um website Antes de começar a criar um site, é preciso planejar sua estrutura (página principal e páginas adjacentes), definindo de forma clara e coerente a sequência das informações que se deseja apresentar. Isto evidencia a necessidade de planejamento antes de qualquer ação. Na produção de um website deve-se elaborar um projeto coerente, que forneça soluções eficientes e eficazes, levando em consideração aspectos como usabilidade, desempenho e comunicação. Além disso, o projeto deve ser focado nas necessidades do público alvo. Uma vez que os objetivos estão claros, o passo seguinte é criar e organizar o conteúdo. A definição do conteúdo a ser apresentado é determinada por dois fatores muito importantes e diretamente relacionados: a criação (concepção) e o design das informações. Logo, a criação de um website não é apenas um trabalho criativo, mas também de planejamento e de pesquisa. Produzir um website inevitavelmente exige: pensar, planejar e executar. 1.2.3 Front -end e Back-end (interface gráfica) Front-end e back-end são termos populares quando se trata de desenvolvimento e programação de website. Logo, saber o que é front-end e back-end é fundamental para quem quer aprender mais sobre a criação de sites. Para isso, é preciso saber que quando se trata da criação de websites, têm-se os que são chamados de estáticos e os que são chamados de dinâmicos. Os sites estáticos são assim chamados, pois: o conteúdo só poderá ser introduzido/alterado/excluído manualmente no código do site, não possui sistema de gerenciamento de conteúdo e é interpretado somente na máquina do usuário. É aquele tipo de site que não importa quantas vezes o acessemos, sempre virá o mesmo conteúdo (a não ser que altere o código fonte - um blog é um tipo de site estático). Já os sites dinâmicos, são assim chamados, pois: o conteúdo é introduzido/ alterado/ excluído automaticamente através de scripts no servidor (através de linguagens como PHP, Python, Competência 01 19 Ruby, Java, entre outros), além de possuírem sistema de gerenciamento de conteúdo e são pré- processados no servidor e posteriormente interpretados na máquina do usuário. Pois bem, o foco dessa disciplina será a criação de páginas de conteúdo estático, e a isso classificamos como desenvolvimento front-end. Portanto, o desenvolvimento front-end é voltado para as interfaces, para Aplicações Web e Sites. Quando temos que desenvolver uma aplicação que construirá as páginas de forma dinâmica, temos então o desenvolvimento back-end. Nosso próximo passo é seguir para competência 2. Vamos lá? Agora, acesse o AVA e responda as questões da competência 1. Ficou com alguma dúvida na competência 1? Para saná-las com os professores e discutir com seus colegas sobre os assuntos estudados, acesse o Fórum da Competência 1. Competência 02 20 2.Competência 02 | Formatar um Site Usando Técnicas Avançadas em HTML5 Caro(a) estudante, esta competência tem por objetivo apresentar a sintaxe da HTML e o seu uso na estrutura de uma página HTML, de forma a ser considerada válida a referida página. Aqui você irá aprender sobre a formatação de parágrafos e textos, tratando sobre a organização destes dentro do documento HTML, assim como será explorado o uso de listas, a inserções de tabelas, formulários e imagens. Também será estudado sobre como é possível interligar páginas, como nomear arquivos HTML e por fim como exibir uma página web. Vamos então ao que interessa? 2.1 Sintaxe da HTML A HTML é um conjunto de tags responsáveis pela marcação do conteúdo de uma página no navegador. As tags são os elementos que você escreve usando uma sintaxe padrão. Uma tag é definida com os caracteres “< >”, e o nome da tag, formando a sintaxe padrão “<nome da tag>” (ex.: <tiltle>). Muitas tags possuem conteúdo,como o texto do título, que nesse caso deve vir entre aspas, como no exemplo do título "Minha Página" da Figura 7 (subtópico 1.1.5). No caso da maioria das tags, é necessário determinar onde o conteúdo acaba, e para isso, foi usada uma tag de fechamento com a barra antes do nome: </title>. Diversas tags são disponibilizadas pela linguagem HTML e cada uma possui uma funcionalidade específica, o que será visto mais adiante. 2.2 Estrutura básica de uma página HTML Para que um documento HTML seja considerado válido precisa seguir obrigatoriamente a estrutura composta pelas tags <html> , <head> e <body>. Além dessas tags, existe a instrução <!DOCTYPE html>, que não é uma tag HTML, mas uma instrução especial. Ela indica para o navegador, qual versão do HTML deve ser utilizada para renderizar a página. Com isso, será visto a partir de agora cada uma dessas tags e também a instrução DOCTYPE. Competência 02 21 2.2.1 Tag <html> Como foi visto no tópico anterior, o DOCTYPE não é uma tag HTML, mas uma instrução especial. Ela indica para o navegador qual versão do HTML deve ser utilizada para renderizar a página. Nessa disciplina será utilizada a descrição <!DOCTYPE html>. Só relembrando que essa instrução indica para o navegador a utilização da versão mais recente do HTML - a versão 5 atualmente. A instrução pode ser escrita de três formas, sendo elas: • <!DOCTYPE html> • <!DOCTYPE Html> • <!DOCTYPE HTML> Na estrutura de um documento HTML, antes de tudo, deve-se inserir uma tag <html>. Dentro dessa tag, é necessário declarar outras duas tags: <head> e <body>. Com isso, a composição da tag <html> é a descrita no Quadro abaixo: <!DOCTYPE html> <html> <head> </head> <body> </body> </html> Quadro 02 – Demonstração da tag <html> Fonte: O autor Descrição: Código-fonte na linguagem HTML que demonstra o posicionamento da tag <html> na construção do referido código. O código apresenta as tags <head> e <body> dentro da tag <html>. Todo o conteúdo do código está inserido entre as tags de abertura <html> e de fechamento </html>. Saiba mais! O que é renderizar? Acesse a o link e saiba mais sobre renderização de página web: https://blog.taller.net.br/entendendo-processo-renderizacao-pagina-web/ https://blog.taller.net.br/entendendo-processo-renderizacao-pagina-web/ Competência 02 22 Observe que a tag <html> delimita o início e fim do documento HTML (ela é a primeira tag a ser aberta e a última a ser fechada). Observe também que as tags podem se apresentar de forma hierárquica, ou seja, umas dentro das outras. Este é o caso das tags <head> e <body>. Essas duas tags são consideradas "irmãs", pois estão no mesmo nível hierárquico em relação à sua tag "pai", que é <html>. 2.2.3 Tag <head> A tag <head> contém informações sobre o documento HTML que não serão exibidas na área do documento no navegador, ou seja, esta seção de cabeçalho não produz informações visuais e é utilizada como uma seção de configuração, na qual é possível indicar comandos que devem ser lidos antes de se carregar o conteúdo que será apresentado. Como exemplo pode-se destacar informações como o título da página e também metadados, tais como: o autor da página, descrição, palavras-chave, idioma, entre outros, todos eles contidos dentro da tag <head>. No Quadro abaixo é possível encontrar uma descrição da composição da referida tag: <!DOCTYPE html> <html> <head> <title> </title> </head> <body> </body> </html> Quadro 03 – Demonstração das tag <head> (seção de cabeçalho) DICA IMPORTANTE! Sempre adicione a declaração <!DOCTYPE> aos seus documentos HTML, para que o navegador saiba que tipo de documento esperar. Competência 02 23 Fonte: O autor Descrição: Código-fonte na linguagem HTML que representa o posicionamento da tag <head> (seção de cabeçalho) na construção do referido código HTML. O código apresenta a tag <title> dentro da tag <head>. Todo o conteúdo do código está inserido entre as tags de abertura <html> e de fechamento </html>. A especificação da tag <title> dentro da tag <head>, conforme descrita acima, permitirá especificar o título do documento, que normalmente será exibido na barra de título da janela do navegador ou na aba do documento. 2.2.4 Tag <body> Após a seção de cabeçalho, inicia-se, obrigatoriamente, o corpo do documento HTML, que é definido pela tag <body>. O corpo da página define a área que será apresentada em sua janela. É a partir da tag <body> que o documento HTML será estruturado. É necessário que a tag <body> tenha ao menos um elemento "filho", ou seja, uma ou mais tags HTML dentro dele. Na estrutura básica da tag <body> descrita abaixo foi incluída a tag <p>, que é utilizada para o estabelecimento de parágrafos (será mais bem apresentada na seção 2.3.2). Além de tags textuais, a tag <body> permite a inclusão de alguns atributos, por exemplo, alterar a cor de fundo (bgcolor) ou, então, utilizar uma imagem de fundo (background), o que será visto mais à frente. No Quadro abaixo você encontrará uma descrição da composição das referidas tags: <!DOCTYPE html> <html> <head> <title> </title> </head> <body> <p> </p> </body> </html> Quadro 04 – Demonstração das tag <body> (corpo) Fonte: O autor Competência 02 24 Descrição: Código-fonte na linguagem HTML que representa o posicionamento da tag <body> (corpo) na construção do referido código HTML. O código apresenta a tag <p> dentro da tag <body>. Todo o conteúdo do código está inserido entre as tags de abertura <html> e de fechamento </html>. 2.3 Formatação de parágrafos e blocos de texto Uma vez que já entendeu a estrutura básica de um documento HTML, é possível explorar alguns recursos ligados à organização de parágrafos e de blocos de texto. Lembre que o objetivo da linguagem HTML é permitir a estruturação de conteúdo. Nos subtópicos seguintes serão apresentadas as tags relacionadas a cabeçalhos, parágrafos, quebra de linhas e linhas horizontais. 2.3.1 Tag <h1...h6> (cabeçalho) As tags de heading <hn> (cabeçalho) são tags de conteúdo e vão de <h1> a <h6>, seguindo a ordem de importância, sendo <h1> o título principal (o mais importante) e <h6> o título de menor importância. Elas são utilizadas para demarcar uma área do documento que indica um título ou subtítulo. Por exemplo, a tag <h1> para o nome, título principal da página, e a tag <h2> como subtítulo de seções dentro do documento. Opcionalmente, pode-se utilizar o parâmetro align para indicar o alinhamento do cabeçalho: right (a direita), left (a esquerda) ou center (centralizado). 2.3.2 Tag <p> (parágrafo) Quando é exibido qualquer texto em sua página, é recomendado que ele seja sempre conteúdo de alguma tag filha da tag <body>. Para isso é utilizada a tag <p>, que demarca um parágrafo textual. Associado a tag <p>, existe um parâmetro denominado de align o qual informa o alinhamento do texto, podendo este ser centralizado (center), justificado (justify), alinhado à esquerda (left) ou alinhado à direita (right). Saiba mais! Para conhecer mais sobre os atributos em HTML, acesse: https://www.w3schools.com/tags/ref_attributes.asp Competência 02 25 Vale a pena ainda destacar as tags utilizadas como marcadores de ênfase, que servem para enfatizar um trecho de texto. É possível deixar um texto "mais forte" (em negrito) com a tag <strong> ou deixar o texto com uma "ênfase acentuada" com a tag <em> (em itálico). Também há a tag <small>, que diminui o tamanho do texto. 2.3.3 Quebras de linha (<br />) Para produzir o efeito de quebra de uma linha, deve-se utilizar a tag <br /> (break). Esta tag possui uma particularidade, que é o fato de não precisar de outratag para fechá-la, bastando, para isto, indicar, na própria instrução de abertura, o sinal de “/” para fechá-la automaticamente. 2.3.4 Linhas horizontais (<hr>) O uso da tag <hr> (head row) tem como efeito a produção de uma linha que divide a página horizontalmente. Seu objetivo é produzir seções de divisão ao longo do conteúdo. A Figura abaixo ilustra o efeito do emprego das tags relacionadas a títulos, cabeçalhos, parágrafos, quebra de linhas e linhas horizontais, cujo código está transcrito no Quadro abaixo: <!DOCTYPE html> <html> <head> <title>Minha Página</title> </head> <body> <h1> A minha primeira página HTML</h1> <hr> <h2> A criação de parágrafo</h2> <p> Meu primeiro parágrafo <br /> <strong> está representando uma quebra de linha </strong> </p> </body> DICA IMPORTANTE! A utilização da tag <p> de forma vazia, como <p> </p>, produz uma quebra de linha. Todavia, existe uma tag especial para esse propósito, conforme veremos a seguir. Competência 02 26 </html> Quadro 05 – Demonstração das tags <title>, <h>, <p>, <br> e <hr> Fonte: O autor Descrição: Código-fonte na linguagem HTML que representa o posicionamento das tags <title> (título), <h> (cabeçalho), <p> (parágrafo), <br> (quebra de linha) e <hr> (linha horizontal). O código apresenta a tag <title>, contendo dentro dela o texto Minha Página e as tags <h1> (onde está o texto A minha primeira página HTML), <hr>, <h2> (onde está o texto A criação de parágrafo) e a tag <p> (onde está o texto Meu primeiro parágrafo e a tag <br/> logo em seguida, vindo depois o texto “está representando uma quebra de linha”). Todo o conteúdo do código está inserido entre as tags de abertura <html> e de fechamento </html>. Figura 8 – resultado do emprego das tags de títulos, cabeçalhos, parágrafos, quebra de linhas e linhas horizontais Fonte: O autor Descrição: Demonstração da tela do browser que apresenta o resultado do emprego das tags de títulos, cabeçalhos, parágrafos, quebra de linhas e linhas horizontais. Na barra de título da página web é exibida a mensagem Minha Página. Já na página web em si, é exibida a mensagem “A minha primeira página HTML” na parte superior da página. Em seguida existe uma linha horizontal que corta toda a página e abaixo dela há a frase A criação de parágrafo. Logo abaixo é demonstrada a quebra de linha, tendo a frase Meu primeiro parágrafo (numa linha) está representando uma quebra de linha (na linha abaixo da anterior). 2.4 Listas, Tabelas e Formulários Nos subtópicos seguintes serão apresentadas as tags relacionadas a Listas, Tabelas e Formulários. Será visto os tipos de listas e a sua utilidade, como inserir uma tabela e o seu uso na tabulação de dados e não menos importante será abordado sobre formulários HTML, que são um dos principais pontos de interação entre um usuário e um web site. Competência 02 27 2.4.1 Listas Não são raros os casos em que é necessário exibir uma listagem em nossas páginas. O HTML tem algumas tags definidas para que seja possível fazer isso de maneira correta. A utilização desse tipo de recurso é bastante simples e consiste, inicialmente, em definir que tipo de lista se deseja utilizar, sendo duas as opções mais utilizadas: listas com marcadores (listas não ordenadas) e listas numeradas (listas ordenadas). Veja a seguir cada uma delas e as tags necessárias para representa-las. • Lista com marcadores (não ordenadas): Uma lista com marcadores é definida utilizando-se a tag <ul> (undefinded list), sendo que, entre as marcas de abertura e fechamento, utilizar a tag <li> (list) para indicar os itens da lista. No Quadro abaixo, segue exemplo de código uma lista com marcadores e o seu resultado demonstrado na Figura a seguir: <!DOCTYPE html> <html> <head> <title> Página de lista com marcadores </title> </head> <body> <h1> Itens da lista </h1> <ul> <li>Primeiro item da lista </li> <li>Segundo item da lista </li> </ul> </body> </html> Quadro 06 – Demonstração da tag <ul> (lista com marcadores) Fonte: O autor Descrição: Código-fonte na linguagem HTML que representa o posicionamento o posicionamento da tag <li> (lista com marcadores). O código apresenta a tag <title>, contendo dentro dela o texto Página com lista de marcadores e as tags <h1> (onde está o texto Itens da lista), <ul> e dentro dela duas tags <li> (onde está escrito na primeiro o texto Primeiro Competência 02 28 item da lista e na outra está escrito Segundo item da lista). Todo o conteúdo do código está inserido entre as tags de abertura <html> e de fechamento </html>. Figura 9 – resultado do emprego da tag <li> (lista com marcadores) Fonte: O autor Descrição: Demonstração da tela do browser que apresenta o resultado do emprego da tag <li> (tag de lista com marcadores). Na barra de título da página web é exibida a mensagem Página de lista com marcadores. Já na página web em si, é exibida a mensagem “itens da lista” na parte superior da página. Em seguida é possível visualizar dois marcadores, sendo o primeiro contendo o texto Primeiro item da lista e o outro abaixo com a descrição Segundo item da lista. • Lista numeradas (ordenadas): A diferença básica de uma lista numerada para uma lista com marcadores é utilização da tag <ol> (ordinate list). No caso de listas numeradas, o atributo type pode receber os seguintes valores: “1”, “I” ou “i” e “A” ou “a”. No Quadro abaixo segue exemplo de código de uma lista numerada e o seu resultado demonstrado na Figura a seguir: Saiba mais! Opcionalmente, pode-se utilizar na tag <ul>, o atributo type de forma que seja alterado o tipo de símbolo (marcador) utilizado. Alguns valores aceitos para o atributo type são: circle (círculo vazio), disc (círculo preenchido) e square (retângulo). Ex.: <ul type=”circle”> Competência 02 29 <!DOCTYPE html> <html> <head> <title> Página de lista numerada </title> </head> <body> <h1> Pesquisa </h1> <ol type=”1”> <li>Você possui filhos? </li> <ul> <li>Sim </li> <li>Não </li> </ul> </body> </html> Quadro 07 – Demonstração da tag <ol> (lista numerada) Fonte: O autor Descrição: Código-fonte na linguagem HTML que representa o posicionamento o posicionamento da tag <ol> (lista numerada). O código apresenta a tag <title>, contendo dentro dela o texto Página com lista de numerada e as tags <h1> (onde está o texto Pesquisa), <ol> (com o atributo type sendo definido com o numeral 1) e dentro dela uma tag <li> (onde está escrito o texto Você possui filhos?). Logo em seguida, ainda dentro da tag <ol>, há a tag <ul> e dentro dessa tag há duas tags <li>. Na primeira há o texto Sim e na segunda o texto Não. Todo o conteúdo do código está inserido entre as tags de abertura <html> e de fechamento </html>. Figura 10 – resultado do emprego da tag <ol> (lista numerada) Fonte: O autor Descrição: Demonstração da tela do browser que apresenta o resultado do emprego da tag <ol> (tag de lista numerada). Na barra de título da página web é exibida a mensagem Página de lista numerada. Já na página web em Competência 02 30 si, é exibida a mensagem “Pesquisa” na parte superior da página. Em seguida existe uma lista numerada com o numeral 1, tendo logo após o numeral o texto “Você possui filhos?’. Abaixo dessa pergunta existe uma lista de resposta, sendo as opções Sim e Não. 2.4.2 Tabelas O uso de tabelas era muito comum há alguns anos para diversas aplicações em html, no entanto, pela complexidade da marcação e dificuldade de manutenção das páginas, assim como o surgimento do CSS, as mesmas são recomendadas quando precisa-se tabular dados na forma de uma grade. A tag que demarca o início de uma tabela é <table>. Também pode utilizar a tag <caption> para definir um título ou descrição databela. O passo seguinte é definir as linhas contidas na tabela, usando para tal a tag <tr> (table row). Para o conteúdo de cada célula da tabela, emprega-se a tag <td> (table data). Você ainda pode fazer com que as células superiores da tabela sejam o cabeçalho das colunas com a tag <th>. Para exemplificar, segue no Quadro abaixo o código que resulta na página exibida na Figura a seguir. <!DOCTYPE html> <html> <head> <title> Exemplo de Tabela </title> </head> <body> <table border=”2”> <tr> <th>Disciplina</th> <th>Professor</th> </tr> <tr> <td>Banco de Dados</td> <td>Fulano de tal</td> </tr> <tr> <td>Introdução a Web Design</td> <td>Beltrano</td> </tr> </table> Competência 02 31 </body> </html> Quadro 08 – Demonstração da tag <tablel> (tabela) e suas derivações Fonte: O autor Descrição: Código-fonte na linguagem HTML que representa o posicionamento das tags table (tabela), tr (linha da tabela), td (célula da tabela) e th (cabeçalho da tabela). O código apresenta a tag <title>, contendo dentro dela o texto Exemplo de tabela e as tags <table> (sendo definida uma borda com valor 2), duas colunas com a tag <th> e três linhas (usando a tag <tr>), onde a descrição das colunas são Disciplina e Professor. Em seguida são inseridas quatro células com a tag <td> (duas em cada coluna), contendo os nomes Banco de Dados e Introdução a Web Design na coluna da disciplina e Fulano de tal e Beltrano na coluna do professor. Todo o conteúdo do código está inserido entre as tags de abertura <html> e de fechamento </html>. Figura 11 – resultado do emprego ds tag <table> (tabela) e suas derivações Fonte: O autor Descrição: Demonstração da tela do browser que apresenta o resultado do emprego das tags table (tabela), tr (linha da tabela), td (célula da tabela) e th (cabeçalho da tabela). Na barra de título da página web é exibida a mensagem Exemplo de Tabela. Já na página web em si, é exibida a mensagem “Disciplina x Professor” na parte superior da página. Em seguida existe uma tabela com duas colunas e três linhas e conteúdo dentro das células. 2.4.3 Formulários No desenvolvimento de aplicações para a internet, surge a necessidade de permitir, por meio de alguns elementos, a interação. Os formulários HTML são um dos principais pontos de interação entre um usuário e um web site. A interação consiste em apresentar algo ao usuário, por exemplo, uma pergunta, e permitir que o mesmo se manifeste, quer seja respondendo, quer seja buscando. Em resumo, os formulários permitem que os usuários enviem dados para o web site. Competência 02 32 Na maior parte do tempo, os dados são enviados para o servidor da web, mas a página da web também pode utilizá-los por conta própria. Em HTML, a tag <form> foi criada para capturar os dados do usuário e submetê-lo a algum serviço da Internet. Na tag <form>, três atributos são utilizados: • action (ação): indica para o formulário, qual é a aplicação web para onde os dados serão submetidos. • name (nome): serve para nomear o formulário. • method (método): informa para o browser ,de que forma os dados coletados pelo formulário serão enviados para a aplicação definida no atributo action. Como filho da tag <form>, pode-se usar as tags <input> e <button>, dentre várias outras, além da tag <div>, que serve para alterar o estilo em partes específicas da página e posicionar objetos. Os dados são passados para o <form> por meio da tag <input>, que recebe os dados digitados. É por meio do atributo type que é definida a finalidade desse input. Em nosso caso, será utilizado o tipo text e email para capturar os dados digitados. Esses dados são enviados pela tag <button>, do tipo submit. O button é um botão “clicável” que submete as informações do formulário. Para exemplificar, segue no Quadro abaixo o código que resulta na página exibida na Figura a seguir. <!DOCTYPE html> <html> <head> <title> Exemplo Formulários </title> </head> <body> <h3> Informe o nome e endereço de email do responsável pela busca</h3> <form action="www.google.com.br/search" name="form 1" method="post"> <div> <label for="name">Nome:</label> <input type="text" id="name" /> </div> <div> Competência 02 33 <label for="mail">E-mail:</label> <input type="email" id="mail" /> </div> <div> <label for="msg">Campo de busca:</label> <textarea id="msg"></textarea> </div> <div class="button"> <button type="submit">Buscar </button> </div> </form> </body> </html> Quadro 09 – Demonstração da tag <form> (formulário) e seus atributos Fonte: O autor Descrição: Código-fonte na linguagem HTML que representa o posicionamento das tags <form> e seus atributos (action, name e method), além da tag <input> e da tag <button>. O código apresenta a tag <title>, contendo dentro dela o texto Exemplo Fomulários e as tag <form> (onde estão definidos os atributos action, name e method). Dentro da tag <form> estão as quatro tags <div>, onde dentro delas foram criadas três tags <input> (sendo uma para inserção do nome, outra para o email e uma para o campo de busca) para recebimento dos dados digitados (nesse caso foram definidos dados dos tipos text e email). Ainda foi declarada a tag <button> dentro da última tag <div> para submeter as informações do formulário. Todo o conteúdo do código está inserido entre as tags de abertura <html> e de fechamento </html>. Figura 12 – resultado do emprego da tag <form> (formulário) e seus atributos Competência 02 34 Fonte: O autor Descrição: Demonstração da tela do browser que apresenta o resultado do emprego das tag <form> e seus atributos (action, name e method), além da tag <input> e da tag <button>. Na barra de título da página web é exibida a mensagem Exemplo Formulários. Já na página web em si, é exibida a mensagem “Informe o nome e endereço de email do responsável pela busca” na parte superior da página. Em seguida existem três campos do tipo formulário, onde é possível ao usuário digitar o nome e email nos dois campos iniciais e algo no campo de busca. Logo abaixo do campo de busca existe um botão com o nome Buscar. 2.5 Imagem No início da web as páginas continham apenas conteúdos de textos e links. Mas logo em seguida foram criados recursos de inclusão de imagens nas páginas. Imagens são excelentes recursos para incrementar o layout e o visual de uma página ou para exemplificar e demonstrar algo (lembrando que a estilização será realizada com o CSS). No HTML, a tag responsável pela inserção de imagens é a tag <img>. Porém, o HTML tecnicamente não faz a inclusão da imagem em si, o que ele faz é estabelecer um link da imagem para a página, de forma que ela seja aberta como se estivesse inserida na mesma. Em função disso, no momento em que seu site vai crescendo e aumentando o número de arquivos HTML que passam a utilizar imagens, deve-se considerar que os arquivos dessas imagens precisam estar disponíveis, ou seja, precisam ser enviados conjuntamente com os arquivos HTML para o servidor de páginas. Para inserir uma imagem no HTML, basta utilizar a tag <img> com o atributo src (source) - este atributo vai conter a url da imagem que será inserida. Caso deseje adicionar uma legenda para a imagem, isso pode ser feito por meio da tag <figcaption>. Para exemplificar, segue no Quadro abaixo o código que resulta na página exibida na Figura a seguir. Para conseguir incluir a imagem quando vamos tratar no exemplo da Figura abaixo, é necessário salvar essa imagem na mesma pasta que será salvo o arquivo .html do código descrito no Quadro abaixo. Saiba mais! Faça uma pesquisa sobre os tipos de componentes da tag <input>.https://www.homehost.com.br/blog/criar-sites/tags-html/ Competência 02 35 <!DOCTYPE html> <html> <head> <title> Exemplo de inserção de Imagem </title> </head> <body> <h3> Apresentação da Logo do EAD Pernambuco </h3> <img src="LogoEAD.jpg"> <figcaption> Logo do EAD Pernambuco </figcaption> </body> </html> Quadro 10 – Demonstração da tag <img> (imgem) e <figcaption> (legenda) Fonte: O autor Descrição: Código-fonte na linguagem HTML que representa o posicionamento das tags <img> (imagem) e <figcaption> (legenda). O código apresenta a tag <title>, contendo dentro dela o texto Exemplo de inserção de Imagem. Logo em seguida temos a tag <body> e dentro dela as tags <h3> (onde está o texto Apresentação da Logo do EAD Pernambuco), a tag <img> com o atributo src alimentado com o arquivo LogoEAD.jpg e a tag <figcaption> (onde está o texto Logo do EAD Pernambuco). Todo o conteúdo do código está inserido entre as tags de abertura <html> e de fechamento </html>. DICA IMPORTANTE! Preste atenção não somente ao nome do arquivo, mas também na extensão (ex.: .gif ,.png, .jpg e etc). A imagem não vai carregar se a extensão não tiver especificada corretamente. Competência 02 36 Figura 13 – resultado do emprego das tags <img> (imagem) e <figcaption> (legenda) Fonte: O autor Descrição: Demonstração da tela do browser que apresenta o resultado do emprego das tags das tags <img> (imagem) e <figcaption> (legenda). Na barra de título da página web é exibida a mensagem Exemplo de inserção de Imagem. Já na página web em si, é exibida a mensagem “Apresentação da Logo do EAD Pernambuco” na parte superior da página. Em seguida, logo abaixo da mensagem, é exibida a imagem da Logo do EAD Pernambuco (uma imagem retangular com um fundo azul claro, tendo dentro dela um desenho de um livro aberto, onde cada folha é representada por cores distintas – vermelho, amarelo e verde-, e o nome educação a Distância abaixo do livro). Abaixo da imagem da Logo temos uma legenda da imagem com a descrição Logo do EAD Pernambuco. 2.6 Link e Iframe A Web possibilita interligar páginas e serviços diferentes, criando novos resultados a partir de outras páginas. Com isso, será visto neste tópico sobre links e iframe. 2.6.1 Links Uma das características do grande poder da Web é o fato de permitir a integração entre as páginas. A Web nasceu com esse conceito de tudo interligado, sendo possível por meio dos links. A utilização de links em HTML é bastante simples e se utiliza de uma única tag <a> (anchor), âncora em português. Em conjunto com a tag de definição e link, outro atributo é utilizado, que é o atributo href (indicando o nome da ancora a qual devemos submeter). Esses links podem ser: Competência 02 37 • externos – quando referenciam recursos de outros sites. Aqui é utilizado o atributo href. • internos – quando referenciam conteúdos do próprio documento. Quando o uso é para referências internas, o nome que define o atributo href é precedido do sinal de # (sustenido), que indica justamente que o link é interno. 2.6.2 Iframe A tag <iframe> cria uma área em nosso documento onde é possível renderizar outra página, ou seja, ela permite embutir o conteúdo de outra página no meio da nossa. Isso serve, por exemplo, para incluir componentes reaproveitáveis de outros serviços, como o Youtube. Pode-se com esse recurso incluir um vídeo qualquer para ser rodado diretamente em nossa página. No código do Quadro a seguir tem-se uma exemplificação da aplicação de links externos e internos, assim como de iframe, resultando na página exibida na Figura abaixo: <!DOCTYPE html> <html> <head> <title> Exemplo de inserção de links externos e internos </title> </head> <body> <h1> Quer saber mais sobre a ETEPAC e o ensino técnico EAD em Pernambuco?</h1> <p> Você pode visitar o <a href=" https://ead.educacao.pe.gov.br/"> AVA da EAD Pernambuco </a> e conhecer o ambiente virtual, mas antes, leia um trecho do que é ofertado no EAD em PE e assista ao vídeo. <p>Histórico do EAD em PE <a href="#info"> aqui </a>.</p> <iframe width="425" height="344" src="https://www.youtube.com/embed/0EvUOXbce8g" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe> <h2 id="info">A modalidade de Educação a Distância contabiliza 116 polos, com um total de 37.575 alunos matriculados, num universo de 68 municípios, sendo ofertados nove cursos, sendo eles: Administração (ADM);Biblioteconomia (BIB); Desenvolvimento de Sistemas (DS); Design de Interiores (DDI); Logística (LOG); Multimeios Didáticos (MMD); Recursos Humanos (RH); Secretaria Escolar (SEC); Segurança do Trabalho (SEG). </h2> Competência 02 38 </p> </body> </html> Quadro 11 – Demonstração das tags <a > (anchor) e <iframe> Fonte: O autor Descrição: Código-fonte na linguagem HTML que representa o posicionamento das tags <a> (âncora) e <iframe> (renderizar outra página). O código apresenta a tag <title>, contendo dentro dela o texto Exemplo de inserção de links externos e internos e as tags <h1> (onde está o texto Quer saber mais sobre a ETEPAC e o ensino técnico EAD em Pernambuco?), <p> (onde está o texto Você pode visitar, além de ter contida dentro dela a tag <a> e descrição do atributo href dentro da dessa tag, onde foi definido nesse atributo o endereço do AVA da EAD Pernambuco). Logo em seguida, ainda dentro da primeira tag <p> é usada outra tag <p>, só que agora (onde está o texto Histórico do EAD em PE, além de ter contida dentro dela outra tag <a> e descrição do atributo href dentro dessa tag, onde foi definido nesse atributo a #info). Depois é declarada a tag <iframe> contendo dentro dela um endereço de um vídeo do Youtube. Após isso, é declarada uma tag <h2> contendo nela a descrição dos cursos existentes na ETEPAC e a quantidade de alunos que essa escola possui. Todo o conteúdo do código está inserido entre as tags de abertura <html> e de fechamento </html>. Figura 14 – resultado do emprego das tags <a > (anchor) e <iframe> Fonte: O autor Descrição: Demonstração da tela do browser que apresenta o resultado do emprego das tags <a> (âncora) para exibição de links externos e internos e <iframe> (para renderizar outra página). Na página web em si, é exibida a mensagem “Quer saber mais sobre a ETEPAC e o ensino técnico EAD em Pernambuco?” na parte superior da página. Em seguida É disponibilizado um link de acesso ao ambiente virtual de aprendizagem (o AVA) do EAD Pernambuco. Logo abaixo é proporcionada ao usuário da página a opção de conhecer o histórico da EAD Pernambuco, sendo disponibilizado um link (com a nomenclatura aqui). Ao clicar no “aqui” (link para conhecer o histórico do EAD Pernambuco), é aberto dentro da própria página o referido histórico. Competência 02 39 Note que a âncora está demarcando apenas a expressão "AVA da EAD Pernambuco" de todo o conteúdo do parágrafo exemplificado. Isso significa que, ao clicar com o cursor do mouse na palavra expressão "AVA da EAD Pernambuco", o navegador redirecionará o usuário para o site do AVA da EAD Pernambuco, indicado no atributo href. 2.7 Novas tags HTML 5 HTML5 é a mais recente evolução do padrão que define o HTML. O termo representa dois conceitos diferentes: • é uma nova versão da linguagem, com novos elementos, atributos e comportamentos; • é um conjunto maior de tecnologias que permite o desenvolvimento de aplicações e web sites mais diversificados e poderosos. 2.8 Layout HTML Em geral, a definição de um layout segue alguns princípios básicos CARRION (2006 apud BONIATI, 2013, p.35): hierarquia das informações, foco/ênfase, equilíbrio, relacionamento dos elementos e unidade/integração. A hierarquia das informações determina quala disposição da informação, baseando-se em sua importância em relação aos demais elementos visuais. De acordo com esse princípio, é preciso definir a informação mais importante para posiciona-la em um lugar estratégico, porque o usuário interage de imediato com aquilo que ele vê primeiro. De acordo com MARINHO (2012), uma boa arquitetura de design causa um ótimo primeiro impacto ao visitante. Para o W3schools (2019), o layout de uma página html deve possuir os elementos apontados na Figura 15 e descritos abaixo: Saiba mais! Acesse o site https://developer.mozilla.org/pt-BR/docs/Web/HTML/HTML5 e aprofunde seus conhecimentos sobre as novas tags do HTML 5. https://developer.mozilla.org/pt-BR/docs/Web/HTML/HTML5 Competência 02 40 Figura 15 – Elementos de layout de uma página html Fonte: https://www.w3schools.com/html/html_layout.asp Descrição: Apresentação dos elementos de layout de uma página html, localizando cada um deles em suas respectivas posições em uma página web, sendo eles: header (parte superior da página), nav (logo abaixo do campo header) ,section (parte central esquerda da página), article (parte central esquerda da página, logo abaixo do campo section), aside (parte central direita da página) e footer (parte inferior da página) • <header> - Define um cabeçalho para um documento ou seção • <nav> - Define um contêiner para links de navegação • <section> - Define uma seção em um documento • <article> - Define um artigo independente e independente • <aside> - Define o conteúdo além do conteúdo (como uma barra lateral) • <footer> - Define um rodapé para um documento ou seção • <details> - Define detalhes adicionais • <summary> - Define um cabeçalho para o elemento <details> 2.9 Nomenclatura dos arquivos HTML A exemplo das normas de nomeação de diretórios, os arquivos HTML também devem ser nomeados seguindo regras. Mediante isso, seguem algumas regras e recomendações para a referida nomenclatura: https://www.w3schools.com/html/html_layout.asp Competência 02 41 • Nunca usar espaços em branco, "ç", letras acentuadas (ã, é), pontos de interrogação (?), asteriscos (*) e outros caracteres especiais nos nomes dos documentos HTML e pastas de um site: alguns servidores e navegadores não estarão aptos a interpretá- los. • A página inicial de um site deve ser nomeada index ou default (a extensão, sempre htm ou html). Isso se deve à configuração padrão da maior parte dos servidores que, ao receber uma solicitação do tipo http://www.aulasdeinformatica.com.br, entende como "encontre e envie o arquivo index ou default do site Aulas de Informática". • HTML não é uma linguagem case sensitive, ou seja, não há diferença em digitar as tags em letras maiúsculas ou minúsculas (o mesmo não vale para nomes de arquivos citados dentro do código, tampouco para valores de atributos). Mas se desejar criar um código preparado para as próximas versões da linguagem HTML, digite seu código todo em letras minúsculas (essa é uma recomendação do W3C). 2.10 Exibindo uma página web Para que uma página web seja exibida, é necessário que seja realizada a leitura de um documento HTML que tenha sido construído com as informações que serão exibidas na referida página. Para tal, são utilizados os navegadores (Firefox, Internet Explore, Chrome e etc), cujo papel deles é ler o documento HTML e exibir as informações. Para testar as páginas que você construirá, basta seguir os passos descritos no subtópico 1.1.5 (HTML) de como salvar um documento HTML e posteriormente abri-lo em um navegador. Para exercitar, reescreva em seu editor de texto o código transcrito no tópico 2.2.4, salve-o e posteriormente abra o mesmo no seu navegador. Note se a aparência e o conteúdo exibido são semelhantes ao da Figura abaixo. Competência 02 42 Figura 16 – resultado ao abrir o arquivo com o conteúdo Meu parágrafo Fonte: O autor Descrição: Demonstração da tela do browser que apresenta o resultado da abertura de um arquivo html. Na barra de título da página web é exibida a mensagem Minha Página. Já na página web em si, é exibida a mensagem “Meu parágrafo” na parte superior da página. Competência 03 43 3.Competência 03 | Formatar um Site com Recursos Multimídia Caro(a) estudante, esta competência tem por objetivo estudar a implementação e a utilização de recursos multimídia (áudio e vídeo), com o objetivo de enriquecer a apresentação visual e de entreter os visitantes, tornando a interação destes com o site muito mais agradável e atrativo. O HTML5 introduz o suporte de mídia embutido por meio de tags específicas, oferecendo a possibilidade de incorporar facilmente mídia em documentos HTML. Além disso, será visto como proceder para inserir em nossas páginas algum vídeo do Youtube. Vamos prosseguir? 3.1 Áudio Através dos recursos de áudio disponíveis, pode-se, por exemplo, inserir uma trilha sonora de fundo, um áudio complementar à informação escrita ou um som de alerta para quando o visitante acessar uma determinada página do site. Com a introdução de HTML5 tags de áudio se espalharam rapidamente e são suportadas pelos navegadores atuais. Tags de áudio são usadas para adicionar sons e música na página HTML. No momento a tag <audio> suporta três tipos de arquivos de áudio, sendo definido pelo atributo type: • mp3 - MIME- type audio/mpeg • wav - MIME-type audio/wav • ogg - MIME-type audio/ogg Para inserir áudios às páginas web, deve-se utilizar a tag <audio> complementada pelos seguintes atributos: • src: pode ser a URL do arquivo de áudio ou o caminho do arquivo no sistema local. A sua sintaxe é semelhante a do atributo (href) usado na referência dos links. • controls: mostra os controles padrão para o áudio na página. Ele define se um controle de áudio, com botões de play, pause, volume, barra de progresso, contador de tempo, etc. serão exibido na tela. Se for setado como “false”, será preciso controlar o player via javascript, com métodos como play() e pause(). Competência 03 44 • autoplay: faz com que o áudio reproduza automaticamente. • loop: faz com que o áudio repita automaticamente. Observe o exemplo de código transcrito no Quadro abaixo e que obteve como resultado o demonstrado na Figura a seguir: <!DOCTYPE html> <html> <head> <title> Exemplo de reprodução de áudio </title> </head> <body> <h1> Escute a música clicando no botão abaixo</h1> <audio controls="true" autoplay="true"> <source src="C:\Users\aead\Music\Canção e Louvor - Tua Presença my-free-mp3s.com.mp3" type="audio/mp3"> </audio> <p>Caso deseje, faça o <a href="https://mymp3c.com/api/get_song.php?id=gucVvB:2ad2rB"> download da música</a>.</p> </body> </html> Quadro 12 – Demonstração da tag <audio > Fonte: O autor Descrição: Código-fonte na linguagem HTML que representa o posicionamento da tag <audio>. O código apresenta a tag <title>, contendo dentro dela o texto “Exemplo de reprodução de áudio” e a tag <h1> (onde está o texto Escute a música clicando no botão abaixo). Dentro dessa tag está a tag <áudio> (onde estão declarados os atributo controls, auto play e a tag <source> com a declaração de um link onde está contido a música que tocará na própria página web). Em seguida vem à declaração da tag <a> contendo o link para download da música. Todo o conteúdo do código está inserido entre as tags de abertura <html> e de fechamento </html>. Como resultado do código do Quadro acima que utiliza a tag <audio>, você terá como resultado a sua representação na Figura abaixo. Competência 03 45 Figura 17 – Imagem da tela do browser como resultado
Continue navegando
Materiais relacionados
352 pág.
19 pág.
Perguntas relacionadas
Compartilhar