HTML Css

Governador Cid Ferreira Gomes Vice Governador Domingos Gomes de Aguiar Filho Secretria da Educao Maria Izolda Cela
de Arruda Coelho Secretrio Adjunto Maurcio Holanda Maia Secretrio Executivo Antnio Idilvan de Lima Alencar Assessora Institucional do Gabinete da Seduc Cristiane Carvalho Holanda Coordenadora da Educao Profissional SEDUC Andra Arajo Rocha
Coordenador Tcnico Pedaggico: Renanh Gonalves de Araujo
Equipe de Elaborao: Cintia Reis de Oliveira Fernanda Vieira Ribeiro Joo Paulo de Oliveira Lima Liane Coe Giro Cartaxo Moribe Gomes de Alcntara Mirna Geyla Lopes Brando Renanh Gonalves de Araujo Valbert Oliveira Costa
Apresentao
No intuito de deixar claro (o) professor(a) o que esperado do aluno ao final da disciplina, este manual prope os objetivos de aprendizagem referentes ao tema, acompanhado do contedo de cada disciplina.. Disponibiliza uma bibliografia para o(a) professor(a), subsidiando-o(a) para aprofundar os debates em sala de aula, bem como, uma bibliografia de referncia do Manual. Elaborado no intuito de qualificar o processo de formao, este Manual um instrumento pedaggico que se constitui como um mediador para facilitar o processo de ensino-aprendizagem em sala de aula. importante que o(a) professor(a) compreenda o propsito do mtodo do curso, e assim, se aproprie do contedo e da metodologia proposta por meio das atividades pedaggicas, fazendo um estudo cuidadoso deste Manual e buscando aperfeioar sua didtica para conduzir com sucesso as atividades propostas.
Objetivos de Aprendizagem
Ao final da disciplina os alunos devem ser capazes de... Escrever "pginas web" usando a linguagem HTML. Desenvolver layout de pginas usando css (Cascading Style Sheets)
Contedo Programtico
Apresentao da disciplina O que HTML? Elementos e tags Criando seu primeiro website Um pouco mais elementos Atributos Links Imagens Tabelas Mais sobre tabelas Layout (CSS) Uploading pginas Web standards e validao Dicas finais
Introduo - CSS
O que CSS? Como o CSS trabalha? Cores e fundos Fontes Textos Links Identificando e agrupando elementos (class e id) Agrupando elementos (span e div) O box model Margin e padding Bordas Altura e largura Flutuando elementos (floats) Posicionando elementos Camada sobre camada com z-index (Layers) Web standards e validao
Ementa
Disciplinas HTML/CSS INTENO A SER ALCANADA
(Apresenta uma competncia como sendo o comportamento global esperado)
C/H 60
Ano 1
Sem. 2
Pr-Requisito Informtica Bsica
Adquirir competncia permitindo desenvolver pginas web, criao de layout de pginas com css, levando em conta as precises que seguem e participando das atividades propostas segundo o plano de planejamento, as condies e critrios que seguem.
COMPETNCIAS
(Descrevem os elementos essenciais da competncia na forma de comportamentos particulares).
Desenvolver pginas com a linguagem de marcao HTML. Desenvolver web sites funcionais utilizando padres de layout. Aplicar folhas de estilo para formatao de pginas. FUNDAMENTOS TERICO-PRTICOS
(Determinam
e orientam as aprendizagens, permitindo a aquisio das competncias de maneira
progressiva e por etapas)
FASE 1 : Introduo a linguagem HTML
Estudar a estrutura de uma pgina HTML, apresentando conceitos de pgina, hipertexto, cabealho, corpo e tags HTML. Conhecer elementos de formatao de fontes, ttulos e cores de fundos, letreiros animados e manipulao de imagens. Apresentar conceito de Links em HTML, links internos, locais, para e-mail, para arquivos, ancora, hiperlinks com imagens. Estudar as listas em HTML, numeradas, no numeradas de diretrios, sublistas. Elaborar tabelas, seus atributos de manipulao, cores de fundo e bordas. Desenvolver de Formulrios em HTML, seus componentes, mtodos de envio de dados. FASE 2 : Layout de pginas web Desenvolver Layout de uma pgina web. Demonstar o Uploading pginas usando o protocolo FTP - File Transfer Protocol (Protocolo de Transferncia de Arquivos). Apresentar conjunto de normas (Web standards) destinado a orientar fabricantes, desenvolvedores e projetistas para o uso de prticas que possibilitem a criao de uma Web acessvel a todos.
FASE 3 : Folhas de estilo CSS (Cascading Style Sheets)
Estudar o Conceito de CSS (Cascading Style Sheets), sua aplicao e uso. Conhecer os estilos interno, inline e externo. Desenvolver folhas de estilo para formatao de pginas: background, pargrafos, tabelas, cores e imagens. Texto: fonte, tamanho e cores. Estudar Div e span: aplicaes e conceito.
FASE 4 : Desenvolvimento de layout CSS (Cascading Style Sheets)
Apresentar padres de desenvolvimento de layouts web. Desenvolver layouts usando elemento Margin e padding, bordas, altura e largura. Estudar elementos (floats). Conhecer e aplicar posicionando de elementos e box model. Estudar camada sobre camada com z-index (Layers).
AES PEDAGGICAS
(Os limites a serem respeitados e os meios de aplicao).
Possibilitar a execuo de vrias atividades na elaborao de pginas usando os elementos html; Estimular as iniciativas dos alunos respeitando os acordos estabelecidos sobre o trabalho a ser efetuado; Assegurar o acompanhamento peridico dos alunos; Intervir em casos de dificuldades ou de problemas; Guiar o processo de avaliao dos alunos fornecendo instrumentos tais como questionrio, grades de anlise, estudo de casos, etc; Motivar os alunos a executar as atividades propostas; Fornecer aos alunos meio de avaliar suas capacidades de construir pginas com folhas de estilo; Permitir aos alunos a terem trocas entre eles sobre dificuldades e solues encontradas; Procurar integrar os conhecimentos adquiridos na elaborao de pginas web; Realizar demonstraes sobre a aplicabilidade dos elementos HTML e folhas de estilo, relacionados aos temas estudados. Promover discusses em grupo sobre a melhor utilizao de padres de layout de pginas. Garantir realizao de praticas no laboratrio de informtica.
CRITRIOS DE PARTICIPAO
(Exigncias da participao que os alunos e alunas devem respeitar durante a aprendizagem).
FASE 1 : Introduo a linguagem HTML
Desenvolver uma estrutura de uma pgina HTML, Apresentar conceitos de pgina, hipertexto, cabealho, corpo e tags HTML. Manipular elementos de formatao de fontes, ttulos e cores de fundos, letreiros animados e manipulao de imagens.
Aplicar conceitos de Links em HTML, links internos, locais, para e-mail, para arquivos, ancora, hiperlinks com imagens. Criar listas em HTML, numeradas, no numeradas de diretrios, sublistas. Criar tabelas, usando os atributos de manipulao, tais como; cores de fundo e bordas. Construir formulrios em HTML, com os seus componentes.
FASE 2 : Layout de pginas web
Criar layout de pginas web. Explicar como feito o upload pginas web atravs do protocolo FTP - File Transfer Protocol (Protocolo de Transferncia de Arquivos). Desenvolver pginas web acessvel a todos, seguindo as normas estabelecidas.
FASE 3 : Folhas de estilo CSS (Cascading Style Sheets)
Explicar Conceitos de CSS (Cascading Style Sheets). Utilizar estilos interno, inline e externo. Aplicar folhas de estilo para formatao de pginas: background, pargrafos, tabelas, cores e imagens. Texto: fonte, tamanho e cores. Construir pginas usando divs e spans.
FASE 4 : Desenvolvimento de layout CSS (Cascading Style Sheets)
Utilizar padres de desenvolvimento de layouts web. Desenvolver layouts usando elemento Margin e padding, bordas, altura e largura. Construir pginas com elementos (floats). Aplicar os tipos de posicionamento de elementos e box model. Construir pginas web atravs de camada sobre camada com z-index (Layers).
Cronograma de Atividades
HTML Fase 1 - Introduo linguagem HTML Lio 1: Lio 2: Lio 3: Lio 4: Lio 6: Lio 7: Lio 8: Lio 9: Lio 10: Lio 11: Apresentao da Disciplina O que HTML? Elementos e tags Criando seu primeiro website Um pouco mais elementos Atributos Links Imagens Tabelas Mais sobre tabelas Avaliao da Fase Fase 2 - Layout de pginas web Lio 12: Lio 13: Lio 14: Lio 15: Layout (CSS) Uploading pginas Web standards e validao Dicas finais Avaliao da Fase Introduo CSS Lio 1: Lio 2: Fase 3 - Folhas de estilo CSS (Cascading Style Sheets) O que CSS? Como o CSS trabalha?
Lio 3: Lio 4: Lio 5: Lio 6: Lio 7: Lio 8: Avaliao da Fase Lio 9: Lio 10: Lio 11: Lio 12: Lio 13: Lio 14: Lio 15: Lio 16:
Cores e fundos Fontes Textos Links Identificando e agrupando elementos (class e id) Agrupando elementos (span e div) Fase 4 - Desenvolvimento de layout CSS (Cascading Style Sheets) O box model Margin e padding Bordas Altura e largura Flutuando elementos (floats) Posicionando elementos Camada sobre camada com z-index (Layers) Web standards e validao Avaliao da Fase
Competncias e Elementos da Competncia

COMPETNCIA 01 CONTEXTO DE REALIZAO A partir de: Introduo ao HTML. Utilizando: Softwares para elaborao de pginas HTML. Com a ajuda de: Livros, apostilas, anotaes no caderno e orientaes do professor. Ambiente: Laboratrio de informtica e sala de aula. ELEMENTOS DA COMPETNCIA 1. Criar estrutura de uma pgina HTML 2. Manipular tags HTML. 3. Construir formulrios. CRITRIOS DE DESEMPENHO 1.1 Exprimir com clareza os conceitos aprendidos com relao estrutura de uma pgina HTML. 2.1. Encaixe correto das tags.
Desenvolver pginas com a linguagem de marcao HTML.
3.1. Elaborao correta dos elementos nos formularios.
COMPETNCIA 02
CONTEXTO DE REALIZAO A partir de: Layout de pginas web, Web standards e validao. Utilizando: Softwares para elaborao de pginas HTML.
Desenvolver web sites funcionais utilizando padres de layout.
Com a ajuda de: Livros, apostilas, anotaes no caderno e orientaes do professor. Ambiente: Laboratrio de informtica e sala de aula.
ELEMENTOS DA COMPETNCIA 1. Desenvolver layout de pginas
CRITRIOS DE DESEMPENHO 1.1 Elaborao adequada do layout para cada pgina. 2.1. Exprimir com clareza os conceitos relacionados ao upload de pginas.
2. Explicar upload de pginas.
3. Apresentar normas w3c de acessibilidade web. COMPETNCIA 03
3.1. Escolha adequada de normas de validao de pginas.
CONTEXTO DE REALIZAO A partir de: Folhas de estilo CSS (Cascading Style Sheets), Desenvolvimento de layout CSS (Cascading Style Sheets).
Aplicar folhas de estilo para formatao de pginas.
Utilizando: Softwares para elaborao de pginas HTML. Com a ajuda de: Livros, apostilas, anotaes no caderno e orientaes do professor. Ambiente: Laboratrio de informtica e sala de aula.
ELEMENTOS DA COMPETNCIA
CRITRIOS DE DESEMPENHO 1.1 Exprimir com clareza os conceitos relacionados ao css. 2.1. Escolha adequada de estilos de formatao de uma pgina web. 2.2. Elaborao correta de uma folha de estilo.
1.
Apresentar conceitos e elementos css.
2. Escolher estilos de formatao a ser usando em uma pgina.
Legendas para o Mapa de Analise de Avaliao

ED Em desenvolvimento
O Aluno j passou por uma avaliao de competncia, e ainda no foi satisfatrio em alguma das habilidades. O Aluno passou pela a avaliao de competncia e teve um resultado muito bom, este esta no nvel intermedirio a Avanado. O Aluno passou pela a avaliao de competncia e teve um resultado bom, este esta no nvel bsico. Quando a aluno no esta conseguindo adquirir os elementos da competncia. Significa que o aluno no passou por uma avaliao de competncia.
MB Muito Bom
B Bsico MC Muito Critico Campo Vazio
Mapa de Anlise de Avaliao

ESCOLA: DISCIPLINA: HTML / CSS SRIE: 1 ANO
N
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
NOME
COMP I
COMP II
COMP III
COMP IV
Escola Estadual de Educao Profissional
Ensino Mdio Integrado a Educao Profissional
Sumrio
Apresentao ................................................................................................................................ 3 INTRODUO ............................................................................................................................ 4 Lio 1: Vamos comear! ...................................................................................................... 5 Lio 2: O que HTML?............................................................................................................. 7 Lio 3: Elementos e tags ................................................................................................... 10 Lio 4: Criando seu primeiro website .................................................................................... 12 Lio 5: O que voc aprendeu at agora? ............................................................................... 18 Lio 6: Um pouco mais elementos ........................................................................................ 20 Lio 7: Atributos .................................................................................................................... 24 Lio 8: Links .......................................................................................................................... 27 Lio 9: Imagens .................................................................................................................. 31 Lio 10: Tabelas ................................................................................................................. 36 Lio 11: Mais sobre tabelas .............................................................................................. 40 Lio 12: Layout (CSS) .......................................................................................................... 43 Lio 13: Uploading pginas .................................................................................................... 48 Lio 14: Web standards e validao ...................................................................................... 50 Lio 15: Dicas finais ............................................................................................................... 53 Introduo - CSS ...................................................................................................................... 55 Lio 1: O que CSS? .............................................................................................................. 56 Lio 2: Como o CSS trabalha? ......................................................................................... 58 Lio 3: Cores e fundos....................................................................................................... 62 Lio 4: Fontes......................................................................................................................... 71 Lio 5: Textos...................................................................................................................... 76 Lio 6: Links ........................................................................................................................ 81 Lio 7: Identificando e agrupando elementos (class e id) ............................................ 88 Lio 8: Agrupando elementos (span e div) ..................................................................... 91 Lio 9: O box model ............................................................................................................... 95 Lio 10: Margin e padding ..................................................................................................... 97 Lio 11: Bordas ................................................................................................................. 101 Lio 12: Altura e largura ...................................................................................................... 106 Lio 13: Flutuando elementos (floats) ............................................................................ 107 Lio 14: Posicionando elementos .................................................................................. 112
INFORMTICA | HTML /CSS
Pgina|1
Lio 15: camada sobre camada com z-index (Layers) ................................................. 115 Lio 16: Web standards e validao .............................................................................. 118
Pgina|2
INTRODUO
HTML a base para o Internet People muitas vezes achamos que extremamente difcil fazer um site. Isso no o caso! Todo mundo pode aprender a fazer um site. E se voc ler, voc ter feito uma em apenas uma hora. Outros pensam - erroneamente - que softwares avanados e caros necessrios para fazer sites. verdade que existem muitos programas diferentes, que afirmam que eles podem criar um site para voc. Alguns mais completos que outros. Mas se voc deseja que seja feito certo, voc deve fazlo sozinho. Felizmente, simples e gratuito e voc j tem todo o software que voc precisa.
O objetivo deste manual dar-lhe uma introduo fcil, ainda completa e correta de como fazer sites. O manual parte do zero e no requer nenhum conhecimento prvio de programao.
O manual no pode mostrar-lhe tudo. Ento, dedicao e vontade de aprender so obrigatrios. Mas no se preocupe - aprender a fazer sites muito divertido e d uma tremenda quantidade de satisfao quando voc consegue.
Ok, chega de conversa. Vamos comear!
Pgina|4
Lio 1: Vamos comear!

