ebook - Introdução Web Design [Etepac 2021]

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 Professor(es) Autor(es) Timóteo Gomes da Silva Catalogação e Normalização Hugo Cavalcanti (Crb-4 2129) Revisão Flavia Vilar Diagramação Jailson Miranda Coordenação de Curso José Américo Teixeira de Barros Coordenação Executiva George Bento Catunda Renata Marques de Otero Manoel Vanderley dos Santos Neto 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 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 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 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. 4 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. 5 Competência 01 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). 6 Competência 01 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. 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. 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: 7 Competência 01 • 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 8 Competência 01 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 9 Competência 01 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). 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. 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á aprender sobre isso na Competência 02). 10 Competência 01 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 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 11 Competência 01 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 12 Competência 01 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 13 Competência 01 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. 14 Competência 01 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 entre as 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. 15 Competência 01 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 16 Competência 01 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 Frontend 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. 17 Competência 01 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, 18 Competência 01 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. Agora, acesse o AVA e responda as questões da competência 1. Nosso próximo passo é seguir para competência 2. 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. Vamos lá? 19 Competência 02 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. 20 Competência 02 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/ 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>. 21 Competência 02 DICA IMPORTANTE! Sempre adicione a declaração <!DOCTYPE> aos seus documentos HTML, para que o navegador saiba que tipo de documento esperar. 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) 22 Competência 02 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 23 Competência 02 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>. Saiba mais! Para conhecer mais sobre os atributos em HTML, acesse: https://www.w3schools.com/tags/ref_attributes.asp 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). 24 Competência 02 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. 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. 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 outra tag 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 /> linha </strong> </p> <strong> está representando uma quebra de </body> 25 Competência 02 </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. 26 Competência 02 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 27 Competência 02 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. 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”> • 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: 28 Competência 02 <!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 29 Competência 02 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 da tabela. 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> 30 Competência 02 </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. 31 Competência 02 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> 32 Competência 02 <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 33 Competência 02 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. Saiba mais! Faça uma pesquisa sobre os tipos de componentes da tag <input>. 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. 34 Competência 02 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. <!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>. 35 Competência 02 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: 36 Competência 02 • 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> 37 Competência 02 </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. 38 Competência 02 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. 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. 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 qual a 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: 39 Competência 02 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: 40 Competência 02 • 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. 41 Competência 02 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. 42 Competência 03 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(). 43 Competência 03 • 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. 44 Competência 03 Figura 17 – Imagem da tela do browser como resultado do emprego das tag <áudio> Fonte: O autor Descrição: Demonstração da tela do browser que apresenta o resultado do emprego da tag <áudio>. Na barra de título da página web é exibida a mensagem Exemplo de reprodução de áudio. Já na página web em si, é exibida a mensagem “Escute a música clicando no botão abaixo” na parte superior da página. Em seguida existe uma representação de uma faixa musical, onde há um botão de play e um símbolo de alto-falante ao lado, onde é possível ajustar o volume do som que será reproduzido. Logo abaixo da faixa musical, há uma frase que indica um link onde é possível realizar o download da música. DICA IMPORTANTE! Através do atributo loop, indicamos o número de vezes pela qual o arquivo de som deve ser tocado. Caso este atributo receba como parâmetro o valor "infinite", a sequência de repetição do áudio será ininterrupta até que o visitante mude de página ou pressione a tecla (esc). 3.2 Vídeo Um arquivo de vídeo pode ser inserido em uma página HTML de três maneiras. A primeira seria usando a tag <embed/>. Essa tag não significa tag de fechamento. Ela funciona, geralmente, da mesma forma que as tags para imagens e teria a codificação conforme descrito abaixo: <embed src="example.mpeg" autostart="false" height="30" width="144" /> Atributos que podem ser incorporados a tag embed: 45 Competência 03 • autostart - define se o arquivo irá rodar automaticamente depois que a página é aberta. Você pode ter um valor de verdadeiro ou falso aqui. • hidden - define se os botões são escondidos ou não (você pode ter um valor de verdadeiro ou falso aqui). • volume - pode ter qualquer valor entre 0 e 100. • loop- define se o arquivo tocará novamente depois de terminar (você pode ter um valor de verdadeiro ou falso aqui). • playcount - estabelece quantas vezes o arquivo irá rodar. Por exemplo, playcount="2" significa que irá repetir duas vezes antes de parar. A segunda maneira de inserir um vídeo numa página HTML é utilizando a inserção de um arquivo de vídeo usando um link. Basta somente utilizar o atributo href, de acordo com o código abaixo: <a href="example.mpeg" title="Download movie">nome do filme</a> A terceira maneira se dá com o uso da tag <vídeo>. Com a introdução de HTML5 a tag de vídeo se espalhou rapidamente com um bom suporte de navegadores. No momento HTML5, a tag vídeo suporta três tipos de arquivos de vídeo: • mp4 - MIME-type video/mp4 • webm - MIME-type video/webm • ogg - MIME-type video/ogg O código transcrito abaixo demonstra a aplicação da tag <vídeo>. <!DOCTYPE html> <html> <vídeo src=http://v2v.cc/~j/theora_testsuite/320x240.ogg controls> </video> </html> Quadro 13 – Demonstração da tag <video> Fonte: O autor Descrição: Código-fonte na linguagem HTML que representa o posicionamento da tag <video>, onde dentro dela está contido o endereço que torna possível a reprodução de um vídeo no formato ogg na página web. Todo o conteúdo do código está inserido entre as tags de abertura <html> e de fechamento </html>. 46 Competência 03 Como resultado do código do Quadro acima que utiliza a tag <vídeo>, você terá como resultado a sua representação na Figura abaixo. Figura 18 – Imagem da tela do browser como resultado do emprego das tag <vídeo> Fonte: O autor Descrição: Demonstração da tela do browser que apresenta o resultado do emprego da tag <vídeo>. Na página web em si, é exibida a tela de um vídeo que apresenta barras coloridas. Também existe um botão start, através do qual o vídeo pode ser iniciado. 3.3 Reusando o YouTube Com o advento do HTML 5 é possível ainda reusar em nossas páginas html os vídeos contidos no Youtube. Isso facilita bastante à vida do desenvolvedor. Parar exemplificar isso, você vai embutir um vídeo do Youtube em uma página denominada reusandoYouTube.html, no meio de um texto explicativo. O código para aplicar esse exemplo é o transcrito no Quadro a seguir e terá como resultado a Figura abaixo: <!DOCTYPE html> <html> <head> <title> Exemplo de reprodução de vídeo do YouTube </title> </head> <body> <h1> Tenha o prazer de assistir a 1º Live EaD Aula Inaugural EaD 2019.2 </h1> 47 Competência 03 <h3> Dentro da Live será apresentada a Palestra: Protagonista do meu próprio sucesso, que foi ministrada por Luciana Basante.</h3> <iframe width="727" height="409" src="https://www.youtube.com/embed/r02hCYp_Ttg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe> </body> </html> Quadro 14 – reusando o YouTube Fonte: O autor Descrição: Código-fonte na linguagem HTML que representa o reuso de vídeo do Youtube através do código de incorporação utilizado na tag <iframe>. O código apresenta a tag <title>, contendo dentro dela o texto “Exemplo de reprodução de vídeo do YouTube” e as tags <h1> (onde está o texto Tenha o prazer de assistir a 1º Live EaD Aula Inaugural EaD 2019.2), <h3> (onde está o texto Dentro da Live será apresentada a Palestra: Protagonista do meu próprio sucesso, que foi ministrada por Luciana Basante) e a tag <iframe> (onde está inserido o código de incorporação do vídeo do youtube). 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 <iframe>, você terá como resultado a sua representação na Figura abaixo. Figura 19 – Imagem da tela do browser como resultado do reuso do iframe do youtube Fonte: O autor 48 Competência 03 Descrição: Demonstração da tela do browser que apresenta o resultado do emprego do reuso do iframe de vídeo Youtube. Na barra de título da página web é exibida a mensagem “Exemplo de reprodução de vídeo do Youtube”. Já na página web em si, é exibida a mensagem “Tenha o prazer de assistir a 1° Live EAD Aula Inaugural EAD 2019.2” na parte superior da página. Em seguida existe uma mensagem “Dentro da Live será apresentada a Palestra: protagonista do meu próprio sucesso, que foi ministrada por Luciana Basante”. Logo abaixo é exibida a tela do vídeo do Youtube que contem a referida aula inaugural. Você pode está se perguntando: Como ele conseguiu o código do <iframe>? Para obter o código de embutir vídeos do YouTube, siga os seguintes passos: 1. Abra o vídeo desejado no YouTube (no exemplo será utilizado o vídeo da 1º Live EaD Aula Inaugural EaD 2019.2): https://www.youtube.com/watch?v=r02hCYp_Ttg; 2. Clique com o botão direito do mouse sobre o vídeo e selecione a opção copiar código de incorporação, conforme a Figura 20 (O passo 2 lhe permitirá obter o código HTML do <iframe>) Figura 20 – Imagem da tela do browser como resultado do reuso do iframe do youtube Fonte: O autor Descrição: Demonstração da tela do browser que apresenta copiar o código de informação do vídeo desejado do youtube, de forma a reusar através da tag <iframe>. É exibida a tela de um vídeo do Youtube e que do lado direito da figura é apresentada uma caixa de diálogo contendo algumas opções de cópia, e dentre elas, a opção de copiar o código de incorporação, sendo essa a opção selecionada. 49 Competência 03 1. Vá até o seu código html e cole o código de incorporação na tag <iframe>; 2. Teste a página. FOCO NA PRÁTICA Para praticar a o reuso de vídeos do YouTube, monte uma página HTML com as 3 (três) vídeos aulas do CURSO TÉCNICO EM DESENVOLVIMENTO DE SISTEMAS | LINGUAGEM DE PROGRAMAÇÃO PARA WEB | 50 Competência 04 4.Competência 04 | Conhecer os Fundamentos do CSS 3 Caro(a) estudante, até agora foi estruturado todo o conteúdo dos sites com o HTML. No entanto, para torná-lo um sistema de navegação funcional, você vai utilizar outro padrão da W3C, o CSS. Esta competência tem por objetivo apresentar a linguagem CSS e suas funcionalidades, oferecendo a possibilidade de tratar a estilização da página separadamente do conteúdo textual, escrito em HTML. Vamos ver como incorporar CSS em HTML? Vamos continuar! 4.1 Conceito de CSS CSS (acrônimo para Cascading Style Sheets) é uma linguagem de estilo usada para especificar a aparência (layout, cor e fonte) dos vários elementos de um documento que foi definido por uma linguagem de marcação (como a linguagem HTML). Ela foi criada com o objetivo de separar a estrutura do documento de sua aparência (GRANNEL, 2007). A linguagem CSS possui objetivos bem definidos, tais como: • ter controle da aparência de um site Web; • utilizar uma folha de estilo para fornecer a mesma aparência e comportamento para todas as páginas de um site; • usar a fonte class para aplicar estilos; • especificar a fonte exata, o tamanho, a cor, as propriedades do texto exibido, • explicar os planos de fundo, entender o elemento de caixa e o modo de controlar as margens, as bordas, o preenchimento; • separar a apresentação do conteúdo. A linguagem de estilo CSS ajuda o programador a economizar tempo na construção da página, bem como na sua edição, fazendo com que a página carregue mais rápida, e ele tenha o controle do layout. Mas como criar os estilos utilizando a tabela CSS? Para cada estilo existe uma regra CSS. Vamos vê-la? 51 Competência 04 4.2 Sintaxe de uma Regra CSS A sintaxe de uma regra CSS tem estrutura simples e composta por duas partes: o seletor e a declaração. Como ela é feita? Na Figura abaixo é possível visualizar a representação dessa sintaxe. Figura 21 – sintaxe de uma regra CSS Fonte: O autor Descrição: Demonstração da sintaxe da regra CSS, onde a figura indica na parte superior uma seta preta de direção nas duas pontas, indicando que a regra CSS é constituída de seletor (que está marcado de vermelho, seletor este que pode conter uma ou mais propriedades (no caso dessa imagem contem três propriedades, estando elas marcadas na cor verde e cada uma delas recebe o nome valor - representando o tipo de dado - , estando esse nome valor marcado com a cor azul). A figura ainda indica na parte inferior uma seta preta de direção nas duas pontas, indicando que a declaração é composta por uma propriedade (no caso dessa imagem estando ela marcadas na cor verde e que ela recebe o nome valor - representando o tipo de dado - , estando esse nome valor marcado com a cor azul). “Na figura acima você pode ver que a sintaxe é uma declaração de propriedades e valores separados por um sinal de dois pontos “:" e cada propriedade é separada por um sinal de ponto e vírgula ";". Para explicar o que significa essa sintaxe é necessário saber o que é o seletor. Essa expressão em programação é a descrição do elemento de design ao qual o estilo será aplicado na linguagem HTML. Em suma, o seletor é o alvo da regra CSS. Genericamente, pode ser a tag do elemento da marcação ou, então, uma entidade capaz de definir com precisão em qual lugar da marcação a regra será aplicada. Existem três tipos de seletores que merecem ser apresentados: classes (class), identificadores (id) e simples. Os seletores class e id são tidos como seletores complexos. 52 Competência 04 • Seletor tipo class: esse tipo de seletor permite aplicar um mesmo estilo a diferentes elementos e também indicar que um mesmo elemento obedece a diferentes estilos. “Para definir um seletor desse tipo, deve-se iniciar a especificação do mesmo com o sinal de “." (ponto final) seguido do atributo class. • Seletor tipo id: esse tipo de seletor é utilizado com o atributo id, permitindo estilizar de forma única e exclusiva, um determinado elemento no documento HTML. A declaração de um seletor desse tipo inicia-se com o sinal de “#” (sustenido) seguido do nome do identificador. • Seletor tipo simples: esse tipo de seletor é utilizado quando o seletor é um elemento de tag de marcação, como exemplo, a tag <p>. Estes seletores são para cobrir suas necessidades básicas de formatação de elementos. Depois do seletor vem à declaração, onde são determinado os parâmetros de estilização, ou seja, compreende a propriedade que define qual característica do elemento alvo (seletor) será estilizada e o valor (quantificação ou qualificação da propriedade). Pode-se dizer então que a propriedade (comando) é responsável por validar uma das funções da linguagem CSS. Observe o exemplo abaixo. De acordo com a Figura a seguir, você pode ver uma formatação onde o seletor é o elemento da tag de marcação <p>. Figura 22 – formatação com a tag p como seletor Fonte: O autor Descrição: Apresentação de um exemplo de regra da sintaxe CSS tendo como seletor a tag p (marcada com a cor vermelha) e como propriedades o background-color (marcada com a cor verde e com valor definido como blue em azul) e o color (marcada com a cor verde e com valor definido como yellow na cor azul). O código descrito na Figura abaixo indica que você está alterando a cor e o fundo de todos os elementos com tag <p>, onde esses elementos que receberem essas propriedades serão exibidos com o texto na cor azul e com o fundo amarelo. 53 Competência 04 DICA IMPORTANTE! Para ter uma lista sempre atualizada, siga o link no final da tabela. http://www.w3.org/TR/css3-selectors/#selectors 4.3 Incorporando CSS em HTML Quando se escreve o HTML, marca-se o conteúdo da página com tags que melhor representam o significado daquele conteúdo. Aí quando você abre a página no navegador é possível perceber que ele mostra as informações com estilos diferentes, uma vez que, foram incorporadas a ela folha de estilos, o agora conhecido CSS. Existem diferentes formas de se vincular uma folha de estilos a um documento HTML, sendo elas: • Vinculação in-line: consiste no emprego do atributo style diretamente sobre a tag HTML que se deseja estilizar. Vale destacar que esse método, apesar de ser prático, torna a manutenção do código bastante difícil e também retira um dos maiores poderes das folhas de estilo, que é o controle centralizado da apresentação. O trecho de código transcrito no Quadro abaixo exemplifica a aplicação deste tipo de vinculação a tag <p>. <p style="color: red; background-color: blue;"> O conteúdo desta tag será exibido em vermelho com fundo azul no navegador! </p> Quadro 15 – Vinculação in-line Fonte: O autor Descrição: Código-fonte na linguagem HTML demonstrando o uso da vinculação in-line. O código apresenta a tag <p> na qual está sendo feita a referida vinculação através do atributo style, contendo dentro dessa tag o texto “O conteúdo desta tag será exibido em vermelho com fundo azul no navegador!”. 54 Competência 04 • Vinculação incorporada: consiste no emprego do atributo style que deve ser declarado na seção de cabeçalho (tag <head>) do documento, indicando configurações que o documento, como um todo irá adotar. Essa forma de vinculação apresenta uma vantagem em relação a anterior: as regras estão centralizadas em um único ponto do documento. Como desvantagem, pode-se apontar que ela não permite o compartilhamento de regras entre os documentos de um mesmo site. O trecho de código transcrito no Quadro a seguir exemplifica a aplicação deste tipo de vinculação aplicada na tag <head>. <head> ... <style > body { background: green;} h3 { color: blue;} </style> ... </head> Quadro 16 – Vinculação in-line Fonte: O autor Descrição: Código-fonte na linguagem HTML demonstrando o uso da vinculação incorporada que é declarada na seção de cabeçalho (tag <head>). O body recebe background green e a tag <h3> recebe color bue. • Vinculação com interligação externa: a vinculação externa de uma folha de estilos pode ser feita por meio da tag <link>, que é utilizada para associar um arquivo externo ao documento HTML. Ela é a forma mais eficiente de utilização de CSS. Vale ainda destacar que, assim como na vinculação incorporada, a tag <link> deve ser declarada na seção de cabeçalho (tag <head>). O trecho de código abaixo exemplifica a aplicação deste tipo de vinculação aplicada na tag <head>. <head> ... <link rel="stylesheet" type="text/css" href="exemploEstilo.css"> 55 Competência 04 ... </head> Quadro 17 – Vinculação com interligação externa (código HTML) Fonte: O autor Descrição: Código-fonte na linguagem HTML demonstrando o uso da vinculação com interligação externa. O código apresenta a tag <head> na qual está sendo feita a referida vinculação com interligação externa através do uso da tag <link>. Conforme o trecho de código mostrado acima, usa-se o elemento link dentro da seção head do documento para importar uma folha de estilos em um documento HTML. Com isso, o navegador "lê" as regras de estilo do arquivo exemploEstilo.css, formatando o documento de acordo com as regras definidas no referido arquivo do tipo .css. A sintaxe geral para importar uma folha de estilo, como a denominada exemploEstilo.css é mostrada no código do Quadro abaixo. /* ELEMENTOS DE UMA SINTAXE DE UMA FOLHA DE ESTILO*/ /* essa folha de estilo é denominada exemploEstilo.css */ @charset utf-8; @import url("estiloFonte.css"); body { margin: 0; background: #fff; color: #333; ... } Quadro 18 – Vinculação com interligação externa (código CSS) Fonte: O autor Descrição: Código-fonte da parte CSS demonstrando o uso da vinculação com interligação externa, apresentando na parte superior do código os comentários "ELEMENTOS DE UMA SINTAXE DE UMA FOLHA DE ESTILO" e "essa folha de estilo é denominada exemploEstilo.css". Em seguida é apresentada a definição da url da folha de estilo, através da diretiva import, sendo definida como "estiloFonte.css" para a a tag body, onde nela é definida a margin, background e color. Analisando os elementos de uma sintaxe geral de uma folha de estilo, nota-se que foi utilizada a diretiva @import dentro da folha de estilos exemploEstilo.css para importar uma folha de estilos denominada estiloFonte.css. 56 Competência 04 Ao usar essa diretiva em uma folha de estilo ela obrigatoriamente deverá ser a primeira declaração na folha logo a seguir da diretiva @charset. Caso contrário, não haverá importação. A seguir você precisa usar o elemento link dentro da seção head do documento para importar a folha de estilos exemploEstilo.css, conforme mostrado anteriormente. Folhas de estilos externas podem ser escritas em qualquer editor de texto, devem ser gravadas com a extensão.css e a codificação de caracteres utf-8. O arquivo não deve conter nenhuma tag HTML. 4.4 Propriedades CSS Uma vez visto como incorporar folhas de estilos, ou seja, incorporar CSS a documentos em HTML, você aprenderá sobre algumas propriedades CSS associadas a cores, background, textos, fontes, links, listas e bordas. Vamos lá? 4.4.1 Propriedades de cores e background A seguir, será vista algumas propriedades de CSS ligadas a cores e background, assim como os seus respectivos exemplos: • color - Existem várias maneiras de definir a cor de um texto quando utilizamos o CSS, conforme apresentado abaixo: 1. Pode-se definir essa propriedade utilizando o nome da cor, conforme o código do Quadro a seguir: h1 { color: yellow; } Quadro 19 – Propriedade color – definição pelo nome Fonte: O autor 57 Competência 04 Descrição: Código fonte CSS demonstrando o uso da propriedade color dentro do seletor h1, sendo a propriedade definida com a cor yellow. 2. Pode-se definir essa propriedade tendo como base a composição RGB, conforme o código do Quadro abaixo: /* rgb (255, 200, 0) é equivalente a cor verde */ h2 { color: rgb (255, 200, 0); } Quadro 20 – Propriedade color – definição pela composição RGB Fonte: O autor Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade color com definição pela composição RGB, apresentando na parte superior do código o comentário "rgb (255,200,0) é equivalente a cor verde”. Em seguida, dentro da dentro do seletor h2, é definida a propriedade color com o rgb (250,200,0). Você sabia? RGB é um sistema de cor bastante comum aos designers. Ele permite especificar até 16 milhões de cores com uma combinação de três cores base: Vermelho (Red), Verde (Green), Azul (Blue). 3. Pode-se definir essa propriedade tendo como base a composição hexadecimal, conforme o código do Quadro a seguir: /* #FF0000 é equivalente a cor vermelha */ h1 { color: #FF0000; } Quadro 21 – Propriedade color – definição pela composição hexadecimal Fonte: O autor Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade color com definição pela composição hexadecimal, apresentando na parte superior do código o comentário "#FF0000 é equivalente a cor vermelha”. Em seguida, dentro da dentro do seletor h1, é definida a propriedade color com #FF0000. • background-color - Essa propriedade em CSS permite modificar a cor de fundo do trecho designado, conforme o código do Quadro abaixo: h1 { background-color: blue; 58 Competência 04 } Quadro 22 – Propriedade background-color Fonte: O autor Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade background-color dentro da dentro do seletor h1, é definida a propriedade color como blue. • background-image - Essa propriedade em CSS permite indicar um arquivo externo de imagem para ser exibido ao fundo do elemento, conforme o código do Quadro a seguir: /* Com essa declaração, o navegador vai requisitar um arquivo exemplobackgroundImagem.jpg, que deve estar na mesma pasta do arquivo CSS onde consta essa declaração */ h1 { background-image: url(exemplo-backgroundImagem.jpg); } Quadro 23 – Propriedade background-image Fonte: O autor Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade background-image, apresentando na parte superior do código o comentário “Com essa declaração, o navegador vai requisitar um arquivo exemplobackgroundImagem.jpg, que deve estar na mesma pasta do arquivo CSS onde consta essa declaração”. Em seguida, dentro da dentro do seletor h1, é definida a propriedade color com url (exemplo-backgroundImagem.jpg). Acesse o link abaixo e saiba mais sobre a notação hexadecimal! https://www.dicasl.com.br/arquivo/cores_css_definicao_com_notacao_hexadecimal.php 4.4.2 Propriedades de texto e parágrafos A seguir, você verá algumas propriedades de CSS ligadas à parte tipográfica, assim como os seus respectivos exemplos: • text-decoration - Essa propriedade em CSS permite especificar uma decoração para o texto, podendo ser: sublinhado (underline), riscado (line-through), sublinhado invertido (overline). O código do Quadro abaixo demonstra a aplicação dessa propriedade quando definida como underline: 59 Competência 04 h1 { text-decoration: underline; } Quadro 24 – Propriedade text-decoration Fonte: O autor Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade text-decoration dentro do seletor h1 e é definida como underline. . • text-transform - Essa propriedade em CSS permite definir se o texto será apresentado em: letras maiúsculas (uppercase), minúsculas (lowercase), com as iniciais em maiúsculas (capitalize). O código do Quadro a seguir demonstra a aplicação dessa propriedade quando definida como lowercase: h1 { text-transform: lowercase; } Quadro 25 – Propriedade text-transform Fonte: O autor Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade text-transform dentro do seletor h1 e é definida como lowercase. • text-indent - Essa propriedade em CSS permite definir um espaçamento horizontal a ser deixado antes do início da primeira linha do texto, ou seja, a indentação (ou tabulação) da primeira linha do texto. O código do Quadro abaixo demonstra a aplicação dessa propriedade quando definida com um espaçamento de 15px: h1 { text-indent: 15px; } Quadro 26 – Propriedade text-indent Fonte: O autor Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade text-indent dentro da do seletor h1 e é definida com 15px. • text-align - Essa propriedade em CSS permite definir o alinhamento horizontal do texto, podendo ser: left (alinha o texto à esquerda – é o valor default-), right (alinha 60 Competência 04 o texto à direita), center (alinha o texto no centro), justify (alinha o texto de modo justificado). O código do Quadro a seguir demonstra a aplicação dessa propriedade quando definida como left: h1 { text-align: left; } Quadro 27 – Propriedade text-align Fonte: O autor Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade text-align dentro do seletor h1 e é definida como left. • line-height - essa propriedade em CSS permite controlar o espaçamento entre as linhas de um texto, podendo ser: 1. normal: é o valor padrão nativo do navegador (entre 1 e 1.2); 2. número: um valor expresso por um número inteiro ou decimal; 3. comprimento: um valor CSS para comprimento (px, em, pt, etc); 4. porcentagem: um valor expresso em porcentagem; O código do Quadro abaixo demonstra a aplicação dessa propriedade quando definida com um espaçamento entre as linhas de 20 px: p { line-height: 20px; } Quadro 28 – Propriedade line-height Fonte: O autor Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade line-height dentro do seletor h1 e que é definida com o valor de 20px. • letter-spacing - Essa propriedade em CSS permite definir o espaçamento entre as letras, podendo ser normal ou lenght (medida CSS de comprimento. Exemplos: px, em, rem, %). O código do Quadro abaixo demonstra a aplicação dessa propriedade quando definida com um espaçamento entre as letras de 12 px: h1 { letter-spacing: 12px; 61 Competência 04 } Quadro 29 – Propriedade letter-spacing Fonte: O autor Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade letter-spacing dentro do seletor h1 e que é definida com o valor 12px. • word-spacing - Essa propriedade em CSS permite definir o espaçamento entre as palavras, podendo ser normal ou lenght (medida CSS de comprimento. Exemplos: px, em, rem, %). O código do Quadro a seguir demonstra a aplicação dessa propriedade quando definida com um espaçamento entre as palavras de 8 px: h1 { word-spacing: 8px; } Quadro 30 – Propriedade word-spacing Fonte: O autor Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade word-spacing dentro do seletor h1 e que é definida com o valor de 8px. 4.4.3 Propriedades de fonte A seguir, serão apresentadas algumas propriedades de CSS ligadas a fontes do texto assim como os seus respectivos exemplos: • font-size - Essa propriedade em CSS permite especificar o tamanho da fonte do texto. As medidas possíveis são: xx-small (equivale a 9px), x-small (equivale a 10px), small (equivale a 13px), medium (equivale a 16px), large (equivale a 18px), x-large (equivale a 24px), xx-large (equivale a 32px) e length (medida CSS de comprimento, tipo: px, em, rem, %). O código do Quadro abaixo demonstra a aplicação dessa propriedade sendo definida como médium para o tamanho da fonte: h1 { font-size: medium; } Quadro 31 – Propriedade font-size Fonte: O autor Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade font-size dentro do seletor h1 e é definida como medium. 62 Competência 04 • font-family - Essa propriedade em CSS permite definir o tipo da fonte do texto. O código do Quadro a seguir demonstra a aplicação dessa propriedade definindo a fonte como Arial, e caso não haja, será Helvetica. Não havendo nenhuma delas, será testada a fonte sans-serif: /* No caso do exemplo abaixo, o navegador verificará se a fonte "Arial" está disponível e a utilizará para renderizar os textos de todos os elementos do documento, pois herdarão essa propriedade do elemento body. Caso a fonte "Arial" não esteja disponível, o navegador verificará a disponibilidade da próxima fonte declarada, que no exemplo é a "Helvetica". Caso o navegador não encontre também essa fonte, ele solicitará qualquer fonte que pertença à família "sans-serif", declarada logo a seguir, não importando qual seja ela. */ body { font-family: "Arial", "Helvetica", "sans-serif"; } Quadro 32 – Propriedade font-family Fonte: O autor Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade font-family, apresentando na parte superior do código o comentário “No caso do exemplo abaixo, o navegador verificará se a fonte "Arial" está disponível e a utilizará para renderizar os textos de todos os elementos do documento, pois herdarão essa propriedade do elemento body. Caso a fonte "Arial" não esteja disponível, o navegador verificará a disponibilidade da próxima fonte declarada, que no exemplo é a "Helvetica". Caso o navegador não encontre também essa fonte, ele solicitará qualquer fonte que pertença à família "sans-serif", declarada logo a seguir, não importando qual seja ela”. Em seguida, dentro da dentro do seletor body, é definida a propriedade font-family como Arial, Helvetica e sans-serif, nessa ordem. • font-style - Essa propriedade em CSS permite definir o estilo da fonte, podendo ser: itálico, normal (em pé) ou oblíquo. O código do Quadro abaixo demonstra a aplicação dessa propriedade: h1 { font-style: italic; } Quadro 33 – Propriedade font-style Fonte: O autor Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade font-style dentro do seletor h1 e é definida como italic. • font-weight - Essa propriedade em CSS permite definir a largura da fonte do texto, popularmente conhecido como “negrito”. O código do Quadro a seguir demonstra a aplicação dessa propriedade: h1 { 63 Competência 04 font-weight: bold; } Quadro 34 – Propriedade font-weight Fonte: O autor Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade font-weight dentro do seletor h1 e é definida como bold. Pesquise! Faça uma pesquisa e verifique quais as possibilidades de parametrização da propriedade font-weight. 4.4.4 Propriedades de efeitos de link Muitas vezes se pretende modificar o efeito de um link a partir de um evento do usuário, como passar o mouse por cima ou acessar o referido link. Um link visitado, não visitado, ativo ou no estado hover pode assumir aspectos diferentes através de CSS. Para isso, é preciso trabalhar com as pseudoclasses de estado. Pseudoclasse de estado no CSS é uma palavra-chave adicionada a um seletor que especifica um estado especial do elemento selecionado. Um estado da pseudoclasse acontece quando o usuário desencadeia uma ação. Vamos as pseudoclasses para efeitos de link! • :link - Essa pseudoclasse aplica a configuração ao link que ainda não tenham sido visitados. Recomenda-se que a ela seja a primeira a ser declarada entre todas aquelas destinadas a estilizar os estados dos links. O código do Quadro abaixo demonstra a aplicação dessa propriedade: /* No caso do exemplo abaixo, o link ficará na cor Azul até ser acessado*/ a:link { color: rgb (0, 0, 255); } Quadro 35 – Propriedade :link Fonte: O autor 64 Competência 04 Descrição: Código-fonte da parte CSS demonstrando o uso da pseudoclasse :link, apresentando na parte superior do código o comentário “No caso do exemplo abaixo, o link ficará na cor Azul até ser acessado ". Em seguida, dentro da pseudoclasse a:link é definida a propriedade color como rgb (0,0,255). • :hover - Essa pseudoclasse aplica a configuração ao link no exato momento em que você passa o mouse por cima dele. O código do Quadro a seguir demonstra a aplicação dessa propriedade: /* No caso do exemplo abaixo, o link ficará na cor Magenta quando o usuário passar o mouse por cima dele*/ a:hover { color:#FF00FF; } Quadro 36 – Propriedade :hover Fonte: O autor Descrição: Código-fonte da parte CSS demonstrando o uso da pseudoclasse :hover, apresentando na parte superior do código o comentário “ No caso do exemplo abaixo, o link ficará na cor Magenta quando o usuário passar o mouse por cima dele ". Em seguida, dentro da pseudoclasse a:houver é definida a propriedade color como #FF00FF. • :active - Essa pseudoclasse aplica a configuração ao link quando você ativa o elemento. Por exemplo, quando se clica em um link e não solta o botão do mouse. Nesse momento, você está ativando a ação do elemento. O código do Quadro abaixo demonstra a aplicação dessa propriedade: /* No caso do exemplo abaixo, o link ficará na cor Laranja quando o usuário clicar no link e não soltar o botão do mouse*/ a:active { color: orange; } Quadro 37 – Propriedade :active Fonte: O autor Descrição: Código-fonte da parte CSS demonstrando o uso da pseudoclasse :active, apresentando na parte superior do código o comentário “ No caso do exemplo abaixo, o link ficará na cor Laranja quando o usuário clicar no link e não soltar o botão do mouse". Em seguida, dentro da pseudoclasse a:active é definida a propriedade color como orange. • :visited - Essa pseudoclasse aplica a configuração ao link que já tenha sido visitado. Recomenda-se que ela seja a segunda a ser declarada (depois da pseudoclasse :link). O código do Quadro a seguir demonstra a aplicação dessa propriedade: /* No caso do exemplo abaixo, o link que já foi visitado ficará na cor Vermelha*/ 65 Competência 04 a:visited { color: rgb (255, 0, 0); } Quadro 38 – Propriedade :visited Fonte: O autor Descrição: Código-fonte da parte CSS demonstrando o uso da pseudoclasse :visited, apresentando na parte superior do código o comentário “No caso do exemplo abaixo, o link que já foi visitado ficará na cor Vermelha ". Em seguida, dentro da pseudoclasse a:visited é definida a propriedade color como rgb (255,0,0). 4.4.5 Propriedades de lista A seguir, será vista algumas propriedades de CSS ligadas à definição de características das listas, assim como os seus respectivos exemplos: • list-style-image - Essa propriedade em CSS permite definir uma imagem como marcador da lista, podendo ser: 1. none: sem marcador; 2. URL: url (caminho/marcador.gif). O código do Quadro abaixo demonstra a aplicação dessa propriedade: /* código HTML*/ <ul> <li>item da lista </li> </ul> /* código CSS*/ ul { list-style-image: url("forma.gif"); } Quadro 39 – Propriedade list-style-image Fonte: O autor Descrição: Código-fonte das partes HTML e CSS demonstrando o uso da propriedade list-style-image definindo uma imagem como marcador da lista. Na parte HTML é usada a tag <li> dentro da tag <ul> e com a descrição “item da lista”. Em seguida, na parte CSS, dentro do seletor ul é definida a propriedade list-style-image com a url ("forma.gif"). • list-style-position - Essa propriedade em CSS permite definir a posição do marcador da lista, podendo ser: 66 Competência 04 1. outside: marcador fora do alinhamento do texto; 2. inside: marcador alinhado com texto. O código do Quadro abaixo demonstra a aplicação dessa propriedade: /* código HTML*/ <ul class="inside square"> <li>aplica o valor: "inside" aos marcadores de listas.</li> </ul> <ul class="outside square"> <li>aplicar o valor: "outside" aos marcadores de listas.</li> </ul> /* Código CSS. No caso do exemplo abaixo, no primeiro caso (ul.a) o marcador ficará alinhado com o texto e no segundo (ul.b) ficará fora do alinhamento do texto*/ ul.inside { list-style-position: inside; } ul.outside { list-style-position: outside; } Quadro 40 – Propriedade list-style-position Fonte: O autor Descrição: Código-fonte das partes HTML e CSS demonstrando o uso da propriedade list-style-position definindo a posição do marcador da lista. Na parte HTML é usada a tag <ul> e que aplica o atributo class definindo-o como “inside square” e a tag <li> com a descrição “aplica o valor: "inside" aos marcadores de listas.”. Ainda na parte HTML é usada outra tag <ul> e dentro dela aplica o atributo class definindo-o como “outside square” e a tag <li> com a descrição “aplica o valor: "outside" aos marcadores de listas.”. Em seguida, na parte CSS, é apresentado na parte superior do código o comentário “No caso do exemplo abaixo, no primeiro caso (ul.a) o marcador ficará alinhado com o texto e no segundo (ul.b) ficará fora do alinhamento do texto". Logo depois, dentro do seletor ul.inside é definida a propriedade list-style-position como inside e do seletor ul.outside como outside. • list-style-type - Essa propriedade em CSS permite definir o tipo do marcador da lista, podendo ser diversos, sendo alguns deles: 1. none: sem marcador; 2. disc: círculo (bolinha cheia); 67 Competência 04 3. circle: circunferência (bolinha vazia); 4. square: quadrado cheio; 5. decimal: números 1, 2, 3, 4, ...; 6. lower-roman: romano minúsculo i, ii, iii, iv, ...; 7. lower-alpha: letra minúscula a, b, c, d, ... O código do Quadro abaixo demonstra a aplicação dessa propriedade: /* código HTML*/ <ul class="circle"> <li> aplicar o tipo círculo aos marcadores da lista.</li> </ul> /* Código CSS. No caso do exemplo abaixo, no primeiro caso (ul.a) o marcador ficará alinhado com o texto e no segundo (ul.b) ficará fora do alinhamento do texto*/ ul.circle { list-style-type: circle; } Quadro 41 – Propriedade list-style-type Fonte: O autor Descrição: Código-fonte das partes HTML e CSS demonstrando o uso da propriedade list-style-type definindo o tipo de marcador da lista. Na parte HTML é usada a tag <ul> e que aplica o atributo class definindo-o como “circle” e a tag <li> com a descrição “aplicar o tipo círculo aos marcadores da lista.”. Em seguida, na parte CSS, é apresentado na parte superior do código o comentário “No caso do exemplo abaixo, no primeiro caso (ul.a) o marcador ficará alinhado com o texto e no segundo (ul.b) ficará fora do alinhamento do texto ". Logo depois, dentro do seletor ul.circle é definida a propriedade list-style-type como circle. • list-style - Essa propriedade em CSS permite definir uma só declaração para duas propriedades de listas. A sintaxe geral é: list-style: list-position list-image ou list-style: list-position list-type O código do Quadro a seguir demonstra a aplicação dessa propriedade: /* código HTML*/ <ul> <li>exemplo de declaração para duas propriedades</li> </ul> 68 Competência 04 /* Código CSS*/ ul { list-style: inside url("seta.gif"); } Quadro 42 – Propriedade list-style Fonte: O autor Descrição: Código-fonte das partes HTML e CSS demonstrando o uso da propriedade list-style definindo uma só declaração para duas propriedades da lista. Na parte HTML é usada a tag <ul> e dentro dela a tag <li> com a descrição “exemplo de declaração para duas propriedades”. Em seguida, na parte CSS, dentro do seletor ul é definida a propriedade list-style como inside url("seta.gif"). 4.4.6 Propriedades de borda A seguir, você verá algumas propriedades de CSS ligadas às bordas, assim como os seus respectivos exemplos: ● border-width - Essa propriedade em CSS permite definir a espessura da borda. As medidas possíveis que ela pode assumir são: 1. thin: borda fina. 2. medium: borda média. 3. thick: borda grossa. 4. length: unidade de medida CSS (px, pt, em, cm, ...). ● border-style - Essa propriedade em CSS permite definir o estilo da borda. As medidas possíveis que ela pode assumir são: 1. none: nenhuma borda. 2. hidden: equivalente a none. 3. dotted: borda pontilhada. 4. dashed: borda tracejada. 5. solid: borda contínua. 6. double: borda dupla. 7. groove: borda entalhada. 8. ridge: borda em ressalto. 9. inset: borda em baixo relevo. 69 Competência 04 10. outset: borda em alto relevo. ● border-color - Essa propriedade em CSS permite definir a cor da borda. As medidas possíveis que ela pode assumir são: 11. código hexadecimal: #FFFFFF. 12. código rgb: (255, 0, 255). 13. palavra-chave: red, blue, green. 14. transparente: transparente. O código no Quadro a seguir demonstra a aplicação das propriedades border-width, border-style e border-color: /* código HTML*/ <h3> borda fina, tracejada e vermelha </h3> <p> borda 8px, pontilhada e verde </p> /* Código CSS*/ h3 { border-width: thin; border-style: dashed; border-color: red; } p { border-width: 8px; border-style: dotted; border-color: green; } Quadro 43 – Propriedades: border-width, border-style e border-color Fonte: O autor Descrição: Código-fonte das partes HTML e CSS demonstrando o uso das propriedades border-width, border-style e border-color , definindo uma borda fina, tracejada e vermelha e outra borda com 8px, pontilhada e verde . Na parte HTML é usada a tag <h3> (com a descrição “borda fina, tracejada e vermelha”) e a tag <p> com a descrição “borda 8px, pontilhada e verde”. Em seguida, na parte CSS, dentro do seletor h3 são definidas as propriedades border-width (como “thin”), border-style (como “dashed”) e border-color (como “red”). Ainda na parte CSS, dentro do seletor p são são definidas as propriedades border-width (como “8px”), border-style (como “dotted”) e border-color (como “green”). Caro(a) estudante, 70 Competência 04 Chegamos ao fim desta quarta competência. Você aprendeu nessa competência sobre os conceitos da linguagem CSS, assim como a sintaxe de uma regra CSS. Foi visto ainda como incorporar CSS em páginas HTML e como trabalhar com as principais propriedades do CSS. Agora, acesse o AVA e responda as questões da competência 4. Ficou com alguma dúvida na competência 4? Para saná-las com os professores e discutir com seus colegas sobre os assuntos estudados, acesse o Fórum de Dúvidas: Competência 4! Nosso próximo passo é seguir para competência 5. Estamos próximo de concluir essa disciplina. Vamos lá? 71 Competência 05 5.Competência 05 | Planejar layouts com CSS 3 Prezado(a) estudante, na competência 4 você aprendeu a como estilizar uma página. No entanto, não foi abordado como planejar o layout utilizando o CSS 3. Com isso, esta competência tem como objetivo apresentar como definir um modelo de caixa (Box Model), assim como tratar sobre a largura, a altura e o posicionamento dos seus elementos. Você verá ainda sobre a definição de margem e de espaçamento interno, aprendendo também sobre box-sizing, que dependendo de como é declarada, altera a forma como o Box Model é calculada. Por fim, serão apresentadas as propriedades de display. Vamos continuar? 5.1 Box Model (Modelo de caixa) Quando são alteradas as propriedades de elementos dentro de uma página, precisa-se estar ciente de como essas alterações se comportarão na presença de outros elementos. Uma forma de entender o impacto causado pela mudança é pensar no box model (modelo em caixa em português) ou também chamado de Box Model W3C. Segundo definido pela W3C, O box model padrão é constituído de quatro áreas retangulares, sendo elas: conteúdo (content), espaçamento (padding), bordas (border) e margens (margin). Essas áreas se desenvolvem de dentro para fora, na ordem listada abaixo: • content (conteúdo): o conteúdo (texto ou imagem) que será exibido. • padding (espaçamento): determina a distância entre a borda e o conteúdo. • border (borda): são as quatro linhas que envolvem a caixa (box). • margin (margem): determina a distância que separa uma caixa da outra. A Figura abaixo representa o box model proposto pelo W3C: 72 Competência 05 Figura 23 – Box model proposto pelo W3C Fonte: www.w3schools.com/css/box-model.gif Descrição: Figura contendo quatro retângulos de tamanhos distintos (um dentro do outro, seguindo do menor até o maior), sendo o maior e o menor deles feito com linha tracejada e os dois retângulos intermediários feitos com linha contínua e com o espaçamento entre eles tendo cor de fundo a cor verde. No espaçamento entre cada retângulo é apresentado os elementos do box model proposto pelo W3C, sendo eles: margin(entre o maior retângulo e o segundo maior) border (entre o segundo maior e o terceiro maior) padding (entre o terceiro e o menor retângulo) e content (dentro do menor retângulo). 5.1.1 Padding A propriedade padding se destina a criar um espaçamento interno em um box (por espaçamento interno leia-se a distância entre o limite do elemento, sua borda, e seu respectivo conteúdo). Vale destacar que os valores válidos para as propriedades padding são: • comprimento: um valor CSS para comprimento (px, em, pt, etc). • porcentagem: um valor expresso em porcentagem. Uma vez visto os valores possíveis que podem ser declarados numa propriedade padding, a seguir, você verá cada forma de declarar essa propriedade: • padding-top - Essa propriedade define o espaçamento superior. O código do Quadro a seguir demonstra a aplicação dessa propriedade: /*código HTML*/ <p> um espaçamento superior de 4cm </p> /* Código CSS*/ p { padding-top: 4cm; 73 Competência 05 } Quadro 44 – Propriedade padding-top Fonte: O autor Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade padding-top. Na parte HTML é usada a tag <p> com a descrição “um espaçamento superior de 4cm.”. Em seguida, na parte CSS é apresentada o seletor p e dentro dela é definida a propriedade padding-top com o valor 4 cm. • padding-bottom - Essa propriedade define o espaçamento inferior. O código do Quadro abaixo demonstra a aplicação dessa propriedade: /*código HTML*/ <p> um espaçamento inferior de 6cm </p> /* Código CSS*/ p { padding-bottom: 6cm; } Quadro 45 – Propriedade padding - bottom Fonte: O autor Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade padding-bottom. Na parte HTML é usada a tag <p> com a descrição “um espaçamento inferior de 6cm.”. Em seguida, na parte CSS é apresentado o seletor p e dentro dele é definida a propriedade padding-bottom com o valor 6 cm. • padding-right- Essa propriedade define o espaçamento à direita. O código do Quadro a seguir demonstra a aplicação dessa propriedade: /*código HTML*/ <p> um espaçamento à direita de 8cm </p> /* Código CSS*/ p { padding-right: 8cm; } Quadro 46 – Propriedade padding - right Fonte: O autor Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade padding-right. Na parte HTML é usada a tag <p> com a descrição “um espaçamento à direita de 8cm.”. Em seguida, na parte CSS é apresentado o seletor p e dentro dele é definida a propriedade padding-right com o valor 8 cm. 74 Competência 05 • padding-left- Essa propriedade define o espaçamento à esquerda. O código do Quadro abaixo demonstra a aplicação dessa propriedade: /*código HTML*/ <p> um espaçamento à esquerda de 10cm </p> /* Código CSS */ p { padding-left: 10cm; } Quadro 47 – Propriedade padding - left Fonte: O autor Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade padding-left. Na parte HTML é usada a tag <p> com a descrição “um espaçamento à esquerda de 10cm.”. Em seguida, na parte CSS é apresentado o seletor p e dentro dele é definida a propriedade padding-left com o valor 10 cm. 5.1.2 Margin A propriedade margin se destina a definir a dimensão de cada uma das quatro margens de um elemento HTML. Vale destacar que os valores válidos para as propriedades margin são: • auto: margens laterais iguais (para centrar na horizontal elementos nível de bloco). • comprimento: um valor CSS para comprimento (px, em, pt, etc). • porcentagem: um valor expresso em porcentagem. Uma vez visto os valores possíveis que podem ser declarados numa propriedade margin, a seguir você verá cada forma de declarar essa propriedade: • margin-top - Essa propriedade define a margem superior. O código do Quadro abaixo demonstra a aplicação dessa propriedade: /*código HTML*/ <p> uma margem superior de 4cm </p> /* Código CSS*/ p { margin-top: 4cm; 75 Competência 05 } Quadro 48 – Propriedade margin-top Fonte: O autor Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade margin-top. Na parte HTML é usada a tag <p> com a descrição “uma margem superior de 4cm”. Em seguida, na parte CSS é apresentado o seletor p e dentro dele é definida a propriedade margin-top com o valor 4 cm. • margin-bottom- Essa propriedade define a margem inferior. O código do Quadro a seguir ,demonstra a aplicação dessa propriedade: /*código HTML*/ <p> uma margem inferior de 6cm </p> /* Código CSS*/ p { margin-bottom: 6cm; } Quadro 49 – Propriedade margin-bottom Fonte: O autor Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade margin-bottom. Na parte HTML é usada a tag <p> com a descrição “uma margem inferior de 6cm”. Em seguida, na parte CSS é apresentado seletor p e dentro dele é definida a propriedade margin-bottom com o valor 6 cm. • margin-right- Essa propriedade define a margem direita. O código do Quadro abaixo demonstra a aplicação dessa propriedade: /*código HTML*/ <p> uma margem direita de 8cm </p> /* Código CSS*/ p { margin-right: 8cm; } Quadro 50 – Propriedade margin-right Fonte: O autor 76 Competência 05 Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade margin-right. Na parte HTML é usada a tag <p> com a descrição “uma margem direita de 8cm”. Em seguida, na parte CSS é apresentado o seletor p e dentro dele é definida a propriedade margin-right com o valor 8 cm. • margin-left- Essa propriedade define uma margem esquerda. O código do Quadro abaixo demonstra a aplicação dessa propriedade: /*código HTML*/ <p> uma margem esquerda de 10cm </p> /* Código CSS*/ p { margin-left: 10cm; } Quadro 51 – Propriedade margin-left Fonte: O autor Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade margin-left. Na parte HTML é usada a tag <p> com a descrição “uma margem esquerda de 10cm”. Em seguida, na parte CSS é apresentado o seletor p e dentro dele é definida a propriedade margin-left com o valor 10 cm. DICA IMPORTANTE! É válido declarar valores negativos para margem, com o objetivo de sobrepor elementos. 5.2 Width e Height De acordo com o box Model padrão da W3C, as propriedades width (largura) e height (altura) definem as dimensões da área de conteúdo do box criado. As dimensões finais do box (largura x altura) são o resultado da soma dos valores das propriedades width, padding e border. Agora você irá conhecer as propriedades width e height! 77 Competência 05 5.2.1 Width A propriedade width se destina a definir a largura do box. Os valores considerados válidos para as propriedades width são: • comprimento: um valor CSS para comprimento (px, em, pt, etc). • porcentagem: um valor expresso em porcentagem. • auto: um valor que depende dos valores de outras propriedades. Uma vez visto os valores possíveis que podem ser declarados numa propriedade width, a seguir você verá cada forma de declarar essa propriedade: • width - Essa propriedade define a largura do boxe. O código do Quadro abaixo demonstra a aplicação dessa propriedade: /*código HTML*/ <div> elemento DIV com 200px de largura. </div> /* Código CSS*/ div { width: 200px; } Quadro 52– Propriedade width Fonte: O autor Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade width. Na parte HTML é usada a tag <div> com a descrição “elemento DIV com 200px de largura”. Em seguida, na parte CSS é apresentado o seletor div e dentro dele é definida a propriedade width com o valor 200px. • max-width - Essa propriedade serve para definir a largura máxima de um elemento. O código do Quadro a seguir demonstra a aplicação dessa propriedade: /*código HTML*/ <div> elemento DIV. </div> /* Código CSS No exemplo abaixo o elemento "div" se estenderá por toda a largura do seu elementopai até que a largura deste elemento atinja os 600px e a partir daí o "div" terá largura fixa de 600px */ div { 78 Competência 05 width: 100%; max-width: 600px; } Quadro 53 – Propriedade max-width Fonte: O autor Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade max-width. Na parte HTML é usada a tag <div> com a descrição “elemento DIV”. Em seguida, na parte CSS é apresentada na parte superior do código o comentário “No exemplo abaixo o elemento "div" se estenderá por toda a largura do seu elemento-pai até que a largura deste elemento atinja os 600px e a partir daí o "div" terá largura fixa de 600px", vindo logo depois o seletor div e dentro dele são definidas as propriedade width com o valor 100% e max-width com valor de 600px. • min-width - Essa propriedade serve para definir a largura mínima de um elemento. O código do Quadro abaixo demonstra a aplicação dessa propriedade: /*código HTML*/ <div> elemento DIV. </div> /* Código CSS. No exemplo abaixo o elemento "div" não poderá ter a largura menor que os 100px*/ div { width: 100%; min-width: 100px; } Quadro 54 – Propriedade max-width Fonte: O autor Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade min-width. Na parte HTML é usada a tag <div> com a descrição “elemento DIV”. Em seguida, na parte CSS é apresentada na parte superior do código o comentário “No exemplo abaixo o elemento "div" não poderá ter a largura menor que os 100px", vindo logo depois o seletor div e dentro dele são definidas as propriedade width com o valor 100% e min-width com valor de 100px. 5.2.2 Height A propriedade height se destina a definir a altura do box. Os valores considerados válidos para as propriedades height são: • comprimento: um valor CSS para comprimento (px, em, pt, etc). • porcentagem: um valor expresso em porcentagem. • auto: um valor que depende dos valores de outras propriedades. 79 Competência 05 Uma vez visto os valores possíveis que podem ser declarados numa propriedade height, a seguir será demonstrada cada forma de declarar essa propriedade: height - Essa propriedade define a altura do boxe. O código do Quadro abaixo demonstra a aplicação dessa propriedade: /*código HTML*/ <div> elemento DIV com 200px de altura. </div> /* Código CSS*/ div { height: 200px; } Quadro 55 – Propriedade height Fonte: O autor Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade height. Na parte HTML é usada a tag <div> com a descrição “elemento DIV com 200px de altura”. Em seguida, na parte CSS é apresentado o seletor div e dentro dele é definida a propriedade height com o valor 200px. • max-height - Essa propriedade serve para definir a altura máxima de um elemento. O código do Quadro a seguir demonstra a aplicação dessa propriedade: /*código HTML*/ <div> elemento DIV. </div> /* Código CSS. No exemplo abaixo o elemento "div" se estenderá por toda a altura do seu elementopai até que a altura deste elemento atinja os 600px e a partir daí o "div" terá largura fixa de 600px */ div { height: 100%; max-height: 600px; } Quadro 56 – Propriedade max-height Fonte: O autor Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade max-height. Na parte HTML é usada a tag <div> com a descrição “elemento DIV”. Em seguida, na parte CSS é apresentada na parte superior do código o comentário “No exemplo abaixo o elemento "div" se estenderá por toda a altura do seu elemento-pai até que a altura deste elemento atinja os 600px e a partir daí o "div" terá largura fixa de 600px", vindo logo depois o seletor div e dentro dele são definidas as propriedade height com o valor 100% e max-height com valor de 600px. 80 Competência 05 • min-height - Essa propriedade serve para definir a altura mínima de um elemento. O código do Quadro abaixo demonstra a aplicação dessa propriedade: /*código HTML*/ <div> elemento DIV com 100px de altura. </div> /* Código CSS. No exemplo abaixo o elemento "div" não poderá ter a altura menor que os 100px*/ div { height: 100%; min-height: 100px; } Quadro 57 – Propriedade min-height Fonte: O autor Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade min-height. Na parte HTML é usada a tag <div> com a descrição “elemento DIV com 100px de altura”. Em seguida, na parte CSS é apresentada na parte superior do código o comentário “No exemplo abaixo o elemento "div" não poderá ter a altura menor que os 100px", vindo logo depois o seletor div e dentro dele são definidas as propriedades height com o valor 100% e min-height com valor de 100px. 5.3 Box-sizing Se você pensa no tamanho de uma caixa, você não pensa só no conteúdo dela. Uma caixa termina em sua borda e isso deveria ser considerado seu tamanho, o que não acontece com o box model. Para isso, as CSS3 criaram a propriedade box-sizing, que dependendo de como é declarada, altera a forma como o Box Model é calculado, incorporando ou não os valores de padding e border à largura do box criado pelo elemento HTML. Os valores considerados válidos para a propriedade box-sizing são: • contente-box: essa declaração é o estilo padrão, conforme especificado pela norma CSS. Quando declarada dessa forma, os valores das propriedades padding e border são somados aos valores de width (largura) e height (altura), apresentando o elemento com um tamanho maior do que o desejado. Esse é o padrão default do box model. 81 Competência 05 • border-box: quando declarada assim, os valores das propriedades padding e border não são somados aos valores de width (largura) e height (altura, apresentando assim o elemento com seu tamanho real. O código do Quadro a seguir demonstra a aplicação dessa propriedade: /* Código HTML*/ <!DOCTYPE html> <html> <head> <title> Exemplo da propriedade Box-Sizing </title> <link rel="stylesheet" href="box sizing.css"> </head> <body> <div id="d1"> Box Sizing, a sua solução </div> <div id="d2"> Box Sizing, a sua solução </div> </body> </html> /* Código CSS */ #d1 { width: 400px; height: 300px; border: 10px solid #000; padding: 50px; box-sizing: border-box; } #d2 { width: 400px; height: 300px; border: 0px; padding: 0px; background: green; box-sizing: content-box } Quadro 58 – Propriedade box-sizing Fonte: O autor Descrição: Código-fonte demonstrando o uso da propriedade box-sizing. Na parte HTML o código apresenta a tag <title>, contendo dentro dela o texto “Exemplo da propriedade Box-Sizing” e a tag <link> (onde está contida dentro dela o href box sizing.css). Logo em seguida, dentro da tag <body> estão duas tags <div>, contendo ambas a mensagem “Box Sizing, a sua solução”. Em seguida, na parte CSS é apresentada a tag d1 e dentro dela são definidas as propriedades width (400px), height (300px); border (10px solid #000); padding (50px) e box-sizing (border-box). Logo após é 82 Competência 05 apresentada a tag d2 e dentro dela são definidas as propriedades width (400px), height (300px); border (0px); padding (0px); background (green) e box-sizing (content-box). Como resultado do código do Quadro acima que utiliza a propriedade box-sizing, você terá como resultado a sua representação na Figura abaixo. Figura 24 – Imagem da tela do browser como resultado do uso da propriedade box-sizing Fonte: O autor Descrição: Demonstração da tela do browser que apresenta resultado do uso da propriedade box-sizing. A parte superior da página mostra uma box-sizing (um retângulo com fundo branco e linhas de borda grossas, tendo dentro dela a mensagem “box sizing com o uso de box border”). A parte inferior da página mostra box-sizing (um retângulo com fundo verde e linhas de borda grossas, tendo dentro dela a mensagem “box sizing com o uso de content box”). 83 Competência 05 5.4 Position Existe um conjunto de propriedades que podemos utilizar para posicionar um elemento na página, que são top , left , bottom e right . Porém essas propriedades, por padrão, não são obedecidas por nenhum elemento, pois elas dependem de outra propriedade, a position. A propriedade position determina qual é o modo de posicionamento de um elemento, podendo ela receber como valor: static, relative, absolute ou fixed. Veremos o comportamento de cada um deles, junto com as propriedades de coordenadas. • static - O elemento com posição definida como static permanecerá sempre em seu local original no documento. Esse é o valor default de todo elemento HTML. O código do Quadro abaixo demonstra a aplicação dessa propriedade: /* Código CSS*/ h1 { position: static; } Quadro 59 – Propriedade position declarada como static Fonte: O autor Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade position dentro do seletor h1 e é definida como static. • relative - O elemento com posição definida como relative aceita as propriedades de coordenadas. As referidas coordenadas são obedecidas em relação à posição original do elemento. O exemplo de código transcrito no Quadro a seguir demonstra a aplicação dessa propriedade, tendo como resultado o que é apresentado na Figura abaixo: /*código HTML*/ <!DOCTYPE html> <html> <head> <title> Exemplo da propriedade Relative </title> 84 Competência 05 <link rel="stylesheet" href="estiloRelative.css"> </head> <body> <div> <h1> Exemplo da posição relative linha 1</h1> <h2> Exemplo da posição linha 2</h2> </div> </body> </html> /* Código CSS*/ div { width: 350px; height: 300px; border: 10px solid #000; padding: 50px; box-sizing: border-box; } h1 { position: relative; top: 20px; left: 20px; } h2 { top: 20px; left: 20px; } Quadro 60 – Propriedade position declarada como relative Fonte: O autor Descrição: Código-fonte demonstrando o uso da propriedade position declarada como relative. Na parte HTML o código apresenta a tag <title>, contendo dentro dela o texto “Exemplo da propriedade Relative” e a tag <div>, onde está contida dentro dela a tag <h1> (contendo a mensagem “Exemplo da posição relative linha 1”) e a tag <h2> (contendo a mensagem “Exemplo da posição linha 2”). Em seguida, na parte CSS é apresentado o seletor div e dentro dele são definidas as propriedades width (350px), height (300px); border (10px solid #000); padding (50px) e box-sizing (borderbox). Logo após é apresentado o seletor h1 e dentro dele são definidas as propriedades position (relative), top (20px) e left (20px). Em seguida é apresentado seletor h2 e dentro dele são definidas as propriedades top (20px) e left (20px). Como resultado do código do Quadro acima que utiliza o elemento relative, você terá como resultado a sua representação na Figura abaixo. 85 Competência 05 Figura 25 – Resultado do uso da propriedade position declarada como relative Fonte: O autor Descrição: Demonstração da tela do browser que apresenta resultado do uso da propriedade position declarada como relative. Na barra de título da página web é exibida a mensagem “Exemplo da propriedade relative”. A parte superior da página mostra uma box-sizing (um retângulo com fundo branco e linhas de borda grossa), tendo dentro dele a mensagem “Exemplo da posição relative linha 1” na parte central do box e logo abaixo da palavra linha 1, está a mensagem “Exemplo da posição linha 2” mais alinhada a direita do box. • absolute - O elemento com posição definida como absolute possibilita posicionar qualquer elemento de acordo com o elemento pai que tenha um position diferente de static. O exemplo de código transcrito no Quadro a seguir demonstra a aplicação dessa propriedade, tendo como resultado o que é apresentado na Figura abaixo: /*código HTML*/ <!DOCTYPE html> <html> <head> <title> Exemplo da propriedade Absolute </title> <link rel="stylesheet" href="estiloAbsolute.css"> </head> <body> <div> <h1> Posição Absolute L1</h1> <h2> Posição Absolute L2</h2> </div> </body> </html> 86 Competência 05 /* Código CSS*/ body { background: #000; } div { background: #eee; width: 400px; height: 300px; border: 10px solid #000; padding: 50px; box-sizing: border-box; } h1 { position: absolute; top: 20px; left: 20px; outline: 1px solid #444; } h2 { outline: 1px solid #f90;} Quadro 61 – Propriedade position declarada como absolute Fonte: O autor Descrição: Código-fonte demonstrando o uso da propriedade position declarada como absolute. Na parte HTML o código apresenta a tag <title>, contendo dentro dela o texto “Exemplo da propriedade Absolute” e a tag <div>, onde está contida dentro dela a tag <h1> (contendo a mensagem “Posição Absolute L1”) e a tag <h2> (contendo a mensagem “Posição Absolute L2”). Em seguida, na parte CSS é apresentada o seletor div e dentro dele são definidas as propriedades background (#eee) width (400px), height (300px); border (10px solid #000); padding (50px) e box-sizing (border-box). Logo após é apresentado seletor h1 e dentro dele são definidas as propriedades position (absolute), top (20px); left (20px) e outline (1px solid #444). Em seguida é apresentado seletor h2 e dentro dele é definida a propriedade outline (1px solid #f90). Como resultado do código do Quadro acima que utiliza o elemento absolute, você terá como resultado a sua representação na Figura abaixo. 87 Competência 05 Figura 26 – Resultado do uso da propriedade position declarada como absolute Fonte: O autor Descrição: Demonstração da tela do browser que apresenta resultado do uso da propriedade position declarada como absolute. A parte superior da página mostra uma box-sizing (um retângulo com fundo cinza), tendo dentro dele a mensagem “Posição Absolute L1” alinhada à mais ao centro do box. O restante da página está com um fundo preto. • fixed - O elemento com posição definida como fixed sempre vai tomar como referência a porção visível do documento no navegador, e mantém essa posição inclusive quando há rolagem na tela. O exemplo de código transcrito no Quadro abaixo demonstra a aplicação dessa propriedade, tendo como resultado o que é apresentado na Figura a seguir: /*código HTML*/ <body> <div> <h1> Exemplo da posição Fixed topo</h1> <h2> Exemplo da posição Fixed baixo</h2> </div> </body> </html> /* Código CSS*/ div { width: 400px; height: 1600px; border: 10px solid #000; padding: 50px; box-sizing: border-box; position: relative } h1 { position: fixed; top: 0px; right: 20px; left: 20px; outline: 1px solid #444; } h2 { position: fixed; bottom: 0px; right: 20px; left: 20px; outline: 1px solid #444; background: #fff; } 88 Competência 05 Quadro 62 – Propriedade position declarada como fixed Fonte: O autor Descrição: Código-fonte demonstrando o uso da propriedade position declarada como fixed. Na parte HTML o código apresenta a tag <div>, onde está contida dentro dela a tag <h1> (contendo a mensagem “Exemplo da posição Fixed topo”) e a tag <h2> (contendo a mensagem “Exemplo da posição Fixed baixo”). Em seguida, na parte CSS é apresentado seletor div e dentro dele são definidas as propriedades width (400px), height (1600px); border (10px solid #000); padding (50px); box-sizing (border-box) e position (relative). Logo após é apresentado o seletor h1 e dentro dele são definidas as propriedades position (fixed), top (20px); left (20px) e outline (1px solid #444). Em seguida é apresentado o seletor h2 e dentro dela são definidas as propriedades position (fixed), top (20px); left (20px); outline (1px solid #444) e background (#fff). Como resultado do código do Quadro acima que utiliza o elemento fixed, você terá como resultado a sua representação na Figura abaixo. Figura 27 – Resultado do uso da propriedade position declarada como fixed Fonte: O autor Descrição: Demonstração da tela do browser que apresenta resultado do uso da propriedade position declarada como fixed. A página web possui duas cores fundo, sendo uma barra laranja (que preenche quase toda página) e uma barra preta (que preenche o restante da página). A parte superior da página mostra uma box-sizing curta(um retângulo com fundo laranja), tendo dentro dele a mensagem “Posição Fixed L1” alinhada à direita do box. Na parte inferior da página é exibida uma box-sizing prolongada (um retângulo com fundo branco), tendo dentro dele a mensagem “Posição Fixed L2” alinhada à direita do box. 89 Competência 05 DICA IMPORTANTE! As propriedades top, right, bottom, left não se aplicam para elementos com posição static! 5.5 Display A propriedade display permite definir a maneira como determinado elemento HTML será renderizado. Em outras palavras, essa propriedade define qual estratégia de exibição o elemento utilizará. É tida como a propriedade mais importante do CSS para controlar o layout. Ela pode receber como valor: none, block, inline, inline-block, list-item, table. Você verá o comportamento de cada um deles, conforme descrito a seguir: • none – a declaração display: none faz com que o elemento HTML não seja renderizado. Quando escondemos um elemento com esta declaração, o navegador não gera um box para ele e em consequência ele não é visto na tela e não interfere com o layout da página. O exemplo de código transcrito no Quadro a seguir demonstra a aplicação dessa propriedade, tendo como resultado o que é apresentado na Figura abaixo: /*código HTML*/ <!DOCTYPE html> <html> <head> <title> Exemplo da propriedade Display: none </title> <link rel="stylesheet" href="exemploNone.css"> </head> <body> <a href="...">Saiba mais < span class="contexto"> acessando o AVA do EAD Pernambuco </span></a> </body> </html> /* Código CSS.*/ .contexto { display: none; 90 Competência 05 } Quadro 63 – Propriedade display declarada como none Fonte: O autor Descrição: Código-fonte demonstrando o uso da propriedade display declarada como none. Na parte HTML o código apresenta a tag <title> tendo dentro dela a mensagem “Exemplo da propriedade Display: none” e a declaração do href "exemploNone.css". Em seguida é definida a tag <span>, onde está contida dentro dela o atributo class (contendo a declaração “contexto”). Logo após, na parte CSS é apresentado o seletor contexto e dentro dele é definida a propriedade display como none. Como resultado do código do Quadro acima que utiliza a propriedade display declarado como none, você terá como resultado a sua representação na Figura abaixo. Figura 28 – Resultado do uso da propriedade Display declarada como none Fonte: O autor Descrição: Demonstração da tela do browser que apresenta resultado do uso da propriedade display declarada como none. A página web está toda em branco, pois o elemento HTML não foi renderizado e com isso o navegador não gerou um box para o elemento e em consequência ele não é visto na tela. • block – A declaração display: block faz com que o elemento HTML seja renderizado como bloco, tal como os parágrafos e os cabeçalhos o são. Um bloco contém um espaço em branco tanto em cima como embaixo e não permite outros elementos HTML ao lado. O exemplo de código transcrito no Quadro a seguir demonstra a aplicação dessa propriedade, tendo como resultado o que é apresentado na Figura abaixo: 91 Competência 05 /*código HTML*/ <!DOCTYPE html> <html> <head> <title> Exemplo da propriedade Display: block </title> <link rel="stylesheet" href="exemploBlock.css"> </head> <body> <div class="box"> <p> Conteúdo do bloco 1 </p> <p> Conteúdo do bloco 2 </p> </div> </body> </html> /* Código CSS.*/ p { border: 2px solid green; width: 40%; } box { box-sizing: content-box; display: block; float: none; line-height: 19.5px; position: static; } Quadro 64 – Propriedade display declarada como block Fonte: O autor Descrição: Código-fonte demonstrando o uso da propriedade display declarada como block. Na parte HTML o código apresenta a tag <title> tendo dentro dela a mensagem “Exemplo da propriedade Display: Block” e a declaração do href "exemploBlock.css". Em seguida é definida a tag <div>, onde está contida dentro dela o atributo class (contendo a declaração “box”). Dentro da tag <div> estão duas tags <p> contendo dentro da primeira a mensagem “Conteúdo do bloco 1” e na outra a mensagem “Conteúdo do bloco 2”. Logo após, na parte CSS é apresentado o seletor p e dentro dele são definidas as propriedades border (2px solid green) e width (40%). Em seguida é apresentado o seletor box p e dentro dele são definidas as propriedades box-sinzing (content-box); display (box); float (none); line-height (19.5px) e position (static). Como resultado do código do Quadro acima que utiliza a propriedade display como block, você terá como resultado a sua representação na Figura abaixo. 92 Competência 05 Figura 29 – Resultado do uso da propriedade Display declarada como block Fonte: O autor Descrição: Demonstração da tela do browser que apresenta resultado do uso da propriedade display declarada como block. A página web possui um fundo branco. A parte superior da página mostra duas box-sizing curtas (um retângulo com fundo branco e linhas de borda na cor, sendo do mesmo tamanho e um abaixo do outro), tendo dentro do primeiro box a mensagem “Conteúdo do bloco 1” alinhada à direita do box e no segundo a mensagem “Conteúdo do bloco 2” alinhada à direita do box. • inline – A declaração display: inline faz com que o elemento HTML seja renderizado inline, dentro do bloco na mesma linha. Quando o elemento encontra-se entre dois blocos ele forma o chamado 'bloco anônimo' e é renderizado com a menor largura possível. O exemplo de código transcrito no Quadro abaixo demonstra a aplicação dessa propriedade, tendo como resultado o que é apresentado na Figura a seguir: /*código HTML*/ <!DOCTYPE html> <html> <head> <title> Exemplo da propriedade Display: inline </title> <link rel="stylesheet" href="exemploInline.css"> </head> <body> <div class="box"> <p> As caixas ao redor das palavras antes do elemento forte e depois do elemento forte são chamadas de caixas anônimas, caixas introduzidas para garantir que tudo esteja envolto em uma caixa. O tamanho da caixa de linha na direção do bloco < strong> é definida pela caixa mais alta </ strong> dentro dela.</p> 93 Competência 05 <p> As caixas ao redor das palavras antes do elemento forte e depois do elemento forte são chamadas de caixas anônimas, caixas introduzidas para garantir que tudo esteja envolto em uma caixa. O tamanho da caixa de linha na direção do bloco é definida pela caixa mais alta dentro dela. </p> </div> </body> </html> /* Código CSS.*/ p { border: 4px solid red; width: 40%; } strong { font-size: 300%; } box { box-sizing: content-box; display: inline; float: none; line-height: 19.5px; position: static; } Quadro 65 – Propriedade display declarada como inline Fonte: O autor Descrição: Código-fonte demonstrando o uso da propriedade display declarada como inline. Na parte HTML o código apresenta a tag <title> tendo dentro dela a mensagem “Exemplo da propriedade Display: inline” e a declaração do href "exemploInline.css". Em seguida é definida a tag <div>, onde está contida dentro dela o atributo class (contendo a declaração “box”).Dentro da tag <div> estão duas tags <p>. Na primeira tag <p> está a mensagem “As caixas ao redor das palavras antes do elemento forte e depois do elemento forte são chamadas de caixas anônimas, caixas introduzidas para garantir que tudo esteja envolto em uma caixa. O tamanho da caixa de linha na direção do bloco é definida pela caixa mais alta dentro dela.”, onde o trecho “é definida pela caixa mais alta” está definido entre a tag <Strong>. Na outra tag <p> está a mensagem “As caixas ao redor das palavras antes do elemento forte e depois do elemento forte são chamadas de caixas anônimas, caixas introduzidas para garantir que tudo esteja envolto em uma caixa. O tamanho da caixa de linha na direção do bloco é definida pela caixa mais alta dentro dela.”. Logo após, na parte CSS é apresentado o seletor p e dentro dele são definidas as propriedades border (4px solid red) e width (40%). Logo após é apresentado o seletor strong, e dentro dele é definida a propriedade font-size (300%). Em seguida é apresentado o seletor box p e dentro dele são definidas as propriedades box-sinzing (content-box); display (inline); float (none); lineheight (19.5px) e position (static). Como resultado do código do Quadro acima que utiliza a propriedade display como inline, você terá como resultado a sua representação na Figura abaixo. 94 Competência 05 Figura 30 – Resultado do uso da propriedade Display declarada como inline Fonte: O autor Descrição: Demonstração da tela do browser que apresenta resultado do uso da propriedade display declarada como inline. A página web possui um fundo branco. A parte superior da página mostra duas box-sizing (um retângulo com fundo branco e linhas de borda na cor vermelha, sendo do mesmo tamanho e um abaixo do outro), tendo dentro do primeiro box a mensagem “As caixas ao redor das palavras antes do elemento forte e depois do elemento forte são chamadas de caixas anônimas, caixas introduzidas para garantir que tudo esteja envolto em uma caixa. O tamanho da caixa de linha na direção do bloco é definida pela caixa mais alta dentro dela.”, onde o trecho “é definida pela caixa mais alta” está definido com uma fonte em tamanho maior que o resto do texto e em negrito, estando todo o texto alinhado à direita do box. No segundo box está a mensagem “As caixas ao redor das palavras antes do elemento forte e depois do elemento forte são chamadas de caixas anônimas, caixas introduzidas para garantir que tudo esteja envolto em uma caixa. O tamanho da caixa de linha na direção do bloco é definida pela caixa mais alta dentro dela.” alinhada à direita do box. • inline-block – A declaração display: inline-block é semelhante ao inline, no entanto, conseguimos definir as propriedades de largura e altura para ele, o que não é possível na declaração inline. Coisa que não conseguimos em um elemento com display: inline. O exemplo de código transcrito no Quadro abaixo demonstra a aplicação dessa propriedade, tendo como resultado o que é apresentado na Figura a seguir: /*código HTML*/ <!DOCTYPE html> <html> <head> <title> Exemplo da propriedade Display: Inline-block </title> <link rel="stylesheet" href="exemploInlineBlock.css"> </head> <body> <ul class="example"> <li class="example-item example-item_first">Primeiro bloco</li> <li class="example-item example-item_second">Segundo bloco</li> <li class="example-item example-item_third">Terceiro bloco</li> </ul> 95 Competência 05 </body> </html> /* Código example CSS.*/ .example { color: #FFF; } .example-item { width: 25%; height: 150px; } .example-item_first { background-color: red; } .example-item_second { background-color: green; } .example-item_third { background-color: blue; line-height: 19.5px; position: static; } /* Código reset CSS.*/ * { margin: 0; padding: 0; border: 0; } body { font-family: "Open Sans", sans-serif; } ul, ol, li { list-style: none; } Quadro 66 – Propriedade display declarada como inline-block Fonte: O autor Descrição: Código-fonte demonstrando o uso da propriedade display declarada como inline-block. Na parte HTML o código apresenta a tag <title> tendo dentro dela a mensagem “Exemplo da propriedade Display: Inline-block” e a declaração do href "exemploInlineBlock.css". Em seguida é definida a tag <ul>, onde está contida dentro dela o atributo class (contendo a declaração “example”).Dentro da tag <ul> estão três tags <li>. Na primeira tag <li> está contida dentro dela o atributo class (contendo a declaração “example-item example-item_first”) e a mensagem “Primeiro bloco”. Na segunda tag <li> está contida dentro dela o atributo class (contendo a declaração “example-item example-item_second”) e a mensagem “Segundo bloco”. Na terceira tag <li> está contida dentro dela o atributo class (contendo a declaração “example-item example-item_third”) e a mensagem “Terceiro bloco”.Logo após, na parte CSS é apresentado o seletor example e dentro dele é definida a propriedade color (#FFF). Em seguida é apresentado o seletor example-item e dentro dele as propriedades width (25%) e height (150px). Logo após é apresentado o seletor exampleitem_first e dentro dele a propriedade background-color (red). Em seguida é apresentado o seletor exampleitem_second e dentro dele a propriedade background-color (green). Logo após é apresentado o seletor example- 96 Competência 05 item_third e dentro dele as propriedade background-color (blue), line-height (19.5px) e position (static). Em seguida vem o código reset CSS, onde é apresentado o seletor body e dentro dele a propriedade font-family ("Open Sans", sansserif;). Logo após são apresentados os seletores ul, ol, li e dentro deles a propriedade list-style (none). Como resultado do código do Quadro acima que utiliza a propriedade display como inline-block, você terá como resultado a sua representação na Figura abaixo. Figura 31 – Resultado do uso da propriedade Display declarada como inline-block Fonte: O autor Descrição: Demonstração da tela do browser que apresenta resultado do uso da propriedade display declarada como inline-block. A página web possui um fundo branco e três box-sizing. Na parte superior da página mostra uma box-sizing alinhada a esquerda da página (um quadrado com fundo vermelho e dentro dele a mensagem “primeiro bloco”). Na parte central à esquerda da página, logo abaixo da primeira caixa, há uma box-sizing (um quadrado com fundo verde e dentro dele a mensagem “segundo bloco”). Na parte inferior à esquerda da página, logo abaixo da segunda caixa, há uma box-sizing (um quadrado com fundo azul e dentro dele a mensagem “terceiro bloco”). • list-item – a declaração display: list-item faz com que o elemento HTML seja renderizado como um item de lista, isto significa que aparecerá um marcador na frente de cada item, tal como acontece com o elemento ul. O exemplo de código transcrito no Quadro a seguir demonstra a aplicação dessa propriedade, tendo como resultado o que é apresentado na Figura abaixo: /*código HTML*/ <!DOCTYPE html> <html> <head> 97 Competência 05 <title> Exemplo da propriedade Display: item-list </title> <link rel="stylesheet" href="exemploItemList.css"> </head> <body> <div class="fake-list">Exemplo da propriedade Display: item-list </div> </body> </html> /* Código CSS.*/ .fake-list { display: list-item; list-style-position: inside; } Quadro 67 – Propriedade display declarada como list-item Fonte: O autor Descrição: Código-fonte demonstrando o uso da propriedade display declarada como list-item. Na parte HTML o código apresenta a tag <title> tendo dentro dela a mensagem “Exemplo da propriedade Display: item-list” e a declaração do href "exemploItemList.css". Em seguida é definida a tag <div>, onde está contida dentro dela o atributo class (contendo a declaração “fake-list”) e a mensagem “Exemplo da propriedade Display: item-list”. Logo após, na parte CSS é apresentado o seletor fake-list e dentro dele são definidas as propriedades display (list-item) e list-styleposition (inside). Como resultado do código do Quadro acima que utiliza a propriedade display como listitem, você terá como resultado a sua representação na Figura abaixo. Figura 32 – Resultado do uso da propriedade Display declarada como list-item Fonte: O autor Descrição: Demonstração da tela do browser que apresenta resultado do uso da propriedade display declarada como list-item. A página web possui um fundo branco e uma mensagem alinhada à esquerda da página (Exemplo da propriedade display: item-list) e com um ponto indicador de marcador de lista. 98 Competência 05 • table – a declaração display: table faz com que o elemento HTML seja renderizado como tabela. O exemplo de código transcrito no Quadro abaixo demonstra a aplicação dessa propriedade, tendo como resultado o que é apresentado na Figura a seguir: /*código HTML*/ <!DOCTYPE html> <html> <head> <title> Exemplo da propriedade Display: item-list </title> <link rel="stylesheet" href="exemploTable.css"> </head> <body> <div class="one">Exemplo da propriedade Display: table</div> <div class="two">Exemplo da propriedade Display: table</div> </body> </html> /* Código CSS.*/ .one { color: white; background-color: black; margin: 10px; width: 150px; height: 70px; display: table; } .two { color: black; background-color: red; margin: 10px; width: 150px; height: 70px; display: table; } Quadro 68 – Propriedade display declarada como table Fonte: O autor Descrição: Código-fonte demonstrando o uso da propriedade display declarada como table. Na parte HTML o código apresenta a tag <title> tendo dentro dela a mensagem “Exemplo da propriedade Display: table” e a declaração do href "exemploTable.css". Em seguida é definida a tag <div>, onde está contida dentro dela o atributo class (contendo a declaração “one”) e a mensagem “Exemplo da propriedade Display: table”. Logo após há outra tag <div> >, onde está contida dentro dela o atributo class (contendo a declaração “two”) e a mensagem “Exemplo da propriedade Display: table”.Logo após, na parte CSS é apresentado o seletor one e dentro dele são definidas as propriedades color (white), background-color (black), margin (10px), width (150 px), height (70 px) e display (table). Em 99 Competência 05 seguida é apresentado o seletor two e dentro dele as propriedades color (black), background-color (red), margin (10px), width (150 px), height (70 px) e display (table). Como resultado do código do Quadro acima que utiliza a propriedade display como table, você terá como resultado a sua representação na Figura abaixo. Figura 33 – Resultado do uso da propriedade Display declarada como table Fonte: O autor Descrição: Demonstração da tela do browser que apresenta resultado do uso da propriedade display declarada como table. A página web possui um fundo branco e duas box-sizing. Na parte superior da página mostra uma box-sizing alinhada a esquerda da página (um quadrado com fundo preto e dentro dele a mensagem “Exemplo da propriedade Display: table”). Ainda na página, logo abaixo da primeira caixa, há uma box-sizing (um quadrado com fundo vermelho e dentro dele a mensagem “Exemplo da propriedade Display: table”. 100 Conclusão Querido(a) estudante, chegamos ao final da disciplina Introdução a Web Design! Acredito que todo conteúdo que foi trabalhado ao longo dessa nossa jornada, tenha sido de grande valia e que o conhecimento adquirido no percurso dessa disciplina tenham lhe ajudado e contribuído para sua aprendizagem a respeito da internet (seu histórico e sua estrutura), conhecendo também o que é a linguagem de marcação de hipertextos (HTML) e as IDE's que podem ser usadas para facilitar o desenvolvimento de páginas HTML. Também aprendemos sobre os fundamentos da Web Design, onde foi possível conhecer o planejamento e organização de um website, assim como sobre programação front-end e back-end. Além disso, no decorrer das competências, foi possível aprender sobre 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. Vimos ainda sobre como é possível interligar páginas, demonstrando assim uma das características do grande poder da Web é o fato de permitir a integração entre as páginas. Também foi possível conhecer o HTML5, que teve o papel de introduzir o suporte de mídia embutido por meio de tags específicas, oferecendo a possibilidade de incorporar recursos de multimídia em documentos HTML. Em continuidade, foi possível aprender sobre como tornar um site um sistema de navegação funcional, utilizando para isso outro padrão da W3C, o CSS, onde pudemos conhecer essa linguagem de estilização e suas funcionalidades, oferecendo a possibilidade de tratar a estilização da página separadamente do conteúdo textual. Por fim, aprendemos sobre como definir um modelo de caixa (Box Model), sendo possível tratar sobre a largura, a altura e o posicionamento dos seus elementos. Portanto, espero que o conteúdo abordado nesta disciplina possa ter contribuído na sua formação, possibilitando a você o desenvolvimento de competências e habilidades associadas à área de Web Design. Foi um prazer ter tido a oportunidade de caminhar com você durante essas cinco semanas. Até a próxima! 101 Referências BONIATI, B. B. Fundamentos de Desenvolvimento Web. Universidade Federal de Santa Maria, 2013. COMER, D. E. Redes de computadores e internet. 4. ed. Porto Alegre: Bookman, 2007. DE VILA, E., FREIRE, T.G.N. PLATAFORMA VIRTUAL COLABORATIVA PARA GESTÃO DA ESCOLARIZAÇÃO E DO PROCESSO DE ENSINO-APRENDIZAGEM NA EDUCAÇÃO INCLUSIVA. Trabalho de Conclusão de Curso, Universidade Federal de Santa Catarina, 2019. GRANNELL, C. The Essential Guide to CSS and HTML Web Design. New York: A Press, 2007. https://www.w3schools.com/html/html_layout.asp acessado em 03/12/2019. MARINHO, C. F. R. Fundamentos de Web Design e formatação de imagem. CETAM, 2012. SCHUTZ, F. Web design. Curitiba: Ed. UTFPR, 2013. 102 Minicurrículo do Professor Timóteo Gomes da Silva Doutorando em Engenharia Elétrica (linha de pesquisa na área de Desenvolvimento de Sistemas) na UFPE (Universidade Federal de Pernambuco) com foco em Engenharia de Requisitos para Sistemas AAL – Ambient Assisted Living, Mestre em Engenharia da Computação na UPE (Universidade de Pernambuco), com foco na Priorização de Requisitos através da Simulação Computacional. Bacharel em Sistemas de Informação pela UFRPE (Universidade Federal Rural de Pernambuco). Atua como professor de ensino à distância do curso técnico de Desenvolvimento de Sistemas da Escola Técnica Estadual Professor Antônio Carlos Gomes da Costa (ETEPAC). 103

ebook - Introdução Web Design [Etepac 2021]

Related documents

Products

Support

ebook - Introdução Web Design [Etepac 2021]

Related documents

Add this document to collection(s)

Add this document to saved

Suggest us how to improve StudyLib