Copyright © 2013 by Centro de Qualificação Profissional Ltda. Todos os direitos reservados. Proibida a reprodução, mesmo parcial, por qualquer processo, seja mecânico, eletrônico, fotocópia, gravação, digitalização ou outros, sem prévia autorização escrita para o Centro de Qualificação Profissional. Pesquisa e planejamento, Redação: Tido Ferraz. Diagramação: NixOnline. Revisão de Prova: Thiego Hurbath. Unidades de Ensino: Av. Tancredo Neves, 148, Loja 63 Shopping Iguatemi, 1º Piso — Tel. (71) 2109-0404 41820-020 — Salvador — BA Av. Tancredo Neves, 274 Centro Empresarial Iguatemi, Bloco B, Térreo, Cam. das Árvores — Tel. (71) 22239144 41820-000 — Salvador — BA HTML Sumário 5 Apresentação.................................................9 Introdução...................................................13 O que é um Webdesigner?.......................................... 13 Softwares utilizados.................................................. 14 Sobre o curso........................................................... 15 Como surgiu a Internet?...............................16 O que é a Internet?.......................................17 O que é um site?...........................................18 Hipertexto................................................................ 18 Protocolos de transferência........................................ 19 Limitações para o webdesign.........................19 O peso dos websites.................................................. Tipografia................................................................. Incompatibilidade de Navegadores.............................. Resolução de monitor................................................ 20 21 22 22 O que é HTML?............................................27 Comandos básicos..................................................... 28 Categorias................................................................ 30 Metadata content.........................................................31 Flow content................................................................32 Projeto Meu 1º HTML (parte 1)....................37 Principais comandos HTML...........................41 <BR>....................................................................... <P>.......................................................................... <DIV>...................................................................... <A>......................................................................... 41 41 41 41 HREF...........................................................................41 <IMG>..................................................................... 42 SRC.............................................................................43 ALT.............................................................................43 WIDTH.........................................................................43 HEIGHT.......................................................................43 BORDER......................................................................43 Sumário 6 Projeto Meu 2º HTML..................................45 Estilos CSS...................................................51 Vinculando as Folhas de Estilo.................................... 51 Folha de Estilo Externa..................................................51 Folha de Estilo Interna..................................................51 Inline...........................................................................52 A sintaxe dos Estilos CSS..............................52 As Propriedades...........................................53 Propriedade Font....................................................... 53 Fonte Padrão do Site.....................................................53 Novo Estilo Fonte.........................................................53 Propriedades das fontes............................................. 54 Valores para a Propriedade Font.....................................54 Propriedade Texto..................................................... 55 Algumas propriedades:.................................................55 Valores válidos..............................................................55 Cor de link................................................................ Propriedade Plano de Fundo....................................... Propriedade Margin................................................... Valores válidos.......................................................... 56 56 56 57 Criando Seções de Conteúdo.........................57 Header..................................................................... Article...................................................................... Aside....................................................................... Nav.......................................................................... Section..................................................................... Footer...................................................................... 58 58 58 58 58 58 Projeto Construindo Sites com Seções...........61 Posicionando Elementos com CSS..................65 Margens................................................................... 65 Afastamentos........................................................... 66 Posicionando Divisões e Seções.................................. 66 Static...........................................................................67 Relative........................................................................67 Fixed...........................................................................68 Float ou Flutuar............................................................68 Display........................................................................70 Clear...........................................................................71 Projeto Posicionando os Elementos na HTML Construção do Site.......................................73 Inserindo Imagens como Plano de Fundo (Background)...............................................77 Fonts do Google...........................................78 O seletor de classe........................................79 Projeto Construindo um Novo Site................81 Twitter e Facebook.......................................89 Álbum de Fotos com Jquery..........................89 Aplicar GoogleMaps.....................................90 Projeto Integrando o Site com Redes Sociais.93 7 Apresentação Nos últimos doze anos a internet mudou muito, acompanhando as inovações tecnológicas ocorridas neste período. Quem não lembra dos antigos aparelhos celulares, que eram imensos e faziam apenas ligações, hoje eles também oferecem recursos de tv, máquina fotográfica, rádio e acesso a internet, coisas que antes só podiam ocorrer nos filmes de 007 ou nos desenhos da família Jetsons? E a época da internet discada, que para ver um vídeo, ou apenas visualizar páginas no momento de pico na conexão, era necessária uma imensa dose de paciência Tibetana? Hoje quase não se encontra um usuário com acesso por meio discado, quase todos utilizam a internet dedicada por meio de cabo, sinal de rádio ou de tecnologia 3G. E o melhor de tudo é a facilidade que as classe sociais menos privilegiadas passaram a ter com o acesso através de rede compartilhada para a conexão ou até mesmo através de lan houses ou Infocentros públicos. Com a chegada da internet 2.0, o usuário deixou apenas de ser um coadjuvante neste novo meio de comunicação e passou a participar de uma maneira democrática publicando o seu próprio conteúdo, foi quando surgiram os serviços de Blogs, Fotologs e até mesmo a revolução criada nas redes sociais promovida pelo orkut. A partir deste momento todos puderam publicar as suas ideias, denunciar, elogiar algo, ou apenas postar o seu dia a dia através de textos e fotos. Neste momento de mudanças revolucionárias na internet e no modo de fazer páginas, surge um novo conceito no sistema de busca desenvolvido pelo Google, que consolida esta nova maneira de construção do código-fonte dos sites. Junto com estas mudanças veio a profissionalização do mercado e a necessidade de um maior conhecimento para a criação e construção de um site. Hoje existe uma revolução em todos os setores da sociedade promovida pela internet. Os meios de comunicação mudaram, pois a comunicação possibilitada pela internet é instantânea, por sinal serve de apoio aos curtos telejornais. A EAD (Educação a Distância) é uma realidade, muito questionada no início, porém foi possível comprovar que é possível excelentes resultados a um custo muito baixo para levar a educação para todos num país como o Brasil que é de proporções continentais. O mercado online em crescimento durante sete anos consecutivos, sempre crescendo mais do que o mercado real e ao contrário do que se pensa e é divulgado, muito mais seguro do que o mercado físico. E diversos outros setores e serviços do mercado. Porém não é tão simples ingressar nesta área, em primeiro lugar como em qualquer outra profissão é necessário ter nascido para isto, ou seja, ter o dom. O profissional web bem sucedido possui algumas características em comum, ele é criativo, curioso, autodidata, gosta de navegar (é claro) e sempre vai buscar a informação na internet. Outro detalhe importante para quem vai trabalhar com interfaces, é que não basta ser criativo é importante saber o que se vê, ou que se lê e o que se ouve, grandes idéias vem de um repertório criado durante a vida, nos momentos em que estamos vendo bons filmes, lendo bons livros, indo numa exposição de artes e contemplando o que é belo. Neste curso, o objetivo será de ensinar os recursos iniciais utilizados nos escritórios de desenvolvimento web, além de trazer tendências e novidades que podem não estar neste livro, pois como sabemos a informação é dinâmica e neste exato momento em que escrevo este texto, pode está surgindo algo e que ficou de fora. Aproveite este livro para acompanhar as aulas e para referência nos seus projetos em casa. Bom Trabalho!!! Tido Ferraz [email protected] HTML Capítulo 1 Introdução • O que é um Webdesigner • Softwares Utilizados • Sobre o Curso HTML Introdução O que é um Webdesigner? O webdesigner é o arquiteto e o pedreiro da Internet. É o responsável por criar um padrão visual, distribuir as informações de um site, produzir e trabalhar todas as imagens, montar as páginas, transferir os arquivos para o endereço Web, onde eles estarão hospedados; e ainda, às vezes, atualizar as informações desse site. Muita coisa, não é? Webdesign é uma área profissional multidisciplinar. Para ser webdesigner é necessário conhecer várias ferramentas diferentes: programas de computação gráfica, editores de linguagem HTML, clientes de FTP, alguns recursos de novas tecnologias como Java Scripts, Applets JAVA, DHTML, XML, PHP, ASP, JSP, CSS… Mas tudo bem, não se desespere. É por isso que você está aqui. Ao final do curso, você saberá o que significa cada uma dessas siglas. Todas juntas parecem uma sopa de letrinhas, mas cada uma representa uma importante ferramenta no desenvolvimento de websites. Só há uma coisa que é inerente a todo webdesigner. E isto não é uma coisa “ensinável”. Todo profissional da Web precisa gostar da Web. Ele tem que compreender como os sites guiam 13 Capítulo 1 14 os internautas através de suas páginas, como alguns são mais atraentes do que outros e como as informações são distribuídas. Isto só navegando muito na Web pra começar a entender. Sobretudo, os webdesigners têm que ser viciados em sites! Softwares utilizados Produzir um site é uma tarefa que passa por vários programas diferentes. O processo começa num computador pessoal, que quase todo mundo já tem. Ao receber o trabalho, o webdesigner tem de planejar todas as etapas. Ele tem de distribuir as informações do site de uma forma lógica, fazendo com que o internauta consiga se aprofundar nas informações de acordo com as suas necessidades. A primeira etapa da produção de um site é a elaboração da árvore, ou, como veremos no estudo do Dreamweaver, é o mapa do site, um fluxograma das informações. Nessa árvore, fica clara a quantidade de páginas que terá o site e a estrutura de navegação de tal, a página que leva à outra, ou a que contenha tal informação… A árvore (Fig. 1.1), geralmente, é produzido por algum programa para criação de diagramas, fluxogramas ou organogramas como o Visio da Microsoft, ou no BizAgi que é gratuíto. Além de ajudar o webdesigner a entender melhor o site que ele está produzindo, a árvore serve como descrição gráfica para o cliente. Ou seja, com a árvore anexada à proposta, fica fácil para o cliente visualizar o que ele está pagando, qual será o resultado do seu site. Figura 1.1 HTML O próximo passo é pensar no layout, que é o padrão visual de um site. Um layout é um arquivo base a partir do qual você irá salvar todas as imagens que serão inseridas na sua página. Nesta fase, rabiscar um pouco sempre ajuda. Papel e lápis afinal de contas NÃO são tecnologias obsoletas. Normalmente, os layouts são produzidos em programas bitmap de computação gráfica. Opa! E o que é um programa “bitmap”? Falaremos disso assim que começarmos a estudar o Fireworks, que é o editor de imagens bitmaps que usaremos no nosso curso. Layout pronto, o próximo passo é salvar todas as imagens que serão inseridas nas páginas. Os formatos mais comuns da Internet são os JPEGs (com extensão .jpg), os Gifs (com a extensão .gif) e os PNGs (com extensão .png). O Fireworks produz imagens com as três extensões. A próxima etapa é a montagem das páginas, que se faz num editor de texto qualquer, podendo ser usado até mesmo os mais rudimentares editores, como o Bloco de Notas do Windows. Obviamente existem programas especializados na criação de páginas Web, que nós conhecemos como editores HTML. Eles continuam sendo editores de texto, mas especializados na linguagem de programação HTML, e incorpora, inclusive, soluções em novas tecnologias como JAVA Script, Applet JAVA, DHTML, XHTML, XML e Flash. Por último, depois do site pronto, é necessário transferir os arquivos que o compõe para um servidor Web, que é o computador onde o site estará hospedado. Para isso, utilizamos programinhas que conhecemos como clientes de FTP, muitas vezes já incorporados aos editores HTML. Tanto o editor HTML, quanto o cliente de FTP, que utilizaremos em nosso curso, serão o Dreamweaver. Sobre o curso Para otimizar o aproveitamento, optamos por criar este curso baseado num processo prático de aprendizado. Após as noções teóricas iniciais, serão aplicados vários exercícios que conduzirão o aluno à construção de um website. Tudo começa com a construção de páginas simples, no método de digitação de comandos num editor de texto qualquer. Isto dará a base necessária para o entendimento dos editores HTML. A partir daí, 15 Capítulo 1 16 já estudando o editor Dreamweaver, desenvolveremos exercícios no decorrer do curso. Neste módulo, encontraremos sempre indicações sobre o modo de desenvolver o estudo proposto, a partir de imagens e dicas. Esperamos que você não encontre dificuldades e tenha o máximo aproveitamento. Como surgiu a Internet? Como sabemos, na década de 60 o mundo estava dividido em dois grandes blocos, de um lado o bloco capitalista liderado pelos americanos e do outro lado o bloco socialista liderado pela antiga União Soviética. Neste período o mundo vivia a chamada “Guerra Fria”, nome designado por não existir nenhum conflito físico entre as nações, mas que ao mesmo tempo ocorria uma enorme corrida armamentista entre os dois grandes blocos, a possibilidade de ocorrer uma nova grande guerra era muito grande. Sabendo desta possibilidade o governo norte-americano resolveu investir em pesquisas para comunicação das bases militares, a intenção era fazer com que mesmo se o Pentágono fosse atacado a comunicação entre o resto das bases não fosse perdida, até este momento a rede que existia passava por um computador central que ficava no Pentágono, o que deixava a comunicação vulnerável. No ano de 1968, a ARPA (Advanced Research and Projects Agency) orgão de defesa norte-americano, aprovou um projeto de comunicação e abriu uma licitação para implementação deste projeto. A BBN (Bolt, Beranek e Newman) ganhou a concorrência e instalou o primeiro ponto de comunicação no dia 1º de maio de 1969 na Universidade da Califórnia em Los Angeles. Até o fim de 69 mais três pontos estavam interligados, foram eles o Instituto de Pesquisas de Stanford, a Universidade da Califórnia em Santa Bárbara e a Universidade de Utah. Esta pequena rede com quatro pontos recebeu o nome de Arpanet. O novo formato de comunicação utilizava um backbone que passava por baixo da terra e interligava militares e pesquisadores sem a necessidade de um computador central. Em 1971, a Arpanet ampliou seus pontos para quinze nós e incluiu os computadores da própria BBN, MIT, RAND HTML Corporation, Universidade de Harvard, Universidade de Stanford, Universidade de Illinois em Urbana, Universidade Carnegie Mellon (CMU) e do centro de pesquisas Ames da Agência Nacional de Administração Espacial (NASA), entre outros. Para que pudessem ser trocados arquivos independentemente das plataformas utilizadas, foram necessário criar procedimentos para que todos os computadores interpretassem os dados. Criou-se então, o protocolo TCP/IP (Transmission Control Protocol/Internet Protocol). Em 1981, todos os computadores hospedeiros (hosts) ligados à Arpanet eram 213. Em 1986, a tabela de máquinas hospedeiras na Internet já chegava a 2308. Hoje, pouco mais de 40 anos depois da criação da Arpanet, já existem mais de 7 bilhões de usuários desta rede. O que é a Internet? Em primeiro lugar, quando falamos em Internet, devemos entender que ela é um conceito abstrato. Internet não é um supercomputador em algum lugar do mundo, não é uma máquina de qualquer espécie, nem um alienígena com anteninhas piscando. Internet é a comunicação entre dois ou mais computadores através de impulsos telefônicos, rádio ou cabo. Se houvesse um grande blecaute mundial, e todos os computadores fossem desligados simultaneamente, neste momento não haveria Internet. Agora, supondo que dois desses computadores, não conectados diretamente, voltassem a funcionar e trocassem dados entre si, teríamos a própria Internet voltando a viver. 17 Capítulo 1 18 Existem computadores que ficam conectados à Internet cem por cento do tempo. São reconhecidos como servidores. Nós os chamamos assim porque eles ficam 24 horas por dia oferecendo informação. A Internet tem vários fins, por exemplo, correio eletrônico (e-mails), operações online (saldos bancários), transmissão de arquivos (programas de MP3), compras online, contato através de redes sociais, alimentar blogs e navegação. Este último também é conhecido como WWW, a área que vamos abordar aqui com maior enfoque. É nesta parte da Internet que os webdesigner trabalham: fazem a distribuição de informações em forma de hipertexto. Em resumo, criam a parte visual dos nossos sites. O que é um site? Um site nada mais é do que um diretório, uma pasta, no disco rígido de um servidor, com arquivos que podem ser lidos pelos navegadores (browsers). Os tipos de arquivos que compõem um site são o de hipertexto, imagem, geralmente GIFs e JPGs; som, vídeo e animação. Hipertexto Hipertexto é um tipo de documento interativo, cujas informações se desdobram de acordo com a nossa necessidade. HTML Se, por exemplo, estivéssemos pesquisando sobre a Europa e, num determinado momento, decidíssemos nos aprofundar em informações sobre a França, puxaríamos esta informação. A partir daí, se desejássemos saber mais sobre Paris, ainda poderíamos entrar numa nova vertente do texto, que enfocaria particularmente esta cidade. Daí por diante, poderímos nos aprofundar ainda mais, buscando informações sobre a torre Eiffel ou sobre os rebites que foram usados em sua construção. Podemos deduzir então, que um website é tão somente um conjunto de documentos de hipertexto, nos quais nós mesmos escolhemos que tipo de informação desejamos passar e obter. Protocolos de transferência Para que os dados transmitidos pela Intenet cheguem aos seus destinos de forma segura, inalterada, ou mesmo, sigilosa, é necessário arrumar essas informações em “pacotes”, que serão embalados e desembalados por computadores, software e até sistemas operacionais distintos. Este procedimento de organização de dados para a transferência é o que chamamos de “protocolos”. Usamos vários protocolos diferentes na Internet: o SMTP, para transmissão de mensagens de correio eletrônico; o FTP, para transferência de arquivos; e o HTTP, para transferência e visualização de hipertexto. O FTP é o protocolo que utilizaremos para enviar os nossos arquivos do disco rígido do nosso computador para o disco de um servidor no momento de hospedar o nosso website. Uma das características do protocolo FTP é que ele serve tanto para enviar quanto para receber arquivos, diferente do HTTP que, no geral, é só receptor. Limitações para o webdesign Infelizmente, nem tudo na Internet ainda são flores. As lentas conexões dos sistemas de telefonia, as insistentes incompatibilidades de browser, monitores antigos e pouco potentes ainda reduzem, e muito, as possibilidades de um designer. Diferente do papel, onde tudo pode ser feito, a Internet, por enquanto, não permite que um webdesigner realize um site sem ceder em determinados pontos. Estudaremos cada caso 19 Capítulo 1 20 particularmente. No desenvolvimento do seu projeto Web, você deverá levar em consideração o público-alvo do site em desenvolvimento. Caso esteja desenvolvendo um site para designers, publicitários ou arquitetos, o projeto passará a ter uma liberdade maior quanto às limitações da Web. É bom lembrar que cada produto ou serviço possui seu público específico e é para esse público que será contruído o site. O peso dos websites Com as novas tecnologias que estão surgindo, esse problema vem sendo sanado. Internet via rádio e a cabo permitem uma velocidade de transferência muito superior às que conhecemos hoje. No Brasil, ainda teremos de aguardar um pouco para que essas tecnologias se popularizem, é fácil notar que fora dos grandes centros a internet ainda deixa a desejar na velocidade. Até lá, e mesmo um pouco depois disso, ainda será exigido o bom senso para produzir páginas de Internet leves. Pesquisas apontam que a maioria dos internautas só resiste a 6 segundos diante de uma página que não carrega. Passado este tempo, eles vão embora e não voltam. HTML Tipografia De início, vamos ao conceito de tipografia. Tipografia é o estudo das famílias de fontes e da sua melhor utilização. Portanto, tipografia na Internet é o estudo dos melhores tipos de letras a serem utilizadas na mídia eletrônica. A tipografia sempre foi um dos principais elementos no design de uma peça, seja digital seja impressa. Porém, os webdesigners sofrem com uma limitação na WWW: só podem contar, para textos, com as fontes que o usuário possua instaladas em sua máquina ou que estejam disponíveis em servidores web. Não definir corretamente a fonte, fará com que o navegador mude a fonte escolhida para a fonte padrão e boa parte dos navegadores é a Times New Roman. O problema maior é que, além de mudar o design da sua página, a fonte Times não permite uma boa leitura em monitores, pois foi projeta para ser visualizada em impressos, que utilizam uma resolução maior que a resolução da Web. Como se não bastasse, não há um padrão de tamanho para as fontes nas diversas plataformas e browsers. Por exemplo, um texto que está adequadamente legível no PC pode ficar pequeno demais no Macintosh. Este é um dos motivos para que qualquer projeto de webdesign seja testado em vários computadores e, de preferência, em várias plataformas diferentes. Para uma melhor leitura na tela de um computador, convém utilizar fontes do tipo bastão, como a fonte Arial ou Verdana. Esta última foi criada pelo inglês Matthew Carter, no início dos anos 90, e utilizada pela Microsoft, em 1994, com o seu design perfeito. Ainda é a melhor fonte para ser lida na Web. 21 Capítulo 1 22 Incompatibilidade de Navegadores Os navegadores mais utilizados hoje em dia são o Mozilla Firefox, Internet Explorer, Ópera, Chrome e o Safari. O mais utilizado no mundo é o Internet Explorer, porém temos que projetar o site lembrando dos outros, pois alguns usuários podem estar visualizando a página num navegador diferente do seu. Projetados por empresas rivais, estes browsers costumam promover significativas mudanças a cada atualização de versão, adaptando, inclusive, às novas interpretações HTML. Suas ações não são feitas de comum acordo, portanto você corre um grave risco de ver aquele efeito que aplicou no seu projeto só funcionar em um navegador ou outro. Ainda por cima, determinados controles do HTML são implementações recentes, não podendo ser visualizados em versões mais antigas. Neste momento o navegador que melhor trabalha com HTML é o Ópera. Antes de dar o seu site como finalizado, experimente-o em várias plataformas e browsers. Tenha pelo menos três navegadores instalados na máquina e teste a página em todos os três. Certas surpresas desagradáveis podem esperar o seu projeto no computador do lado. Resolução de monitor Resolução de monitor é, a grosso modo, a capacidade que o seu monitor tem de mostrar as coisas para você. Uma imagem numa tela é formada por pixels, que são minúsculos pontinhos vermelhos, verdes ou azuis que se combinam para formar todas as outras cores. HTML Resolução é a quantidade de pixels que o seu monitor tem de largura e altura. As mais comuns são 1366 x 768 pixels, com uma média de 15,216% dos usuários mundiais , 1024 x 768 pixels (975 x 720) usada por 12,74%, 1280 x 800 pixels usada por 11,32%, 1280 x 1024 pixels (1240 x980), usada por 7,97 e 1440 x 900 pixels, usada por 6,51%. Ou seja, uma página Web bem projetada deve ser bem visualizada em quase todas essas resoluções, trabalhando com uma área útil de 975 pixels de largura por 720 de altura. Isso, se você não quiser barras de rolagem na sua página. Lembre-se que o browser possui barras de ferramentas que consomem boa parte da tela e cada usuário faz a configuração da interface do seu navegador de uma maneira específica. Este costuma ser o maior problema dos webdesigners amadores. Por desconhecimento ou por resistência a uma determinada resolução, eles projetam sites que estão sendo bem visualizados no monitor deles, e não no dos outros, ignorando resoluções inferiores ou superiores. Lembre-se que respeitar as diversas visualizações é garantir cliques no seu site. Note que os portais desenvolvem as suas páginas respeitando todas as resoluções, pois sabem que vários tipos de usuários acessam as suas páginas. 23 HTML Capítulo 2 O Que é HTML? • Comandos Básicos • Categorias HTML O que é HTML? HTML é a principal linguagem de programação que organiza as informações (texto, imagens e sons) de uma página Web. Foi desenvolvida originalmente por Tim Berners-Lee e ganhou força a partir de 1990.O Hypertext Markup Language, ou linguagem de hipertexto baseada em marcas, descreve de forma lógica o que será mostrado pelos navegadores, que poderíamos classificar como tradutores de linguagem HTML. É comum encontrar ainda diferenças nos resultados das páginas nos buscadores atuais, porém as empresas responsáveis demonstram que estão buscando unificar os resultados. Essa linguagem é construída através de comandos (ordens que os browsers devem interpretar) e parâmetros (detalhamento dessas ordens). A partir de 1997 o W3C buscou manter o padrão do código através da versão 3.2, fazendo com que a linguagem fosse tratada como prática comum. Desta forma seria possível desenvolver um site independente do Sistema Operacional ou do navegador. Outra preocupação do W3C foi o padrão para acessibilidade, tornando o site acessível à dispositivos para deficientes visuais, 27 Capítulo 2 auditivos e dispositivos móveis. 28 Neste momento o HTML está se firmando na versão 5.0, que foi desenvolvido pelo grupo WHATWG. Para facilitar a compatibilidade do site desenvolvido entre os navegadores é interessante desenvolver o site de acordo com o motor de renderização de cada navegador. Segue abaixo a lista dos principais navegadores e seus motores: Safari, Google Chrome – Webkit; Firefox, Mozilla - Gecko; Internet Explorer – Trident; Opera - Presto Qualquer documento Web se divide em duas partes: Cabeçalho (HEAD) e corpo (BODY). Como é um arquivo de texto, pode ser gerado até nos assistentes de digitação mais simples, já dito anteriormente. Você pode visualizar o código-fonte de uma página Web através do menu secundário, geralmente, alcançado pelo clique no botão direito do mouse sobre a página; ou através do menu Exibir. Adotou-se como padrão que a primeira página de um site se chamaria index.html. Desta forma, quando um usuário digita um endereço sem discriminar a página para a qual quer ir, ele sempre cairá na primeira página. Quando digitar um endereço discriminado, por exemplo, http://www.realedados.com.br/ cursos.html, imediatamente cairá na página “Cursos”. Com a prática você perceberá como é simples criar documentos HTML. Comandos básicos Os “comandos” são ordens escritas no HTML, sempre representadas entre os sinais “<” e “>”. Nosso documento HTML deverá iniciar com o Doctype, neste caso o Doctype não é um comando (tag) do HTML e sim uma instrução para o navegador saber qual a versão do código desenvolvido. Em versões anteriores do HTML era comum encontrar o DTD, porém a partir da versão 5.0 a referência de qual DTD utilizar ficou de responsabilidade do navegador. Abra o Bloco de Notas e digite alinha de comando a seguir: <! DOCTYPE html> HTML Uma observação é que o código não é case sensitive, ou seja, ele não vai diferenciar entre maiúsculas e minúsculas, porém no caso acima foi utilizado o DOCTYPE em letras maiúsculas. Após o DOCTYPE teremos os comandos <html> e </html>. A barra antes do nome do comando na segunda tag (comando) indica que ali é o fim do comando. Com o comando (tag) <HTML> usaremos o atributo lang que serve para que os useragents que rodam da internet saibam qual a linguagem principal do documento, no nosso caso “pt-br” de português brasileiro. Segue o código: <! DOCTYPE html> <html lang=”pt-br”> </html> User agent: Uma aplicação que age como cliente em uma transação cliente-servidor feita sobre um determinado protocolo de rede. Na web esse protocolo é o HTTP e os user-agents são os browsers, crawlers, dispositivos móveis, leitores de tela, painéis em braile e qualquer outra aplicação usada por um usuário para navegar por páginas web. (Torres, Bruno. Termos e definições. Disponível em: <http://www.obasicodaweb.com/ termos-e-definicoes/> Acesso em: 19 de julho de 2012) Devemos sempre dividir o documento em HEAD e BODY. No HEAD, ficam os comandos inteligentes do site como informação do título, software em que foi desenvolvido, palavraschave para catálogos de busca e inserções de comandos específicos de Java Script e Folhas de Estilo. Neste exemplo vamos usar o metadados <meta charset=”utf-8”> que servirá para chavear a tabela de caracteres da página. Esta tabela evita que o site tenha erro na representação de caracteres, como troca de acentuações e cedilhas, erro muito comum na internet. No BODY, está descrita, de forma lógica, toda a diagramação do texto, as informações que ele apresenta ao usuário, suas cores, links, enfim, toda a parte “visível” do documento. O HEAD começa com o comando <head> e termina com o comando </head>. O BODY começa com o comando <body> e termina com o 29 Capítulo 2 comando </body>. 30 Eis o código completo: <! DOCTYPE html> < html lang=”pt-br”> <meta charset=”utf-8”> <head> <title> html </title> </head> <body> Meu primeiro documento HTML </body> </html> O “<title>” é o comando que define o título de sua página e aparecerá na barra colorida sobre a barra de ferramentas padrão do seu browser (navegador). Utilize sempre títulos nas páginas, pois servem para descrever o site que está sendo visitado e para ajudar nos buscadores. Agora salve o arquivo como index.html e em seguida, abra o arquivo tanto no Mozilla Firefox quanto no Internet Explorer. Repare que incluímos quebras de linhas entre cada comando, separando o comando de abertura <html>, o head e o body e o fechamento </html>. Isso não é obrigatório, porém uma organização, deixará o seu documento muito mais legível. Nunca se esqueça de fechar os seus comandos, porque a maioria deles é de fechamento obrigatório. Muitas vezes a falta de uma só letra ou sinal é responsável pelo não funcionamento da sua página. Categorias Cada elementos é separado em uma categoria, isto facilitará o entendimento e utilização de cada comando. As categorias são: HTML Metadata content Destina-se a fornecer metadados, ou seja, informações adicionais à página. Seguem alguns tipos de matadados que podemos inserir no nosso site: a) Meta Description: <meta name=”description” content=”descreve o conteúdo da página”> b) Meta Robots: <meta name=”robots” content=”index, follow”> all: Os robôs dos buscadores não recebe nenhuma informação; index. Os robôs dos buscadores incluem a página; noindex. Os links podem ser seguidos, mas a página não é indexada; follow: Robôs indexam a página e seguem os links para outras páginas; noFollow: A página é indexada, mas os links não são seguidos; none: Os robôs devem ignorar a página; c) Meta Author: <meta name=”author” content=”tido ferraz”>, informa quem desenvolveu o site. d) Meta Keywords: <meta name=”keywords” content=”palavra 1, palavra 2, palavra 3”>, informa as palavras de relevância com o conteúdo do site. O abuso do uso desta meta tag pode banir o site da lista dos buscadores, neste caso você deverá utilizar palavras que realmente tenha concordância com o conteúdo. e) Link: <link href=”style.css” rel=”stylesheet”>. Este tipo de link deverá amarrar o arquivo style.css ao site, este arquivo será responsável pela organização estética do site. Veremos mais adiante como trabalhar com as folhas de estilos (CSS). Uma observação importante é que na versão anterior do html o atributo type era obrigatório, desta maneira o comando ficava da seguinte maneira <link href=”style.css” rel=”stylesheet” type=”text/css”>. Ainda podemos encontrar entre os metadados os seguintes comandos: base, command, noscript, script e style. 31 Capítulo 2 O código deverá ficar da seguinte maneira: 32 <! DOCTYPE html> < html lang=”pt-br”> <meta charset=”utf-8”> <meta name=”description” content=”descreve o conteúdo da página”> <meta name=”robots” content=”index, follow”> <meta name=”author” content=”tido ferraz”> <meta name=”keywords” content=”palavra 1, palavra 2, palavra 3”> <head> <title> html </title> </head> <body> Meu primeiro documento HTML </body> </html> Flow content Boa parte dos elementos utilizados no Body são categorizados como de Fluxo de Conteúdo (Flow Content). Veja alguns destes elementos, vamos entrar em detalhes no decorrer do curso: a abbr address area (se for um decendente de um elemento de mapa) article aside HTML audio b bdo blockquote br button canvas cite code command datalist del details dfn div dl em embed fieldset figure footer form h1 h2 h3 h4 33 Capítulo 2 h5 34 h6 header hgroup hr i iframe img input ins kbd keygen label map mark math menu meter nav noscript object ol output p pre progress HTML q ruby samp script section select small span strong sub sup svg table textarea time ul var video wbr Text Sectioning content Heading content Phrasing content Embedded content Interactive content 35 HTML Projeto Meu 1º HTML (parte 1) Objetivo: Aplicar os princípios aprendidos sobre HTML. Você poderá encontrar as repostas no final deste capítulo. 1. Abra o Bloco de Notas e crie uma página com os seguintes dados: a. Descrição: aula de webdesign b. Autor: Coloque o seu nome c. Conteúdo: html, css, webdesign d. Título: Curso de Webdesign - Meu 1º Site e. Corpo: Estou aprendendo HTML f. Salve como index.html (todo em letras minúsculas), dentro da seguinte pasta: c:/wamp/www/seunome/aula01. No final da aula salve o arquivo no seu pendrive ou envie por e-mail. 37 Capítulo 2 Resposta 38 <! DOCTYPE html> < html lang=”pt-br”> <meta charset=”utf-8”> <meta name=”description” content=”aula de webdesign”> <meta name=”author” content=”tido ferraz”> <meta name=”keywords” content=”html, css, webdesign”> <head> <title> Curso de Webdesign - Meu 1º Site </title> </head> <body> Meu primeiro documento HTML </body> </html> HTML Capítulo 3 Principais Comandos HTML • Principais Comandos HTML HTML Principais comandos HTML Existem alguns comandos de Fluxo de Conteúdo (Flow Content) que são muito utilizados em HTML. Eles estão presentes em praticamente todos os documentos que você encontrar na rede. Se você souber inglês, que foi a língua utilizada como base para o HTML, você terá ainda mais facilidade para aprendê-los. São eles: <BR> Quebra de linha ou break, de onde vem a abreviação BR. Tem o efeito de terminar o texto em uma linha e passar para a seguinte. É um dos poucos comandos em HTML que não precisam de fechamento. <P> Indica parágrafo. O comando P insere uma linha em branco após o seu fechamento. Seu fechamento é </P>. <DIV> Serve para dividir o layout em seções, estruturando todo o layout do projeto. Seu fechamento é </DIV>. Exemplo: <DIV ID=”Topo”> Real & Dados </DIV> <A> Indica link para um outro documento. Só funciona com o parâmetro de direcionamento HREF. Seu fechamento é </A>. Exemplo: <A HREF=”http://www.realedados.com.br”> Real & Dados </a> HREF O principal parâmetro do comando <A>. Indica o endereço que o link está direcionado. Os endereços devem ser representados 41 Capítulo 3 completos se o alvo estiver em um diretório diferente do que está o seu documento. Por exemplo: 42 <A HREF=”http://www.realedados.com.br/index.html”> Clique aqui para ir à Real & Dados. </A> Neste caso, a frase contida no comando aparecerá sublinhada e, com a cor especificada no comando BODY, será o link para o endereço contido no comando <A>. Para uma página no mesmo diretório, os endereços de links podem ser simplificados. Levantemos a hipótese de que o seu site esteja hospedado no endereço http://www.seunome.com.br e você queira fazer um link entre a página index.html e a página pessoal.html, que estão no mesmo diretório. Você, então, poderá representar este link da seguinte forma: <A HREF=”pessoal.html”> Clique aqui para me conhecer melhor </A> Ou ainda, se esta página estiver no subdiretório seunome, dentro do diretório onde está localizada sua página index, representará desta forma: <A HREF=”seunome/pessoal.html”> Clique aqui para me conhecer melhor </A> <IMG> Indica imagem e as insere. Só funciona com o parâmetro que diz o endereço onde a imagem deve ser buscada (SRC). Não necessita de fechamento. Exemplo: <img src=”armazem.jpg”> Para o comando <IMG> HTML SRC Ou source, de onde origina a abreviação SRC. Indica o endereço onde a imagem está localizada. Por exemplo: <IMG SRC=”../imagens/foto.jpg”> ALT Insere um texto explicativo em forma de etiqueta. Este recurso é super-importante pois permite o acesso de portadores de necessidades visuais. Por exemplo: <IMG SRC=”../imagens/foto.jpg ALT=”Este sou eu.”> WIDTH Indica a largura da imagem. Não é obrigatório e pode servir para esticar ou comprimir a imagem. O valor deve ser dado em pixels ou porcentagem. Por exemplo: <IMG SRC=”../imagens/foto.jpg WIDTH=”230”> ALT=”Este sou eu.” HEIGHT Indica a altura da imagem. Como o WIDTH, não é obrigatório, pode servir para esticar ou comprimir a imagem e o valor deve ser dado em pixels ou porcentagem.Por exemplo: <IMG SRC=”../imagens/foto.jpg WIDTH=”230” HEIGHT=”400”> ALT=”Este sou eu.” BORDER Configura uma borda para a imagem. Os valores devem ser dados em pixels ou porcentagem. 43 HTML Projeto Meu 2º HTML Objetivo: Aplicar os princípios aprendidos sobre os parâmetros do HTML. 1. Crie o index.html e salve na pasta c:/wamp/www/seunome/ aula02. Configure o HTML da seguinte maneira: a. Título: Curso de Webdesign - Continuando o Site b. Corpo: Estou “matando a pau” no HTML, insira um parágrafo com o seguinte texto: Carros | Real & Dados. c. Crie dentro da pasta aula02 uma pasta com o nome imagens. d. Copie da pasta Área Gráfica as imagens tb_carro_1 e tb_ carro_2 e cole dentro da pasta imagens criada. e. Crie um arquivo novo, salve como carros.html, insira as imagens tb_carro_1 e tb_carro_2, (utilizando o comando de imagem “IMG SRC”) lembre de colocar o caminho da pasta, ou seja, o local onde a imagem se encontra em seu site. f. Aplique um parágrafo, digite o texto “voltar” abaixo das imagens da página carros.html e insira o comando de link para voltar ao index.html. g. Retorne para o arquivo index.html e insira um link na palavra “Carros” para navegar até a página carros.html. Depois, ponha um link na palavra “Real & Dados” para o site http:// www.realedados.com.br. 45 Capítulo 3 46 h) Salve o arquivo, abra a página index.html nos navegadores e teste se os links estão corretos. Caso não estejam, analise o código fonte. Resposta Página index.html <! DOCTYPE html> <html lang=”pt-br”> <meta charset=”utf-8”> <meta name=”description” content=”aula de webdesign”> <meta name=”author” content=”tido ferraz”> <meta name=”keywords” content=”html, css, webdesign”> <head> <title>Curso de Webdesign - Continuando o Site</title> </head> <body> <p>Estou “matando a pau” no HTML</p> <p><a href=”carros.html”>Carros</a> | <a href=”http://www. realedados.com.br”>Real & Dados</a></p> </body> </html> Página carros.html <! DOCTYPE html> <html lang=”pt-br”> <meta charset=”utf-8”> <meta name=”description” content=”aula de webdesign”> <meta name=”author” content=”tido ferraz”> <meta name=”keywords” content=”html, css, webdesign”> <head> HTML <title>Carros</title> </head> <body> <p><img src=”imagens/tb_carro_1.jpg” > <img src=”imagens/tb_carro_2.jpg”> </p> <p><a href=”index.html”>Voltar</a></p> </body> </html> 47 HTML Capítulo 4 Estilos CSS • Tipos de Estilos • A Sintaxe • As Propriedades HTML Estilos CSS “CSS” é a abreviação de Cascading Style Sheet, termo que foi traduzido para português como “Folha de Estilo em Cascata”. Até um passado próximo, os desenvolvedores Web não utilizavam os CSS. A necessidade gerada com a comercialização da Web, a implementação tecnológica e a evolução na solução visual dos websites fizeram com que a W3C normatizasse os estilos CSS para facilitar a vida desses desenvolvedores. A facilidade vai da velocidade com que as páginas são reestruturadas à interpretação feita pelos navegadores. Vinculando as Folhas de Estilo As folhas de estilo podem ser vinculadas à página de 3 maneiras: 1. Externa ou Linkada; 2. Interna; 3. Inline. Folha de Estilo Externa Esta opção é ideal para a manutenção de várias páginas, pois características como plano de fundo, cor e tamanho de letras ficam armazenadas num arquivo comum à todo site. Assim, caso modifique uma página, você estará modificando todas as outras. Para criar uma folha estilo externa, você deverá criar uma página com a extensão .css e aplicar a marcação de link dentro do cabeçalho do código-fonte como no exemplo abaixo: <link href=”geral.css” rel=”stylesheet” type=”text/css” > ou <link href=”geral.css” rel=”stylesheet” > no HTML 5. Folha de Estilo Interna Uma folha de estilo é interna quando ela é inserida no códigofonte da página. Esta opção não é ideal para elementos comuns à outras páginas. Ela é ideal para elementos próprios da página. 51 Capítulo 4 Veja o exemplo a seguir: <style type=”text/css”> 52 <!-body { background-image: url(); background-color: #000000; } .style2 { color: #FF3300; font-weight: bold; } --> </style> Inline Esta opção é aplicada direta no código. Não é a melhor opção. Veja o exemplo: <p style=”text-indent: 5px;”>Recuo de 5px</p> A sintaxe dos Estilos CSS O conjunto de regras dos estilos CSS formam uma folha de estilos. Esta regra é composta pelo seletor, valor e propriedade. Segue a estrutura: seletor {propriedade: valor;} Exemplo: a:link {color: #0066FF;} O “seletor” é o elemento HTML identificado por sua marcação, classe ou ID. No exemplo, o a:link se refere ao link, pois a letra “a” representa a marcação link. HTML A “propriedade” é o atributo que receberá a regra. Observando o exemplo citado vemos a propriedade cor (Color). O “valor” é a característica aplicada. Notamos no exemplo que é a cor aplicada ao link. A cor é aplicada no valor Hexadecimal, note que a cor deverá ter o sinal de # e depois mais seis valores, caso estes valores sejam 3 pares, a cor poderá ser reduzida para apenas 3 valores. A sintaxe é construída com o seletor, depois acrescentamos as chaves, entre as chaves, colocamos a propriedade e o valor, separando-os por dois pontos. As Propriedades Propriedade Font É utilizada para inserção de texto. Você definirá o tamanho das fontes, modelo e as demais características do texto. Fonte Padrão do Site Você poderá criar uma fonte padrão para todo o seu site. Esta opção não impede de você criar outros estilos para as fontes. O estilo criado para uma fonte padrão é aplicado ao seletor Body. Veja o exemplo abaixo: body{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #666666; } Novo Estilo Fonte Para criar um novo estilo, basta criar um novo seletor com um ponto (.) antes, ou seja, uma classe, mais adiante abordaremos as classes. Veja o exemplo abaixo: 53 Capítulo 4 .texto-rodape { 54 font-size: 9px; } Propriedades das fontes Segue uma lista de algumas propriedades para a fonte: a. Color: cor da fonte; b. Font-family: tipo da fonte; c. Font-size: tamanho da fonte; d. Style: estilo da fonte. Valores para a Propriedade Font a. Color: cor da fonte (Código hexadecimal: #FFFFFF). b. Font-family: nome da fonte (Verdana, Arial). c. Font-size: tamanho da fonte (9px, 10 px...). d. Font-style: definição do estilo para a fonte (italic, oblique, normal). e. Font-weight: peso da fonte (normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900). Exemplo: body { font-size: 12px; font-style: italic; font-weight: normal; font-variant: normal; color: #096; } HTML Propriedade Texto Utilizada para definir as características do texto. 55 Algumas propriedades: a. Color: cor do texto; b. Letter-spacing: espaçamento entre letras; c. Word-spacing: espaçamento entre palavras; d. Text-align: alinhamento do texto; e. Text-transform: transformação no texto; f. Text-indent: recuo do texto; Exemplo: .corpo_texto{ color: #096; letter-spacing: 0,1em; word-spacing: 0,1em; text-align: justify; text-transform: capitalize; text-indent: 0,2; } Valores válidos A seguir exemplos de valores válidos para o css: a. color: código (255,235,222); hexadecimal (#009966), cores rgb b. letter-spacing: normal (é o espaçamento padrão) e lenght (px, pt, em, cm, ...); c. word-spacing: normal (é o espaçamento padrão) e lenght (px, pt, em, cm, ...); Capítulo 4 d. text-align: left, right, center e justify; 56 e. text-transform: none (texto normal), capitalize (todas as primeiras letras do texto em maiúsculas), uppercase (todas as letras do texto em maiúsculas) e lowercase (todas as letras do texto em minúsculas); f. text-indent: lenght (px, pt, em, cm, ...), %; Cor de link O link possui 4 opções: Link (normal), Active (Ativo), Hover (Cambiável) e Visited (Visitado). A sua estrutura recebe a letra “a” referente à marcação dos links precedida por dois pontos e com a opção a ser definida (link, active, hover ou visited). A opção Link pode receber os mesmos valores da propriedade Font. a:link {color: #0066FF; text-decoration: none;} a:active {text-decoration: none;} a:hover {text-decoration: none; color: #FF6600;} a:visited {text-decoration: none; color: #FF6600;} Obs.: O text-decoration serve para remover a decoração do texto, ou seja, o sublinhado. Propriedade Plano de Fundo A cor e a imagem de plano de fundo são aplicadas ao seletor Body, pois estas opções fazem parte do corpo do site. Cor do Plano de Fundo Para aplicar uma cor de fundo no site, basta utilizar o seguinte código: body {background-color: #000000;} Propriedade Margin Esta propriedade define os valores para as margens dos HTML elementos HTML. As propriedades são: a. Margin: aplica margem em todos os lados; b. Margin-top: aplica apenas margem no topo; c. Margin-bottom: aplica apenas margem na base; d. Margin-right: aplica apenas margem na direita; e. Margin-left: aplica apenas margem à esquerda. Exemplo: <!-p {margin-right: 50px;} --> Valores válidos A seguir exemplos de valores válidos para o css: a. Auto: aplica um valor automático à margem; b. Length: aplica valores reconhecidos pelas CSS (px, pt, cm, ...); c) Porcentagem da largura do elemento pai: %. Criando Seções de Conteúdo Estes elementos marcam um conteúdo separado, agrupando elementos com conteúdo relacionado, estes elemento são: header, article, aside, nav ,section e footer. No Html estes elementos são representados como uma marcação (tag). Veja o exemplo do rodapé: <footer> <div id=”footer-botom”>Todos os Direitos.</div> 57 Capítulo 4 </footer> Header 58 Este comando é aplicado no cabeçalho da página e também pode ser usado para marcar formulários de busca ou marcas importantes para o site. Article Esta tag marca o conteúdo como posts, artigos, matérias e comentários de um site. Aside Geralmente é aplicado nas barras laterais com conteúdo auxiliar do site. Nav Esta marcação recebe um grupo de links para navegação. Section A tag section define uma nova seção do site, como os destaques, as novidades e uma chamada para conteúdo completo. Footer Este elementos destina-se ao rodapé do site. Veja um pequeno exemplo de estrutura de site com divs e seções: HTML <!DOCTYPE html> <html lang=”pt-br”> <head> HTML <meta charset=”utf-8” /> <link href=”style.css”rel=”stylesheet”> <title>Aula 03</title> </head> <body> <header> <div id=”top-header”> <h1><img src=”imagem/logo.png” alt=”Marca HTML5”></h1> <nav> </nav> </div> </header> <article> <h1>HTML5</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et rutrum odio. Suspendisse aliquam massa vel felis venenatis cursus. </article> <footer> <div id=”footer-botom”>Todos os Direitos.</div> </footer> </body> </html> CSS /* CSS Document */ body{font-family:Verdana, Geneva, sans-serif;} 59 Capítulo 4 header{height:150px;width:100%;background:#009;} nav {width:100%;height:120px;} 60 article{width:100%;background:#CCC;} footer{width:100%;background:#000; color: #fff;} HTML Projeto Construindo Sites com Seções Objetivo: Construir sites com seções de acordo com o conteúdo abordado. A imagem a seguir é do site como ficará com a conclusão do Projeto no próximo capítulo. 1. Crie o index.html e salve na pasta c:/wamp/www/seunome/ aula03. Configure o HTML da seguinte maneira: a. Título: Curso de Webdesign – Site em Seções; b. Aplique o linque ao arquivo css. Aproveite e crie a página css e salve na pasta aula03; c. Defina a fonte padrão para Verdana com tamanho 11pixels. d. Aplique um header com altura de 150px, largura 100% e cor de fundo #009; e. Crie a seção de navegação após a seção header, coloque com largura de 960 pixels. Crie a seção no arquivo HTML e dentro de uma lista digite “Menu”; f. Faça a seção artigo com largura de 960 pixels e cor de fundo #CCC´. Dentro da seção digite o texto “Título do Site” e aplique a marcação h1. Após o texto do título aplique um texto ilustrativo para dois parágrafos. Caso queira gere o texto através do site http://br.lipsum.com; 61 Capítulo 4 g. Por último faça a seção rodapé com largura 100% e cor de background com #000. h. Faça as respectivas seções no arquivo html. 62 i. Salve os arquivos e teste nos navegadores. HTML Capítulo 5 Posicionando Elementos com CSS • Margens • Afastamentos • Posicionamento de Divs e Seções HTML Posicionando Elementos com CSS Margens As margens podem ser aplicadas tanto para texto como vimos anteriormente, assim como a elementos de seções, divisões, imagens e outros. A propriedade margin (margem) é aplicada no css dos elementos e define o espaço entre os elementos HTML. Figura 1.1 As declarações podem ser feitas da seguinte maneira: margin-top: 10px; margin-right:20px; margin-bottom: 25px; margin-left:15px; Esta declaração pode ser abreviada, simplificando o código. Note que ela foi feita no sentido horário iniciando pelo topo, depois seguindo para a direita, depois base e por último à esquerda. Sendo assim o código pode ficar da seguinte maneira: margin: 10px 20px 25px 15px; Caso o código possua dois pares consecutivos como no exemplo a seguir: margin-top: 10px; margin-right:20px; margin-bottom: 10px; margin-left:20px; 65 Capítulo 5 A declaração poderá ficar da seguinte maneira: margin: 10px 20px; 66 Assim a declaração será aplicada no topo com o valor de 10 pixels, depois na direita com o valor de 20 pixels e ele repete 10 pixels para a base e o valor de 20 para o lado esquerdo. Se os valores forem iguais como no exemplo a seguir: margin-top: 10px; margin-right:10px; margin-bottom: 10px; margin-left:10px; A declaração fica ainda mais simples, veja: margin: 10px; Afastamentos A declaração para o afastamento é o padding, muitas vezes é confundido com o margin, pois são bem parecidos. O padding é o espaço entre o conteúdo e as bordas de um elemento, desta maneira ao definir o valor de margin estamos definindo um espaço entre os elementos e o conteúdo que estiver ao lado. Ao especificar um padding em uma camada, por exemplo, estamos definindo o espaço que há entre a borda da camada e o que tiver dentro. A declaração para o padding segue as mesmas regras do margin, veja o exemplo: padding-top: 10px; padding-right:10px; padding-bottom: 10px; padding-left:10px; E a simplificação do código funcionará da mesma maneira: padding: 10px Posicionando Divisões e Seções Para posicionar os elementos no HTML podemos usar a propriedade position e principalmente o float, para esta definição é necessário ter o projeto bem definido em mãos, por isso vamos trabalhar algumas estruturas de layout para o site. HTML 67 Figura 1.2 É importante entender o momento para utilizar cada um dos recursos. Vamos ver cada uma das opções: Static Opção padrão para todo elemento HTML, ou seja, o elemento não tem posicionamento definido e seu fluxo ocorre normalmente no documento HTML. Exemplo: #div_qualquer {position: static} Não é necessária definir esta opção para os elementos da página devido ao seu valor ser padrão. Relative Esta opção permite utilizar as declarações top, bottom, right ou left para posicionar os elementos na página em relação ao lugar Capítulo 5 que ele ocuparia no fluxo do documento. #div_qualquer {position: relative; top: 10px; left: 20px;} 68 No exemplo acima o elemento foi posicionado a 10px do topo e a 20px da esquerda em relação ao lugar que ele ocuparia no documento. Vale lembrar que utilizando position:relative todo esse espaço que foi definido ainda continua sendo ocupado pelo elemento na página. Absolute Esta opção posiciona o elemento exatamente em relação ao primeiro elemento pai com posição diferente de “static”. #div_qualquer {position: absolute; top: 40px; right:0; } No exemplo a seguir a div_qualquer ficará relativa à div_pai e não mais ao Body, isto ocorre devido ao aninhamento das divs. Exemplo do HTML: <div id=”div_pai”><div id=”div_qualquer”></div></div> Fixed Posiciona o elemento fixamente na página em relação ao navegador. #div_qualquer {position: fixed; top:10px; left:20px; } Verifique a diferença entre as posições no endereço www. nixonline.com.br/positions Float ou Flutuar O principal recurso para posicionamento é o float, que pode ser usado para posicionar o elemento à esquerda ou à direita. No exemplo www.nixonline.com.br/float você poderá encontrar alguns exemplos com divs e imagem. Para posicionar um elemento à esquerda utilize float:left e para posicionar o elemento à direita utilize o float:right. Vamos ver o exemplo abaixo no HTML: HTML <div id=”geral”> <div id=”div_left”> <h1>Div Esquerda</h1> </div> <div id=”div_right”> Esquerda</h1> 69 <h1>Div Direita com Imagem à <p><img src=”imagens/mitologia-gregao-pensador.jpg” width=”120” height=”205” class=”img”>Foi criada a classe img e aplicada no HTML:<br> <img src=... class="img"></p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et odio eu leo luctus viverra. Nunc dictum porttitor est, ac semper metus ornare euismod. Donec placerat, nibh non posuere aliquet, sapien leo interdum erat, condimentum ultricies nunc tellus eu mi. Sed metus mauris, posuere eu imperdiet quis, tempus vel odio. Curabitur tristique aliquam odio, quis rhoncus libero mattis non.</p> </div> </div> Note que foi criada uma div geral que servirá para limitar a largura do site. Agora veja o CSS: body{ font: 12px Verdana; } #geral { margin:0 auto; width: 960px; } Capítulo 5 #div_left{ 70 float:left; width: 250px; background-color: #9FC; } #div_right{ float:left; width: 710px; background-color: #FF3; } .img{ float:left; padding:5px; } Visite a página float do site da NixOnline e verifique o código completo. Display A propriedade Display faz com que se tenha controle sobre como o elemento será renderizado pelo navegador. Veja algumas opções: a) Block para exibir elementos como blocos. Um bloco contém um espaço em branco em volta e não permite outros elementos HTML ao lado, exceto se tiver sido declarada a propriedade float para o elemento próximo ao bloco; b) Inline para exibir elementos na mesma linha c) Inline-block para exibir elementos como blocos e na mesma linha/lado a lado). Útil na estruturação de documentos. HTML d) Table renderiza o elemento como uma tabela. Veja a opção feita anteriormente com o recurso do display:table. #geral { margin:0 auto; width: 960px; display:table; background:#C99; } Clear Utilizamos o recurso do clear para posicionar o rodapé abaixo das demais colunas. A declaração para o clear é a opção boht. Veja o exemplo abaixo: footer{height:220px;clear:both;} 71 HTML Projeto Posicionando os Elementos na Construção do Site Objetivo: Posicionar os elementos e completar o primeiro site. 1. As intervenções serão feitas no arquivo css e no index.html, vá na pasta e abra este arquivo. 2. Acrescente no body o margin:0 auto para que todo o conteúdo seja centralizado; padding:0; font-size:12px; color:#FFF; 3. No header aplique um margin-top de 2 pixels, isto deverá aplicar uma suave distância no topo. 4. Na seção nav aplique um comando para flutuar à direita, uma margem com os seguintes valores: 60px 20px 0 0. 5. Insira o código body nav ul li{display:inline;}. Note que neste caso foi aplicada apenas na lista que fica dentro da seção nav. 6. Para os linques aplique as seguintes propriedades: color: #FFFFFF;font-weight: bold;padding: 0 5px 0 10px;textdecoration: none;. 7. Na seção article aplique uma opção para alturma mínima de 300 pixels, deixe centralizada usando o comando margin, aplique a cor branca (#000) e um afastamento de 5 pixels. 8. No rodapé (footer) aplique a opção para limpar posição (clear:both), uma margem de topo com 30 pixels, um afastamento de 0 pixels e um alinhamento de texto com valor à esquerda (text-align: left). 9. Vamos criar as declarações do parágrafo da seção artigos, coloque 18 pixels para a altura da linha, uma margem da base com 5 pixels e um afastamento de 0 (article p {lineheight: 18px;margin-bottom: 5px;padding: 0;}). 10.Vamos criar uma div #top-header aninhada à div de seção header e aplciar os seguintes valores: height: 150px; largura:960px; margem:0 auto; afastamento:5px; cor de plano de fundo:#9C3. 11. Centralize em relação à altura a imagem que está dentro da div top-header (#top-header img.logo{vertical-align: middle). 73 Capítulo 5 12.Coloque a imagem do topo para flutuar à esquerda (float:left;); 74 13.Crie uma div aninhada à seção footer com o nome de footerbotom, aplique as seguintes regras: largura de 960 pixels, margem para centralizar, afastamento de 5 pixels e altura de 80 pixels. HTML Capítulo 6 Imagens de Plano de Fundo, Fontes do Google e Classes • Inserindo Imagens com Plano de Fundo (Background) • Fontes do Google • Seletor de Classes HTML Inserindo Imagens como Plano de Fundo (Background) As imagens usadas como plano de fundo dos sites ou elementos HTML devem estar no formato .gif, .jpg ou .png, você irá aprender a como fazer uma imagem nestes formatos no módulo do Fireworks. Ao planejar a imagem para o site é importante ficar atento ao seu comportamento padrão. Um destes comportamentos é a repetição da imagem caso ela não preencha toda a área do fundo, ou seja, se a imagem for aplicada como fundo do site e ela for menor que o espaço disponível no navegador, a imagem irá se repetir ao lado e abaixo. Outro fator é que ela inicia sempre da esquerda para a direita e de cima para baixo. Para aplicar uma imagem de plano de fundo, devemos usar a propriedade background no css com os valores do caminho completo da pasta onde se encontra a imagem. Veja o exemplo: background-image:(imagens/bg.jpg); ou a forma abreviada background:(imagens/bg.jpg); Veja alguns valores válidos para a imagem de plano de fundo: a. background-image: imagem como plano de fundo; b. background-repeat: controla a repetição da imagem. Os valores são no-repeat para não repetir, repeat-y para repetir apenas na vertical e repeat-x para repetir na horizontal; c. background-attachment: mantém a imagem fixa na tela. Os valores são fixed para deixar a imagem fixa e scroll para rolar a imagem; d. background-position: controla a posição da imagem. Alguns dos valores são top left para a imagem ficar fixa no topo e à esquerda, top center no topo e no centro, top right no topo e à direita, center left no centro em relação à altura e à direita, center center totalmente no centro, center right no centro e à direita, bottom left na base e à esquerda. 77 Capítulo 6 Fonts do Google 78 Sempre foi um grande problemas para os designers a limitação para o uso de fontes no site, isto foi resolvido com a disponibilidade de fontes nos servidores. A vantagem desta solução é que a fonte fica disponível na internet, além de encontrar uma boa variedade tipográfica. Neste capítulo você aprenderá a usar as fontes disponibilizadas pelo Google. Para acessar as fontes para visitar o endereço http://www. google.com/webfonts. Figura 6.1 Siga os passos para utilizar uma fonte: 1. Escolha a fonte desejada clicando em Add to Collection. 2. Com a fonte adicionada à sua coleção, clique na opção Use. 3. Copie o html do passo 3 e cole antes do fechado da tag head. Exemplo: <link href=’http://fonts.googleapis.com/ css?family=Snowburst+One’ rel=’stylesheet’ type=’text/css’> 4. Copie o css do passo 4 e cole no body do seu código css. Desta maneira a fonte será a padrão do site. Exemplo: body{font-family: ‘Snowburst One’, cursive;} HTML O seletor de classe As classes servem para não ficarmos restrito apenas a utilização de tags HTML, além de dar liberdade para mudarmos uma determinada tag no meio do documento HTML. Você pode dar qualquer nome e com ele criar uma classe a qual definirá as regras CSS. Para criar uma classe você deverá dar o nome precedido de um ponto(.), exemplo: .nome-da-classe{propriedade:valor;} No HTMl você pode aplicar da seguinte maneira: <p class=”nome-da-classe”></p> 79 HTML Projeto Construindo um Novo Site O objetivo deste projeto é aplicar a imagem de Plano de Fundo, posicionar as seções e divs e deixar pronto para o próximo capítulo. 1. Abra seu código html, lembrando de: a. Abrir com o DOCTYPE. b. Utilizar as opções de meta (charset, descrição, autor e palavras-chave). c. Usar o título Jquery, Twitter e FanPage. d. Digitar teste no Body e testar no navegador. 2. Note na imagem que você encontrará a seção header, article, nav, aside e footer, que as quatro primeiras seções ficarão contidas numa div que podemos chamar de div geral e que a div footer contém uma div dentro dela para permitir a centralização ou organização do conteúdo “Todos os Direitos 81 Capítulo 6 82 Reservados”. Vamos iniciar pela div geral dentro do body e depois vamos criar as seções header, article, nav, aside, após o fechamento da div geral abra a seção div footer e dentro dela faça a div footer-geral. 3. Faça o linque para o arquivo style.css. 4. Vamos usar a fonte Roboto do Google Webfonts, para isto insira o código a seguir, de linque dentro da tag head: <link href=’http://fonts.googleapis.com/css?family=Roboto+Cond ensed:400,700’ rel=’stylesheet’ type=’text/css’>. Caso queira pode acessar o site e solicitar para o Google gerar o código HTML e CSS. Salve o arquivo. 5. Crie o arquivo style.css e insira as seguintes informações para o body: a. Margens e afastamentos: 0; b. Tamanho da fonte com valor de 100%; c. Família da fonte ‘Roboto Condensed’ e sans-serif como segunda opção; d. Aplique a imagem bg.jpg como plano de fundo do site. A imagem não deverá repetir, deverá ficar fixa no topo e no centro da página (background:no-repeat url(imagens/bgaula07.jpg) top center;). 6. Salve o arquivo e teste no navegador. 7. Crie os estilos para Título 2 com tamanho 18 pixels e Título 3 com 14 pixels e salve o arquivo style.css. HTML 8. Abra o index, crie a tag <h2></h2> dentro da seção article e digite dentro desta tag a palavra Apresentação. 9. Dentro da seção Aside, crie a tag <h3></h3>, dentro dela digite Twitter, repita os passos e digite Facebook, salve o arquivo e teste no navegador. 10.Volte para o arquivo style.css e crie a div geral com margem com valores 0 e auto para centralizar a página e largura 960 pixels. 11. A div Header deverá ter apenas altura de 220 pixels, salve o arquivo. 12.Retorne para o index, dentro da div header digite o seguinte comando para chamar a imagem <img src=”imagens/logo. png” width=”220” height=”170”/>, salve o arquivo e teste no navegador. 13.Retorne para o arquivo style.css, aplique uma altura de 50 pixels para a div nav e salve o arquivo. 14.Vamos criar o menu no arquivo index. Dentro da tag nav digite o código a seguir: <ul> <li><a href=”#”>Home</a></li> <li><a href=”#”>Quem Somos</a></li> <li><a href=”#”>O que Fazemos</a></li> <li><a href=”#”>Participe</a></li> <li><a href=”#”>Notícias</a></li> <li><a href=”#”>Participe</a></li> <li><a href=”#”>Fale Conosco</a></li> </ul> Salve o arquivo e teste no navegador. 15.Note que o menu ficará na vertical, com os marcadores e o sublinhado de linque. Vamos retornar ao css para mudar estas propriedades. 83 Capítulo 6 16.Insira a seguinte linha no seu código para fazer com que o menu fique na horizontal nav ul li{display:inline;}. Salve o arquivo e teste no navegador. 84 17.Vamos deixar as palavras do menu mais afastadas com um valor de 10 pixels, remover o sublinhado da decoração de linque, em negrito (bold) e com a cor #030. Veja o código nav a{padding: 0 10px; text-decoration: none;font-weight:bold; color:#030;}. Salve o arquivo e veja as mudanças. 18.Agora vamos mudar as cores dos linques do tipo sobreposto e visitado, além de colocar uma borda inferior de 2 pixels. Veja código nav a:hover{color:#F60;border-bottom: 2px solid #f60;} e nav a:visited{color:#666;border-bottom: 2px solid #666;} 19.Aplique uma largura de 650 pixels para a seção article, aplique um afastamento de 10 pixels para todos os lados com exceção do lado esquerdo que deverá receber um valor de 45 pixels e deixe o box flutuando à esquerda. Veja código article{width:650px;padding:10px 10px 10px 45px;float:left;}. 20.Aplique uma largura de 220 pixels para a seção aside, com afastamento de 10 pixels para todos os lados, uma borda de pixel à esquerda para separar o conteúdo das seções e faça o box flutuar à direita. Veja código aside{width:220px;p adding:10px;border-left:1px solid #030; float:right;}. Salve o arquivo e teste no navegador. 21.Para o footer colocaremos uma altura de 220 pixels, a posição deverá ser modificada de acordo com as divs acima, uma cor de plano de fundo de #030, uma borda no topo de 2 pixels, cor da fonte branca e tamanho de 0.8em. Veja o código footer{height:220px;clear:both;background:#030; border-top: 2px solid #0C0;color:#FFF;font-size:0.8em;}. Salve e teste no navegador. 22.Vamos criar uma div entro da seção footer, esta div terá o nome de footer-central e deverá ter largura de 870 pixels, pois teremos que dar o desconto de 90 pixels para as larguras e margem 0 auto para centralizar a div. Segue código #footercentral{width:870px;margin:0 auto;padding:20px 45px;}. Salve e teste. 23.Note que a marca ficou desalinhada em relação ao conteúdo, HTML para isto vamos aplicar uma classe na tag img do index, dê o nome para classe de marca. Veja como ficará o código: <header> <img src=”imagens/logo-aula07.png” width=”220” height=”170” class=”marca” /> </header> 24.No css aplique o seguinte código: .marca{padding:10px 0 0 25px;} e salve o seu arquivo. No próximo capítulo você irá terminar o site. 85 HTML Capítulo 7 Integrando o Site com as Redes Sociais e Usando a Biblioteca Jquery • Integrando com o Twitter • Integrando com o Facebook • Integrando com o Google Maps • Banner com Recurso Jquery HTML Twitter e Facebook Hoje é comum integrar os sites com as Redes Sociais, fazendo com que o conteúdo seja atualizado diretamente no site. Para fazer com que suas últimas postagens do Twitter apareçam no seu site, baixe o código www.nixonline.com.br/downloads/ twitter.txt e cole no local desejado do seu site. Note que no código você encontrará o local para colocar o seu login no Twitter, assim como mudar as propriedades de dimensão e cores. Para integrar com o curtir da FanPage, você deverá baixar o código www.nixonline.com.br/downloads/face.txt. Note que neste código também possível mudar o endereço da FanPage, assim como as propriedades. Álbum de Fotos com Jquery Segundo o Wikipedia Jquery é é uma biblioteca JavaScript cross-browser desenvolvida para simplificar os scripts client side que interagem com o HTML. Ela foi lançada em janeiro de 2006 no BarCamp de Nova York por John Resig. Usada por cerca de 55% dos 10 mil sites mais visitados do mundo, jQuery é a mais popular das bibliotecas JavaScript. jQuery é uma biblioteca de código aberto e possui licença dual, fazendo uso da Licença MIT ou da GNU General Public License versão 2. A sintaxe do jQuery foi desenvolvida para tornar mais simples a navegação do documento HTML, a seleção de elementos DOM, criar animações, manipular eventos e desenvolver aplicações AJAX. A biblioteca também oferece a possibilidade de criação de plugins sobre ela. Fazendo uso de tais facilidades, os desenvolvedores podem criar camadas de abstração para interações de mais baixo nível, simplificando o desenvolvimento de aplicações web dinâmicas de grande complexidade. Fonte: http://pt.wikipedia.org/wiki/JQuery É fácil encontrar bibliotecas Jquery disponíveis na internet para diversos tipos de recursos que podem ser utilizados no site, inclusive para a utilização de galeria de imagens e banner. Clique nestes linques para experimentar um banner em jquery 89 Capítulo 7 www.nixonline.com.br/jquery.txt e jquery.rar. No primeiro arquivo você entrará código que deverá ser inserido dentro da tab head e da tag body, o segundo link contém os arquivos e pastas que devem estar juntos do arquivo html. Aplicar GoogleMaps 90 A localização da empresa no Google Maps é um recurso muito utilizado para que o visitante possa saber como chegar na empresa, caso a empresa esteja cadastrada no Google Maps basta que digite o seu nome. Para fazer a busca de um endereço acesse o site do Google Maps através do linque https://www.google.com/maps. Digite o endereço desejado na busca, caso clique no marcador do endereço o resultado será como na Figura 7.1. Figura 7.1 HTML Para colocar o endereço no seu site, clique no ícone de corrente que fica na parte superior esquerda e escolha a opção Copiar HTML para incorporar no website (Figura 7.2). 91 Figura 7.2 HTML Projeto Integrando o Site com Redes Sociais O objetivo deste projeto é incluir o banner e a integração com as Redes Sociais. 93 1. Copie os arquivos da aula anterior e cole dentro de uma nova pasta com o nome aula08. 2. O primeiro passo será criar o nosso banner usando a biblioteca jquery, para isto acesse o arquivo http://nixonline. com.br/downloads/jquery.txt. Coloque o código script antes do fechamento da tag head, o do banner coloque logo após a abertura da tag article e restante dentro do css. Salve os arquivos. 3. Baixe os arquivos jquery.rar e coloque descompactado dentro da pasta e teste o index nos navegadores. 4. Baixe o arquivo http://nixonline.com.br/downloads/twitter.txt e cole logo após o título Twitter, faça as configurações para o seu Twitter. 5. Baixe o arquivo http://nixonline.com.br/downloads/face.txt e cole logo após o título Facebook, faça as configurações para o seu Twitter. Salve os arquivos e teste nos navegadores.