Nesta primeira lio, voc ter uma breve apresentao das ferramentas que voc precisa para fazer um site. O que necessrio? Muito provavelmente voc j tem tudo que precisa. Voc tem um "navegador". Um navegador o programa que torna possvel navegar e abrir sites.No importante qual navegador voc usa. O mais comum o Microsoft Internet Explorer. Mas h outros, como Opera e Mozilla Firefox e todos eles podem ser usados. Voc pode ter ouvido falar ou at mesmo usado, programas como o Microsoft FrontPage, Macromedia Dreamweaver ou mesmo Microsoft Word, que pode ou afirmam que eles podem - criar websites para voc. Esquea esses programas por enquanto! Eles no so de nenhuma ajuda para voc, quando aprender a codificar seu prprio site. Em vez disso, voc precisa de um editor de texto simples. Se voc estiver usando Windows, voc pode usar o Wordpad, que normalmente encontrado no menu Iniciar, Programas em Acessrios:
Pgina|5
Se voc no estiver usando o Windows, voc pode usar um editor de texto similar. Por exemplo, Pico (Linux) ou TextEdit (Mac). Bloco de notas um programa de edio de texto bsico que excelente para codificao, porque no interfere com o que voc est digitando. Ele lhe d o controle completo. O problema com muitos dos programas que afirmam que podem criar sites que eles tm um monte de funes padro, que voc pode escolher. A desvantagem que, tudo precisa se encaixar nestas funes padro. Assim, este tipo de programas, muitas vezes no possvel criar um site exatamente como voc quer. Ou - ainda mais irritante - fazem alteraes em seu cdigo escrito mo. Com o bloco de notas ou outros editores de texto simples, voc s tem a si mesmo para agradecer por seus acertos e erros. Um navegador e o Notepad (ou um editor de texto similar) tudo que voc precisa para fazer seus prprios sites. Preciso estar on-line? Voc no precisa estar conectado Internet, para construir seus sites. Voc pode fazer o site no disco rgido do seu computador e envi-lo para a Internet quando ele for concludo.
Qual o prximo? V para a prxima lio e leia sobre o HTML. A diverso realmente comea na Lio 3.
Pgina|6
Lio 2: O que HTML?

Esta lio lhe dar uma breve apresentao do seu novo amigo, o HTML.
O que HTML? HTML a "lngua me" do seu navegador Tim Berners-Lee criou o HTML original (e outros protocolos associados como o HTTP) em uma estao NeXTcube usando o ambiente de desenvolvimento NeXTSTEP. Na poca a linguagem no era uma especificao, mas uma coleo de ferramentas para resolver um problema de Tim: a comunicao e disseminao das pesquisas entre ele e seu grupo de colegas. Sua soluo, combinada com a ento emergente internet pblica (que tornaria-se a Internet) ganhou ateno mundial. As primeiras verses do HTML foram definidas com regras sintticas flexveis, o que ajudou aqueles sem familiaridade com a publicao na Web. Atualmente a sintaxe do HTML muito mais rgida, permitindo um cdigo mais preciso. Atravs do tempo, a utilizao de ferramentas para autoria de HTML aumentou, assim como a tendncia em tornar a sintaxe cada vez mais rgida. Apesar disso, por questes histricas (retrocompatibilidade), os navegadores ainda hoje conseguem interpretar pginas web que esto longe de ser um cdigo HTML vlido. A linguagem foi definida em especificaes formais na dcada de 1990, inspiradas nas propostas originais de Tim Berners-Lee em criar uma linguagem baseada em SGML para a Internet. A primeira publicao foi esboada por Berners-Lee e Dan Connolly, e publicada em 1993 na IETF como uma aplicao formal para o SGML (com uma DTD em SGML definindo a
INFORMTICA | HTML /CSS Pgina|7
gramtica). A IETF criou um grupo de trabalho para o HTML no ano seguinte, e publicou o HTML 2.0 em 1995. Desde 1996, as especificaes HTML vm sendo mantidas, com o auxlio de fabricantes de software, pela World Wide Web Consortium (W3C).[1] Apesar disso, em 2000 a linguagem tornou-se tambm uma norma internacional (ISO/IEC 15445:2000). A ltima especificao HTML lanada pela W3C foi a recomendao HTML 4.01, publicada no final de 1999. Uma errata ainda foi lanada em 2001. Desde a publicao do HTML 3.5 no final de 1997, o grupo de trabalho da W3C tem cada vez mais e de 2002 a 2006, de forma exclusiva focado no desenvolvimento do XHTML, uma especificao HTML baseada em XML que considerada pela W3C como um sucessor do HTML.[2][3][4] O XHTML faz uso de uma sintaxe mais rigorosa e menos ambgua para tornar o HTML mais simples de ser processado e estendido. Em janeiro de 2008 a W3C publicou a especificao do HTML5, a prxima verso do HTML, como Working Draft. Apesar de sua sintaxe ser semelhante a de SGML, o HTML5 abandonou qualquer tentativa de ser uma aplicao SGML e, definiu explicitamente sua prpria serializao "html", alm de uma alternativa baseada em XML, o XHTML5. O que voc v quando voc exibir uma pgina na Internet a interpretao do seu navegador de HTML. Para ver o cdigo HTML de uma pgina na internet, basta clicar em "Exibir" no menu superior do seu navegador e escolha "Source".
Pgina|8
Para o olho destreinado, o cdigo HTML parece complicado, mas este manual ir ajud-lo a fazer sentido de tudo isso. O que eu posso usar o HTML? Se voc quiser fazer sites, no h nenhuma maneira em torno de HTML. Mesmo se voc estiver usando um programa para criar sites, como o Dreamweaver, um conhecimento bsico de HTML pode tornar a vida muito mais simples e seu site muito melhor. A boa notcia que HTML fcil de aprender e usar. Em apenas algumas aulas, voc ter aprendido como fazer o seu primeiro site. HTML usado para fazer sites. to simples quanto isso! Ok, mas o que H-T-M-L representa? HTML a abreviatura de "HyperText Mark-up Language" - isso mais do que voc precisa saber nesta fase. No entanto, em prol da boa ordem, vamos explicar em maiores detalhes. Hyper o oposto de linear. Nos bons velhos tempos - quando um rato era algo caado por gatos - os programas de computadores rodavam linearmente: quando o programa tinha executado uma ao que foi para a linha seguinte e, depois disso, a linha seguinte e assim por diante. Mas HTML diferente - voc pode ir onde quiser e quando quiser. Por exemplo, no necessrio visitar hotmail.com antes de visitar microsoft.com. O texto auto-explicativo. Mark-up o que voc faz com o texto. Voc est marcando o texto da mesma forma que voc faz em um programa de edio de texto com cabealhos, marcadores, negrito e assim por diante. Neste manual, voc aprender os chamados XHTML (Extensible HyperText Mark-up Language) que, em suma, uma maneira nova e melhor estruturada de escrever HTML. Agora voc sabe um pouco mais sobre comear a fazer sites. HTML (e XHTML), ento vamos
Pgina|9
Lio 3: Elementos e tags

Agora voc est pronto para aprender a essncia do HTML: elementos. Elementos dar estrutura a um documento HTML e indica ao navegador como voc quiser que seu site a ser apresentado. Geralmente elementos consistem de uma marca de incio, algum contedo, e uma tag final.
"Tags"?
Tags so etiquetas que utiliza para marcar o incio e o fim de um elemento. Todas as marcas tm o mesmo formato: comeam com um sinal de menor
"<" e terminam com um sinal de maior que ">".

De um modo geral, existem dois tipos de tags - tags de abertura: <html> e tags de fechamento: </ html>. A nica diferena entre uma tag de abertura e uma tag de fechamento a barra "/". Voc rotular contedo, colocando-o entre uma tag de abertura e uma tag de fechamento. HTML tudo sobre os elementos. Para aprender HTML aprender e usar marcas diferentes.
Voc pode me mostrar alguns exemplos? em. Todo o texto entre o <em> tag de abertura e a tag de fechamento </ em> enfatizada no navegador. ("em" a abreviao de "nfase".)
Ok, o elemento de texto nfase
P g i n a | 10
Exemplo 1:
<em>Enfse ao Texto</em>
Ser parecido com este no navegador:
h1 elementos, h2, h3, h4, h5 e h6 usado para fazer ttulos (h significa "ttulo"), onde h1 o primeiro nvel e, normalmente, o maior texto, h2 o segundo nvel e texto normalmente um pouco menor, e h6 o
A sexto e ltimo na hierarquia de posies e normalmente de texto menor.
Exemplo 2:
<h1>Este e um titulo</h1> <h2>Este e um subtitulo</h2>

