Html
0 gostou53 visualizações
Este documento apresenta um curso sobre construção de sites com HTML e CSS. Ele contém informações sobre a história dessas linguagens, explicações sobre marcações e elementos básicos em HTML como tags, cabeçalhos e parágrafos. Também aborda conceitos de CSS como cascata de estilos, posicionamento, formatação de texto e layout.
Html
- 1. Curso de Constru¸c˜ao de Sites - HTML/CSS Felipe Mariani Lopes Gustavo Toshi Komura Bolsistas Instrutores Bolsa Instrutor DINF/PRAE 23 de Maio de 2011
- 2. 2
- 3. Conte´udo I HTML 5 1 Hist´oria 6 2 Coment´arios 7 3 Separa¸c˜ao de Layout e Dados 9 4 Vis˜ao Geral das Tags HTML 10 5 A tag <body> 11 5.1 TAGs estruturais de forma . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 5.1.1 A tag <div> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 5.1.2 id e class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 5.1.3 A tag <span> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 5.2 TAGs estruturais de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 5.2.1 A tag <h(n)> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 5.2.2 A tag <p> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 6 A tag <head> 17 6.1 A tag <title> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 6.2 A tag <meta> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 6.3 A tag <link> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 6.4 A tag <script> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 7 Modelo DOM (Document Object Model) 24 7.1 DOM aplicado ao HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 7.1.1 O b´asico sobre ´arvores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 7.1.2 O arquivo HTML como uma ´arvore . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 7.1.3 Fazendo referˆencia a um elemento HTML . . . . . . . . . . . . . . . . . . . . . . . . 26 7.1.4 Aspectos b´asicos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 7.1.5 Deixando coment´arios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 8 Exerc´ıcios 27 II CSS 28 9 Hist´oria 29 10 Coment´arios 30 3
- 4. 4 CONTE ´UDO 11 Cascata de Estilos 31 11.1 In-Line . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 11.2 In-File . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 11.3 Out-File . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 12 Medindo as coisas 34 12.1 in - Polegada . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 12.2 px - Pixel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 12.3 pt - Ponto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 12.4 cm - Centimetro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 12.5 mm - Milimetro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 13 PseudoElementos 36 13.1 Forma sem seletor classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 13.2 Estrutura sem seletor classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 13.3 Forma com seletor classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 13.4 Estrutura com seletor classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 14 PseudoClasses 39 14.1 Forma sem seletor classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 14.2 Estrutura sem seletor classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 14.3 Forma com seletor classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 14.4 Estrutura com seletor classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 15 Formata¸c˜ao de Texto 42 15.1 Forma . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 15.2 Estrutura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 15.2.1 Exercicio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 16 Layout 46 16.1 Posicionamento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 16.1.1 Absoluto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 16.1.2 Relativo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 16.1.3 Exercicio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 16.2 Espa¸camento - margin/padding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 16.2.1 Exercicio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 16.3 Dimens˜ao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 16.3.1 Exercicio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 16.4 Bordas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 16.4.1 Exercicio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 16.5 Exemplo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 16.5.1 Exercicio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 III Indica¸c˜oes 54 17 Sites Importantes, Referˆencias e Ferramentas 55 IV Projeto Final 56
- 6. Cap´ıtulo 1 Hist´oria O HTML (HyperText Markup Language/ Linguagem de Marca¸c˜ao de Hipertexto) surgiu com o intuito de resolver os problemas de Tim Berners-Lee. Ele queria disseminar pesquisas e se comunicar com seus colegas, por esse motivo, ele criou ferramentas para solucionar esses problemas. Estas ferramentas combinadas com a internet da ´epoca ganhou um destaque mundial e por incrivel que pare¸ca esta ´e a linguagem mais apropiadas at´e o momento para ser usada em sites. Com o passar dos tempos, (W3C) Wide Web Consortium vem tentando melhorar esta linguagem, retirando as ambiguidades que exitem nela. A vers˜ao que est´a sendo mantida at´e o momento foi a lan¸cada no final de 1999 com o nome de HTML 4.01. Foi lan¸cada uma outra vers˜ao em 2001, mas n˜ao foi bem aceita. Atualmente o W3C, est´a trabalhando no XHTML, que ´e baseado em XML, sendo considerado como um sucessor do HTML, eles est˜ao procurando acertar a sintaxe, para n˜ao haver mais problemas com ambiguidades no c´odigo. 6
- 7. Cap´ıtulo 2 Coment´arios Para iniciarmos nossos estudos, devemos inicialmente dar muita importˆancia na clareza de c´odigos. No inicio vai parecer uma bobagem deixar coment´arios, por´em veremos a seguir que eles s˜ao muito impor- tantes por causa: • Do esquecimento do que foi feito. • Da grande quantidade de c´odigo. • Da agilidade no entendimento do c´odigo. Por estes motivos ´e importante ganhar o costume de documentar tudo do que foi feito, para n˜ao ter problemas futuramente. Em HTML fazemos coment´arios da seguinte forma: <!– coment´ario –> 7
- 8. 8 CAP´ITULO 2. COMENT ´ARIOS Vamos ao exemplo: ============================================ <!– HTML 5 –> <!DOCTYPE html> <!– Inicio do html –> <html> <!– A partir daqui vai aparecer na pagina –> <body> <!– Titulo mais importante –> <h1>Titulo 1 </h1> <!– Titulo menos importante –> <h2>Titulo 2.1 </h2> <!– Primeiro texto –> texto 1 <h2>Titulo 2 </h2> <!– Segundo texto –> texto 2.2 </body> <!– A partir daqui fecha a pagina –> </html> <!– Final do html –> ============================================ ´E importante destacar que tudo dentro do coment´ario n˜ao vai aparecer na p´agina, n˜ao importa o que for colocado dentro, pode ser uma TAG ou um texto, mas n˜ao vai fazer nenhuma diferen¸ca e n˜ao se preocupe se vocˆe n˜ao entendeu nenhuma defini¸c˜ao no c´oodigo acima, somente se atente que comentar um c´odigo ´e muito importante.
- 9. Cap´ıtulo 3 Separa¸c˜ao de Layout e Dados Bom mais uma importˆancia nos nossos estudos em HTML, ´e perceber a diferen¸ca entre LAYOUT e DADOS. LAYOUT vem a ser todo o desenho, tudo que podemos posicionar, colorir, determinar o tamanho, etc. Isto ´e, faremos todas estas coloca¸c˜oes sobre os DADOS. DADOS vem a ser o conte´udo que vai ser inserido na p´agina, como por exemplo, texto e conte´udo de tabelas. Exemplificando: Para ficar mais claro, imaginemos que desejamos colocar uma tabela de hor´ario e aulas, mas ao criarmos est´a tabela aonde vamos coloc´a-la, qual o espa¸co que ela vai ocupar na p´agina, que tipo de letra ela vai possuir e qual cor de letra e fundo ela vai ter ? LAYOUT: Aonde vamos coloca-la, qual o espa¸co que ela vai ocupar na p´agina, que tipo de letra e qual cor de letra e fundo ela vai ter. DADOS: O conte´udo da tabela. Vemos logo a seguir um exemplo de tabela em HTML. O conte´udo da tabela s˜ao os n´umeros (Hor´ario e Dias das aulas) que s˜ao os DADOS da p´agina. Percebe-se que a tabela est´a no meio da p´agina ent˜ao foi utilizado um atributo align=“center“ que posiciona a tabela no centro da p´agina que ´e o LAYOUT da p´agina. Vamos dar uma olhada para a tabela no browser. Figura 3.1: table Desta forma fica claro que aonde est´a escrito ”Dado”´e o que vai ser inserido na tabela (DADO), por outro lado toda a formata¸c˜ao da tabela vai ser o (LAYOUT). 9
- 10. Cap´ıtulo 4 Vis˜ao Geral das Tags HTML Bom agora vamos dar uma olhada do que ´e composto um arquivo HTML. Todo arquivo HTML possui TAGs, desta forma ´e razo´avel darmos uma olhada na funcionalidade dela. A primeira perguntas ´e ”O que ´e uma TAG ?” R= TAG ´e uma esp´ecie de marca¸c˜ao, ´e com elas que definiremos o que colocar na p´agina (tabela, imagem, texto, etc). Tudo bem, devo saber mais alguma coisa sobre TAGs ? R= Sim, uma TAG ´e uma marca¸c˜ao, por´em se por exemplo desejarmos colocar uma tabela e ainda n˜ao existisse o CSS, como que iriamos definir numa celula a cor e o tipo da letra ?. Bom as duas linguagens n˜ao surgiram juntas, o que nos faz crer que o CSS veio para fazer auxilio ao HTML, mas isso n˜ao vem ao caso no momento. Vamos analizar que toda TAG possuem atributos. Bom voltamos as perguntas ”O que ´e um atributo ?” R= Atributo vem a ser o que se deseja fazer com o que est´a sendo colocado, isto ´e, digamos por enquanto que ´e a formata¸c˜ao que vai ser feita no que est´a sendo colocado. Exemplo: A TAG <img> define que dejamos colocar uma imagem na p´agina. Tudo bem, mas qual ´e a imagem e qual o tamanho que ela vai ter na p´agina ? R= Ainda n˜ao sabemos. Por isso que fazemos uso dos atributos. Neste caso os ”src”, ”width”e ”height”, respondem nossa pergunta, com ”src”localiza¸c˜ao da imagem a ser mostrado na p´agina, ”width”largura da imagem e ”height”altura da imagem. Vai ficar assim: <img src=”local da imagem”width=”comprimento”height=”altura”> Resumidamente um atributo, se refere as caracteristicas de cada objeto. Por exemplo uma mesa, representa a nossa TAG, a partir dai, definimos atrav´es dos atrbutos sua cor, comprimento, tamanho e altura. Por motivos didaticos a partir de agora, vamos definir as TAGs e atributos com as seguintes cores: TAGs principais assim. TAGs do body assim. TAGs do head assim. atributos assim. 10
- 11. Cap´ıtulo 5 A tag <body> <body> TAG que como o pr´opio nome deduz, <body> representa o corpo da p´agina. Nesta TAG que ser´a inserido todo o conte´udo da p´agina, tudo que n´os como usu´arios vemos no browser. Inicialmente vamos come¸car com um exemplo bem simples. Toda vez teremos que usar esta mesma estrutura para criar uma p´agina. ============================================ <!DOCTYPE html> <html> <body> </body> </html> ============================================= Este c´odigo corresponde a imagem 5.1 body simples Bom as primeiras perguntas seriam: O que ´e isso ? R= Um c´odigo HTML. Como assim, isto ´e um/uma site/p´agina ? R= Sim, a ´unica diferen¸ca ´e que ele est´a em forma de texto e ainda n˜ao foi inserido nada na p´agina. Qual a diferenca entre site e p´agina ? R= Site ´e o conjunto de p´aginas, isto ´e, uma p´agina consiste em somente um conte´udo de todo site, por exemplo, em um site existe a p´agina principal e as subp´aginas como noticias, contato, etc. O site assume uma existˆencia quando se intreliga todas estas p´aginas. Resumidamente um site ´e um conjunto de p´aginas. Como isso acontece ? R= O browser interpretao o c´odigo e tranfsorma em uma p´agina visual. A seguir veremos no browser que somente com o c´odigo acima, aparentemente n˜ao vai existir nen- huma p´agina, por´em por enquanto somente aprendemos a fazer a base dela e ainda n˜ao foi inserido nada que apare¸ca. Uma observa¸c˜ao muito importante, ´e que todo arquivo HTML deve come¸car e terminar obri- gat´oriamente com a TAG <html>, pois ´e por ela que o browser sabe que est´a interpretando um arquivo HTML. Tamb´em ´e importante observar que boa parte das TAGs, nos iremos abri-las e fecha-las ap´os fazer uso. Por exemplo, nos abrimos a TAG <html> e no final do arquivo somos obrigados a fecha-la assim 11
- 12. 12 CAP´ITULO 5. A TAG <BODY> </html>. A / indica que fechamos a TAG. Figura 5.1: body simples 5.1 TAGs estruturais de forma As tags estruturais s˜ao aquelas que nos auxiliam a criar divis˜oes no nosso documento possibilitando a cria¸c˜ao de ”unidades funcionais”, s˜ao usadas durante a cria¸c˜ao do nosso layout. 5.1.1 A tag <div> A tag <div>, como o nome sugere, ajuda a definir uma divis˜ao dentro do nosso documento HTML, ela ´e comumente utilizada para agrupar elementos que no seu projeto se relacionam entre si. Tente imaginar esta TAG como se fosse uma caixa ou um bloquinho, aonde tudo que vocˆe colocar nela, vai possuir as mesmas caracteristicas. Geralmente se usa a TAG <div> quando se pretende isolar uma parte da p´agina e aplicar um estilo CSS ou algum efeito com Javascript que veremos exaustivamente na parte de CSS, por estar entre as top top das TAGs atualmente. Vejamos um exemplo do <div> ============================================ <!DOCTYPE html> <html> <body> <div id=“box“> </div> <div id=“box“> </div> </body> </html> ============================================ 5.1.2 id e class Aqui vale ressaltar uma pequena diferen¸ca entre os atributos id e class. As classs s˜ao atributos que indentificam de uma forma geral, j´a os ids s˜ao indentificadores ´unicos. Por exemplo fazendo uma compara¸c˜ao entre c´odigo de barra e n´umero de s´erie. Um c´odigo de barra, por exemplo de um determinado tipo de celular, nos d´a o pre¸co, cor e local do produto em estoque, e isso vale para todos os celulares daquele tipo, isto ´e todos os celulares daquele tipo tem o memso c´odigo de
- 13. 5.2. TAGS ESTRUTURAIS DE TEXTO 13 barra, j´a o n´umero de s´erie, cada um tem o seu, por ser a indentifica¸c˜ao dele. Ent˜ao podemos dizer que o c´odigo de barra ´e o class e o n´umero de s´erie ´e o id 5.1.3 A tag <span> A tag <span> ´e usada quando queremos diferenciar/agrupar um bloco de texto dentro de uma TAG <p>. Visualmente, a TAG <span> n˜ao tem efeito algum. Geralmente se usa a tag <span> quando se pretende isolar uma parte do texto e aplicar um estilo usando CSS ou algum efeito com Javascript. Vejamos um exemplo do <spam> ============================================ <!DOCTYPE html> <html> <body> <h1><spam class=“tred“> titulo </spam></h1> <h2><spam class=“tgreen“> titulo2 </spam></h2> <p><spam class=“pblue“> texto </spam></p> </body> </html> ============================================ 5.2 TAGs estruturais de texto Agora veremos as tags estruturais que usamos quando queremos inserir texto no nosso documento HTML. Usaremos quando precisarmos inserir grandes textos ou criar cabe¸calhos. 5.2.1 A tag <h(n)> <h> TAG representa titulo em HTML. Esta TAG s´o pode ser usada dentro da TAG <body>, pois parece mais interessante mostrar um titulo na p´agina e n˜ao fora dela. ============================================ <!DOCTYPE html> <html> <body> <h1>titulo </h1> </body> </html> ============================================ Este c´odigo corresponde a imagem 5.2 titulo ´unico Quando estamos produzindo um texto, normalmente ele cont´em titulo e subtitulos. Bom para fazermos isto em HTML, utilizamos a familia da TAG <h> com o valor de importˆancia do titulo, sendo
- 14. 14 CAP´ITULO 5. A TAG <BODY> o de maior importˆancia 1 e de menor 6. De <h1> at´e <h6>. ============================================ <!DOCTYPE html> <html> <body> <h1>titulo </h1> <h2>titulo </h2> <h3>titulo </h3> </body> </html> ============================================ Este c´odigo corresponde a imagem 5.3 titulo encadeados Veremos a seguir como esses dois c´odigos v˜ao ser interpretados pelo browser. Figura 5.2: titulo ´unico
- 15. 5.2. TAGS ESTRUTURAIS DE TEXTO 15 Figura 5.3: titulo encadeados 5.2.2 A tag <p> <p> TAG que representa textos em HTML. Esta TAG s´o pode ser usada dentro da TAG <body> tanb´em, pois parece mais interessante mostrar um texto na p´agina e n˜ao fora dela. ============================================ <!DOCTYPE html> <html> <body> <h1>Titulo 1 </h1> <h2>Titulo 2.1 </h2> <p>texto 1 </p> <h2>Titulo 2 </h2> <p>texto 2.2 </p> </body> </html> ============================================ Este c´odigo corresponde a imagem 5.4 titulo encadeados e texto Figura 5.4: titulo encadeados e texto E o que acontece se n˜ao colocarmos a TAG <p> e colocar somente o texto ?. R= Na verdade n˜ao acontece nada, por´em n˜ao vai ser possivel fazer nenhuma formata¸c˜ao neste texto que est´a sem a TAG <p>, e isso pode ou n˜ao fazer diferen¸ca no resultado final da p´agina, pois vai depender muito do que se deseja fazer, por isso para n˜ao haver complica¸c˜oes futuras use a TAG e pronto.
- 16. 16 CAP´ITULO 5. A TAG <BODY> ============================================ <!DOCTYPE html> <html> <body> <h1>Titulo 1 </h1> <h2>Titulo 2.1 </h2> texto 1 <h2>Titulo 2 </h2> texto 2.2 </body> </html> ============================================ Este c´odigo corresponde a imagem 5.5 titulo encadeados e texto sem p Figura 5.5: titulo encadeados e texto sem p
- 17. Cap´ıtulo 6 A tag <head> <head> TAG que como o pr´opio nome deduz, <head> representa a cabe¸ca da p´agina. Est´a parte n˜ao ´e visivel para o usu´ario, mas ´e muito importante para indentifica¸c˜ao da p´agina. ============================================ <!DOCTYPE html> <html> <head> </head> <body> <h1>titulo </h1> <p>texto </p> </body> </html> ============================================ Este c´odigo corresponde a imagem 5.6 cabe¸ca Figura 6.1: cabe¸ca Olhando para o c´odigo e para a imagem percebe-se que ela n˜ao fez nehuma diferen¸ca na parte visual, mas logo veremos que ela tem uma grande importˆancia para dar um tipo de identidade para a p´agina. 6.1 A tag <title> <title> TAG que representa o titulo da p´agina. 17
- 18. 18 CAP´ITULO 6. A TAG <HEAD> Somente para curiosidade, quando se define o titulo da p´agina, observa-se no topo do browser o titulo que foi dado a ela. Tamb´em ´e importante destacar que a TAG <title> s´o pode ser usada dentro da TAG <head>. ============================================ <!DOCTYPE html> <html> <head> <title>titulo da p´agina </title> </head> <body> <h1>titulo </h1> <p>texto </p> </body> </html> ============================================ Este c´odigo corresponde a imagem 6.7 titulo Figura 6.2: titulo Bom a difern¸ca visual n˜ao foi t˜ao significativa, mas pelo menos nossa p´agina j´a tem um nome. 6.2 A tag <meta> Apesar de n˜ao promover nenhuma mudan¸ca estrutural ou qualquer tipo de apelo visual, a TAG <meta> tem sido uma das mais badaladas do momento. Seu uso tem papel importante no processo de indexa¸c˜ao feito pelos sites de busca. Estar bem colocado nos resultados das buscas passou a ser uma coisa t˜ao importante que surgiu um novo profissional no mercado. Um profissional especializado em otimiza¸c˜ao dos metadados para uma melhor indexa¸c˜ao por parte dos sites de busca, esta especialidade ficou conhecida como SEO (Search Engine Optimization, ou Otimiza¸c˜ao para Motores de Busca). Metadado e informa¸c˜ao sobre informa¸c˜ao. A TAG <meta> proporciona uma maneira de se criar metadados sobre nosso documento HTML. O que s˜ao, especificamente os metadados ? Com eles podemos especificar uma descri¸c˜ao para a p´agina, palavras-chave, autor do documento e mais um monte de informa¸c˜oes relevantes para o motor de busca que pretende indexar seu site. Vou omitir imagens, pois percebe-se que na parte visual n˜ao faz difern¸ca, mas se lembre que estamos dando uma indentifica¸c˜ao para a p´agina e tamb´em contribuindo para buscas na rede. Com palavra chave: Geralmente vai ser a partir dela que os sistemas de busca na rede, fazem a procura de uma/um p´agina/site.
- 19. 6.2. A TAG <META> 19 Para isso vamos precisar de dois atributos do <meta>: O name=”tipo”content=”contexto”. Com name=”keyword”content=”palavra chave” Veja o c´odigo. ============================================ <!DOCTYPE html> <html> <head> <title>titulo da p´agina</title> <meta name=”keywords”content=”palavra chave”/> </head> <body> <h1>titulo </h1> <p>texto </p> </body> </html> ============================================ Com descri¸c˜ao da p´agina. Com name=”description”content=”descri¸c˜ao da p´agina”. Veja o c´odigo. ============================================ <!DOCTYPE html> <html> <head> <title>titulo da p´agina </title> <meta name=”keywords”content=”palavra chave”/> <meta name=”description”content=”descri¸c˜ao da p´agina”/> </head> <body> <h1>titulo </h1> <p>texto </p> </body> </html> ============================================ Com tipo de contexto. Vamos precisar dos atributos do <meta>: O http-equiv=”tipo”content=”contexto”e charset=”tipo da codifica¸c˜ao”. Com http-equiv=”Content-Type”content=”text/tipo do texto”e charset=”tipo da codifica¸c˜ao”
- 20. 20 CAP´ITULO 6. A TAG <HEAD> Veja o c´odigo. ============================================ <!DOCTYPE html> <html> <head> <title>titulo da p´agina</title> <meta name=”keywords”content=”palavra chave”/> <meta name=”description”content= ”descri¸c˜ao da p´agina”/> <meta http-equiv=”Content-Type”content=”text/tipo do texto; charset=tipo da codifica¸c˜ao”/> </head> <body> <h1>titulo </h1> <p>texto </p> </body> </html> ============================================ 6.3 A tag <link> <link> TAG que representa a linkagem de outro arquivo na p´agina. Vai ser a partir desta TAG que faremos linkagem com os arquivos .css (estilo css), .js (arquivos javascript) e .php (arquivos php). ============================================ <!DOCTYPE html> <html> <head> <title>titulo da p´agina</title> <meta name=”keywords”content=”palavra chave”/> <meta name=”description”content= ”descri¸c˜ao da p´agina”/> <meta http-equiv=”Content-Type”content= ”text/tipo do texto; charset=tipo da codifica¸c˜ao”/> <link href=”caminho do arquivo”rel=”stylesheet”type=”text/tipo do texto”/> </head> <body> <h1>titulo </h1> <p>texto </p> </body> </html> ============================================ 6.4 A tag <script> <script> TAG que representa a presen¸ca de um script que prov´avelmente ser´a usado na p´agina. Com esta TAG o browser sabe que tudo a partir dela deve ser interpretado como um script, at´e ser informado que o script terminou, quando isso acontece ele passa novamente a interpretar tudo como HTML. ´E permitido fazer uso do <script> tanto dentro do <head> como no <body>.
- 21. 6.4. A TAG <SCRIPT> 21 Na <head>. ============================================ <!DOCTYPE html> <html> <head> <title>titulo da p´agina</title> <meta name=”keywords”content=”palavra chave”/> <meta name=”description”content= ”descri¸c˜ao da p´agina”/> <meta http-equiv=”Content-Type”content= ”text/tipo do texto; charset=tipo da codifica¸c˜ao”/> <link href=”caminho do arquivo”rel=”stylesheet”type=”text/tipo do texto”/> <script type=”text/tipo do texto”script desejado></script> </head> <body> <h1>titulo </h1> <p>texto </p> </body> </html> ============================================ No <body>. ============================================ <!DOCTYPE html> <html> <head> <title>titulo da p´agina</title> <meta name=”keywords”content=”palavra chave”/> <meta name=”description”content= ”descri¸c˜ao da p´agina”/> <meta http-equiv=”Content-Type”content= ”text/tipo do texto; charset=tipo da codifica¸c˜ao”/> <link href=”caminho do arquivo”rel=”stylesheet”type=”text/tipo do texto”/> </head> <body> <script type=”text/tipo do texto”script desejado></script> <h1>titulo </h1> <p>texto </p> </body> </html> ============================================
- 22. 22 CAP´ITULO 6. A TAG <HEAD> Tamb´em se pode fazer uma linkagem, como visto anteriormente, por exemplo com um arquivo .js (javascript), isto ´e, vamos utilizar um script que esteja em outro arquivo. ============================================ <!DOCTYPE html> <html> <head> <title>titulo da p´agina</title> <meta name=”keywords”content=”palavra chave”/> <meta name=”description”content= ”descri¸c˜ao da p´agina”/> <meta http-equiv=”Content-Type”content= ”text/tipo do texto; charset=tipo da codifica¸c˜ao”/> <link href=”caminho do arquivo”rel=”stylesheet”type=”text/tipo do texto”/> <script type=”text/javascript”src=”caminho do arquivo”></script> </head> <body> <h1>titulo </h1> <p>texto </p> </body> </html> ============================================ Uma observa¸c˜ao que achamos muito relevante neste momento, ´e destacar que quando fazemos uma linkagem de um arquivo, podemos dizer que estamos inserindo todo o outro arquivo naquele ponto do nosso c´odigo. Por isso, tente imaginar que todo o c´odigo que est´a no outro arquivo vai ser inserido no ponto aonde vocˆe fez a linkagem. Para ficar bem claro, segue um exemplo: Arquivo HTML ============================================ <!DOCTYPE html> <html> <head> <link href=”caminho do arquivo css”rel=”stylesheet”type=”text/tipo do texto”/> </head> <body> <div id=“box“> </div> <div id=“box“> </div> </body> </html> ============================================ Arquivo CSS ============================================ #box { width: 100cm; height: 100cm; } ============================================
- 23. 6.4. A TAG <SCRIPT> 23 ´E equivalente ao arquivo HTML ============================================ <!DOCTYPE html> <html> <head> <style type=”text/css”> #box { width: 100cm; height: 100cm; } </style> </head> <body> <div id=“box“> </div> <div id=“box“> </div> </body> </html> ============================================
- 24. Cap´ıtulo 7 Modelo DOM (Document Object Model) O ”Documento Object Model”e uma plataforma e interface livre de linguagem que permitira programas e scripts a acessar e fazer update dinamicamente de conteudo, estrutura e estilo de documentos. O documento pode ser ainda processado e o resultado daquele processamento pode ser incorporado a pagina atual. http://www.w3.org/DOM/ 7.1 DOM aplicado ao HTML 7.1.1 O b´asico sobre ´arvores Esque¸cam as ´arvores dos bosques ou mesmo as do gramadao do campus, estas s˜ao bonitas e ”ba- canas” pela sombra e pela beleza de suas folhas. As ´arvores que precisamos conhecer agora s˜ao bonitas e interessantes por outro motivo, n´os podemos utiliza-las como formato para nosso arquivo HTML. Antes de prosseguir, vamos a uma defini¸c˜ao de ´arvore: ”Um grafo aciclico conectado onde cada n´o tem zero ou mais filhos e no m´aximo um n´o pai. Al´em disso, os filhos de cada n´o tem uma ordem especifica.”http://en.wikipedia.org/wiki/Tree Esta defini¸c˜ao n˜ao ir´a nos ajudar muito, pois, para entende-la, teriamos que explicar o que ´e um grafo. Depois teriamos mais conceitos para introduzir e nosso foco se perderia. Leia somente como curiosidade. 24
- 25. 7.1. DOM APLICADO AO HTML 25 7.1.2 O arquivo HTML como uma ´arvore Para entender melhor este conceito, vamos dar uma olhada no seguinte trecho de c´odigo HTML que possui algum texto e umas imagens: ============================================ <!DOCTYPE html> <html> <head> <title>titulo da p´agina</title> <meta name=”keywords”content=”palavra chave”/> <meta name=”description”content= ”descri¸c˜ao da p´agina”/> <meta http-equiv=”Content-Type”content= ”text/tipo do texto; charset=tipo da codifica¸c˜ao”/> <link href=”caminho do arquivo”rel=”stylesheet”type=”text/tipo do texto”/> <script type=”text/javascript”src=”caminho do arquivo”></script> </head> <body> <h1>titulo </h1> <p>texto </p> <img src=”imagem”/> <div id=”texto-modificado”> <h1>titulo </p> <p>texto </h1> </div> </body> </html> ============================================ Vamos transformar este nosso arquivo em uma ´arvore: Perceba a ”real”semelhan¸ca entre o nosso documento com uma ´arvore. Para come¸car, a raiz da nossa estrutura ´e a TAG <html>, ou seja, tudo que esta dentro desta TAG ´e ”filho”dela. Esta defini¸c˜ao podemos repetir para todas as TAGs da nossa estrutura, assim formamos a nossa ´arvore.
- 26. 26 CAP´ITULO 7. MODELO DOM (DOCUMENT OBJECT MODEL) 7.1.3 Fazendo referˆencia a um elemento HTML Agora que a no¸c˜ao de ´arvore j´a n˜ao assusta mais, ou melhor, estamos quase entendendo a coisa toda, vamos pegar o mesmo exemplo e tentar tracaar o caminho at´e alguns dos elementos presentes no c´odigo: SEQUˆENCIA DE IMAGENS COM O CAMINHO AT´E ALGUNS DOS ELEMENTOS REALCA- DOS 7.1.4 Aspectos b´asicos Agora que conseguimos olhar para um documento HTML e n˜ao mais ver um monte de letras jogadas, mas sim uma grande e frondosa ´arvore, vamos partir para os primeiros passos no mundo do CSS! Novamente, quando os conceitos s˜ao simples, ou quando um excesso de aprofundamento for desnecess´ario, vamos apenas descrever sucintamente o conceito ou elemento. Como sempre, n˜ao se esque¸ca de voltar a esta apostila quando tiver alguma d´uvida. 7.1.5 Deixando coment´arios Muitas vezes precisamos fazer anota¸c˜oes dentro dos nossos documentos CSS. Quando vocˆe quiser anotar coisas do tipo ”estilo do menu principal”ou ”estilo da caixa magica”, basta colocar seu coment´ario desta forma: /* barras e asteriscos */! Vamos ao exemplo: ============================================ /* estilo black box*/ #box { width: 200px; height: 200px; border: none; background-color: black; } ============================================ N˜ao se preocupe se n˜ao entender nenhuma das linhas acima, vocˆe s´o precisa entender o conceito de coment´ario que ´e o de deixar recados ou fazer anota¸c˜oes dentro do pr´oprio c´odigo que n˜ao faz nenhuma diferen¸ca no resultado final.
- 27. Cap´ıtulo 8 Exerc´ıcios 1 - Crie uma p´agina e de um nome pra ela 2 - Fa¸ca uma linkagem imagin´aria com um arquivo .css, .js e .php. Para isso por exemplo crie os arquivo meu.css, ..... eles podem estar vazios, depois fa¸ca a linkagem. 3 - Crie dois titulos e insira texto com cores. 4 - Agora crie subtitulos para dividir o seu texto. 5 - Tente colocar os titulos principais no centro. 6 - De palavras-chaves para a sua p´agina. 7 - De uma descri¸c˜ao para sua p´agina. 8 - Insira uma imagem em sua p´agina e determine o seu tamanho. 9 - Qual a importˆancia dos atributos ? 10 - Qual a diferen¸ca entre id e class ? 11 - Desenhe a ´arvore da sua p´agina. 12 - Quais s˜ao as TAGs que est˜ao na folha da sua ´arvore e qual ´a a TAG que sempre vaiser a raiz da ´arvore ? 27
- 28. Parte II CSS 28
- 29. Cap´ıtulo 9 Hist´oria Com falado anteriormente, existe uma grande dificuldade de se manter um c´odigo totalmente legivel, sabendo que o HTML vinha se popularizando, foram surgindo formas de se formatar a p´agina. Isto n˜ao significa que n˜ao foi importante, por´em foi inevit´avel incluir mais TAGs na linguagem. Com isso o c´odigo se tornava cada vez mais confuso e menos compativel com os browsers da ´epoca, bom mas o que poderia ser feito com rela¸c˜ao a isto? Para a nossa salva¸c˜ao H˚akon Wium Lie, teve a id´eia de tentar separar informa¸c˜ao da formata¸c˜ao, isto ´e, a partir da p´agina criar um arquvio separadamente, que seja somente para a formata¸c˜ao (cor/tamanho do texto por exemplo). Citado anteriormente tamb´em, o W3C (World Wide Web Consortium) aceitou a id´eia de H˚akon, que chamou Bert Bos para ajudar no projeto, Bert estava trabalhando em um projeto de um browser (Argo) isto tudo em 1995, onde a internet alavancou de vez. A primeira vers˜ao do CSS foi lan¸cada em 1996 (CSS 1), consequentemente visando o melhoramento da liguagem, foram lan¸cados o CSS 2 e o CSS 3. 29
- 30. Cap´ıtulo 10 Coment´arios Para iniciarmos nossos estudos com o CSS, devemos inicialmente dar muita importˆancia na clareza de c´odigos. No inicio vai parecer uma bobagem deixar coment´arios, por´em veremos a seguir que eles s˜ao muito importantes por causa: • Do esquecimento do que foi feito. • Da grande quantidade de c´odigo. • Da agilidade no entendimento do c´odigo. Por estes motivos ´e importante ganhar o costume de documentar tudo do que foi feito, para n˜ao ter problemas futuramente. Em CSS fazemos coment´arios da seguinte forma: /* coment´ario */ ´E importante destacar que tudo dentro do coment´ario n˜ao vai poder ser usado como formata¸c˜ao, n˜ao importa o que for colocado dentro, pode ser uma TAG ou um texto, mas n˜ao vai fazer nenhuma diferen¸ca. 30
- 31. Cap´ıtulo 11 Cascata de Estilos Existem muitas maneiras de se utilizar o CSS, para determinar o estilo de um elemento de uma p´agina, ou mesmo de um site inteiro. Para isto temos trˆes t´ecnicas que veremos logo a seguir: 11.1 In-Line Dentro da p´agina HTML e a formata¸c˜ao CSS definindo no local que ele vai ser aplicado, isto ´e na TAG que a formata¸c˜ao vai ser utilizada. Geralmente vamos recorrer a este modo somente quando necessitarmos de formata¸c˜oes simples, locais e ´unicas. Vejamos um exemplo: ============================================ <!DOCTYPE html> <html> <head> </head> <body> <h1>titulo 1</h1> <p style=”color: sienna ; margin-left: 20px”> texto </p> <h1>titulo 2</h1> <p>texto</p> <h1>titulo 3</h1> <p>texto</p> </body> </html> ============================================ ´E importante destacar que neste caso o style, se comporta como um atributo de <p> que faz uso do CSS. Por enquanto n˜ao se preocupe com a sintaxe do CSS, mas somente para um bom entendimento color indica que se vai mexer na cor e sienna representa a cor que vai ser inserida, margin-left inidica que se vai determinar um espa¸camento entre a lateral e a borda esquerda e 20px consiste no espa¸camento que vai ser dado. 31
- 32. 32 CAP´ITULO 11. CASCATA DE ESTILOS 11.2 In-File Dentro da p´agina HTML e a formata¸c˜ao CSS definindo na TAG <head>. Geralmente vamos recorrer a este modo, somente quando necessitarmos de muitas formata¸c˜oes lo- cais e ´unicas para aquela p´agina, isto ´e, as outras p´aginas que v˜ao compor nosso site, n˜ao v˜ao necessitar das formata¸c˜oes que estamos aplicando na p´agina atual. Vejamos um exemplo: ============================================ <!DOCTYPE html> <html> <head> <style type=”text/css”> h1 { color: sienna; } p { margin-left: 20px; } body { background-image: url(”images/back40.gif”); } </style> </head> <body> <h1>titulo 1</h1> <p>texto</p> <h1>titulo 2</h1> <p>texto</p> <h1>titulo 3</h1> <p>texto</p> </body> </html> ============================================ Novamente aviso para vocˆe n˜ao se preocupar com a sintaxe do CSS, mas somente para um bom entendimento. h1 representa o t´ıtulo de maior importˆancia em HTML, color indica que se vai mexer na cor e sienna representa a cor que vai ser inserida, ent˜ao neste caso, toda vez que aparecer h1 ele vai ter a cor determinada. E p representa texto em HTML, margin-left inidica que se vai determinar um espa¸camento entre a lateral e a borda esquerda e 20px consiste no espa¸camento que vai ser dado, toda vez que aparecer p ele vai ter o espa¸camento determinada. E body representa o fundo da p´agina em HTML, bakground-image inidica que vai ser colocado um imagem como fundo e url indica aonde est´a localizado a imagem, neste caso em especial, o body aparece somente uma vez, ent˜ao a imagem colocada ser´a o fundo da p´agina. 11.3 Out-File Est´a que vamos usar. Ela ´e definida a partir de um arquivo .css, que vai conter todas as formata¸c˜oes para a p´agina e na p´agina teremos que fazer uma linkagem do arquivo .css para fazermos uso do mesmo. Vejamos um exemplo:
- 33. 11.3. OUT-FILE 33 ============================================ <!DOCTYPE html> <html> <head> < link rel=”stylesheet”type=”text/css”href=”mystyle.css” /> </head> <body> <h1>titulo 1</h1> <p>texto</p> <h1>titulo 2</h1> <p>texto</p> <h1>titulo 3</h1> <p>texto</p> </body> </html> ============================================ Neste caso o c´odigo acima tem a extens˜ao .html, percebe-se em negrito que foi feito uma link- agem com um arquivo com a extens˜ao .css, a seguir um exemplo de um arquivo CSS. ============================================ /* arquivo mystyle.css*/ h1 { color: red; margin: 5px; } p { color: blue; text-align: center; margin-top: 10px; } ============================================ Perceba que n˜ao existe nenhuma diferen¸ca do arquivo acima com o de baixo ============================================ /* arquivo mystyle.css*/ h1 { color: red; margin: 5px; } p { color: blue; text-align: center; margin-top: 10px; } ============================================ As vezes farei uso do segundo tipo de arquivo por simplesmente haver economia de espa¸co, mas em casos especiais em que se fazer necess´ario o uso do primeiro, eu o farei para uma melhor visualiza¸c˜ao e entendimento do c´odigo.
- 34. Cap´ıtulo 12 Medindo as coisas Logo mais, necessitaremos fazer uso de medidas para determinar o tamanho dos nossos caixas ou bloquinhos que v˜ao compor nossa p´agina e nos ajudar a organizar-la, para isso determinaremos a seguir algumas das medidas que podemos utilizar. 12.1 in - Polegada ============================================ #box { width: 100in; height: 100in; } ============================================ 12.2 px - Pixel ============================================ #box { width: 100px; height: 100px; } ============================================ 12.3 pt - Ponto ============================================ #box { width: 100pt; height: 100pt; } ============================================ 12.4 cm - Centimetro ============================================ #box { width: 100cm; height: 100cm; } ============================================ 34
- 35. 12.5. MM - MILIMETRO 35 12.5 mm - Milimetro ============================================ #box { width: 100mm; height: 100mm; } ============================================ ´E importante mostar que #box, no arquivo HTML, vai estar represetado da seguinte forma: ============================================ <!DOCTYPE html> <html> <head> < link rel=”stylesheet”type=”text/css”href=”medindo.css”/> <head> <body> <div id=“box“> </div> <div id=“box“> </div> </body> </html> ============================================ Na p´agina aonde encontramos <div id=“box“> </div> vai aparecer o bloquinho que definimos no arquivo CSS.
- 36. Cap´ıtulo 13 PseudoElementos Quando queremos mudar o estilo da primeira letra ou do primeiro caractere de um texto, utilizamos os pseudo-elementos. Pseudo-elementos sao propriedades dos elementos que n˜ao pertencem diretamente aquela ´arvore de elementos que vimos anteriormente. Vamos aos pseudo-elementos que o CSS nos fornece: 13.1 Forma sem seletor classe ============================================ /* aplica formata¸c˜ao na primeira letra*/ p:first-letter { color: #ff0000 ; font-size: xx-large ; } ============================================ ============================================ /* aplica formata¸c˜ao na primeira linha*/ p:first-line { color: #0000ff ; font-variant: small-caps ; } ============================================ 13.2 Estrutura sem seletor classe Neste caso, fizemos uso da seguinte estrutura: ============================================ /* estrutura da pseudo-elemento*/ seletor:pseudo-elemento { propiedade: valor ; } ============================================ 36
- 37. 13.3. FORMA COM SELETOR CLASSE 37 13.3 Forma com seletor classe Anteriorme foi usado somente o seletor, no entanto tamb´em podemos fazer uso do seletor com uma classe, da seguinte forma: ============================================ /* aplica formata¸c˜ao na primeira letra*/ p.first:first-letter { color: #0000ff ; font-size: xx-large ; } ============================================ ============================================ /* aplica formata¸c˜ao na primeira linha*/ p.first:first-line { color: #ff0000 ; font-variant: small-caps ; } ============================================ 13.4 Estrutura com seletor classe Neste caso, fizemos uso da seguinte estrutura: ============================================ /* estrutura da pseudo-elemento seletor com classe*/ seletor.classe:pseudo-elemento { propiedade: valor ; } ============================================ Se aplicarmos desta forma no HTML ============================================ <!DOCTYPE html> <html> <head> < link rel=”stylesheet”type=”text/css”href=”pseudo-elemento.css”/> </head> <body> <h1>Titulo 1 </h1> <h2>Titulo 2.1 </h2> <p>texto 1 </p> <h2>Titulo 2.2 </h2> <p id=”first”>texto 2 </p> </body> </html> ============================================
- 38. 38 CAP´ITULO 13. PSEUDOELEMENTOS E o seguinte arquivo CSS ============================================ p:first-letter { color: #ff0000 ; font-size: xx-large ; } p:first-line { color: #0000ff ; font-variant: small-caps ; } p.first:first-letter { color: #0000ff ; font-size: xx-large ; } p.first:first-line { color: #ff0000 ; font-variant: small-caps ; } ============================================ Os c´odigos acima correspondem a imagem 13.1 pseudo-elemento Neste momento, algumas observa¸c˜oes se fazem necess´arias. As cores em CSS, podem ser definidas de v´arias formas assim como no HTML. Podem ser definidas em hexadecimal como acima da seguinte forma: #o valor hexadecimal O valor hexadecimal pode ter de 4 a 6 digitos com cada digito podendo variar de 0 a f. Para obter os valores das cores, procure no ”Google”pela tabela hexadecimal de cores ou vocˆe pode encontar esta tabela no ”W3Schools“. Vamos obter como resultado no browser do c´odigo acima: Figura 13.1: pseudo-elemento Tamb´em podemos definir as cores pelo valor rgb que elas possuem. Podemos fazer da seguinte forma: rgb( valor, valor, valor) Estes valores podem variar de 0 a 255. E por ´ultimo tamb´em podemos definir as cores pelo pr´opio nome delas em inglˆes. Existem muitas outras formas de se definir cores em CSS e HTML, por´em n˜ao vou citar com detalhes neste material, mas posso dizer que temos o rgba, hsl e hsla.
- 39. Cap´ıtulo 14 PseudoClasses Pseudoclasses s˜ao muito simples, elas servem para adicionar ”efeitos especiais”a alguns elementos, vamos tentar entende-los dando uma olhada em alguns exemplos. 14.1 Forma sem seletor classe Para exemplifica¸c˜ao do c´odigo abaixo a TAG <a> define um link em HTML e #FF0000 define a cor veremlha em hexadecimal. ============================================ /* link com cor veremlha ao ser visitado*/ a:visited { color: #FF0000 ; } ============================================ ============================================ /* link com cor veremlha quando ainda n˜ao foi visitado*/ a:link { color: #FF0000 ; } ============================================ ============================================ /* link com cor veremlha quando o mouse passa por cima*/ a:hover { color: #FF0000 ; } ============================================ ============================================ /* link com cor veremlha quando ´e ativado*/ a:active { color: #FF0000 ; } ============================================ 14.2 Estrutura sem seletor classe Neste caso, fizemos uso da seguinte estrutura: 39
- 40. 40 CAP´ITULO 14. PSEUDOCLASSES ============================================ /* estrutura da pseudo-classe*/ seletor:pseudo-classe { propiedade: valor ; } ============================================ 14.3 Forma com seletor classe Anteriorme foi usado somente o seletor, no entanto tamb´em podemos fazer uso do seletor com uma classe, da seguinte forma: ============================================ /* link com cor veremlha ao ser visitado*/ a.amarelo:visited { color: #FF0000 ; } ============================================ ============================================ /* link com cor veremlha quando ainda n˜ao foi visitado*/ a.amarelo:link { color: #FFFF00 ; } ============================================ ============================================ /* link com cor veremlha quando o mouse passa por cima*/ a.amarelo:hover { color: #FF0000 ; } ============================================ ============================================ /* link com cor veremlha quando ´e ativado*/ a.amarelo:active { color: #FF0000 ; } ============================================ 14.4 Estrutura com seletor classe Neste caso, fizemos uso da seguinte estrutura: ============================================ /* estrutura da pseudo-classe seletor com classe*/ seletor.classe:pseudo-classe { propiedade: valor ; } ============================================
- 41. 14.4. ESTRUTURA COM SELETOR CLASSE 41 Se aplicarmos desta forma no HTML ============================================ <!DOCTYPE html> <html> <head> < link rel=”stylesheet”type=”text/css”href=”pseudo-classe.css”/> </head> <body> <h1>Titulo 1 </h1> <h2>Titulo 2.1 </h2> <p>texto 1 </p> <h2>Titulo 2.2 </h2> <p>texto 2 </p> <a href=”www.inf.ufpr.br/instrutores”> Instrutores</a> <a class=”amarelo”href=”www.inf.ufpr.br/instrutores”> Instrutores</a> <p>texto 3 </p> </body> </html> ============================================ E o seguinte arquivo CSS ============================================ a:link { color: #ff0000 ; } a:visited { color: #00ff00 ; } a:hover { color: #ff00ff ; } a:active { color: #0000ff ; } a.amarelo:link { color: #fff00 ; } a.amarelo:visited { color: #00ff00 ; } a.amarelo:hover { color: #ff00ff ; } a.amarelo:active { color: #0000ff ; } ============================================ Os c´odigos acima correspondem a imagem 13.2 pseudo-classe Vamos obter como resultado no browser do c´odigo acima: Figura 14.1: pseudo-classe
- 42. Cap´ıtulo 15 Formata¸c˜ao de Texto Nem s´o de formato, colora¸c˜ao e alguns efeitos diferentes vive o mundo do diagramador CSS, na maioria das vezes temos que formatar textos, deixando-os agrad´aveis ao olhar e f´aceis de ler, de uma maneira que n˜ao canse a vis˜ao e n˜ao mande nosso usu´ario pra longe do nosso site. Para efeitos did´aticos, dividimos o conte´udo em dois t´opicos, forma e estrutura. No primeiro, veremos como determinar a familia da letra, tamanho e colora¸c˜ao da fonte. Quando formos tratar de estrutura, vamos dar uma olhada em t´ecnicas na hora de estruturar seu texto, para criar um layout ”bacana”. 15.1 Forma Para se fazer a modifica¸c˜ao de um texto, precisamos ter conhecimento sobre algumas formas de es- trutura¸c˜ao do CSS. ============================================ /* texto no centro e vermelho*/ h1 { text-align: center; color: red; } ============================================ text indica que estou fazendo uma manipula¸c˜ao em texto, align indica que estou alinhando o texto e center indica que o texto ser´a alinhado no centro. color indica que estou fazendo uma manipula¸c˜ao na cor e red indica que a cor ser´a vermelho. 42
- 43. 15.2. ESTRUTURA 43 ============================================ /* texto no centro e vermelho*/ h1.centerred { text-align: left; color: blue; } ============================================ text indica que estou fazendo uma manipula¸c˜ao em texto, align indica que estou alinhando o texto e left indica que o texto ser´a alinhado no lado esquerdo. color indica que estou fazendo uma manipula¸c˜ao na cor e blue indica que a cor ser´a azul. 15.2 Estrutura Fizemos uso da seguinte estrutura: ============================================ /* estrutura*/ seletor { propiedade: valor; } ============================================ Tamb´em podemos fazer uso com uma classe, podemos ver a estrutura logo a seguir: ============================================ /* estrutura*/ seletor.classe { propiedade: valor; } ============================================
- 44. 44 CAP´ITULO 15. FORMATAC¸ ˜AO DE TEXTO Se aplicarmos desta forma no HTML ============================================ <!DOCTYPE html> <html> <head> < link rel=”stylesheet”type=”text/css”href=”forma-texto.css”/> </head> <body> <h1 class=”cent”>Titulo 1 </h1> <h2>Titulo 2.1 </h2> <p class=”cent”>texto 1 </p> <h2 class=”cent”>Titulo 2.2 </h2> <p class=”first”>texto 2 </p> <a href=”www.inf.ufpr.br/instrutores”> Instrutores</a> <a class=”amarelo”href=”www.inf.ufpr.br/instrutores”> Instrutores</a> <h1 class=”dir”>Titulo 2 </h1> <p class=”dir”>texto 3 </p> </body> </html> ============================================ E o seguinte arquivo CSS ============================================ h1.cent { text-align: center ; } h1.dir { text-align: right ; } h1:first-letter { color: #ff0000 ; font-size: xx-large ; } h1:first-line { color: #0000ff ; font-variant: small-caps ; } h1.cent { text-align: center ; } p.cent { text-align: center ; } p.dir { text-align: right ; } p:first-letter { color: #0000ff ; font-size: xx-large ; } p:first-line { color: #ff0000 ; font-variant: small-caps ; } a:link { color: #ff0000 ; } a.amarelo:link { color: #ffff00 ; } ============================================ Os c´odigos acima correspondem a imagem 13.2 pseudo-classe Vamos obter como resultado no browser do c´odigo acima:
- 45. 15.2. ESTRUTURA 45 Figura 15.1: form-texto 15.2.1 Exercicio 1 - A imagem realmente corresponde ao c´odigo ? 2 - Se n˜ao o por que ? 3 - Fa¸ca est´a mesma p´agina somente no arquivo HTML e verifique qual a diferen¸ca entre fazer uso do CSS dentro e fora do mesmo arquivo. 4 - Agora tente fazer est´a p´agina sem o uso do CSS, isso n˜ao ´e obrigat´orio, mas s´o imagine como iria ficar o seu arquivo.
- 46. Cap´ıtulo 16 Layout Vimos como cuidar do nosso texto, criando uma boa composi¸c˜ao e tornando-o agrad´avel ao leitor, sem ser cansativo nem estranho. Neste momento vamos aprender como criar os templates mais comumente utilizados em desenvolvimento web, duas colunas, tres colunas e alguns outros que podemos inventar agora. Para isso vamos ter que aprender como fazer o posicionamento e aprender algumas defini¸c˜oes dos bloquinhos que vamos criar. 16.1 Posicionamento Para darmos uma boa impress˜ao em nossa p´agina, somos obrigados a posicionar imagens, tabelas e textos, por isso faremos uso da propiedade position. Para isso consideramos trˆes tipos de valores que veremos logo a seguir: 16.1.1 Absoluto Consiste em posicionar algo no lugar absoluto, isto ´e, fazendo uso do valor fixed, ao se fazer uma movimenta¸c˜ao na p´agina, atrav´es do scrool, o conte´udo com este valor permanece fixo no lugar colocado. Vejamos alguns exemplos com rela¸c˜ao a este tipo de valor: ============================================ /* posicionamento absoluto no lado esquerdo*/ h2.posleft { position: fixed; left: -20px; } /* posicionamento absoluto no lado direito*/ h2.posright { position: fixed; left: 20px; } ============================================ 46
- 47. 16.1. POSICIONAMENTO 47 16.1.2 Relativo Consiste em posicionar algo no lugar relativamente, isto ´e, fazendo uso do valor relative, ao se fazer uma movimenta¸c˜ao na p´agina, atrav´es do scrool, o conte´udo com este valor se movimenta com a p´agina. Vejamos alguns exemplos com rela¸c˜ao a este tipo de valor: ============================================ /* posicionamento relativo no lado esquerdo*/ h2.posleft { position: relative; left: -20px; } /* posicionamento relativo no lado direito*/ h2.posright { position: relative; left: 20px; } ============================================ Ainda existe mais um caso, vejamos o exemplo: ============================================ /* posicionamento absoluto no lado esquerdo*/ h2.posleft1 { position: absolute; left: -20px; } /* posicionamento absoulto no lado esquerdo*/ h2.posleft2 { position: absolute; left: -20px; } ============================================ Pode se perceber que posleft1 e posleft2, est˜ao colocando alguma coisa na mesma posi¸c˜ao, por´em fazendo uso do valor absolute, o que for colocado, n˜ao importa o que seja, vai ficar um sobrepondo o outro. 16.1.3 Exercicio 1 - Verifique como os c´odigos se comprotam no browser. 2 - Qual a diferen¸ca entre fixed e do relative ? 3 - Para que fins usariamos o absolute ?
- 48. 48 CAP´ITULO 16. LAYOUT 16.2 Espa¸camento - margin/padding Bom agora j´a sabemos como posicionar os conte´udos na p´agina, por´em ainda n˜ao sabemos como criar bloquinhos. Vermos logo a seguir como se faz isso: Um bloquinho ´e predefinida por quatro intens que determinam o seu contexto, que s˜ao: • Margem o espa¸co entre a borda e as laterais. • Borda separa¸c˜ao da margem e o conte´udo. • Padding o espa¸co entre a borda e o contexto. • Context o espa¸co determinado para ser utilizado. Margin define o espa¸co que vamos deixar entre a borda e as laterais. ============================================ /* espa¸co da margem*/ #margem { margin-top: 100px; margin-bottom: 100px; margin-right: 50px; margin-left: 50px; } ============================================ Tamb´em se pode fazer da seguinte forma ============================================ /* espa¸co da margem 2*/ #margem2 { margin: 100px; } ============================================ Ao colocar desta forma, arbitrariamente o valor margin-top, margin-botton, margin-right e margin- left ´e 200px.
- 49. 16.3. DIMENS ˜AO 49 O padding define o espa¸co que vamos deixar entre a borda e o contexto. ============================================ /* espa¸co do padding*/ #padding { padding-top: 50px; padding-bottom: 50px; padding-right: 100px; padding-left: 100px; } ============================================ Tamb´em se pode fazer da seguinte forma ============================================ /* espa¸co do padding 2*/ #padding2 { padding: 50px; } ============================================ Ao colocar desta forma, arbitrariamente o valor padding-top, padding-botton, padding-right e padding- left ´e 50px. 16.2.1 Exercicio 1 - Veja como todos os c´odigos acima se comportam no browser. 2 - ´E possivel visualizar algo diferene na sua p´agina ? 3 - Qual seria o grande prop´osito de se utilizar o margin e padding ? 16.3 Dimens˜ao Num exemplo, fazendo uso da TAG <div>, podemos pr´e definir o tamanho da caixa que desejamos mexer. ============================================ /* determinando tamanho da caixa a ser trabalhada*/ #caixa { width: 200px; height: 200px; } ============================================
- 50. 50 CAP´ITULO 16. LAYOUT Tamb´em se pode fazer da seguinte forma. ============================================ /* determinando tamanho da caixa a ser trabalhada 2*/ #caixa2 { width: 200px; } ============================================ Ao colocar desta forma, arbitrariamente o valor height ´e 200px 16.3.1 Exercicio 1 - Veja como todos os c´odigos acima se comportam no browser. 2 - ´E possivel visualizar algo diferene na sua p´agina ? 3 - ´E possivel criar um bloco de 1000 de altura e 1000 de comprimento ? 4 - Com rela¸c˜ao a quest˜ao anterior, se for possivel criar est´a enorme caixa, para que prop´osito iriamos utiliza-la ? 16.4 Bordas Separa a margem do padding. ============================================ /* expessura e cor da borda cinza*/ #bordacinza { border: 10px solid gray; } ============================================ Neste caso a borda possui 10px de expessura, solid uma cor s´olida e por fim gray a cor cinza. ============================================ /* expessura e cor da borda verde*/ #bordaverde { border: 5px solid green; } ============================================ Neste caso a borda possui 5px de expessura, solid uma cor s´olida e por fim green a cor verde.
- 51. 16.5. EXEMPLO 51 Se por algum engano ou esquecimento, n˜ao inserirmos a palavra solid autom´aticamente a borda n˜ao vai possuir cor. ============================================ /* expessura e cor da borda sem cor*/ #bordasemcor { border: 5px green; } ============================================ 16.4.1 Exercicio 1 - Como exercicio verifique o que acontece no browser com cada um dos c´odigos acima. 2 - ´E possivel visualizar algo diferene na sua p´agina ? 3 - Posso fazer uso de todos os tipo de cores como hexadecimal, nome da cor e rgb, com as cores das bordas ? 4 - Posso representar todas as cores que desejo ? Se n˜ao, por que isso acontece ? 5 - Baseando-se em todo seu conhecimento e levando em conta todo o conte´udo obtido do material, qual a importˆancia de um bom LAYOUT para uma p´agina ? 6 - O que ´e mais relevante no LAYOUT o posicionamento dos objetos ou o tamanho ? 7 - Percebe-se que as dimens˜oes, tamb´em tem como companheiros a margin, padding e border, vocˆe julga importante fazer uso de todos ou eu posso omitir por exemplo o padding quando desejar criar um bloquinho ? 8 - Crie v´arios blocos e posicione-os em diferentes pontos da p´agina, fa¸ca bastatne o uso do border para vocˆe poder visualizar aonde est´a a caixa que foi criada. 9 - O que acontece quando eu n˜ao coloco a margin, padding, dimens˜ao e border ? 16.5 Exemplo Bom finalizamos por aqui o conte´udo de CSS, isto ´e, agora podemos criar nosso site. Para isso, aconselhamos que fa¸ca uso de tudo que foi visto, e se for poss´ıvel for al´em. Para isso deixamos algumas dicas de ferramentas e sites nos capitulos que se seguem. Uma pequena observa¸c˜ao, para se fazer a tabela de links de navega¸c˜ao da p´agina, aconselhamos fazer uso de uma classe do CSS, para todas as p´aginas que comp˜oem o seu site , pois assim n˜ao haver´a nenhum problema com rela¸c˜ao a formata¸c˜oes diferentes em cada p´agina, o que poss´ıvelmente deixaria a pessoa que estiver navegando em seu site, um pouco perdida. Vejamos um exemplo de site: Vamos ver o c´odigo HTML, o CSS e por fim o resultado no browser. Este exemplo, vai ser bem parecido com um c´odigo que vimos anteriormente. Por´em foi incluido o atributo id e a TAG <table>. Um pequena observa¸c˜ao que se faz necess´aria aqui, ´e que se analizarmos o atributo class da primeira TAG <img> do c´odgio HTML, ao inv´es de ter usado o atributo class poderia ter sido usado o atributo id, pois verifica-se que no arquivo CSS cada imagem tem uma caracteristica diferente.
- 52. 52 CAP´ITULO 16. LAYOUT ============================================ <!DOCTYPE html> <html> <head> < link rel=”stylesheet”type=”text/css”href=”forma-texto.css”/> </head> <body> <img class=”cent”src=”../imagens/smily.jpeg”width=”100px”height=”100px”/> <img id=”cent”src=”../imagens/smily.jpeg”width=”100px”height=”100px”/> <table id=”dir”border=”3”> <tr> <td>11</td> <td>12</td> </tr> <tr> <td>11</td> <td>12</td> </tr> </table> <h1 class=”cent”>Titulo 1 </h1> <h2>Titulo 2.1 </h2> <p class=”cent”>texto 1 </p> <h2 class=”cent”>Titulo 2.2 </h2> <p class=”first”>texto 2 </p> <a href=”www.inf.ufpr.br/instrutores”> Instrutores</a> <a class=”amarelo”href=”www.inf.ufpr.br/instrutores”> Instrutores</a> <h1 class=”dir”>Titulo 2 </h1> <p class=”dir”>texto 3 </p> </body> </html> ============================================ ============================================ h1.cent { text-align: center ; } h1.dir { text-align: right ; } h1:first-letter { color: #ff0000 ; font-size: xx-large ; } h1:first-line { color: #0000ff ; font-variant: small-caps ; } h1.cent { text-align: center ; } p.cent { text-align: center ; } p.dir { text-align: right ; } p:first-letter { color: #0000ff ; font-size: xx-large ; } p:first-line { color: #ff0000 ; font-variant: small-caps ; } a:link { color: #ff0000 ; } a.amarelo:link { color: #ffff00 ; } img.cent { position: absolute ; width: 200px ; height: 200px ; left: 110px ; top: 30px ; } #cent { position: absolute ; width: 60px ; height: 60px ; left: 710px ; top: 30px ; } #dir { position: absolute ; width: 100px ; height: 100px ; left: 410px ; top: 30px ; } ============================================
- 53. 16.5. EXEMPLO 53 Figura 16.1: form-texto 16.5.1 Exercicio 1 - Tendo dominio dos bloquinhos ou caixas, como preferir, crie dois blocos, um deve ter dois titulos, com as cores, azul e vermelho com a primeira letra amarela, tente posicinar est´a caixa no topo direito da p´agina. O outro bloquinho deve possuir um texto com uma imagem de fundo, o texto deve estar em it´alico e com a cor em hexadecimal cinza, posicione esta caixa no centro da p´agina, este dois blocos n˜ao podem ultrapassar 200 de altura e 300 de comprimento. 2 - Como po¸co fazer para criar um tabela de navega¸c˜ao entre as p´aginas do nosso site. Procure fazer uso da TAG <div> e estilos no arquivo CSS.
- 55. Cap´ıtulo 17 Sites Importantes, Referˆencias e Ferramentas • W3Schools: http://www.w3schools.com Consideramos uns dos melhores sites que contˆem os melhores tutoriais relacionados a cria¸c˜ao de sites, com tutoriais de HTML, CSS, JavaScript, PHP, SQL e outros, eles possuem exemplos que podem ser modificados e visualizados na mesmaa p´agina. Por´em um dos problemas nestes tutoriais para alguns consultores, ´e que eles est˜ao totalmente em inglˆes e isso se torna uma dificuldade para alguns. • Free CSS: http://www.free-css.com/ Para aquele que n˜ao tem muita paciˆencia de fazer completamente seu site, Existe a possibilidade de se fazer uso de templates prontos. Neste site vocˆe encontrar´a v´ariados tipos, por´em vale ressaltar que ao fazer uso destes templates prontos, deve-se se citar no rodap´e da p´agina que o CSS que est´a sendo usado na p´agina ´e do Free CSS ou de qualquer outro sites de sua escolha. • PHP (Hypertext Preprocessor): http://www.php.net/ Para quem quiser se aventurar em outros mundos e tentar aprender mais sobre a constru¸c˜ao de sites, pode fazer uso deste site que possui tutoriais de PHP. Uma linguaguem que tem uma grande importˆancia na rede. • Markup Validation Service: http://validator.w3.org/ O validador de c´odigo da W3C. tem como objetivo validar um c´odgio HTML. O uso dele se torna muito interessante, para encontar erros, pois ele te informa o local aonde ele considera que o c´odgio est´a errado. 55
- 57. 57 Para ter uma boa conclus˜ao no curso, sugerimos que seja criado um site de sua preferˆencia, mas que aborde todos os assuntos citados neste material. De preferˆencia em utilizar tanto, as formata¸c˜oes de HTML como tamb´em as formata¸c˜oes em CSS. Procure utilizar linkagens para arquivos .css quando as formata¸c˜oes contidas nele forem muito uti- lizadas no HTML, se n˜ao for o caso procure utilizar a formata¸c˜ao CSS dentro da p´agina. Se a formata¸c˜ao for muito grande utilize a TAG <style>. ´E importante destacar que num site, normalmente as mesmas dimens˜oes, separa¸c˜ao entre conte´udo e navega¸c˜ao e formata¸c˜oes de navega¸c˜ao entre as p´aginas. Esperamos que vocˆe tenha tido um bom aproveitamente do conte´udo deste material, contudo para qualquer d´uvida nos envie um e-mail com o subject: duvida construcao de sites.