P g i n a | 11
Ento, eu sempre preciso de uma tag de abertura e uma tag de fechamento? Como se costuma dizer h uma exceo para cada regra e em HTML a exceo que existem alguns elementos que tanto abrem e fecham na mesma marca. Estes elementos chamados vazios no esto ligados a uma passagem especfica do texto, mas sim so rtulos isolados, por exemplo, uma quebra de linha que se parece com isso: <br
/>.
Deve ser digitado etiquetas em maiscula ou minscula? A maioria dos navegadores no se importe se voc digite suas marcas em caixa alta, baixa ou mista. <HTML>, <html> Ou <HTML> normalmente do o mesmo resultado. No entanto, a maneira correta digitar tags em letras minsculas. Ento adquira o hbito de escrever suas tags em letras minsculas. Onde devo colocar todas estas tags? Voc digita suas tags em um documento HTML. Um site contm um ou mais documentos HTML. Quando voc navega na Web, voc simplesmente abrir diferentes documentos HTML. Vamos continuar, na prxima lio voc ter feito seu primeiro website.
Lio 4: Criando
seu primeiro website
Com o que voc aprendeu nas lies anteriores, agora voc est a poucos minutos de fazer seu primeiro website.
P g i n a | 12
Como?
Na lio 1 , vimos o que necessrio fazer um website: um navegador e o Notepad (ou editor de texto similar). Utilizaremos o Bloco de Notas. Para abrir o bloco de notas v Acessrios + Bloco de notas): (Menu Iniciar + Todos os programas +
Agora estamos prontos! O que posso fazer? Vamos comear com algo simples. Como sobre uma pgina que diz: "Oba!!! Este o meu primeiro site." Leia e voc vai descobrir como simples. HTML simples e lgico. O navegador l HTML como voc ler em Ingls: de cima para baixo e da esquerda para a direita. Assim, um simples documento HTML comea com o que deve vir em primeiro lugar e termina com o que deve vir por ltimo. A primeira coisa que voc precisa fazer dizer ao navegador que voc vai "falar" com ele na linguagem HTML. Isto feito com a tag <html> (nenhuma
P g i n a | 13
surpresa). Portanto, antes de fazer qualquer coisa digite "<html>" na primeira linha do seu documento no Bloco de Notas. Como voc pode lembrar das lies anteriores, <html> uma tag de abertura e deve ser fechado com uma tag de fechamento quando voc terminar de digitar HTML. Portanto, para ter certeza que voc no se esquea de fechar a tag HTML Agora digite "</ html>" escreva o resto do documento entre <html> e </ html>.
A prxima coisa que o documento precisa de uma "cabea", que fornece informaes sobre seu documento, e um "corpo", que o contedo do documento. Desde HTML no nada se no fosse lgico, a cabea (<head> e </ head>) est no topo do corpo (<body> e </ body>).
O documento deve agora olhar como este:
<html> <head> </head> <body> </body>
</html>
Observe como estruturamos as tags com novas linhas (usando a tecla Enter), bem como recuos (usando a tecla Tab). Em princpio, no importa como voc estrutura seu documento HTML. Mas para ajud-lo, futuramente em sua codificao, altamente recomendvel que voc estruture seu documento HTML de uma forma elegante com quebras de linha e recuos, como no exemplo acima. Se o documento se parece com o exemplo acima, voc fez seu primeiro website - uma pgina particularmente chata e provavelmente no o que voc
P g i n a | 14
sonhou fazer quando comeou este manual. O que voc fez ser o modelo bsico para todos os seus futuros documentos HTML. At a tudo bem, mas como fao para adicionar contedo ao meu site? Como voc j aprendeu, seu documento HTML tem duas partes: uma cabea e um corpo. Na seo head voc escreve informaes sobre a pgina, enquanto o corpo contm as informaes que constituem a pgina. Por exemplo, se voc quiser dar a pgina um ttulo que aparecer na barra superior do navegador, que deve ser feito na seo "head". O elemento utilizado para um ttulo title. Ou seja escrever o ttulo da pgina entre o
<title> tag de abertura e a tag de fechamento </ title>:

<title>Meu primeiro web site</title> Note que este ttulo no aparece na prpria pgina. Qualquer coisa que voc quer que aparea na pgina contedo e dever ser adicionado entre o
"body" tags.
Como prometido, queremos uma pgina dizendo, " Oba!!! Este o meu primeiro site " Este o texto que queremos comunicar e ele dever ser na seo de corpo. Ento, na seo do corpo, digite o seguinte:
<p> Oba!!! Este o meu primeiro site</p>

A p em texto.
<p>
a abreviao de
"n",
que exatamente, um pargrafo de
Seu documento HTML agora deve ter esta aparncia:
<html> <head> <title>Meu primeiro website </title> </head> <body> <p> Oba!!! Este o meu primeiro site.</p> </body> </html>
P g i n a | 15
Feito! Voc j fez o seu primeiro website! Em seguida tudo que voc precisa fazer salv-lo em seu disco rgido e depois abri-lo no seu navegador: No bloco de notas escolha "Salvar como ..." em "Arquivo" no menu superior. Escolha "Todos os arquivos" no "Salvar como tipo" . Isto muito importante caso contrrio, voc salv-lo como um documento de texto e no como um documento HTML. Agora salve o documento como "pagina1.htm" (a terminao ". Htm" indica que um documento HTML. ". Html" d o mesmo resultado. Eu sempre uso ". Html", mas voc pode escolher qualquer dos dois extenses que voc preferir). No importa onde voc salvar o documento no seu disco rgido - contanto que voc se lembra onde voc salvou para que voc possa encontr-lo novamente.
Agora v para o browser:
No menu superior escolha a opo "Open" em "Arquivo" (ou pressione CTRL + O). Clique em "Procurar" na caixa que aparece. Localize o seu documento HTML e clicar em "Abrir".
INFORMTICA | HTML /CSS P g i n a | 16
Ele agora deve dizer " Oba!!! Este o meu primeiro site." no seu browser. Parabns! Se voc quer que o mundo inteiro ver sua obra-prima de imediato, tenha calma, logo ir aprender como fazer upload sua pgina para a Internet. Seja paciente e continue lendo. A diverso est apenas comeando.
P g i n a | 17
Lio 5: O que voc aprendeu at agora?

Sempre comece com o modelo bsico que fizemos na lio anterior:
<html> <head> <title></title> </head> <body> </body> </html>

Na seo de cabea <head>, sempre escrever um ttulo:
<title>
O ttulo
de sua pgina </ title>. Observe como o ttulo ser mostrado no canto superior esquerdo do seu navegador:
O ttulo especialmente importante porque usado pelos motores de busca (como Google) para indexar seu site e mostrado nos resultados da pesquisa
Na seo de corpo, voc escreve o contedo real da pgina. Voc j conhece alguns dos elementos mais importantes:
<p> usado para paragrafos</p> <em>Texto enfse</em> <h1>Cabealho</h1> <h2>Subtitulo</h2> <h3>Sub-subtitulo</h3>
P g i n a | 18
Lembre-se, a nica maneira de aprender HTML por tentativa e erro. Mas no se preocupe, no h nenhuma maneira de voc pode destruir seu computador ou a Internet. Ento, praticar a melhor maneira de ganhar experincia. O que que isso quer dizer? Ningum se torna um bom criador de site, aprendendo os exemplos neste manual. O que voc recebe neste manual simplesmente uma compreenso bsica dos blocos de construo - para se tornar bom voc deve usar os blocos de construo de maneiras novas e criativas. Ento, se aventure por conta prpria... Ok, talvez no. Pratique o que voc aprendeu! Ento, o que o prximo? Tente criar algumas pginas sozinho. Por exemplo, fazer uma pgina com um ttulo, um ttulo, um texto, um subttulo e um texto um pouco mais. perfeitamente correto usar o manual, enquanto voc faz suas primeiras pginas. Mas depois, ver se voc pode faz-lo por conta prpria - sem olhar.
P g i n a | 19
Lio 6: Um pouco mais elementos

Ser que voc consegue fazer algumas pginas sozinho? Se no, aqui est um exemplo:
<html> <head> <title>Meu primeiro website</title> </head> <body> <h1>Titulo</h1> <p>texto, texto, texto, texto</p> <h2>Subtitulo</h2> <p>texto, texto, texto, texto</p> </body> </html>
Agora o qu?
Agora tempo para aprender sete novos elementos. Da mesma maneira voc enfatiza o texto, colocando-o entre o abertura e a tag de fechamento usando o
<em>
tag
</em>,
voc pode dar nfase mais forte
<strong>
tag abertura e a tag de fechamento
</strong>.
Exemplo 1:
<strong>Maior Enfse</strong>
P g i n a | 20
Da mesma forma, voc pode fazer seu texto menor utilizao de pequeno porte: Example 2:
<small>Pequeno porte </small>

Posso usar vrios elementos ao mesmo tempo? Voc pode facilmente usar vrios elementos ao mesmo tempo enquanto voc evitar a sobreposio de elementos. Isto melhor ilustrado atravs de um exemplo:
Exemplo 3:
Se voc deseja enfatizar texto pequeno, deve ser feito assim:
<em><small>Enfatizar texto pequeno</small></em>

E no assim:
<em><small>Enfatizar texto pequeno</em></small>

A diferena que no primeiro exemplo, fechamos a etiqueta que aberto pela primeira vez. Desta forma, evitar a confuso de ns mesmos e do navegador. Elementos mais! Conforme mencionado na Lio 3 existem elementos que so abertas e fechadas na mesma marca. Estes chamados elementos vazios no esto ligados a uma passagem especfica no texto, mas sim so rtulos isolados. Um exemplo de uma tag <br /> que cria uma quebra de linha:
Exemplo 4:
Alguns <br
/> texto e texto um pouco mais em uma nova linha
P g i n a | 21
Observe que a tag escrita como uma contrao de uma abertura e fechamento de tag com um espao vazio e uma barra no final: <br />. Outro elemento que aberto e fechado na mesma marca <hr /> que usado para desenhar uma linha horizontal ("hr" significa "regra horizontal"):
Exemplo 5:
<hr />
Exemplos de elementos, que precisa tanto tag de abertura e uma tag de fechamento - como a maioria dos elementos fazer - ul, ol e li. Estes elementos so utilizados quando se quer fazer listas.
ul a abreviao de "lista ordenada" e balas de inseres para cada item da lista. ol curto para "lista ordenada" e os nmeros de cada item da lista. Para fazer itens na lista, use a tag li ("item da lista"). Confuso? Veja os exemplos:
Exemplo 7:
<ul> <li>Um item da lista</li> <li>Outro item da lista</li> </ul>

ser parecido com este no navegador:
P g i n a | 22
Exemplo 8:
<ol> <li>Primeiro item da lista</li> <li>Segundo item da lista</li> </ol>

Ufa! s isso? Isso tudo por agora. Novamente sugiro que faa suas prprias pginas, usando alguns dos sete novos elementos que voc aprendeu nesta lio:
<strong>Forte Enfse</strong> <small>Pequeno texto</small> <br /> Quebra de linha <hr /> Linha horizontal <ul>Lista</ul> <ol>Lista ordenada</ol> <li>Item da lista</li>
P g i n a | 23
Lio 7: Atributos
Voc pode adicionar atributos a um nmero de elementos.
O que um atributo? Como voc provavelmente se lembra, os elementos de uma estrutura de um documento HTML, indica ao navegador como voc quer que seu site a seja apresentado (por exemplo, <br /> informa o navegador para fazer uma quebra de linha). Em alguns elementos que voc pode adicionar mais informaes. Informaes adicionais, chamado de um atributo.
Exemplo 1:
<h2 style="background-color:#ff0000;">Minha amiga HTML</h2> Atributos so escritos dentro da tag, e so seguidos por um sinal de igual e as informaes do atributo escritas entre aspas. O ponto e vrgula aps o atributo para separar comandos de estilo diferentes. Vamos voltar a isso mais tarde. Qual o truque? Existem vrios atributos. A primeira que voc vai aprender o estilo. Com o atributo de estilo voc pode definir o layout de seu site. Por exemplo, uma cor de fundo:
Example 2:
<html> <head> </head> <body style="background-color:#ff0000;"> </body> </html>

Ir mostrar uma pgina completamente vermelho no navegador - v em frente e veja por si mesmo. Vamos explicar com mais detalhes como funciona o sistema de cores em alguns momentos. Note que algumas tags e atributos usam EUA cor ortografia ou seja, em vez de cor. importante que voc tome cuidado para usar a mesma grafia que usamos nos exemplos neste manual - caso contrrio, o navegador no ir ser
capaz de compreender seus cdigos. Alm disso, no se esquea de fechar as aspas (aspas) depois de um atributo. Como que a pgina ficou vermelha? No exemplo acima, ns pedimos a cor de fundo com o cdigo "# ff0000". Este o cdigo de cor para o vermelho usando os chamados nmeros hexadecimais (hex). Cada cor tem seu prprio nmero hexadecimal. Aqui esto alguns exemplos: Branco: # ffffff Preto: # 000000 (zeros) Vermelho: # ff0000 Azul: # 0000FF Verde: # 00FF00 Amarelo: # FFFF00
Um cdigo de cores hexadecimal consiste em # e seis dgitos ou letras. H mais de 1000 cdigos HEX e no fcil descobrir qual o cdigo HEX est vinculado a uma cor especfica. Para tornar mais fcil, veja no link abaixo as 216 cores mais usadas: http://blogomanyatbc1.blogspot.com.br/ Voc tambm pode usar o nome em Ingls para as cores mais comuns (branco, preto, vermelho, azul, verde e amarelo).
Example 3:
<body style="background-color: red;">

Suficiente sobre as cores. Vamos voltar para os atributos. Que elementos podem usar atributos? Diferentes atributos pode ser aplicado a maioria dos elementos. Muitas vezes voc vai usar atributos em tags, como a marca do corpo enquanto voc raramente vai usar atributos, por exemplo, a tag br que uma quebra de linha normalmente uma quebra de linha sem nenhum parmetro para ajustar. Assim como existem muitos elementos diferentes, por isso existem muitos atributos diferentes. Alguns atributos so feitos sob medida para um determinado elemento, enquanto outros podem ser usados para vrias tags. E vice-versa: algumas tags podem conter somente um tipo de atributo, enquanto outras podem conter vrios tipos. Pode parecer um pouco confuso, mas uma vez que voc se familiarizar com os diferentes atributos na verdade muito lgico e em breve voc vai ver como eles so fceis de usar e quantas possibilidades que oferecem.
Este manual ir apresentar-lhe os atributos mais importantes. Exatamente que partes no constituem uma tag? Geralmente um elementos consistem de uma marca de incio, com ou sem um ou mais atributos, alguns contedos e uma tag final. Simples como isso. Veja a ilustrao abaixo.
Elementos Iniciar Tag Conteudo
Finalizar Tag
<h2 style="background-color:#ff0000;">Minha amiga HTML</h2>

Atributos
P g i n a | 26
Lio 8: Links
Nesta lio, voc vai aprender a fazer ligaes entre pginas.
O que eu preciso para fazer um link? Para fazer ligaes, voc usa o que voc sempre usa quando a codificao HTML: um elemento. Um elemento simples com um atributo e voc ser capaz de vincular a tudo e qualquer coisa. Aqui est um exemplo do que um link para o site da SEDUC poderia ser semelhante a:
Exemplo 1: <a href="http://portal.seduc.ce.gov.br/">Link para o site da SEDUC</a>

Ficaria assim no navegador:
O elemento representa uma "ncora". O atributo href abreviao de "hipertexto de referncia", que especifica onde o link - que normalmente um endereo na internet ou um nome de arquivo. atributo href tem o valor " http://portal.seduc.ce.gov.br ", que o endereo completo do site da Seduc - CE e chamado de URL (Uniform Resource Locator). Note-se que "http://" deve sempre ser includo em URLs. A frase "Link para os site da SEDUC " o texto que mostrado no navegador como o link. Lembre-se de fechar a tag com um </ No exemplo acima o
a>.
O que so links entre prprias pginas? Se voc quiser fazer uma ligao entre pginas do mesmo site, voc no precisa escrever o endereo completo (URL) para o documento. Por exemplo, se voc tem duas pginas (vamos cham-los pagina1.htm e pagina2.htm) e salva-los na mesma pasta que voc pode fazer um link de uma pgina para o outro por apenas digitando o nome do arquivo no link. Sob tais circunstncias, um link de pagina1.htm para pagina2.htm poderia ser assim:
P g i n a | 27
Exemplo 2:
<a href="pagina2.htm">Clique par ir para pagina 2</a>

Se a pgina 2 foram colocados em uma subpasta (chamado de "subdiretorio"), o link poderia ser assim:
Exemplo 3:
<a href="subpasta/pagina2.htm"> Clique par ir para pagina 2</a>
O outro caminho, um link da pgina 2 (na subpasta) para a pgina 1 ficaria assim: Example 4:
<a href="../pagina1.htm">link pagina 1</a>

".. /" Aponta para a pasta um nvel acima da posio do arquivo a partir do qual a ligao feita. Seguindo o mesmo sistema, voc pode apontar para dois (ou mais) pastas por escrito ".. / .. /". Voc entendeu o sistema? Alternativamente, voc pode sempre digitar o endereo completo para o arquivo (URL). E as ligaes internas dentro de uma pgina? Voc tambm pode criar links internos dentro de uma pgina - por exemplo, uma tabela de contedos no topo com links para cada captulo a seguir. Tudo que voc precisa usar um atributo muito til chamado id (identificao) e com o smbolo "#". Use o atributo id para marcar o elemento ao qual voc deseja vincular. Por exemplo:
<h1 id="Titulo1">Titulo1</h1>
Agora voc pode criar um link para esse elemento usando "#" no atributo link. O "#" deve ser seguido pela ID da tag que voc deseja vincular. Por exemplo:
<a href="#Titulo1">Link Titulo 1</a>
P g i n a | 28
Tudo se tornar claro com um exemplo:
Exemplo 5:
<html> <head> </head> <body> <p><a href="#Titulo1">Link Titulo 1</a></p> <p><a href="#Titulo2">Link Titulo 2</a></p> <h1 id="Titulo1">Titulo 1</h1> <p>Insira o Texto 1</p> <h1 id="Texto2">Texto 2</h1> <p>Insira o Texto 2</p> </body>
</html>
Ser parecido com este no navegador (clique nos dois links):
(Nota: Um atributo id deve comear com uma letra)
P g i n a | 29
Posso ligar para qualquer outra coisa? Voc tambm pode fazer um link para um endereo de e-mail. Ele feito em quase da mesma maneira como quando voc vincula a um documento:
Exemplo 6:
<a href="mailto:email@provedor.com">Enviar um e-mail para Nome </a>
A nica diferena entre um link para um e-mail e um link para um arquivo que em vez de digitar o endereo de um documento, digite mailto: seguido pelo endereo de e-mail. Quando o link clicado, o programa padro de e-mail abre com uma nova mensagem em branco dirigida ao endereo especificado e-mail. Por favor, note que esta funo s funcionar se houver um programa de email instalado em seu computador. Faa uma tentativa! Existem outros atributos que eu deva conhecer? Para criar um link, voc sempre tem que usar o atributo voc tambm pode colocar um ttulo no seu link:
href.
Alm disso,
Exemplo 7:
<a href="http://portal.seduc.ce.gov.br/" title="Visite o site da SEDUC-CE">SEDUC-CE</a>
Ficaria assim no navegador:
O atributo title usado para fornecer uma breve descrio do link. Sem clicar, coloque o cursor sobre o link, voc ver o texto "Visite o site da SEDUC-CE ".
P g i n a | 30
Lio 9: Imagens
No seria timo se voc pudesse ter uma imagem do bonequinho do android no centro de sua pgina? Isso soa como um desafio ... Talvez, mas na verdade muito fcil de fazer. Tudo que voc precisa de um elemento:
Exemplo 1:
<img src="android.jpg" alt="android" />

ficaria assim no navegador:
Tudo que voc precisa fazer dizer ao navegador que voc deseja inserir uma imagem (img) e, em seguida, onde est localizada (src, abreviatura para "source"). Observe como o elemento img aberta e fechada usando a mesma marca. Como a tag <br
/>, ele no est vinculado a um pedao de texto.
"android.jpg" o nome do arquivo de imagem que deseja inserir na sua pgina. ". Jpg" o tipo de arquivo da imagem. Assim como a extenso ". Htm" mostra que um arquivo um documento HTML ". Jpg" informa ao navegador que um arquivo uma imagem. Existem trs tipos diferentes de tipos de arquivos de imagem que voc pode inserir em suas pginas:
GIF (Graphics Interchange Format) JPG / JPEG (Joint Photographic Experts Group) PNG (Portable Network Graphics) Geral imagens GIF so melhores para grficos e desenhos, enquanto as imagens JPEG so melhores para fotografias. Isto por dois motivos: primeiro, imagens GIF so constituidas por 256 cores, e imagens JPEG por milhes de
cores, segundo, o formato GIF melhor para a compactao de imagens simples, que o formato JPEG, que otimizado para imagens mais complexas. A melhor compresso, menor o tamanho do arquivo de imagem, o mais rpido sua pgina ser carregada. Como voc provavelmente sabe por experincia prpria, desnecessariamente 'pesados' pginas pode ser extremamente desagradvel para o usurio. Tradicionalmente, os formatos GIF e JPEG foram os dois tipos de imagens dominantes, mas ultimamente o formato PNG tem se tornado cada vez mais popular (principalmente em detrimento do formato GIF). O formato PNG em muitos aspectos, o melhor de ambos os formatos JPEG e GIF: milhes de cores e efetiva compresso. Onde posso obter minhas imagens? Para fazer suas prprias imagens, voc precisa de um programa de edio de imagem. Um programa de edio de imagem uma das ferramentas essenciais que voc precisa para criar sites bonitos. Infelizmente, no h programas de edio de imagem que ja venha com Windows ou outros sistemas operacionais. Assim, voc pode considerar a aquisio do Paint Shop Pro, Photoshop ou Fireworks da Macromedia, que so trs dos melhores programas de edio de imagem atualmente no mercado. No entanto, como dissemos antes, no ser necessrio comprar um programa caro para acompanhar este manual. Por enquanto, voc pode baixar a imagem excelente edio IrfanView programa que o chamado freeware e, portanto, no custa nada. Ou voc pode simplesmente pedir imagens de outros sites, baixando-os. Mas por favor, tenha cuidado para no violar direitos autorais ao baixar imagens. Ainda assim, til saber como baixar fotos, ento aqui est como faz-lo: Boto direito do mouse em uma imagem em qualquer imagem na Internet. Escolha "Salvar imagem como ..." no menu que aparece. Escolha um local para a imagem em seu computador e clique em "Salvar". Faa isso com a imagem abaixo e salve-o em seu computador no mesmo local que seus documentos HTML. (Observe que o logotipo salva como um arquivo PNG: logo.png): Agora voc pode inserir a imagem em uma de suas prprias pginas. Tente voc mesmo. tudo que eu preciso saber sobre as imagens?
H mais algumas coisas que voc deve saber sobre as imagens. Primeiro, voc pode facilmente inserir imagens localizadas em outras pastas, ou mesmo imagens que esto localizados em outros sites:
Exemplo 2:
<img src="images/logo.png" />

Example 3:
<img src="http://www.seusite.com.br/logo.png" />

Em segundo lugar, as imagens podem ser links:
Example 4:
<a href="http://www.seusite.com.br"><img src="logo.png" /></a> Ser parecido com este no navegador:
Voc sempre precisa usar o atributo src, que diz ao navegador onde a imagem est localizada. Alm disso, h um nmero de outros atributos que pode ser til quando a insero de imagens. O atributo alt usado para dar uma descrio alternativa de uma imagem se, por alguma razo, a imagem no mostrado para o utilizador. Isto especialmente importante para os usurios com deficincia visual, ou se a pgina carregada muito lentamente. Portanto, use sempre o atributo alt:
Exemplo 5:
<img src="logo.png" alt="Logo do meu Site" />

Alguns navegadores permitem que o texto do atributo alt aparecer como uma caixa de pop-up pequena, quando o usurio passa o cursor sobre a imagem. Por favor, note que ao usar o atributo alt, o objetivo fornecer uma descrio alternativa da imagem. O atributo alt no deve ser usado para criar mensagens pop-up para o usurio, desde ento, os usurios com deficincia visual ir ouvir a mensagem sem saber o que a imagem. O atributo
title
pode ser usado para adicionar informaes para a imagem:
P g i n a | 33
Exemplo 6: <img src="logo.png" title="Logo do meu primeiro site" />

Ser parecido com este no navegador
Se voc, sem clicar, coloque o cursor sobre a imagem, voc ver o texto "Logo do meu primeiro site" aparecem como uma caixa de pop-up. Dois outros atributos importantes so a largura e a altura:
Exemplo 7: <img src="logo.png" width="141px" height="32px" />

Os atributos de largura e altura pode ser usado para definir a altura e a largura de uma imagem. O valor que usado para definir a largura e a altura pixels. Pixels so as unidades de medida usada para medir a resoluo da tela. (A resoluo de tela mais comum de 1024x768 pixels). Ao contrrio de centmetros, os pixels so unidades relativas de medio que dependem da resoluo da tela. Para um usurio com uma tela de alta resoluo, 25 pixels podem corresponder a 1 centmetro, enquanto o pixel 25 mesmo em baixa resoluo da tela pode corresponder a 1,5 centmetros na tela. Se voc no definir a largura e altura, a imagem ser inserida em seu tamanho real. Mas, com largura e altura voc pode manipular o tamanho:
Exemplo 8:
<img src="logo.png" width="32px" height="32px" />

P g i n a | 34
No entanto, vale a pena manter em mente que o tamanho real em kilobytes do arquivo de imagem continuar a mesma por isso vai demorar o mesmo tempo para carregar a imagem como antes, embora parea menor na tela. Portanto, voc no deve diminuir o tamanho da imagem usando o atributos width e height. Em vez disso, voc deve sempre redimensionar suas imagens em um programa de edio de imagem para tornar suas pginas mais leves e mais rpido. Dito isto, ainda uma boa idia usar os atributos da largura e altura, porque o browser ir ento ser capaz de detectar a quantidade de espao a imagem ter no layout da pgina final antes da imagem ser totalmente baixado. Isso permite que o seu browser para configurar a pgina muito bem em uma maneira mais rpida. Isso o suficiente sobre imagens por enquanto.
P g i n a | 35
Lio 10: Tabelas

Tabelas so usadas quando voc precisa mostrar "dados tabulares" ou seja, informaes que logicamente apresentada em linhas e colunas. difcil? Construir tabelas em HTML pode parecer primeira vista complicado, mas se voc manter a calma e ver o passo a passo, na verdade estritamente lgico como tudo em HTML.
Exemplo 1:
<table> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table>
Qual a diferena entre <tr> e <td>? Como voc vai ver no exemplo acima, este provavelmente o exemplo mais complicado HTML j lhe foram dadas at agora. Vamos dividi-la e explicar as diferentes tags: 3 elementos diferentes so usados para inserir tabelas: O <table> tag de abertura ea tag de fechamento </ termina a tabela. Lgico.
table> comea e
<tr> significa "linha da tabela" e comea e termina linhas horizontais. Ainda

lgico.
P g i n a | 36
<td> curto para "os dados da tabela". Esta etiqueta comea e termina cada
clula nas linhas de sua tabela. Tudo simples e lgico. Aqui o que acontece no Exemplo inseridos nesta linha: Cell <td> 1 </
1: a tabela comea com um <table>,
seguido por um <tr>, que indica o incio de uma nova linha. Duas clulas so
td> <td> e Clula 2 </ td>. A linha a seguir fechada com </ tr> e um <tr> nova linha comea imediatamente
depois. A nova linha tambm contm duas clulas. A tabela fechada com </ table>. S para esclarecer: linhas so linhas horizontais de clulas e colunas so as linhas verticais de clulas:
Clula 1 e Clula 2 formam uma linha. Cell 1 e Cell 3 formam uma coluna. No exemplo acima, a tabela tem duas filas e duas colunas. No entanto, uma tabela pode ter um nmero ilimitado de linhas e colunas.
Exemplo 2:
<table> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td>Cell 5</td> <td>Cell 6</td> <td>Cell 7</td> <td>Cell 8</td> </tr> <tr> <td>Cell 9</td> <td>Cell 10</td> <td>Cell 11</td> <td>Cell 12</td> </tr>
</table>
Existem os atributos? Claro que existem atributos. Por exemplo, o atributo de fronteira usado para especificar a espessura da borda em torno de sua tabela:
Exemplo 3:
<table border="1"> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table>
A espessura da borda especificada em pixels (Ver lio 9) Tal como acontece com imagens, voc tambm pode definir a largura de uma tabela em pixels - ou, alternativamente, em percentual da tela:
Exemplo 4:
<table border="1" width="30%">

Este exemplo ser exibido no navegador como uma tabela com a largura de 30% da tela. Tente voc mesmo.
P g i n a | 38
Mais atributos?
H lotes de atributos para as tabelas. Aqui esto mais dois:
align:
define o alinhamento horizontal do contedo em toda a tabela, em uma linha ou em uma nica clula. Por exemplo, centro-esquerda, ou direita.
valign:
define o alinhamento vertical do contedo em uma clula. Por exemplo, mdio, superior ou inferior.
Exemplo 5:
<td align="right" valign="top">Cell 1</td>

O que posso inserir em meus quadros? Teoricamente, voc pode inserir qualquer coisa em tabelas: texto, links e imagens ... Mas as tabelas so destinadas para apresentar dados tabulares (ou seja, dados que podem ser apresentados de forma significativa em colunas e linhas) para abster-se de colocar as coisas em tabelas, simplesmente porque voc quer que eles sejam colocados lado a lado. Nos velhos tempos na Internet - ou seja, alguns anos atrs - tabelas eram freqentemente utilizados como uma ferramenta de layout. Mas se voc quiser controlar a apresentao de textos e imagens, h uma maneira muito mais legal para faz-lo (dica: CSS). Iremos abordar sobre isso mais tarde. Agora, coloque o que voc acabou de aprender a praticar e criar um nmero de mesas em diferentes tamanhos, com diferentes atributos e contedo. Isso deve mant-lo ocupado por horas.
P g i n a | 39
Lio 11: Mais
sobre tabelas
O ttulo de "Mais sobre tabelas" pode soar um pouco chato. Mas olhe para o lado positivo, quando as tabelas que voc domina, no h absolutamente nada sobre HTML que vai bat-lo fora. O que resta ento? Os dois atributos colspan e rowspan so usados quando voc deseja criar tabelas de fantasia. Colspan a abreviao de "span coluna". Colspan usado no tag <td> para especificar quantas colunas a clula deve abranger:
Exemplo 1:
<table border="1"> <tr> <td colspan="3">Cell 1</td> </tr> <tr> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> </table>
Ao definir colspan em "3", a clula na primeira linha se estende por trs colunas. Se em vez havia estabelecido colspan em "2", a clula s teria gerado duas colunas e que teria sido necessrio inserir uma clula adicional na primeira linha para que o nmero de colunas se encaixam nas duas linhas. Example 2:
<table border="1"> <tr> <td colspan="2">Cell 1</td>
P g i n a | 40
<td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> <td>Cell 5</td> </tr> </table>
Que tal rowspan? Como voc j deve ter adivinhado, rowspan especifica quantas linhas uma clula deve se estender sobre:
Exemplo 3:
<table border="1"> <tr> <td rowspan="3">Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> </tr> <tr> <td>Cell 4</td> </tr> </table>
P g i n a | 41
No exemplo acima rowspan definido como "3" na Clula 1. Isto especifica que a clula deve se estender ao longo de 3 linhas (uma linha prpria, mais um adicional de dois). Clula 1 e Clula 2 so, assim, na mesma linha, enquanto Clula 3 e Clula 4 formam duas linhas independentes. Confuso? Bem, no simples e fcil perder o controle. Portanto, pode ser uma boa idia para desenhar a tabela em um pedao de papel antes de comear com o HTML. No se confundem? Ento v em frente e criar um par de tabelas com colspan e rowspan.
P g i n a | 42
Lio 12: Layout
(CSS)
No seria timo se voc pudesse dar suas pginas o layout que merecem? Claro, mas como? Para dar o seu layout do site use Cascading Style Sheets (CSS). Nesta lio, voc ter uma breve introduo ao CSS. Mas depois voc pode aprender tudo sobre CSS a partir do zero na sequencia de nosso manual CSS. Ento, por favor, considere esta lio apenas como um aperitivo. CSS a melhor metade do HTML. E na codificao, no h igualdade de status: HTML cuida do material spero (a estrutura), enquanto CSS d um toque agradvel (layout). Como mostrado na Lio 7, CSS pode ser adicionada com o atributo de estilo. Por exemplo, voc pode definir o tipo e o tamanho da fonte em um pargrafo:
Exemplo 1:
<p style="font-size:20px;">Este e digitado no tamanho 20px</p> <p style="font-family:courier;">Este e digitado em Courier</p> <p style="font-size:20px; font-family:courier;">Este e digitado no tamanho 20px Courier </p>
No exemplo acima, usamos o atributo de estilo para especificar o tipo de fonte a ser usada (com o comando font-family) eo tamanho da fonte (com o tamanho da fonte de comando). Observe como no ltimo pargrafo que defina tanto o tipo de fonte e tamanho com um ponto e vrgula separando. Parece que um monte de trabalho? Uma das caractersticas inteligentes de CSS a possibilidade de gerir o seu layout centralizado. Em vez de usar o atributo style em cada tag, voc pode dizer ao navegador uma vez como deve layout de todo o texto na pgina:
P g i n a | 43
Exemplo 2:
<html> <head> <title>Minha Pagina CSS</title> <style type="text/css"> h1 {font-size: 30px; font-family: arial;} h2 {font-size: 15px; font-family: courier;} p {font-size: 8px; font-family: "times new roman";} </style> </head> <body> <h1>Minha primeira pagina CSS</h1> <h2>Bem vindo minha pagina CSS</h2> <p>Aqui voce pod ever como funciona o CSS </p> </body> </html>
No exemplo acima CSS foi inserido na seo de cabea e, por conseguinte, aplica-se a toda a pgina. Para fazer isso, basta usar a tag <style
type="text/css">
CSS.
que informa ao navegador que voc est digitando
No exemplo a todos os cabealhos na pgina sero em Arial no tamanho 30px. Todos os subttulos sero em tamanho Courier 15. E todo o texto em pargrafos normais ser em Times New Roman tamanho 8. Outra opo digitar o CSS em um documento separado. Com um documento CSS separado voc pode gerenciar o layout de muitas pginas de uma s vez. Muito inteligente, se voc quiser alterar o tipo e o tamanho em um grande site com centenas ou milhares de pginas. Ns no vamos entrar nisso agora, mas voc pode aprend-lo mais tarde no nosso tutorial CSS.
P g i n a | 44
O que mais posso fazer com CSS?

CSS pode ser usado para muito mais do que a especificao de tipos e tamanhos de fonte. Por exemplo, voc pode adicionar cores e fundos. Aqui esto alguns exemplos para voc experimentar com: <p style="color:green;">Texto Verde</p> <h1 style="background-color: blue;">A posio sobre fundo azul</h1> <body style="background-image: url('http://seusite/logo.png');"> Tente inserir os exemplos em algumas de suas pginas - tanto como mostrado acima e tambm como CSS inserido na seo de cabea . CSS nada, mas as cores e tipos de fonte? Alm de adicionar o layout, como cores, tipos de letra, etc, CSS tambm pode ser usado para controlar a configurao de pgina e apresentao (margens, float, alinhamento, largura, altura, etc.) Ao regular os diferentes elementos com CSS voc capaz de criar layout de suas pginas com elegncia e preciso.
Exemplo 3:
<p style="padding:25px;border:1px solid red;">Eu amo CSS</p>
Com a propriedade flutuar um elemento pode flutuar para a direita ou para a esquerda. O exemplo seguinte ilustra o princpio:
Exemplo 4: <img src="android.gif" alt="android" style= "float:left;" />

<p>Android um sistema operacional mvel que roda sobre o ncleo Linux, embora por enquanto a sua verso do ncleo Linux divirja da verso oficial. Foi inicialmente desenvolvido pelo Google e posteriormente pela Open Handset Alliance, mas a Google a responsvel pela gerncia do produto e engenharia de processos. </p>
P g i n a | 45
No exemplo, um elemento (a imagem) flutua para a esquerda e o outro elemento (o texto) para direita. Com a posio de propriedade, voc pode colocar um elemento exatamente onde voc o quer em sua pgina:
Exemplo 5:
<img src="android.gif" alt="android" style="position:absolute;bottom:50px;right:10px;" />
No exemplo, a imagem colocada 50 pixels a partir do fundo e 10 pixels a partir da direita no browser. Mas voc pode coloc-lo exatamente onde voc quer. D-lhe uma tentativa. Muito fcil e muito legal, hein?
P g i n a | 46
Com certeza! Mas fcil?

Voc no aprende CSS em 10 minutos. E, como mencionado acima, essa lio serve apenas como uma breve introduo. Mais tarde voc vai aprender muito mais no nosso manual de CSS.
Por agora, concentrar-se em HTML, e passar para a prxima lio onde voc vai aprender como obter o seu website na Internet para que o mundo inteiro pode v-lo!
P g i n a | 47
Lio 13: Uploading
pginas
At agora, s voc ter tido a satisfao de ver suas pginas. Agora o momento para o resto do mundo para ver suas obras-primas. O mundo est preparado para isso? O mundo est pronto! Para obter o seu site na internet, voc s precisa de algum espao de servidor e um programa de FTP gratuito. Se voc tiver acesso Internet, voc j deve ter algum espao no servidor gratuito para o seu site. O seu espao no servidor, ento, provavelmente, ser chamado de algo como http://home.provider.com/ ~ nomedousuario. Mas talvez seja necessrio ativar o servio. Outra opo obter algum espao livre no servidor de Internet. Da mesma forma que voc configurar uma conta de e-mail (Hotmail menos por exemplo), voc pode registrar para o espao livre no servidor de Internet. Vrias empresas oferecem esse servio - entre eles 000webhost.com (clique em "Compre Agora" em "Hospedagem grtis") - ela s vai levar um par de minutos para se cadastrar. Para ter acesso ao servidor, voc precisa conhecer o "Nome do Host" (Por exemplo, ftp.seuhost.com) e ter o seu nome de usurio e senha pronto. tudo que eu preciso? Para acessar o servidor e fazer upload de suas pginas, voc tambm precisa de um programa de FTP. FTP abreviao de File Transfer Protocol. Um programa de FTP usado para conectar dois computadores atravs da Internet para que voc possa transferir arquivos do seu computador para outro computador (servidor). Voc pode no ter um programa desse tipo ainda, mas, felizmente, isso pode ser baixado gratuitamente. Existem diversos programas de FTP. Um dos melhores o FileZilla, que totalmente gratuito. Ento, agora voc pode baixar o FileZilla em
http://www.baixaki.com.br/download/filezilla.htm
E como fao para carregar as pginas? Descrito a seguir como voc faz o upload de suas pginas para uma conta gratuita no 000webhost.com com FileZilla. Mas o processo , mais ou menos, o mesmo para todos os fornecedores de programas e de FTP.
P g i n a | 48
Abra o programa FTP enquanto estiver conectado Internet. Insira "Host Name" ("ftp.seuhost.com" em "Address"), nome de usurio (em "User") e senha (em "Password") e clique em "Connect". Voc deve agora ter acesso ao servidor. De um lado do programa que voc pode ver o contedo do seu computador ("Local Site"), e do outro lado, voc pode ver o contedo do servidor ("Remote Site"):
Encontre seus documentos HTML e imagens em seu computador (no "Local site") e transferi-los para o servidor ("Remote site") clicando duas vezes sobre eles. Agora o mundo inteiro pode v-los! (Por exemplo, no endereo http://seusite.com/page1.htm). Nome de uma das pginas "index.htm" (ou "index.html") e que se tornar automaticamente a pgina inicial. ou seja, se voc digitar http://seusite.com(sem qualquer nome de arquivo) e abrir http://seusite.com/index.htm. No longo prazo, pode ser uma boa idia para comprar o seu prprio domnio (por exemplo www.seudominio.com ou www. seudominio.com.br) procure evitar os endereos longos e complicados que esto sendo atribudos pelo seu provedor de Internet ou de prestadores de espao no servidor gratuito. Voc pode encontrar e comprar domnios no registro.br.
P g i n a | 49
Lio 14:
Web standards e validao
Nesta lio, voc ter um pouco de conhecimento mais terico sobre HTML.
O que mais h para conhecer sobre HTML? HTML pode ser codificado em muitas maneiras diferentes. E os navegadores podem ler HTML de maneiras de diversas maneiras. Voc poderia dizer que HTML tem muitos dialetos. por isso que alguns sites olhar diferente em diferentes navegadores. Houve tentativas para se normatizar o HTML notadamente atravs do World Wide Web Consortium (W3C) fundado por Tim Berners-Lee (yep! o grande que inventou o HTML). Mas tem sido uma estrada longa e difcil. Nos velhos tempos - quando os navegadores onde algo que voc tinha para pagar - Netscape dominava o mercado de browser. Naquela poca, as normas para o HTML estavam nas suas verses 2.0 e 3.2. Mas, com uma quota de mercado de mais de 90% Netscape no teria - e no - importa muito com normas comuns. Pelo contrrio, a Netscape inventava seus prprios elementos estranhos, que no funcionavam em outros navegadores. Por muitos anos a Microsoft ignorou completamente a Internet. Depois de um tempo eles levaram a competio com o Netscape e lanou seu navegador. As primeiras verses do navegador da Microsoft, Internet Explorer, no eram melhores do que o Netscape no suporte s normas HTML. Mas a Microsoft resolveu distribuir seu navegador gratuitamente (isto sempre uma coisa popular para fazer) e Internet Explorer logo se tornou o navegador mais popular. A partir da verso 4 e 5 de Microsoft destinada a apoiar cada vez mais dos padres HTML do W3C. Netscape no conseguiu desenvolver uma nova verso do seu navegador e continuou a distribuir a verso desatualizada 4. O resto histria. Hoje, os padres de HTML so chamados de 4.01 e XHTML. Agora o Internet Explorer que tem uma quota de mercado de mais de 90%. Internet Explorer ainda tem seus elementos prprios, mas tambm suporta os padres HTML do W3C. E assim como todos os outros navegadores, como Mozilla, Opera, Netscape e Chrome.
P g i n a | 50
Ento, quando voc desenvolve cdigo HTML seguindo os padres W3C, voc faz sites que podem ser vistos em todos os navegadores - agora e no futuro. E, felizmente, o que voc aprendeu neste tutorial uma verso nova e mais rigorosa e mais limpa de HTML chamado XHTML. Como posso saber qual verso usada? Com todos os diferentes tipos de HTML, voc precisa dizer ao navegador que "dialeto" do HTML est, no seu XHTML caso. Para fazer isso, voc usa o Document Type. A Declarao de Tipo de Documento escrito sempre no topo do documento:
Exemplo 1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>Title</title> </head> <body> <p>text text</p> </body> </html>
Alm da Declarao de Tipo de Documento (a primeira linha no exemplo acima), que informa ao navegador que voc quer escrever XHTML, voc tambm precisa adicionar informao extra na tag html, usando os atributos xmlns e lang. xmlns abreviao de "XML-Name-Space" e deve ter sempre o valor http://www.w3.org/1999/xhtml. Isso tudo que voc precisa saber. Mas se voc tem uma grande fome de conhecimento complicadas poder ler mais sobre namespaces no site do W3C. No atributo lang voc especfica em que o idioma do documento est escrito dentro Por isso. O padro ISO 639 usado, que lista os cdigos de todas as lnguas do mundo No exemplo acima a lngua definida como Ingls ("en").
P g i n a | 51
Com um DTD o navegador sabe exatamente como deve ser lido e renderizado o HTML. Por isso, use o exemplo acima como modelo para todos os seus futuros documentos HTML. O DTD tambm importante quando voc deseja validar suas pginas. Validar? Por que e como devo fazer isso? Insira o DTD nas suas pginas e voc pode sempre verificar erros no seu HTML usando validador gratuito do W3C. Para testar isso, fazer uma pgina e envi-lo para a Internet. Agora, v para validator.w3.org e digite o endereo (URL) da pgina e valid-lo. Se seu HTML estiver correto, vai aparecer uma mensagem de congratulaes. Caso contrrio, voc receber um relatrio de erro dizendo exatamente o que e onde voc tenha feito algo errado. Faa alguns erros de propsito para ver o que acontece. O validador no til somente para localizar um erro. Alguns navegadores tentam compensar a falta de habilidades entre os desenvolvedores web, tentando corrigir os erros no cdigo mostrando a pgina em que acho que ele deve procurar. Em navegadores assim voc nunca pde ver um erro no seu prprio navegador. No entanto, outros navegadores pode imaginar diferente ou no mostrar a pgina em tudo. O validador pode ajud-lo a encontrar erros que voc nem sabia que existia. Sempre valide suas pginas para ter certeza de que ser sempre exibido corretamente.
P g i n a | 52
Lio 15: Dicas
finais
Parabns, voc chegou a lio final.
Ento agora eu sei tudo?
Voc aprendeu muito e agora voc capaz de fazer seus prprios sites! No entanto, o que voc aprendeu o bsico e ainda h muito mais a ser dominado. Mas agora voc tem uma boa base a partir da qual construir. Nesta ltima lio, voc receber algumas dicas finais:
Primeiro, uma boa idia para manter a ordem e a estrutura em seus documentos HTML. Ao publicar documentos bem organizados de voc no s vai mostrar aos outros o seu domnio de HTML, mas tambm ir torn-la consideravelmente mais fcil para si mesmo para manter uma viso geral. Atenha-se aos padres e validar as suas pginas. Isso no pode ser suficientemente sublinhado: Escreva um XHTML claro, use o DTD e valide suas pginas no validator.w3c.org. Coloque contedos nas suas pginas. Lembre-se que HTML uma ferramenta, que permite apresentar informaes sobre a Internet, para se certificar de que no h informaes para apresentar. Pginas bonitas pode parecer bom, mas a maioria das pessoas usam a Internet para encontrar informaes. Evite sobrecarregar suas pginas com imagens pesadas e coisas extravagantes outro que encontrou na Internet. Ela diminui o carregamento da pgina e pode ser confuso para os visitantes. Pginas que demoram mais de 20 segundos para carregar podem perder at 50% de seus visitantes. Lembre-se de adicionar seu site aos motores de busca / diretrios para que outras pessoas de sua famlia, possam encontrar e se divertir. Na primeira pgina de todos os motores de busca, voc encontrar um link para adicionar novas pginas (o mais importante o Google, mas tambm h outros como yahoo, cade e etc...). Neste manual, voc aprendeu a usar o bloco de notas, que um editor simples e muito fcil de usar, mas talvez voc vai encontr-lo til para usar um editor mais avanado que d uma melhor viso e mais possibilidades.
P g i n a | 53
Como posso saber mais? Primeiro de tudo, importante que voc continue a trabalhar e experimentar as coisas que voc aprendeu neste tutorial. Estudo sites de outras pessoas e se voc encontrar algo que voc gosta ver como ele foi feito com "View Source" (Clique em "Exibir" no menu no seu navegador e escolha "Source").
Pesquisar na Internet para exemplos e artigos sobre HTML. Existem muitos sites com timos contedos sobre HTML. Leia e faa perguntas nos Fruns. Este o lugar onde voc se encontra com os verdadeiros especialistas de quem voc pode aprender muito. Por ltimo, mas no menos importante, voc deve - sempre que se sentir pronto - continue e aprenda CSS. A nica coisa que resta desejar-lhe horas de diverso com seu novo amigo, o HTML. Vejo voc na Internet :-)
P g i n a | 54
Introduo - CSS
CSS uma linguagem para estilos que define o layout de Folhas de Estilo HTML documents Cascading (CSS) uma ferramenta fantstica para construo do layout dos seus websites. Ele pode te salvar e permite que voc projete websites com uma forma completamente nova. CSS uma necessidade para quem trabalha com web design. Este manual ir ajudar a comear com CSS em apenas algumas horas. fcil de entender e ele vai te ensinar todas as tcnicas sofisticadas. Aprender CSS divertido. Como voc vai junto com o manual, lembre-se de ter tempo suficiente para seus experimentos com o que voc aprende em cada aula. Usar CSS necessrio um conhecimento bsico de HTML. Se voc no estiver familiarizado com HTML, por favor, comece com o nosso manual de HTML antes de passar para CSS. Qual software eu preciso? Por favor, evite usar softwares tais como FrontPage, DreamWeaver ou Word para acompanhar este manual. Softwares avanados no o ajudaro a aprender CSS. Em vez disso, ela vai limit-lo e diminuir seu aprendizado. Tudo que voc precisa um editor de texto simples e gratuito, podemos continuar utilizando o bloco de notas. Um editor de texto simples ideal para aprender HTML e CSS, pois no afetam ou alteram os cdigos digitados. Dessa forma, seus acertos e erros s pode ser atribuda a si mesmo - no o software. Um navegador e um editor de texto simples tudo que voc precisa. Vamos comear!
P g i n a | 55
Lio 1: O que CSS?

Talvez voc j tenha ouvido falar em CSS, sem realmente saber o que . Nesta lio voc aprender mais sobre o que CSS e o que ela pode fazer por voc. CSS um acrnimo para Cascading Style Sheets. O que posso fazer com CSS? CSS uma linguagem para estilos que define o layout de documentos HTML. Por exemplo, CSS controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos e muitas outras coisas. Basta esperar e ver! HTML pode ser (in) devidamente usado para definir o layout de sites. Contudo CSS proporciona mais opes e mais preciso e sofisticado. CSS suportado por todos os navegadores atuais. Depois de apenas algumas lies deste manual voc ser capaz de fazer suas prprias folhas de estilo usando CSS para dar o seu site um grande visual. Qual a diferena entre CSS e HTML? HTML usado para estruturar contedos. CSS usado para formatar contedos estruturados. Ok, isso soa um tanto tcnico e confuso. Mas por favor, continue lendo. Tudo far sentido em breve. De volta aos bons velhos tempos quando um sujeito chamado Tim Berners Lee inventou a World Wide Web, a linguagem HTML era usada somente para estruturar textos. Um autor podia marcar seus textos definindo "isto um cabealho" ou "isto um pargrafo" usando tags HTML tais como <h1> e <p>. medida que a Web ganhava popularidade, os designers comearam a olhar para as possibilidades de layout para os documentos on-line. Para atender a essa demanda, os fabricantes de navegadores (quela poca a Netscape e a Microsoft) inventaram novas tags HTML tais como, por exemplo <font> que se diferenciava das tags originais do HTML atravs da definio de layout - e no de estrutura. Isso tambm levou a uma situao em que marcas de estrutura originais, tais como <table> foram sendo cada vez mais utilizadas para pginas de layout em vez de adicionar estrutura ao texto. Muitas novas tags para layout como <blink> eram suportadas somente por um tipo de navegador. "Voc precisa do navegador X para visualizar esta pgina" tornou-se comum nos websites.
P g i n a | 56
CSS foi inventada para solucionar esta situao, fornecendo os web designers com oportunidades de layout sofisticados suportados por todos os navegadores. Ao mesmo tempo, a separao do estilo de apresentao de documentos a partir do contedo de documentos, faz a manuteno do site muito mais fcil. Quais so os benefcios de CSS? CSS uma revoluo no mundo da web design. Os benefcios concretos do uso de CSS incluem: controle do layout de vrios documentos de uma nica folha de estilo; controle mais preciso do layout; aplicao de diferentes layouts para servir diferentes mdias (tela, impressora, etc); numerosas tcnicas avanadas e sofisticadas.
Na prxima lio vamos dar uma olhada em como realmente funciona CSS e como comear.
P g i n a | 57
Lio 2: Como o CSS trabalha?

Nesta lio voc vai aprender como fazer a sua primeira folha de estilo. Voc vai conhecer sobre o modelo CSS bsico e que cdigo necessrio para usar CSS em um documento HTML. Muitas das propriedades usadas em Cascading Style Sheets (CSS) so semelhantes quelas do HTML. Assim, se voc est acostumado a usar HTML para layout ir reconhecer muitos dos cdigos. Vejamos um exemplo concreto. A sintaxe CSS bsico Vamos dizer que queremos uma bela cor vermelha como fundo de uma pgina web: Usando HTML podemos t-lo feito assim:
<body bgcolor="#FF0000">
Com CSS o mesmo resultado pode ser obtido assim:
body {background-color: #FF0000;}

Como voc pode notar, os cdigos so mais ou menos idntico para HTML e CSS. O exemplo acima tambm mostra o modelo CSS fundamental:
P g i n a | 58
Mas onde voc colocar o cdigo CSS? Este exatamente o que vai passar por cima agora. Aplicando CSS a um documento HTML H trs maneiras que voc pode aplicar CSS a um documento HTML. Estes mtodos so exemplificados a seguir. Recomendamos que voc foque no terceiro mtodo ou seja, externo.
Mtodo 1: In-line (o atributo style) Uma maneira de aplicar CSS usando o atributo style do HTML. Partindo do exemplo acima, com a cor do fundo vermelho, ele pode ser aplicado como este:
<html> <head> <title>Meu Primeiro CSS</title> </head> <body style="background-color: #FF0000;"> <p>Essa uma pgina vermelha</p> </body> </html>
Mtodo 2: Interno (a tag style) Outra maneira incluir os cdigos CSS usando a tag HTML <style>. Por exemplo como este:
<html> <head> <title> Meu Primeiro CSS </title> <style type="text/css"> body {background-color: #FF0000;} </style> </head> <body> <p> Essa uma pgina vermelha </p> </body> </html>
P g i n a | 59
Mtodo 3: Externo (link para uma folha de estilo) O mtodo recomendado de vincular a uma folha de estilo chamada externa. Ao longo deste tutorial, vamos utilizar este mtodo em todos os nossos exemplos. Uma folha de estilo externa um simples arquivo de texto com a extenso. Css. Como qualquer outro arquivo, voc pode colocar a folha de estilo no seu servidor web ou no disco rgido. Por exemplo, digamos que sua folha de estilos tenha sido nomeada de style.css e est localizada no diretrio style. A situao pode ser ilustrada da seguinte forma:
O truque criar um link no documento HTML (default.htm) para a folha de estilo (style.css). O link pode ser criado com uma linha de cdigo HTML:
<link rel="stylesheet" type="text/css" href="style/style.css" />

Observe como o caminho para a folha de estilos indicado no atributo href. A linha de cdigo deve ser inserido na seo de cabealho do cdigo HTML ou seja, entre o <head> e </
head> tags. Como esta:
<html> <head> <title>Meu primeiro CSS</title> <link rel="stylesheet" type="text/css" href="style/style.css" /> </head> <body> ...
P g i n a | 60
Este link informa ao navegador que ele deve usar o layout do arquivo CSS ao exibir o arquivo HTML.
A coisa realmente inteligente disto que vrios documentos HTML podem ser ligados folha de estilo mesmo. Em outras palavras, um ficheiro de CSS pode ser usado para controlar a apresentao de muitos documentos HTML.
Esta tcnica pode poupar muito trabalho. Se voc, por exemplo, gostaria de mudar a cor de fundo de um site com 100 pginas, uma folha de estilo pode te salvar de ter que alterar manualmente todos os 100 documentos HTML. Usando CSS a mudana pode ser feita em poucos segundos apenas alterando um cdigo na folha de estilo central. Vamos colocar o que acabamos de aprender na prtica. Tente voc mesmo... Abra o bloco de notas (ou qualquer outro editor de texto que voc usa) e crie dois arquivos - um arquivo HTML e um arquivo CSS - com os seguintes contedos:
default.htm <html> <head> <title>Meu primeiro css</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body>
<h1> Minha primeira folha de estilos </h1> </body> </html>

style.css
body { background-color: #FF0000; }

Agora coloque os dois arquivos na mesma pasta. Lembre-se de salvar os arquivos com as extenses de direito (respectivamente ". Htm" e ". Css") Abra default.htm no seu navegador e veja a pgina tem um fundo vermelho. Parabns! Voc fez a sua primeira folha de estilo! Vamos para a prxima lio onde vamos dar uma olhada em algumas das propriedades em CSS.
Lio 3: Cores e fundos

Nesta lio voc aprender como aplicar cores e cores de fundo para seus sites. Vamos olhar tambm para mtodos avanados para a posio e controlar imagens de fundo. As seguintes propriedades CSS ser explicado: cor background-color background-image background-repeat background-attachmentfundo posio-fundo Cor de primeiro plano: a propriedade 'color' A propriedade color define a cor do primeiro plano de um elemento. Por exemplo, imagine que queremos todos os ttulos em um documento sejam na cor vermelha. As manchetes so todas marcadas com o <h1> elemento HTML. O cdigo abaixo define a cor dos elementos <h1> para vermelho.
h1 { color: #ff0000; }
P g i n a | 62
As cores podem ser inseridas como valores hexadecimais como no exemplo acima (# ff0000), ou voc pode usar os nomes das cores ("vermelho") ou RGBvalores (RGB (255,0,0)). A propriedade 'background-color'
A propriedade background-color define a cor de fundo de elementos. O elemento <body> contm todo o contedo de um documento HTML. Assim, para mudar a cor de fundo de uma pgina inteira, a propriedade de cor de fundo deve ser aplicada ao elemento <body>. Voc tambm pode aplicar cores de fundo para outros elementos, inclusive os ttulos e texto. No exemplo abaixo, diferentes cores de fundo so aplicados elementos <body> e <h1>.
body { background-color: #FFCC66; } h1 { color: #990000; background-color: #FC9804; }

Observe que foram aplicadas duas propriedades para ponto e vrgula. As imagens de fundo [background-image] A propriedade CSS background-image usado para inserir uma imagem de fundo. Como um exemplo de uma imagem de fundo, usamos o android abaixo. Voc pode baixar a imagem para que voc possa us-lo em seu prprio computador (boto direito na imagem e escolha "salvar imagem como"), ou voc pode usar outra imagem, como voc v o ajuste.
<h1>, dividindo-os por
P g i n a | 63
Para inserir a imagem do android como uma imagem de fundo para uma pgina web, basta aplicar a propriedade background-image para <body> e especificar a localizao da imagem.
body { background-color: #FFCC66; background-image: url("android.gif"); } h1 { color: #990000; background-color: #FC9804; }

Browser:
NB: Observe como especificado o local da imagem como url ("android.gif"). Isto significa que a imagem est localizado na mesma pasta como a folha de estilo. Voc tambm pode se referir a imagens em outras pastas usando url ("/
P g i n a | 64
images / android.gif."). Ou at mesmo na Internet, indicando o endereo completo do arquivo: url ("http://www.seusite.com.br/android . gif "). Repita a imagem de fundo [background-repeat] No exemplo acima, voc notou que a imagem da borboleta repetiu tanto horizontalmente e verticalmente para cobrir toda a tela? A propriedade background-repeat controla esse comportamento. A tabela abaixo mostra os quatro diferentes valores para background-repeat.
Value
Descrio
background-repeat: repeat-x background-repeat: repeat-y background-repeat: repeat background-repeat: no-repeat
A imagem se repete na horizontal A imagem se repete na vertical A imagem repetida vertical e horizontalmente A imagem no se repete
Exemplos:
background-repeat: repeat-x
P g i n a | 65
background-repeat: repeat-y
background-repeat: repeat
P g i n a | 66
background-repeat: no-repeat
Por exemplo, para evitar a repetio de uma imagem de fundo o cdigo deve ficar assim: Bloqueio de imagem de fundo [background-attachment] A propriedade background-attachment especifica se uma imagem de fundo fixa ou rola junto com o elemento que contm. Uma imagem de fundo fixa no se mover com o texto quando um leitor se move para a pgina, enquanto uma imagem de fundo desbloqueado vai rolar junto com o texto da pgina web. A tabela abaixo mostra os quatro diferentes valores para backgroundattachment. Clique nos exemplos para ver a diferena entre deslocamento e fixo. Background-attachment: scroll Background-attachment: fixed A imagem rola com a pgina - desbloqueado A imagem bloqueado
Por exemplo, o cdigo abaixo ir corrigir a imagem de fundo.
P g i n a | 67
body { background-color: #FFCC66; background-image: url("Android.gif"); background-repeat: no-repeat; background-attachment: fixed; } h1 { color: #990000; background-color: #FC9804; }
Coloque imagem de fundo [background-position] Por padro, uma imagem de fundo posicionada no canto superior esquerdo da tela. A propriedade background-position permite alterar este posicionamento padro e colocar a imagem de fundo onde quiser na tela. Existem inmeras maneiras de definir os valores de background-position. No entanto, todos eles so formatados como um conjunto de coordenadas. Por exemplo, as posies do valor '100px 200px 'a 100px imagem de fundo a partir do lado esquerdo e 200px a partir do topo da janela do navegador. As coordenadas podem ser expressas em percentagem da janela do navegador, unidades fixas (pixels, centmetros, etc) ou voc pode usar o top palavras, baixo, esquerda, centro e direita. O modelo abaixo ilustra o sistema:
P g i n a | 68
A tabela abaixo d alguns exemplos.

background-position: 2cm 2cm background-position: 50% 25% background-position: top right
A imagem posicionada a 2 cm da esquerda e 2 cm para baixo na pgina A imagem centrada na horizontal ea um quarto para baixo na pgina A imagem posicionada no canto superior direito da pgina
O exemplo de cdigo abaixo a imagem posicionada no canto inferior direito:
body { background-color: #FFCC66; background-image: url("Android.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; } h1 { color: #990000; background-color: #FC9804; }
Compilando [fundo] A propriedade background uma abreviao para todas as propriedades do fundo listados nesta lio. Com fundo voc pode comprimir vrias propriedades e, assim, escrever sua folha de estilo em um caminho mais curto o que torna mais fcil de ler. Por exemplo, olhar para esses cinco linhas: background-color: #FFCC66; background-image: url("Android.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom;
P g i n a | 69
Usando fundo o mesmo resultado pode ser alcanado em apenas uma linha de cdigo: background: #FFCC66 url("Android.gif") no-repeat fixed right bottom; A lista de ordem como se segue: [background-color] | [background-image] | [background-repeat] | [backgroundattachment] | [background-position] Se uma propriedade deixada de fora, ele ser automaticamente ajustado para o valor padro. Por exemplo, se o fundo de fixao e de fundo posioso levadas para fora do exemplo:
background: #FFCC66 url("Android.gif") no-repeat;

Essas duas propriedades que no esto especificados seria meramente definidas para seus valores padro que, como voc sabe que so de rolagem e canto superior esquerdo.
Resumo
Nesta lio, voc j aprendeu novas tcnicas que no seriam possveis utilizando HTML. A diverso continua na prxima lio que examina a ampla gama de possibilidades ao usar CSS para descrever as fontes.
P g i n a | 70
Lio 4: Fontes
Nesta lio voc aprender sobre as fontes e como aplic-las usando CSS. Tambm vamos ver como contornar o problema que as fontes especficas escolhidas para um site s pode ser visto se a fonte est instalado no PC usado para acessar o site. As seguintes propriedades CSS ser descrito: font-family font-style font-variant font-weight font-size fonte
Famlia da fonte [font-family]

A propriedade font-family usada para definir uma lista priorizada de fontes para ser usado para exibir um determinado elemento ou pgina web. Se a fonte primeira da lista no estiver instalada no computador usado para acessar o site, a fonte prxima da lista ser julgado at uma fonte adequada seja encontrada. Existem dois tipos de nomes para definir fontes: famlia e nomes para famlias genricas. Os dois termos so explicados abaixo. Font-Family Exemplos de um nome de famlia (muitas vezes conhecido como "fonte") pode, por exemplo, ser "Arial", "Times New Roman" ou "Tahoma". Generic Family Famlias genricos pode ser melhor descrito como grupos de familiares de nomes com aparncia uniforme. Um exemplo sans-serif, que uma coleo de fontes sem "ps". A diferena tambm pode ser ilustrada da seguinte forma:
P g i n a | 71
Quando voc listar fontes para seu Web site, comece com aquela preferida, seguindo de algumas alternativas. Recomenda-se a completar a lista com uma fonte genrica. Dessa forma, pelo menos, a pgina ser mostrado usando uma fonte da mesma famlia, se nenhuma das fontes especificadas esto disponveis. Um exemplo de uma lista de prioridades das fontes poderia ser assim:
h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif;}

No h notcias marcados com <h1> ser exibido usando a fonte "Arial". Se essa fonte no est instalado no computador do usurio, "Verdana" ser usado. Se ambas estiverem indisponveis, uma fonte da famlia sans-serif ser usado para mostrar as manchetes. Observe como o nome da fonte "Times New Roman" contm espaos e, portanto, est listado o uso de aspas.
P g i n a | 72
Estilo da fonte [font-style]

A propriedade font-style define a escolha da fonte em normal, italic ou oblique. No exemplo abaixo, todos os cabealhos <h2> ser mostrado em itlico.
h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif; font-style: italic;}
Variante da fonte [font-variant]
A propriedade font-variant usada para escolher entre o normal ou small-caps variantes de uma fonte. Uma fonte small-caps uma fonte que utiliza menor tamanho letras maisculas (caixa alta) em vez de letras minsculas. Confuso? D uma olhada nestes exemplos:
Se font-variant for definida para small-caps e nenhuma fonte small-caps est disponvel o navegador mais provvel mostrar o texto em maiscula.
h1 {font-variant: small-caps;} h2 {font-variant: normal;}

[font-weight]
A propriedade font-weight define qual negrito ou "pesada" a fonte deve ser apresentado. Uma fonte pode ser normal ou bold. Alguns navegadores suportam o uso de nmeros entre 100-900 (em centenas) para descrever o peso de uma fonte.
p {font-family: arial, verdana, sans-serif;} td {font-family: arial, verdana, sans-serif; font-weight: bold;}
P g i n a | 73
Font size [font-size] O tamanho de uma fonte definido pela propriedade font-size.
Existem muitas unidades diferentes (por exemplo, pixels e porcentagens) para escolher para descrever tamanhos de fonte. Neste manual vamos nos concentrar nas unidades mais comuns e apropriadas. Os exemplos incluem:
h1 {font-size: 30px;} h2 {font-size: 12pt;} h3 {font-size: 120%;} p {font-size: 1em;}

H uma diferena fundamental entre as quatro unidades acima. unidades e 'pt' fazer o tamanho da fonte absoluta, enquanto permitem ao usurio ajustar o tamanho da fonte como ele / ela v o ajuste.
'Px' As '%' e 'em'
Muitos usurios esto desabilitados, idosos ou simplesmente sofrem de baixa viso ou um monitor de m qualidade. Para tornar seu site acessvel a todos, voc dever usar unidades como '%' ou 'em'. Abaixo voc pode ver uma ilustrao de como ajustar o tamanho do texto no Mozilla Firefox e Internet Explorer. Tente voc mesmo - caracterstica pura, voc no acha? Internet Explorer
Mozilla Firefox
P g i n a | 74
Compiling [font]
Usando a propriedade font mo suma, possvel cobrir todas as propriedades de fonte diferentes em uma nica propriedade. Por exemplo, imagine estas quatro linhas de cdigo usadas para definir propriedades de fonte para <p>:
p{ font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif; }

Usando a propriedade mo curta, o cdigo pode ser simplificada:
p{ font: italic bold 30px arial, sans-serif; }

A ordem de valores para fonte :
font-style | font-variant | font-weight | font-size | font-family

Resumo Voc j aprendeu sobre algumas das possibilidades relativas a fontes. Lembrese que uma das grandes vantagens do uso de CSS para especificar fontes que, em determinado momento, voc pode mudar a fonte em um site inteiro em apenas alguns minutos. CSS economiza tempo e facilita a sua vida. Na prxima lio, vamos olhar para o texto.
P g i n a | 75
Lio 5: Textos
Formatao e adicionando estilo de texto uma questo fundamental para qualquer web designer. Nesta lio voc ser apresentado s oportunidades CSS proporcionam para adicionar layout aos textos. As propriedades a seguir sero descritas:
text-indent text-align text-decoration letter-spacing text-transform

Recuo do texto [text-indent]
A propriedade text-indent permite adicionar um toque elegante para pargrafos de texto, aplicando um recuo primeira linha do pargrafo. No exemplo abaixo de um 30px aplicado a todos os textos marcados com <p>:
p{ text-indent: 30px; }
P g i n a | 76
Alinhamento do texto [text-align]

A propriedade CSS text-align corresponde ao atributo align das antigas verses do HTML. Texto podem ser alinhados para a esquerda, para a direita ou centrado. Em adio a isto, o valor justificar vai esticar cada linha, de modo que ambas as margens esquerda e direita seja alinhadas. Voc sabe que este layout a partir de jornais e revistas. No exemplo abaixo, o texto em cabealhos de tabela
<th>
est alinhado
direita, enquanto a tabela <td> dados so centralizados. Alm disso, os pargrafos de texto normais so justificadas:
th { text-align: right; } td { text-align: center; } p{ text-align: justify; }
P g i n a | 77
Decorao de texto [text-decoration]

A propriedade text-decoration faz com que seja possvel adicionar diferentes "decoraes" ou "efeitos" ao texto. Por exemplo, voc pode sublinhar o texto, tem uma linha atravs ou acima do texto, etc No exemplo a seguir, <h1> so sublinhadas manchetes,
<h2>
so manchetes com uma linha acima do texto
e <h3> so manchetes com uma linha de que o texto.
h1 { text-decoration: underline; } h2 { text-decoration: overline; } h3 { text-decoration: line-through; }
Espao carta [letter-spacing]

O espaamento entre caracteres de texto pode ser especificado usando a propriedade letter-spacing. O valor da propriedade simplesmente a largura desejada.
P g i n a | 78
Por exemplo, se voc quiser um espao de 3px entre as letras em uma pargrafo de texto e 6px entre as letras em manchetes poderia ser utilizado.
<p>
<h1>
o cdigo abaixo
h1 { letter-spacing: 6px; } p{ letter-spacing: 3px; }
Transformao de texto [text-transform]

A propriedade text-transform controla a capitalizao de um texto. Voc pode escolher capitalize, uppercase ou lowercase independentemente de como o texto foi escrito no cdigo HTML. Um exemplo poderia ser a palavra "ttulo" que pode ser apresentado ao usurio como "CABEALHO" ou "Manchete". H quatro valores possveis para transformar texto:
capitalizar capitalize
Capitaliza a primeira letra de cada palavra. Por exemplo: "escola profissional" ser " Escola Profissional ".
P g i n a | 79
maisculas uppercase
Converte todas as letras em maisculas. Por exemplo: " escola profissional " ser " ESCOLA PROFISSIONAL ".
minsculas lowercase
Converte todas as letras para minsculas. Por exemplo: " ESCOLA PROFISSIONAL " ser " Escola Profissional ".
nenhum none
No transformaes - o texto apresentado como ele aparece no cdigo HTML. Como exemplo, vamos usar uma lista de nomes. Os nomes esto marcados com <li> (lista de itens). Vamos dizer que queremos nomes a serem capitalizados e os cabealhos ser apresentados em letras maisculas. Tente dar uma olhada no cdigo HTML para este exemplo e voc ver que o texto realmente em letra minscula.
h1 { text-transform: uppercase; } li { text-transform: capitalize; }
Resumo Nos ltimos trs lies que voc j aprendeu vrias propriedades CSS, mas h muito mais a CSS. Na prxima lio vamos dar uma olhada em links.
P g i n a | 80
Lio 6: Links
Voc pode aplicar tudo que aprendeu nas aulas anteriores para links (mudar cores, fontes, sublinhados, etc.) A novidade que o CSS permite que voc defina essas propriedades de forma diferente, dependendo se o link visitado, no visitado, ativo ou se o cursor sobre o link. Isso torna possvel adicionar efeitos de fantasia e til para seu site. Para controlar esses efeitos que voc usa a chamada pseudo-classes. O que um pseudo-classe? A pseudo-classe permite ter em conta condies diferentes ou eventos ao definir uma propriedade para uma tag HTML. Vejamos um exemplo. Como voc sabe, links so marcados no HTML com tags <a>. Podemos, portanto, usar um como um seletor CSS:
a{ color: blue; }
Um link pode ter diferentes estados. Por exemplo, ele pode ser visitado ou no visitado. Voc pode usar pseudo-classes para atribuir estilos diferentes para links visitados e no visitados.
P g i n a | 81
a:link { color: blue; } a:visited { color: red; }
Use a: link e a: visited para no visitado e links visitados respectivamente. Links que esto ativos tm a pseudo-classe a: active e a: hover quando o cursor est no link. Vamos agora passar por cada uma das quatro pseudo-classes com exemplos e explicaes. Pseudo-classe: link A pseudo-classe: link usada para links que levam a pginas que o usurio no tenha visitado. No exemplo de cdigo a seguir links no vistados sero na cor verde.
P g i n a | 82
a:link { color: #6699CC; }
Pseudo-classe: visited
A pseudo-classe: visited usada para links que levam a pginas que o usurio tenha visitado. Por exemplo, o cdigo a seguir links visitados na cor amarela:
a:visited { color: #660099; }

Pseudo-classe: active
A pseudo-classe: active usada para links ativos. Este exemplo a seguir links ativos tero seu fundo na cor vermelha:
a:active { background-color: #FFFF00; }
P g i n a | 83
Pseudo-classe: hover
A pseudo-classe: hover usado quando o ponteiro do mouse paira sobre um link. Isto pode ser usado para criar efeitos interessantes. Por exemplo, se queremos que os nossos links para ser laranja eo texto para itlico quando o cursor est apontado para eles, o nosso CSS deve ser semelhante a este:
a:hover { color: orange; font-style: italic; }
Exemplo 1: Efeito quando o cursor est sobre o link comum a criao de efeitos diferentes quando o cursor est sobre um link. Por isso vamos olhar para alguns exemplos extras relacionados com a pseudoclasse: hover. Exemplo 2: Espaamento entre letras Como voc vai se lembrar da lio 5, o espaamento entre as letras pode ser ajustado usando a propriedade letter-spacing. Isto pode ser aplicado a liga para um efeito especial:
a:hover { letter-spacing: 10px;

font-weight:bold; color:red; }
Exemplo 3: MAISCULAS e minsculas Na lio 5 vimos a propriedade text-transform, que pode alternar entre letras maisculas e minsculas. Isto tambm pode ser usado para criar um efeito de ligaes:
a:hover { text-transform: uppercase; font-weight:bold; color:blue; background-color:yellow; }
P g i n a | 85
Os dois exemplos do uma idia sobre as possibilidades quase infinitas de combinao de diferentes propriedades. Voc pode criar seus prprios efeitos faa uma tentativa! Exemplo 4: Removendo sublinhado dos links Uma pergunta freqente como retirar o sublinhado dos links? Voc deve considerar cuidadosamente se necessrio remover o sublinhado como poderia diminuir a usabilidade do seu site de forma significativa. As pessoas esto acostumadas a azul sublinhado links em pginas da web e saber que eles podem clicar sobre eles. At minha me sabe disso! Se voc alterar o sublinhado e cor dos links, h uma boa chance de que os usurios se confundem e, portanto, no recebe o benefcio integral do contedo do seu site. Dito isto, muito simples de remover o sublinhado dos links. Como voc vai se lembrar da lio 5, a propriedade text-decoration pode ser usado para determinar se o texto est sublinhado ou no. Para remover o sublinhado, basta definir o valor do text-decoration como none.
a{ text-decoration:none; }
Alternativamente, voc pode definir text-decoration juntamente com outras propriedades para todos os quatro pseudo-classes.
P g i n a | 86
a:link { color: blue; text-decoration:none; } a:visited { color: purple; text-decoration:none; } a:active { background-color: yellow; text-decoration:none; } a:hover { color:red; text-decoration:none; }
Resumo Nesta lio voc aprendeu pseudo-classes, usando algumas das propriedades das lies anteriores. Isso deve lhe dar uma ideia de algumas possibilidades das CSS. Na prxima lio ensinaremos como definir propriedades para elementos especficos e grupos de elementos.
P g i n a | 87
Lio 7: Identificando e agrupando elementos (class e id)

s vezes voc deseja aplicar um estilo especial a um determinado elemento ou um determinado grupo de elementos. Nesta lio, vamos dar uma olhada em como voc pode usar class e id para especificar as propriedades dos elementos selecionados. Como voc pode colorir um determinado cabealho, diferente dos outros ttulos do seu site? Como voc pode agrupar links em diferentes categorias e dar a cada categoria um estilo especial? Estes so apenas exemplos de questes que iremos responder nesta lio. Agrupando elementos com classe Vamos dizer que temos duas listas de links de Apostilas diferentes usadas para Informtica e Enfermagem. O cdigo HTML pode parecer com isto:
<p>Informtica:</p> <ul> <li><a href="ri.htm">HTML/CSS</a></li> <li><a href="ch.htm">P.O.O/JAVA</a></li> <li><a href="pb.htm">Arquitetura e Manuteno</a></li> </ul> <p>Enfermagem:</p> <ul> <li><a href="cs.htm">Sade I</a></li> <li><a href="me.htm">Sade II</a></li> <li><a href="pn.htm">Sade Mental</a></li> </ul>
Ento queremos que as ligaes de Informtica para amarelo, os links de Enfermagem a ser vermelho e o resto dos links existentes no site para ficar azul. Para isso, dividimos os links em duas categorias. Isto feito atravs da atribuio de uma classe para cada link, usando o atributo class. Vamos tentar definir algumas classes no exemplo acima:
P g i n a | 88
<p>Informtica:</p> <ul> <li><a href="ri.htm" class="whitewine"> HTML/CSS </a></li> <li><a href="ch.htm" class="whitewine"> P.O.O/JAVA </a></li> <li><a href="pb.htm" class="whitewine">Arquitetura e Manuteno</a></li> </ul> <p>Enfermagem:</p> <ul> <li><a href="cs.htm" class="redwine">Sade I</a></li> <li><a href="me.htm" class="redwine">Sade II</a></li> <li><a href="pn.htm" class="redwine">Sade Mental</a></li> </ul>
Como mostrado no exemplo voc pode definir as propriedades de elementos que pertencem a uma determinada classe usando. Classname na folha de estilo do documento.
P g i n a | 89
Identificao de elemento usando ID Alm de elementos do agrupamento, pode ser necessrio para identificar um nico elemento. Isto feito usando o ID de atributo. O que especial sobre o atributo id que no pode haver dois elementos no mesmo documento com o mesmo id. Cada ID tem de ser nico. Em outros casos, voc deve usar o atributo de classe em vez. Agora, vamos dar uma olhada em um exemplo de um possvel uso da id:
<h1>Capitulo 1</h1> ... <h2> Capitulo 1.1</h2> ... <h2> Capitulo 1.2</h2> ... <h1> Capitulo 2</h1> ... <h2> Capitulo 2.1</h2> ... <h3> Capitulo 2.1.2</h3> ...
A descrio acima poderia ser cabealhos de um documento dividido em captulos e pargrafos. Seria natural para atribuir uma id para cada captulo da seguinte maneira
<h1 id="c1"> Capitulo 1</h1> ... <h2 id="c1-1"> Capitulo 1.1</h2> ... <h2 id="c1-2"> Capitulo 1.2</h2> ... <h1 id="c2"> Capitulo 2</h1> ... <h2 id="c2-1"> Capitulo 2.1</h2> ... <h3 id="c2-1-2"> Capitulo 2.1.2</h3> ...
P g i n a | 90
Digamos que o ttulo do captulo 1.2 deve estar no vermelho. Isto pode ser feito de acordo com CSS:
#c1-2 { color: red; }
Como mostrado no exemplo acima, voc pode definir as propriedades de um elemento especfico usando # id na folha de estilo do documento. Resumo Nesta lio aprendemos que atravs do uso do seletores classe e ID, voc capaz de especificar as propriedades de elementos especficos. Na prxima lio, vamos dar uma olhada em dois elementos de HTML que amplamente utilizado em conexo com CSS: <span> e <div>.
Lio 8: Agrupando elementos (span e div)

Os elementos <span> e <div> so usados para agrupar e estruturar um documento e so freqentemente usados em conjunto com os atributos class e id. Nesta lio, vamos dar uma olhada no uso de <span> e <div> como exatamente estes dois elementos HTML so de importncia central no que diz respeito a CSS.
P g i n a | 91
Agrupando com <span> Agrupando com <div> Agrupando com <span> O <span> elemento o que voc poderia chamar um elemento neutro e que no acrescentam nada ao prprio documento. Mas, com CSS, <span> pode ser usado para adicionar efeitos visuais a partes especficas do texto em seus documentos. Um exemplo disso poderia ser este de Steve Jobs:
<p>"Voc pode encarar um erro como uma besteira a ser esquecida, ou como um resultado que aponta uma nova direo".</p>
Permite-nos dizer que um erro pode trazer beneficios. Para esse efeito, podemos marcar nova direo <span>. Cada perodo ento adicionada uma classe, que podemos definir em nossa folha de estilo:
<p> Voc pode encarar um erro como uma besteira a ser esquecida, ou como um resultado que, <span class="benefit">aponta</span> uma nova <span class="benefit">direo</span>.</p>
P g i n a | 92
A CSS que lhe pertence:
span.benefit { color:red; }
Claro que voc tambm pode usar id para estilizar os elementos de <span>. Contanto que voc se lembra, que voc ter que usar uma nica id para cada um dos trs elementos <span>, como voc aprendeu na aula anterior. Agrupando com <div> Enquanto <span> usado dentro de um elemento nvel de bloco como vimos no exemplo anterior, <div> usado para agrupar um ou mais elementos nvel de bloco. Alm desta diferena, o agrupamento com <div> funciona mais ou menos da mesma maneira. Vamos dar uma olhada em um exemplo com duas listas de presidentes de CREDES divide-se em:
<div id="CREDE2"> <ul> <li>EEEP Rita Aguiar Barbosa</li> <li>EEEP Adriano Nobre</li> <li>EEEP Adelino Cunha</li> </ul> </div> <div id="SEFOR"> <ul> <li>EEEP Joaquim Nogueira</li> <li>EEEP Mrio Alencar</li> <li>EEEP Presidente Roosevelt</li> </ul> </div>
E na folha de estilo, podemos agrupar a estilizao da mesma maneira como acima:
#CREDE2 { background:blue; }
#SEFOR { background:red; }
Nos exemplos acima, usamos somente <div> e <span> em coisas muito simples, tais como texto e cores de fundo. Ambos os elementos tm o potencial para fazer coisas muito mais avanadas. No entanto, este no ser apresentado nesta lio. Vamos olhar para estes, mais adiante neste tutorial. Resumo Na lio de 7 e 8, voc aprendeu sobre o seletores id, class, extenso e elementos div. Agora voc deve ser capaz de agrupar e identificar mais ou menos, todas as partes de um documento, que um grande passo na direo da CSS masterizao. Na lio 9 veremos o modelo de caixa.
P g i n a | 94
Lio 9: O box model

O box model em CSS descreve as casas que esto sendo geradas pelos elementos HTML. O modelo de caixa contm ainda opes detalhadas de ajuste de margens, bordas, padding e contedo para cada elemento. O diagrama abaixo mostra como o modelo de caixa construda: O box model em CSS
A ilustrao acima pode parecer muito terico para olhar, ento vamos tentar usar o modelo em um caso real com um ttulo e um texto. O HTML para o nosso exemplo :
<h1> ESCOLA PROFISSIONAL DE EDUCAO PROFISSIONAL</h1>

O Governo do Estado do Cear est comprometido com a tarefa primordial de elevar os resultados da escola pblica, que atende a quase 90% da matrcula das crianas e jovens do nosso Estado. No mbito do Ensino Mdio, ltima etapa da educao bsica, que ao longo dos ltimos anos vem sofrendo um "arrasto" decrescente nos resultados, os desafios para a melhoria da escola so considerveis. Para comeo de conversa, preciso foco na elevao do nvel de desempenho dos alunos em portugus e matemtica, eixos que do suporte a todo processo de desenvolvimento da autonomia intelectual para as aprendizagens. ... assume tambm o desafio de promover a articulao do currculo do ensino mdio com a formao para o mundo do trabalho. Esta tarefa, ordenada pela nossa legislao educacional, integra a poltica estadual para a juventude e pretende qualificar o projeto pedaggico de escolas de ensino mdio, preparando os jovens, com boas formaes tcnicas, para a insero nos processos produtivos e seguir aprendendo com possibilidade de adaptao s demandas e s transformaes desses processos." (Trechos do artigo da secretria Izolda Cela, publicado no jornal O Povo,24-062008)
<p>
</p>
P g i n a | 95
Ao adicionar um pouco de cor e fonte de informao o exemplo pode ser apresentada como segue:
O exemplo contm dois elementos: <h1> e <p>. <% ' As propriedades que regulam as caixas diferentes so: margem de preenchimento e de fronteira. As prximas duas aulas de lidar com exatamente essas trs propriedades: ' ' Lio 10: O box model - margem e padding ' Lio 11: O box model margem ' ' Quando terminar essas duas lies, voc vai dominar o modelo de caixa e ser capaz de formatar os seus documentos muito mais fino e mais preciso do que na moda antiga usando tabelas em HTML. %> Resumo Nesta lio voc foi apresentado para o modelo de caixa. Em trs lies seguintes, vamos dar uma olhada em como criar e controlar elementos no modelo de caixa.
P g i n a | 96
Lio 10: Margin e padding

Na lio anterior voc foi apresentado o modelo de caixa. Nesta lio, veremos como voc pode mudar a apresentao de elementos, definindo as propriedades margin e padding. Defina a margem em um elemento Definindo padding de um elemento Defina a margem em um elemento Um elemento tem quatro lados: direito, superior esquerdo e inferior. A margem a distncia a partir de cada lado para o elemento vizinho (ou as fronteiras do documento). Veja tambm o esquema da lio 9 para uma ilustrao. Como primeiro exemplo, vamos olhar como voc definir as margens para o documento, ou seja, para o elemento <body>. A ilustrao abaixo mostra como queremos que as margens da pgina para ser.
P g i n a | 97
O cdigo CSS para este ficaria como segue:
body { margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left: 70px; }

Ou voc pode escolher uma sintaxe mais elegante:
body { margin: 100px 40px 10px 70px; }
Voc pode definir as margens da mesma maneira em quase todos os elementos. Por exemplo, podemos optar por definir margens para todos os pargrafos marcados com <p>:
body { margin: 100px 40px 10px 70px; } p{ margin: 5px 50px 5px 50px; }
Definindo padding de um elemento Padding pode tambm ser entendido como "enchimento". Isto faz sentido como enchimento no afecta a distncia do elemento para outros elementos, mas apenas define a distncia entre a borda interior e ao contedo do elemento.
P g i n a | 98
O uso de padding pode ser ilustrado por olhar para um exemplo simples, onde todos os cabealhos tm uma cor de fundo: h1 { background: yellow; } h2 { background: orange; } Definindo padding para os cabealhos, alteramos a quantidade de recheio, haver em torno do texto em cada um deles:
h1 { background: yellow; padding: 20px 20px 20px 80px; } h2 { background: orange; padding-left:120px; }
P g i n a | 99
Resumo
Est agora no seu caminho para dominar o box model em CSS. Na prxima lio, vamos dar uma olhada em como definir fronteiras em diferentes cores e formas aos elementos.
P g i n a | 100
Lio 11: Bordas

As bordas podem ser utilizados para muitas coisas, por exemplo, como um elemento decorativo ou para sublinhar uma separao das duas coisas. CSS proporciona infinitas possibilidades de uso de bordas em suas pginas. border-width border-color border-style fronteira A largura das bordas [border-width] A largura das bordas definida pela propriedade fronteira largura, que pode obter os valores de finos, mdio, e de espessura, ou um valor numrico, indicado em pixels. A figura abaixo ilustra o sistema:
A cor das bordas [border-color]
A propriedade border-color define a cor que a fronteira tem. Os valores so os normais cor-valores, por exemplo "# 123456", "rgb (123123123)" ou "amarelo". Tipos de bordas [border-style] Existem diferentes tipos de bordas disponveis para escolha. A seguir apresentamos 8 tipos diferentes de fronteiras como o Internet Explorer interpreta-los. Todos os exemplos so mostrados com a cor "ouro" ea espessura "thick", mas pode naturalmente ser mostrada em outras cores e espessuras. Os valores none ou hidden podem ser usados se voc no quer qualquer fronteira.
P g i n a | 101
Exemplos de definio de fronteiras As trs propriedades descritas acima podem ser colocados juntos por cada elemento e resultam em diferentes bordas. Para ilustrar isso, vamos dar uma olhada em um documento onde se definir as fronteiras diferentes para <h1>, <h2>, <ul> e <p>. O resultado pode no ser to bonito, mas ilustra algumas das muitas possibilidades:
h1 { border-width: thick; border-style: dotted; border-color: gold; } h2 { border-width: 20px; border-style: outset; border-color: red; } p{
P g i n a | 102
border-width: 1px; border-style: dashed; border-color: blue; } ul { border-width: thin; border-style: solid; border-color: orange; }
Tambm possvel definir propriedades especialmente para o alto, baixo, direita ou esquerda fronteiras. O exemplo a seguir mostra como:
h1 { border-top-width: thick; border-top-style: solid; border-top-color: red; border-bottom-width: thick; border-bottom-style: solid; border-bottom-color: blue;
P g i n a | 103
border-right-width: thick; border-right-style: solid; border-right-color: green; border-left-width: thick; border-left-style: solid; border-left-color: orange; }
Compilao [border] Como tambm o caso de muitas outras propriedades, voc pode compilar muitas propriedades em uma borda usando. Vamos dar uma olhada em um Exemplo: p{ border-width: 1px; border-style: solid; border-color: blue; }
Pode ser compilado em:
P g i n a | 104
p{ border: 1px solid blue; }

Resumo Nesta lio voc aprendeu sobre as infinitas opes de CSS d de bordas em suas pginas. Na prxima lio, veremos como voc definir as dimenses do modelo de caixa - altura e largura.
P g i n a | 105
Lio 12: Altura e largura

At agora, ns no nos preocupamos muito com as dimenses dos elementos com os quais trabalhamos. Nesta aula, vamos dar uma olhada em como voc pode facilmente definir a altura e a largura de um elemento. largura altura
Definir a largura [width] Com a largura de propriedade, voc pode definir a largura de um elemento. O exemplo simples a seguir nos fornece um texto em que caixa pode ser digitado:
div.box { width: 200px; border: 1px solid black; background: orange; }

Definir a altura [height] No exemplo acima a altura da caixa definido pelo contedo da caixa. Voc pode afetar a altura de um elemento com a propriedade height. Como exemplo vamos tentar fazer a caixa no exemplo 500px altura:
div.box { height: 500px; width: 200px; border: 1px solid black; background: orange; }
Resumo Aulas 9, 10, 11 e 12 deram-lhe uma introduo ao modelo de caixa em CSS. Como voc provavelmente pode ver, o modelo de caixa lhe d muitas opes novas. Voc pode ter sido o uso de tabelas em HTML para criar seus layouts, at agora, mas com CSS e o box model voc deve agora ser capaz de criar layouts mais elegantes, precisos e de acordo com as recomendaes do W3C.
P g i n a | 106
Lio 13: Flutuando elementos (floats)

Um elemento pode ser lanada para a direita ou para a esquerda, utilizando o flutuador propriedade. Isto quer dizer que a caixa com o seu contedo so deslocados para a direita ou para a esquerda em um documento (ou a caixa contendo) (ver lio 9 para uma descrio do modelo de Caixa). A figura a seguir ilustra o princpio:
Se, por exemplo, gostaria de ter uma quebra automtica de texto em torno de uma imagem, o resultado seria assim:
P g i n a | 107
Como feito? O cdigo HTML para o exemplo acima, a seguinte aparncia:
<div id="Android"> <img src="Android.png" alt="Android"> </div> <p> Android um sistema operacional mvel que roda sobre o ncleo Linux, embora
por enquanto a sua verso do ncleo Linux divirja da verso oficial. Foi inicialmente desenvolvido pelo Google e posteriormente pela Open Handset Alliance, mas a Google a responsvel pela gerncia do produto e engenharia de processos.
</p>
Para obter a imagem flutuando esquerda e o texto a cerc-lo, voc s tem que definir a largura da caixa que rodeia a imagem e, posteriormente, definir a propriedade float para a esquerda: Outro exemplo: colunas Flutuadores tambm pode ser usado para colunas de um documento. Para criar as colunas, voc simplesmente tem que estruturar as colunas desejadas no cdigo HTML com <div> como segue:
<div id="column1"> <p>EEEP Miguel Gurgel</p> </div> <div id="column2"> <p>EEEP Jos de Barcelos</p> </div> <div id="column3"> <p>EEEP Cesr Campelo</p> </div>
Agora, a largura desejada das colunas definido como por exemplo 33%, e ento voc simplesmente flutuar cada coluna para a esquerda, definindo a propriedade float: #column1 { float:left; width: 33%; } #column2 {
P g i n a | 108
float:left; width: 33%; } #column3 { float:left; width: 33%; }
O flutuador pode ser definido como qualquer direito, esquerdo ou nenhum.
A propriedade clear
A propriedade clear usado para controlar como os elementos se seguem aos elementos floats no documento deve se comportar. Por padro, os elementos subsequentes so movidos para preencher o espao disponvel, que ser libertado quando a flutuaram para um lado. Olhe para o exemplo acima que automaticamente movido para cima ao lado da foto de cima para caixa est o texto Bill Gates.
A propriedade clear pode assumir os valores left, right, ambos ou nenhum. O princpio que, se claro, por exemplo, definido como tanto para uma caixa, a margem superior da caixa ser sempre sob a margem inferior dos possveis caixas flutuantes que vm de cima.
id="picture"> <img src="Android.png" alt="Android"> </div>

<h1>Android</h1> <p class="floatstop">Android

um sistema operacional mvel que roda sobre o ncleo Linux, embora por enquanto a sua verso do ncleo Linux divirja da verso oficial. Foi inicialmente desenvolvido pelo Google e posteriormente pela Open Handset Alliance, mas a Google a responsvel pela gerncia do produto e engenharia de processos.</p>
Para evitar que o texto flutue ao lado da imagem, podemos adicionar a seguinte regra CSS:
#picture { float:left; width: 100px; } .floatstop { clear:both; }
P g i n a | 110
Resumo Flutuadores so teis em muitas situaes e, muitas vezes, ser utilizados em conjunto com o posicionamento. Na prxima lio vamos dar uma olhada em como posicionar uma caixa, relativo ou absoluto.
P g i n a | 111
Lio 14: Posicionando elementos
Com posicionamento CSS, voc pode colocar um elemento exatamente onde voc quiser na sua pgina. Combinado com floats (ver Aula 13), o posicionamento abre muitas possibilidades para criar um layout avanado e preciso. A seguir sero discutidos nesta lio: O princpio de posicionamento CSS O posicionamento absoluto O posicionamento relativo O princpio de posicionamento CSS Imagine uma janela do navegador como um sistema de coordenadas:
O princpio de posicionamento CSS que voc pode posicionar qualquer caixa de qualquer lugar no sistema de coordenadas.
Vamos dizer que queremos posicionar um cabealho. Usando o modelo de caixa (ver aula 9) o ttulo vai aparecer como segue:
P g i n a | 112
Se quisermos o cabealho posicionado a 100px do topo do documento ea 200px esquerda do documento, podemos usar o seguinte CSS
h1 { position:absolute; top: 100px; left: 200px; }

O resultado ser como se segue:
Como voc pode ver, posicionar com CSS uma tcnica muito precisa para colocar elementos. muito mais fcil do que tentar usar tabelas, imagens transparentes e tudo mais.
O posicionamento absoluto
Um elemento que est posicionado absoluto no obtm qualquer espao no documento. Isto significa que no deixa um espao vazio aps ser posicionado. Para posicionar um elemento de forma absoluta a propriedade position definida como absoluta. Voc pode ento usar as propriedades esquerda, direita, superior, inferior e colocar a caixa.
Como exemplo de posicionamento absoluto escolhemos colocar 4 caixas em cada canto do documento:
P g i n a | 113
#box1 { position:absolute; top: 50px; left: 50px; } #box2 { position:absolute; top: 50px; right: 50px; } #box3 { position:absolute; bottom: 50px; right: 50px; } #box4 { position:absolute; bottom: 50px; left: 50px; }
Posicionamento relativo
Para posicionar um elemento relativamente a propriedade position deve ser definida para relative. A diferena entre o posicionamento absoluto e relativo como a posio est sendo calculada. A posio para um elemento que posicionada relativamente calculado a partir da posio original no documento. Isto significa que mover o elemento para a direita, para a esquerda, para cima ou para baixo. Desta forma, o elemento ainda obtm um espao no documento aps ser posicionado. Como um exemplo de posicionamento relativo, podemos tentar posicionar trs imagens relativamente sua posio original na pgina. Observe como as imagens deixam um espao vazio nas suas posies originais no documento:
P g i n a | 114
#dog1 { position:relative; left: 350px; bottom: 150px; } #dog2 { position:relative; left: 150px; bottom: 500px; } #dog3 { position:relative; left: 50px; bottom: 700px; }
Resumo Nas duas aulas anteriores, voc aprendeu como flutuar e posicionar elementos. Estes dois mtodos oferecem muitas oportunidades para construir suas pginas sem ter que usar alguns dos mtodos antiquados com tabelas e imagens transparentes no HTML. Use CSS vez. mais preciso, d-lhe mais vantagens, e tambm muito mais fcil de manter.
Lio 15: camada sobre camada com z-index (Layers)

CSS opera em trs dimenses - altura, largura e profundidade. Vimos as duas primeiras dimenses nas aulas anteriores. Nesta lio, vamos aprender como colocar elementos em camadas. Em resumo, isto significa que o fim do qual os elementos se sobrepem um ao outro. Para esse efeito, voc pode atribuir a cada elemento um nmero (z-index). O sistema que um elemento com um nmero maior sobrepe um elemento com um nmero mais baixo. Vamos dizer que estamos a jogar poker e ter um royal flush. As cartas podem ser apresentados de uma forma onde cada carto tem um z-index:
P g i n a | 115
Neste caso, os nmeros seguir em outro (1-5) mas o mesmo resultado pode ser obtido usando 5 nmeros diferentes. O importante a sequncia cronolgica dos nmeros (a ordem). O cdigo no exemplo a placa poderia ser assim:
#dez_ouro{ position: absolute; left: 100px; top: 100px; z-index: 1; } #valete_ouro{ position: absolute; left: 115px; top: 115px; z-index: 2; } #rainha_ouro { position: absolute; left: 130px; top: 130px; z-index: 3; } #rei_ouro { position: absolute;
P g i n a | 116
left: 145px; top: 145px; z-index: 4; } #az_ouro { position: absolute; left: 160px; top: 160px; z-index: 5; }
O mtodo relativamente simples, mas as possibilidades so vrias. Voc pode colocar imagens no texto, texto sobre texto etc. Resumo As camadas podem ser usadas em muitas situaes. Por exemplo, tente usar z-index para criar efeitos em manchetes em vez de criar estes como elementos grficos. Por um lado, mais rpido para carregar o texto e, por outro, fornece um ranking potencialmente melhor nos motores de busca.
P g i n a | 117
Lio 16: Web standards e validao
W3C a World Wide Web Consortium, que uma organizao independente que administra as normas do cdigo na web (HTML, CSS, XML e outros). Microsoft, Fundao Mozilla e muitos outros fazem parte da W3C e de acordo sobre o futuro desenvolvimento das normas. Se voc estiver trabalhando um pouco com web design, provavelmente sabe que no pode haver uma grande diferena na forma como uma pgina web apresentada em diferentes navegadores. Pode ser muito frustrante e demorado para criar uma pgina web que pode ser visto no Mozilla, Internet Explorer, Opera e todo o resto dos navegadores existentes. A idia de ter padres acordar um denominador comum sobre como utilizar as tecnologias da web. Isto significa que, observando as normas, um desenvolvedor ter a certeza que o que ele ou ela no vai funcionar de uma forma mais apropriada em diferentes plataformas. Por isso, recomendamos que voc faa backup o trabalho realizado pelo W3C e valide sua CSS, a fim de observar o padro. CSS validator Se o validador no encontrar erros; essa imagem ser mostrado, que voc pode colocar no seu site para ilustrar que voc est usando codificao validados:
CSS vlido!
O validador pode tambm ser encontrado neste link: http://jigsaw.w3.org/cssvalidator/
P g i n a | 118
Referncia Bibliogrficas
BIBLIOGRAFIA BSICA: 1) FREEMAN, E. Use a cabea: HTML com CSS e XHTML. Rio de Janeiro: Alta Books, 2008. 2) DEITEL, H. M.; DEITEL, P. J.; NIETO, T. R. Internet and World Wide Web: Como Programar. Bookman, 2003.
BIBLIOGRAFIA COMPLEMENTAR: 1) SILVA, M. S. Construindo Sites com CSS e (X) HTML. Novatec, 2007. 2) MACEDO, M. da S. Construindo Sites Adotando Padres WEB. Cincia Moderna, 2004. 3) CARVALHO, A. HTML 4.1 & CSS 2.1: Manual Completo. 2 ed. Book Express, 2004.
P g i n a | 119
Hino Nacional
Ouviram do Ipiranga as margens plcidas De um povo herico o brado retumbante, E o sol da liberdade, em raios flgidos, Brilhou no cu da ptria nesse instante. Se o penhor dessa igualdade Conseguimos conquistar com brao forte, Em teu seio, liberdade, Desafia o nosso peito a prpria morte! Ptria amada, Idolatrada, Salve! Salve! Brasil, um sonho intenso, um raio vvido De amor e de esperana terra desce, Se em teu formoso cu, risonho e lmpido, A imagem do Cruzeiro resplandece. Gigante pela prpria natureza, s belo, s forte, impvido colosso, E o teu futuro espelha essa grandeza. Terra adorada, Entre outras mil, s tu, Brasil, Ptria amada! Dos filhos deste solo s me gentil, Ptria amada,Brasil! Deitado eternamente em bero esplndido, Ao som do mar e luz do cu profundo, Fulguras, Brasil, floro da Amrica, Iluminado ao sol do Novo Mundo! Do que a terra, mais garrida, Teus risonhos, lindos campos tm mais flores; "Nossos bosques tm mais vida", "Nossa vida" no teu seio "mais amores." Ptria amada, Idolatrada, Salve! Salve! Brasil, de amor eterno seja smbolo O lbaro que ostentas estrelado, E diga o verde-louro dessa flmula - "Paz no futuro e glria no passado." Mas, se ergues da justia a clava forte, Vers que um filho teu no foge luta, Nem teme, quem te adora, a prpria morte. Terra adorada, Entre outras mil, s tu, Brasil, Ptria amada! Dos filhos deste solo s me gentil, Ptria amada, Brasil!
Hino do Estado do Cear

Poesia de Thomaz Lopes Msica de Alberto Nepomuceno Terra do sol, do amor, terra da luz! Soa o clarim que tua glria conta! Terra, o teu nome a fama aos cus remonta Em claro que seduz! Nome que brilha esplndido luzeiro Nos fulvos braos de ouro do cruzeiro! Mudem-se em flor as pedras dos caminhos! Chuvas de prata rolem das estrelas... E despertando, deslumbrada, ao v-las Ressoa a voz dos ninhos... H de florar nas rosas e nos cravos Rubros o sangue ardente dos escravos. Seja teu verbo a voz do corao, Verbo de paz e amor do Sul ao Norte! Ruja teu peito em luta contra a morte, Acordando a amplido. Peito que deu alvio a quem sofria E foi o sol iluminando o dia! Tua jangada afoita enfune o pano! Vento feliz conduza a vela ousada! Que importa que no seu barco seja um nada Na vastido do oceano, Se proa vo heris e marinheiros E vo no peito coraes guerreiros? Se, ns te amamos, em aventuras e mgoas! Porque esse cho que embebe a gua dos rios H de florar em meses, nos estios E bosques, pelas guas! Selvas e rios, serras e florestas Brotem no solo em rumorosas festas! Abra-se ao vento o teu pendo natal Sobre as revoltas guas dos teus mares! E desfraldado diga aos cus e aos mares A vitria imortal! Que foi de sangue, em guerras leais e francas, E foi na paz da cor das hstias brancas!

HTML Css

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Css

Uploaded by

Copyright:

Available Formats

Governador Cid Ferreira Gomes Vice Governador Domingos Gomes de Aguiar Filho Secretria da Educao Maria Izolda Cela

Coordenador Tcnico Pedaggico: Renanh Gonalves de Araujo

Pr-Requisito Informtica Bsica

e orientam as aprendizagens, permitindo a aquisio das competncias de maneira

progressiva e por etapas)

FASE 1 : Introduo a linguagem HTML

FASE 3 : Folhas de estilo CSS (Cascading Style Sheets)

FASE 1 : Introduo a linguagem HTML

Competncias e Elementos da Competncia

Desenvolver pginas com a linguagem de marcao HTML.

3.1. Elaborao correta dos elementos nos formularios.

Desenvolver web sites funcionais utilizando padres de layout.

ELEMENTOS DA COMPETNCIA 1. Desenvolver layout de pginas

2. Explicar upload de pginas.

3. Apresentar normas w3c de acessibilidade web. COMPETNCIA 03

3.1. Escolha adequada de normas de validao de pginas.

Aplicar folhas de estilo para formatao de pginas.

Apresentar conceitos e elementos css.

2. Escolher estilos de formatao a ser usando em uma pgina.

Legendas para o Mapa de Analise de Avaliao

B Bsico MC Muito Critico Campo Vazio

Mapa de Anlise de Avaliao

Escola Estadual de Educao Profissional

Ensino Mdio Integrado a Educao Profissional

INFORMTICA | HTML /CSS

Escola Estadual de Educao Profissional

Ensino Mdio Integrado a Educao Profissional

INFORMTICA | HTML /CSS

Escola Estadual de Educao Profissional

Ensino Mdio Integrado a Educao Profissional

Ok, chega de conversa. Vamos comear!

INFORMTICA | HTML /CSS

Escola Estadual de Educao Profissional

Ensino Mdio Integrado a Educao Profissional

Lio 1: Vamos comear!

INFORMTICA | HTML /CSS

Escola Estadual de Educao Profissional

Ensino Mdio Integrado a Educao Profissional

INFORMTICA | HTML /CSS

Escola Estadual de Educao Profissional

Ensino Mdio Integrado a Educao Profissional

Lio 2: O que HTML?

Escola Estadual de Educao Profissional

Ensino Mdio Integrado a Educao Profissional

INFORMTICA | HTML /CSS

Escola Estadual de Educao Profissional

Ensino Mdio Integrado a Educao Profissional

INFORMTICA | HTML /CSS

Escola Estadual de Educao Profissional

Ensino Mdio Integrado a Educao Profissional

Lio 3: Elementos e tags

"<" e terminam com um sinal de maior que ">".

INFORMTICA | HTML /CSS

Escola Estadual de Educao Profissional

Ensino Mdio Integrado a Educao Profissional

Ser parecido com este no navegador:

<h1>Este e um titulo</h1> <h2>Este e um subtitulo</h2>

INFORMTICA | HTML /CSS

Escola Estadual de Educao Profissional

Ensino Mdio Integrado a Educao Profissional

seu primeiro website

INFORMTICA | HTML /CSS

Escola Estadual de Educao Profissional

Ensino Mdio Integrado a Educao Profissional