3354 HTML XHTML Css

Tcnico em Informtica
Introduo Multimdia
Instituto Federal de Educao, Cincia e Tecnologia de So Paulo - IFSP
Andreza Silva Areo
2009
So Joo da Boa Vista - SP
Presidncia da Repblica Federativa do Brasil
Ministrio da Educao
Secretaria de Educao a Distncia
Equipe de Elaborao
IFSP
Coordenao Institucional
Campus So Joo da Boa Vista
Professor-autor
Andreza Areo
Comisso de Acompanhamento e Validao
Gustavo Aurlio Prieto
Yara Maria Guisso de Andrade Facchini
Projeto Grco
Eduardo Meneses e Fbio Brumana
Diagramao
Matheus Flix de Andrade
Reviso
Elizabeth Gouveia da Silva Vanni
Ficha catalogrca
Este Caderno foi elaborado em parceria entre o Instituto Federal de Educao,
Cincia e Tecnologia de So Paulo - Campus So Joo da Boa Vista e o Sistema
Escola Tcnica Aberta do Brasil e-Tec Brasil.
Verso Preliminar
Amigo(a) estudante!
O Ministrio da Educao vem desenvolvendo Polticas e Programas para
expansoda Educao Bsica e do Ensino Superior no Pas. Um dos caminhos
encontradospara que essa expanso se efetive com maior rapidez e ecin-
cia a modalidade adistncia. No mundo inteiro so milhes os estudantes
que frequentam cursos a distncia. Aqui no Brasil, so mais de 300 mil os
matriculados em cursos regulares de Ensino Mdio e Superior a distncia,
oferecidos por instituies pblicas e privadas de ensino.
Em 2005, o MEC implantou o Sistema Universidade Aberta do Brasil (UAB),
hoje, consolidado como o maior programa nacional de formao de profes-
sores, em nvel superior.
Para expanso e melhoria da educao prossional e fortalecimento do En-
sino Mdio, o MEC est implementando o Programa Escola Tcnica Aberta
do Brasil (e-TecBrasil). Espera, assim, oferecer aos jovens das periferias dos
grandes centros urbanose dos municpios do interior do Pas oportunidades
para maior escolaridade, melhorescondies de insero no mundo do tra-
balho e, dessa forma, com elevado potencialpara o desenvolvimento produ-
tivo regional.
O e-Tec resultado de uma parceria entre a Secretaria de Educao Pro-
ssionale Tecnolgica (SETEC), a Secretaria de Educao a Distncia (SED)
do Ministrio daEducao, as universidades e escolas tcnicas estaduais e
federais.
O Programa apia a oferta de cursos tcnicos de nvel mdio por parte das
escolaspblicas de educao prossional federais, estaduais, municipais e,
por outro lado,a adequao da infra-estrutura de escolas pblicas estaduais
e municipais.
Do primeiro Edital do e-Tec Brasil participaram 430 proponentes de ade-
quaode escolas e 74 instituies de ensino tcnico, as quais propuseram
147 cursos tcnicosde nvel mdio, abrangendo 14 reas prossionais.
Apresentao e-Tec Brasil
O resultado desse Edital contemplou193 escolas em 20 unidades federa-
tivas. A perspectiva do Programa que sejam ofertadas10.000 vagas, em
250 polos, at 2010.
Assim, a modalidade de Educao a Distncia oferece nova interface para
amais expressiva expanso da rede federal de educao tecnolgica dos l-
timos anos: aconstruo dos novos centros federais (CEFETs), a organizao
dos Institutos Federaisde Educao Tecnolgica (IFETs) e de seus campi.
O Programa e-Tec Brasil vai sendo desenhado na construo coletiva e par-
ticipaoativa nas aes de democratizao e expanso da educao pros-
sional no Pas,valendo-se dos pilares da educao a distncia, sustentados
pela formao continuadade professores e pela utilizao dos recursos tec-
nolgicos disponveis.
A equipe que coordena o Programa e-Tec Brasil lhe deseja sucesso na sua
formaoprossional e na sua caminhada no curso a distncia em que est
matriculado(a).
Braslia, Ministrio da Educao setembro de 2008.
Sumrio
Apresentao e-Tec Brasil 3
Sumrio 5
Palavras do professor-autor 8
Outros - instituio validadora 10
Unidade 1 - Ponto de Partida 13
1.1 Internet 13
1.1.1 Alguns servios disponveis na Internet 14
1.1.2 Formato de um domnio 15
1.1.3 A WEB 15
1.1.4 A informao 16
1.1.5 HTML e XHTML 16
1.1.6 Acessando uma pgina da Web 16
1.1.7 Pesquisando o endereo de uma pgina na WEB 17
1.1.8 Etapas para pesquisar uma pgina na WEB 17
1.1.9 Desenvolvedor WEB 18
Unidade 2 - Planejando um site 20
2.1 Recursos necessrios para o desenvolvimento do site 21

Unidade 3 - Entendendo HTML e XHTML 23
3.1 Hipertexto e Hiperlink 23
3.2 HTML (HyperText Markup Language) 24
3.3 XHTML (eXtensible HyperText Markup Language) 24
3.4 Diferenas entre XHTML e HTML 26
Unidade 4 - Estrutura de uma pgina XHTML 27
4.1 Estrutura obrigatria de um documento XHTML 27
4.2 O que um tag 27
4.3 Para que serve o DOCTYPE 28
4.3.1 Os tipos de DOCTYPE 28
4.4 A declarao namespace 29
4.5 Codicao dos Caracteres 30
Unidade 5 - Primeira Pgina 31
5.1 Exemplo de um arquivo XHTML 31
5.1.1 Internet Explorer 33
5.1.2 Firefox 33
5.2 Validando um documento 34
5.2.1 Testando pginas com erro 34
Unidade 6 - Trabalho com Textos 38
6.1 Ttulos 38
6.1.1 Treinando 39
6.2 Pargrafo 40
6.3 Lista Ordenadas e No Ordenadas 40
6.4 Lista de Denio 42
6.5 Endereos 43
6.6 Citaes 44
6.7 Cdigos 45
6.8 Resultados de Programas 45
6.9 nfase e nfase forte 45
6.10 Sobrescrito e Subscrito 46
6.11 Mais Recusos para pgina 46
6.12 Links e ncoras 47
6.13 ncoras 48
6.14 Tabelas 49
6.15 Imagens 54
Unidade 7 - Introduo ao CSS 56
7.1 O efeito Cascata 56
7.2 CSS - Como usar? 58
7.3 Criando Estilos 60
7.4 Tags Personalizadas 62
7.4.1 Seletores 62
7.4.2 Utilizando a tag <div> 63
7.4.3 Utilizando a tag <span> 64
7.5 Estilizando 65
7.5.1 Formatando textos e fontes com CSS 65
7.5.1.1 Parmetros Text 65
7.5.1.2 Parmetros Font 66
7.5.2 Dividindo o documento XHTML e Formatando 68
7.5.3 Margens, Espaamento, Larguras e Bordas 68
7.5.4 Plano de Fundo 72
7.5.5 Utilizando guras como fundo 73
7.5.6 Parmetro Float 75
Unidade 8 - Diagramao com CSS 77
Unidade 9 - Atributos 81
9.1 Tabelas de Atributos CSS 82
Referncias 85
Anexos 86
Glossrio de Termos na Internet 108

Ol!
Quem sou?
Sou professora da rea de informtica do IFSP campus So Joo da
Boa Vista-SP. Trabalho com consultoria e aulas de informtica desde 1994.
Formada em Sistemas de Informao pela UNIFEOB (2007) e tcni-
co em Informtica Industrial pela ETE Joo Baptista de Lima Figueiredo
(1993).
Andreza Areo
Palavra do professor-autor
Tcnico em Informtica 8
e-Tec Brasil Introduo Multimdia 9
O Decreto presidencial n 7.566, de 23 de setembro de 1909, instituciona-
lizou o ensino prossional no Brasil. Em 1910 surgiu a Escola de Aprendizes
e Artces de So Paulo, assemelhando-se a das criadas em outras capitais
de Estado. Ela se destinava inicialmente as camadas mais desfavorecidas, aos
deserdados da fortuna e menores marginalizados, ministrando o ensino
elementar. Em 1937 passou a denominar-se Liceu Industrial de So Paulo,
oferecendo ensino equivalente ao de primeiro ciclo.
Em 1942 foi promulgada a Lei orgnica do ensino industrial. A nova orien-
tao visava preparao prossional dos trabalhadores da indstria, dos
transportes, das comunicaes e da pesca.
Em 1976, procedeu-se mudana para a nova sede e, em 1978, criaram-se
os cursos de eletrnica, telecomunicaes e processamento de dados. Em
1981, instalam-se os cursos complementares de mecnica, eletrotcnica e
edicaes, destinados clientela, em grande parte integrada ao mercado
de trabalho, mais que necessitava de uma formalizao prossional por meio
de disciplinas de nvel tcnico de 2 grau. Estes cursos tcnicos tinham a du-
rao de dois anos, prevendo um estgio obrigatrio.
No ano de 1987 foi implantada a primeira Unidade de Ensino Descentra-
lizada (UNED) no Municpio de Cubato e, em 1996, ocorreu o incio do
funcionamento da UNED Sertozinho. Em 1999, a Escola Tcnica Federal de
So Paulo, foi transformada em Centro Federal de Educao Tecnolgica de
So Paulo CEFET, conforme Decreto de 18 de janeiro de 1999. No ano de
2005, foi autorizado o funcionamento da UNED Guarulhos. As UNED de So
Joo da Boa Vista e Caraguatatuba foram autorizadas a funcionar a partir
do 1 semestre do ano de 2007, enquanto que as UNED de Bragana e Salto
passaram a funcionar no 2 semestre do ano de 2007.
Em 2008 foram criadas as unidades de So Carlos, So Roque e Campos do
Jordo. No mesmo ano o CEFET-SP se transformou no Instituto Federal de
Educao Cincia e Tecnologia pela Lei 11.892 de 29 de Dezembro de 2008,
que instituiu a rede federal de educao prossional, cientca e tecnolgica.
De acordo com esta lei os institutos federais (IF) tornaram-se instituies de
Outros - instituio validadora
Tcnico em Informtica 10
educao superior, bsica e prossional, pluricurriculares e multicampi, es-
pecializados na oferta de educao prossional e tecnolgica nas diferentes
modalidades de ensino, com base na conjugao de conhecimentos tcnicos
e tecnolgicos com as suas prticas pedaggicas.
A expanso do CEFET-SP tem ainda previstas os Campus de Araraquara, Ava-
r, Barretos, Birigui, Campinas, Catanduva, Itapetininga, Piracicaba, , Presi-
dente Epitcio, Registro, Suzano e Votuporanga.
A Unidade de Ensino Descentralizada de So Joo da Boa Vista uma unida-
de educacional subordinada ao Centro Federal de Educao Tecnolgica de
So Paulo, autorizada pela Portaria n 1715 do Ministro da Educao, publi-
cada no Dirio Ocial da Unio de 20/10/2006. Tem estrutura administrativa
denida pela resoluo n 136/06 de 16/11/2006 do Conselho Diretor do
CEFET-SP.
A histria do campus se inicia no ano de 1998 quando formulado o projeto
para a criao do CEPRO em So Joo da Boa Vista. No ano seguinte o an-
teprojeto aprovado pelo Programa de Expanso da Educao Prossional
(PROEP). No mesmo ano se d o incio das obras para construo do prdio
em terreno doado por Paulo Roberto Merlin e Flvio Augusto Canto. Em
2004, o prdio entregue com 2529m, sendo constitudo de onze labora-
trios, seis salas de aulas, um auditrio com capacidade para 150 lugares,
sala de multimdia e demais dependncias. As atividades do Centro de Edu-
cao Prossional so iniciadas em 2005. Em 2006 rmado o convnio
entre o CEPRO e CEFET-SP, com apoio da prefeitura municipal para a federa-
lizao da unidade. Em Janeiro de 2007 o CEFET-SP / UNED SBV iniciou suas
atividades no municpio.
O IFSP, no municpio de So Joo da Boa Vista, veio para atender a neces-
sidade de educar os jovens so joanenses e da regio, a m de habilit-los
para o ingresso nos setores de indstria e informtica, os quais demandam
trabalhadores capacitados para o progresso no desenvolvimento econmico
e para o fortalecimento do plo educacional na regio leste do estado.
Atuao do IFSP na Educao a Distncia
No contexto da poltica de expanso da educao superior no pas, imple-
mentada pelo MEC, a EaD coloca-se como uma modalidade impor-
tante no seu desenvolvimento. Nesse sentido, criou-se uma direo para EaD
dentro do IF SP.
No mbito da poltica de expanso da educao prossionalizante, o Mi-
nistrio da Educao, por meio da articulao da Secretaria de Educao a
Distncia e Secretaria de Educao Prossional e Tecnolgica, lana o Edital
01/2007/SEED/SETEC/MEC, dispondo sobre o Programa Escola Tcnica Aber-
ta do Brasil (e-Tec Brasil).
Tal iniciativa constitui-se uma das aes do Plano de Desenvolvimento da
Educao.
Visando oferta de cursos da educao tcnica e prossional o IF SP foi sele-
cionado pelo programa e-Tec Brasil para iniciar suas atividades em 2009.
Tais atividades foram efetivamente implantadas em agosto de 2009 com a
criao de dois cursos tcnicos a saber: tcnico em informtica para inter-
net e tcnico em administrao atingindo 5 municpios do estado de So
Paulo (Araraquara, Barretos, Itapevi, Franca e Jaboticabal) e ampliando em
500 a oferta de vagas do Instituto.
Tcnico em Informtica e-Tec Brasil 12
Sejam bem-vindos!
Estamos aqui para aprender sobre pginas de internet. Este ape-
nas a primeira parte, trataremos de conceitos e estrutura bsica de uma
pgina web.
Para esta disciplina sero necessrios alguns exerccios prticos.
Portanto, precisaremos de um computador com editor de texto simples,
podendo ser o Bloco de Notas do Windows ou qualquer outro do Linux,
e um navegador de internet, tais como: Internet Explorer ou Mozilla Fire-
fox.
Veremos o signicado e para que serve cada um dos termos utiliza-
dos nesta disciplina, sendo que a maioria j ouvimos ou at j utilizamos.
Para aqueles que j tem alguma experincia com HTML, em XHTML,
para uma pgina ser validada no padro Strict, no pode ser utilizados tags
tidas como deprecated. Vocs encontraro uma listagem de tags em
desuso no site http://www.maujor.com/dicas/deprecated.php.
1.1 Internet
Precisamos conhecer e entender o que internet antes de comearmos a
criar as nossas pginas.
A Internet permite trocar informaes sobre os mais variados assuntos:
enviar mensagens, conversar com outras pessoas em qualquer parte do
UNIDADE 1 - PONTO DE
PARTIDA
Objetivos da aula
- Compreender os conceitos bsicos na tecnologia internet
planeta ou apenas ler as notcias do mundo.
Para se conectar a internet, necessrio que seu computador tenha algum
tipo de conexo para ter acesso rede (pode ser acesso discado, banda
larga, via cabo, rdio ou qualquer outro). necessrio que voc seja ca-
dastrado em um provedor de acesso, responsvel por gerenciar o acesso s
informaes da Internet. H a necessidade de um programa para navegar,
tambm conhecido como navegador ou browser.
1.1.1 Alguns servios disponveis na Inter-
net
Os servios mais comuns na internet so: o Correio Eletrnico, Web e men-
sageiros instantneos.
Cada um dos servios se utiliza das conexes da Internet para transmitir
e receber dados entre as vrias mquinas que fazem parte do servio. No
caso dos emails, por exemplo, temos a mquina que envia o email, servi-
dores intermedirios e a mquina de destino da mensagem.
WEB (WWW) Pginas com os mais variados assuntos.
CORREIO ELETRNICO / EMAIL - Comunicao entre pessoas atra-
vs de mensagens escritas (@).
FTP Transferncia de informaes de um computador para ou-
tro.
MENSAGENS INSTANTNEAS - Troca de informaes simultneas
J sabemos o que internet e alguns servios disponveis nela, mas o que
site? Site um conjunto de pginas web, compostas de hipertextos. A web
ou WWW (World Wide Web) o conjunto de todos os sites existentes.
1.1.2 Formato de um domnio
Na Internet, cada pgina tem um endereo prprio, o que chama-
mos de URL (Uniform Resource Locator) Localizador Uniforme de Recur-
sos. Esses endereos so chamados de domnios. Como exemplo, utiliza-
mos o endereo abaixo, descrevendo-o detalhadamente.
http://www.google.com.br
http:// sigla que indica um protocolo de transmisso na WWW.
HTTP (HyperText Transfer Protocol) o protocolo de transferncia de ar-
quivos de hipertexto e o mais comumente usado na internet.
www indica que estamos na Web
google nome do site
com tipo do site (com comercial, org organizao no gover-
namental, adv advogados, gov governamental, etc)
br pas de origem do site (br Brasil)
1.1.3 A WEB
Um dos servios mais utilizado na Internet a Web. H uma con-
fuso entre internet e Web, mas na verdade a internet j existia 15 anos
antes do surgimento da web.
A web consiste em um sistema cliente e um servidor. A maioria das
pessoas est familiarizada com os clientes: navegadores Internet Explorer,
Mozilla Firefox ou qualquer outro. Porm, os servidores tambm so essen-
ciais para o funcionamento da mesma. So chamados servidores de Web.
A comunicao entre os clientes e servidores se d atravs do pro-
tocolo HTTP:
1. Usurio digita um endereo de recurso na caixa de endere-
o ou clica em um link;
2. Navegador envia a requisio at o servidor de web;
3. Servidor de web envia o contedo requisitado para o navega-
dor;
4. O Navegador apresenta a informao para o usurio.
1.1.4 A Informao
A resposta de uma requisio HTTP vem em um formato chamado
HTML. Trata-se de um arquivo em que as informaes de texto so apre-
sentadas a uma srie de marcadores (tags) para indicar a apresentao
daquele texto. Os marcadores indicam o que so: listas, tabelas, ttulos,
formulrios, entre outros.
O navegador utiliza estes marcadores para construir a aparncia da
pgina requisitada.
1.1.5 HTML e XHTML
Para a Web funcionar, preciso que o contedo disponvel esteja
codicado pelo formato HTML. O formato HTML foi reformulado para um
padro mais moderno chamado XHTML, utilizando outra linguagem para
esta reformulao. HTML (HyperText Markup Language) a linguagem
usada na autoria de pginas destinadas a internet.
1.1.6 Acessando uma pgina da Web
Assim como voc usa um aplicativo para fazer textos, outro para
fazer planilha, etc, necessrio usar um programa para acessar as pginas
da Web (navegador ou browser).
No Ambiente Linux: Boto K Internet / Navegador
No Ambiente Windows: Boto Iniciar Programas / Navega-
dor
Navegador ou Browser programa para acessar pginas na Web (Internet
Explorer, Mozilla Firefox, Opera, entre outros).
1.1.7 Pesquisando o endereo de uma p-
gina na Web
Na internet no h uma lista de endereos, como uma lista telef-
nica, por exemplo, mas h alguns sites de busca, que nos ajudam a encon-
trar o que queremos.
Endereos de sites que voc poder usar na pesquisa:
www.google.com.br
www.yahoo.com.br
www.altavista.com
busca.uol.com.br
1.1.8 Etapas para pesquisar uma pgina
na Web:
1. Ative um navegador (Mozilla, Internet Explorer, etc.).
2. Escolha um site de busca
3. Digite o que deseja procurar
4. Aperte o boto Pesquisa ou Busca
Ser aberta uma lista com os sites encontrados sobre o tema pro-
curado.
1.1.9 Desenvolvedor WEB
A disciplina de Introduo a Multimdia, visa dar condies para
que o aluno inicie seus conhecimentos na web, para futuro uso como de-
senvolvedor web ou web designer.
Segundo o Catlogo Nacional de Cursos Tcnicos do MEC, o tc-
nico em informtica para internet desenvolve programas de computador
para internet, seguindo as especicaes e paradigmas da lgica de pro-
gramao e das linguagens de programao. Utiliza ferramentas de desen-
volvimento de sistemas, para construir solues que auxiliam o processo
de criao de interfaces e aplicativos empregados no comrcio e marketing
eletrnicos. Desenvolve e realiza a manuteno de sites e portais na inter-
net e na intranet.
O prossional de Web Design tem sob sua responsabilidade as se-
guintes atividades: construo de sites, sistemas, projetos multimdia, solu-
es para educao distncia e comrcio eletrnico na internet. Ele deve
criar aes que trabalhem os conceitos de usabilidade e planejamento da
interface, facilitando e assegurando a interao aos usurios nais.
Cabe ao web designer saber qual ser o pblico-alvo, os objetivos,
os servios/produtos ofertados, diferenciais e outros fatores importantes
ao projeto. A partir da, deve ser denida a estrutura do site, layout e a
tecnologia a ser adotada.
O web designer precisa adquirir conhecimentos em diversas reas
da informtica e se manter atualizado, alm de:
possuir uma base de design tradicional, como teoria das cores e
tipograa;
aprimorar seus conhecimentos com base na sua rea de interes-
se;
empenhar-se em ter um bom entendimento de CSS, XHTML,
Flash, entre outros. H a necessidade de conhecer um pouco de tudo para
decidir qual tecnologia utilizar;
buscar conhecimento sobre usabilidade;
procurar sempre por novas tecnologias.
UNIDADE 2 - PLANEJANDO
UM SITE
Objetivos da aula
- Reconhecer a problemtica envolvida no desenvolvimento para a
internet.
- Compreender a vitalidade no padro WEB.
Antes de sair fazendo um site, precisamos conhecer o problema
que tentaremos resolver. Detectar o real objetivo do site primordial para
um bom planejamento, de modo que as aes sejam tomadas de forma
correta, minimizando assim futuras correes para atender o cliente.
necessrio denir o pblico alvo do site, o objetivo, os servios
oferecidos, qual ser o diferencial em relao aos outros sites.
Aps o estudo feito, ser denida a estrutura do site, a tecnologia
empregada e o layout.
Quando visitamos um site, o que faz termos vontade de permane-
cer nele a aparncia, a facilidade de achar o que procuramos. Por isso,
devemos denir o design visual do site, que no precisa pular, girar e pis-
car, precisa sim ter um aspecto prossional seguindo os conceitos bsicos
do design, como: aproximao, contraste e alinhamento. O layout do site
deve ser utilizado para transmitir o desejado ao visitante.
At pouco tempo atrs a nica sada para se fazer um site com
bom designer era utilizando tabelas em HTML, mas atualmente h um mo-
vimento chamado tableless, que a criao de sites bem feitos, mas sem o
uso de tabelas.
Devemos sempre focar no visitante do site no momento da criao
do mesmo. Tambm devemos lembrar que h algumas regras a seguir so-
bre acessibilidade, ver W3C. Este assunto tem sido amplamente discutido e
em alguns pases quase que obrigatrio um site ser acessvel (por exem-
plo, Portugal).
Sobre o assunto padres web, recomendamos o acesso aos seguintes sites:
www.maujor.com e www.w3.org.
Aps o site desenvolvido temos que test-lo em mais de um navegador,
pois h diferenas na visualizao entre eles.
2.1 Recursos necessrios para o desenvol-
vimento do site
H vrios softwares que facilitam a criao de pginas web, como
por exemplo: DreamWeaver, FrontPage, Fireworks, entre outros. Porm,
nesta disciplina faremos atravs de comandos, utilizando para isto apenas
um editor de texto e um navegador.
Figura 1: Tela do Editor de Texto do Ubuntu
Estaremos utilizando o padro Web, ou Web Standard. H muitas
vantagens em utilizar o padro em comparao com todos os recursos
despadronizados presentes nos navegadores mais utilizados pelo mercado.
A principal vantagem a facilidade de utilizar o cdigo para outros nave-
gadores mais simples. De acordo com o padro, as regras de utilizao de
XHTML so mais restritas.
Figura 2: Tela do Mozilla Firefox - Navegador Web
Todo contedo da Web necessita seguir um padro. Atualmente a
codicao padro o XHTML.
Algumas razes para aprender e utilizar o XHTML:
XHTML o padro de marcao atual, substituindo a HTML;
utilizao de regras de sintaxe mais precisas e rigorosas;
aumento signifcativo da acessibilidade aos sites criados seguindo
os padres;
facilidade de manuteno e atualizao;
possibilidade de utilizar o mesmo cdigo para diversos clientes
Web alm do navegador: PDAs, celulares e outros dispositivos mveis.
3.1 Hipertexto e Hiperlink
Normalmente, denimos hipertexto relacionando texto em forma-
to digital, podendo ser agregado a ele outros tipos de informaes, como
outros blocos de textos, palavras, imagens ou sons, sendo que o acesso aos
outros elementos d-se atravs de hiperlinks.
UNIDADE 3 - ENTEDENDO
HTML E XHTML
Objetivos da aula
- Apresentar os conceitos bsicos do HTML e XHTML.
- Criticar e comparar as duas linguagens.
Segundo o Glossrio do BROFFICE.ORG, hyperlinks so refern-
cias cruzadas, realados no texto em vrias cores e ativados por meio de
um clique no mouse. Com eles, os leitores podem saltar para uma infor-
mao especca dentro de um documento, bem como para informaes
relacionadas em outros documentos.
3.2 HTML (HyperText Markup Language)
Traduzindo: Linguagem de Marcao de Hipertexto.
A linguagem HTML utilizada para marcar textos atravs de ele-
mentos e atributos. Um texto marcado com esta linguagem chamado de
hipertexto HTML.
Documentos HTML podem ser interpretados por navegadores.
Desde a verso 4.01 do HTML a aparncia no responsabilidade
do HTML.
3.3 XHTML (eXtensible Hypertext Markup
Language)
Segundo Silva (2008), XHTML uma Linguagem Extensvel de Mar-
cao para Hipertexto e que se destina a escrever documentos web com a
funcionalidade adicional de ser compatvel com as aplicaes XML.
Todas as linguagens de marcao da Web so baseadas em SGML
(Standard Generalized Markup Language - Linguagem de Marcao Gene-
ralizada Padro), uma metalinguagem complexa, projetada com a nalida-
de de servir de base para a criao de outras linguagens. SGML foi usada
para criar XML (Extensible Markup Language - Linguagem de Marcao
Extensvel), tambm uma metalinguagem, porm, simplicada.
Com XML, possvel denir novas tags e novos atributos para es-
crever um documento Web, permitindo ao usurio criar sua prpria lingua-
gem de marcao. XHTML foi criada dentro deste conceito e, por isso,
uma aplicao XML. As tags e os atributos de XHTML foram criados a partir
das tags e dos atributos do HTML 4.01, juntamente com suas regras.
Dessa forma, ao usar XHTML, estamos escrevendo um cdigo XML,
onde as tags e os atributos j esto denidos. Este fato proporciona todos
os benefcios de XML sem a complexidade de SGML. Alm disso, XHTML
uma linguagem de marcao bastante familiar para quem conhece HTML,
o que facilita a transformao de um documento HTML em XHTML.
Como o XHTML no responsvel pela aparncia da pgina, o
que faremos indicar o que um bloco de texto de forma semntica. Para
aparncia usaremos CSS.
Um bloco de texto na pgina XHTML pode ser uma poro de coisas:
Um pargrafo
Um ttulo
Uma lista, ou um item de uma lista
Uma citao
Um endereo
Cdigo de programao
Texto predefnido
Texto enfatizado
e outros.
Observe novamente, todos estes indicadores so nomes de coisas
lgicas em uma pgina XHTML/HTML. No indicam nunca a aparncia.
claro que uma lista na sua cabea tem uma determinada aparncia. Mas
em XHTML indicar que um bloco de texto uma lista, tem exatamente este
objetivo: indicar que uma lista. A aparncia consequncia.
3.4 Diferenas entre XHTML e HTML
Em documentos XHTML:
devem ser bem formados.
Todas as tags devem ser escritas com letras minsculas.
Tags devem estar convenientemente aninhadas.
Uso de tags de fechamento obrigatrio.
Elementos vazios devem ser fechados.
Diferenas na sintaxe dos atributos.
4.1 Estrutura obrigatria de um documen-
to XHTML
1
<!DOCTYPE tipo_do_documento>
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
<head>
4
<title>Ttulo do documento</title>
5
</head>
6

7
<body>
8
Contedo do documento
9
</body>
10
11
</html>
A declarao DOCTYPE no uma tag (elemento) da marcao
XHTML. Por isso, no h necessidade da tag de fechamento e deve ser
sempre escrita em letras maisculas.
4.2 O que tag?
Tags so palavras de cdigos contidas entre sinais de maior e me-
nor na linguagem HTML/XHTML de descrio do documento. Muitas tags
contm texto ou referncias a hyperlinks entre os smbolos de abertura e
de fechamento. Por exemplo: os ttulos so identicados pelas tags <h1>
no incio do ttulo e por </h1> no nal do ttulo. Algumas tags aparecem
sozinhas, tais como: <br /> (que indica quebra de linha) ou <img /> (que
UNIDADE 4 - ESTRUTURA DE
UMA PGINA XHTML
Objetivos da aula
- Compreender os elementos bsicos de uma pgina XHTML
indica um vnculo para uma gura).
4.3 Para que serve o DOCTYPE?
Podemos criar vrios tipos de documentos em XHTML, sendo que
cada tipo denido por regras diferentes. Estas regras esto detalhadas
dentro da especicao XHTML denominada DTD (Document Type Deni-
tions) - Denio do Tipo de Documento.
Sua declarao DOCTYPE diz aos navegadores qual DTD foi utili-
zada para elaborar a marcao. A partir da, essa informao explica aos
servios de validao e aos navegadores sobre como tratar a pgina. obri-
gatrio o seu uso se quiser validar a sua pgina. Esta deve ser a primeira
linha do seu documento.
4.3.1 Os tipos de DOCTYPE
H trs tipos de DOCTYPE para XHTML, so eles:
Strict
1
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0
2
Strict//EN"
3
http://www.w3.org/TR/xhtml1/DTD/xhtml1-
4
strict.dtd">
A mais rgida das declaraes, os documentos XHTML escritos no
modo Strict no permitem qualquer item de formatao dentro dos ele-
mentos e nem elementos em desuso, segundo as recomendaes do W3C.
So indicados para uso com folhas de estilo em cascata, com marcao
totalmente independente da apresentao.
Transitional
1
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0
2
Transitional//EN"
3
4
transitional.dtd>
Esta declarao permite uma maior exibilidade e indicada para
documentos que ainda utilizem elementos em desuso, regras de apresen-
tao (formatao) embutidas em tags e tambm para documentos des-
tinados a exibio em navegadores sem suporte para CSS (navegadores
antigos).
Este tipo no admite qualquer tipo de marcao para frames.
Frameset
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
2
Frameset//EN
3
4
frameset.dtd">
Com esta declarao podemos utilizar tudo da declarao transa-
cional e mais os elementos especcos para frames.
4.4 A declarao namespace
Aps a declarao DOCTYPE vem uma declarao de namespace
em XHTML, associada ao elemento raiz html.
1
<html xmlns="http://www.w3.org/1999/xhtml"
2
xml:lang=pt-BR lang=pt-BR>
Um namespace em XML uma coleo de tipos de elementos e
atributos associados a um determinado DTD.
A declarao namespace indica a sua localizao. No exemplo aci-
ma, aparece indicada a localizao do namespace em XHTML (http://www.
w3.org/1999/xhtml). Os dois atributos adicionais especicam que a verso
da XML em uso foi escrita em portugus do Brasil (xml:lang=pt-BR), e
que o documento est escrito em portugus(lang=pt-BR).
4.5 Codicao dos caracteres
Para serem interpretados corretamente por navegadores e apro-
vados nos testes de validao de marcao, todos os documentos XHTML
devem declarar o tipo de codicao de caractere que foi usado em sua
criao (Unicode, ISO-8859-1, etc).
Existem duas formas de fazer isso, sendo a segunda a mais indica-
da:
1
<?xml version=1.0 encoding=iso-8859-1>
1
<meta http-equiv=Content-Type
2
content=text/html; charset=iso-8859-1 />
5.1 Exemplo de um arquivo XHTML
Aqui um simples exemplo de um arquivo codicado em XHTML
1.0:
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang="pt-
br" lang="pt-br">
3
<head>
4
<title>Ttulo da Pgina</title>
5
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
6
</head>
7
<body>
8
<p>Aqui fcaro os pargrafos</p>
9
</body>
10
</html>
Bonito, legal, mas o que signica cada linha? Vamos entender?
1 doctype: indica o padro e qual verso utilizaremos. As possi-
bilidades so: HTML4.1 transactional, strict e frameset, XHTML1.0 transac-
tional, strict e frameset e outros. No nosso caso usaremos o padro XHTML
Strict 1.0. Teremos uma aula s para conhecer os outros padres.
2 e 10 html: marcador (tag) que indica o incio efetivo da pgina
HTML/XHTML. As propriedades xml:lang e lang indicam a lngua em que o
documento est escrito. Use pt-BR para portugus do Brasil. en para
UNIDADE 5 - PRIMEIRA PGINA
Objetivos da aula
- Desenvolvimento de uma pgina simples usando XHTML
ingls.
3 e 6 head: bloco de cabealho. Dentro deste bloco colocaremos
as informaes importantes sobre a pgina para os navegadores. Estes
dados so interpretados pelos navegadores, que montam o contedo da
maneira como foi estipulado pelo desenvolvedor.
4 title: ttulo da pgina. O que estiver digitado entre esta tag ser
exibido na barra de ttulo da janela ou na aba do navegador, tambm uti-
lizada pelos motores de busca para nomear o contedo de sua pgina.
5 meta content-type: indica detalhes de codicao de carac-
tere para o navegador.
7 e 9 body: corpo ou contedo da pgina. dentro desta tag que
sua pgina ser realmente feita, o que o seu usurio ver.
8 p: pargrafos. Aqui podero ser includos outras tags no lugar do
<p>.
Agora colocaremos a mo na massa. Para isto abra o seu editor
de texto, podendo ser o Bloco de Notas do Windows ou gedit, kedit, vi do
Linux.
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang="pt-
Br" lang="pt-BR">
3
<head>
4
<title>Ol</title>
5
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
6
</head>
7
<body>
8
<p>Ol Mundo!</p>
9
<p>Digite aqui o seu nome</p>
10
</body>
11
</html>
Salve o documento com extenso *.html na sua pasta, com o nome
primeira.html. Para ver o resultado siga os passos abaixo, conforme o seu
navegador.
5.1.1 Internet Explorer
Clique no menu Arquivo/Abrir/Procurar Localizar o arquivo cria-
do e clicar Abrir.
5.1.2 Firefox
Clique no menu Arquivo/Abrir Arquivo Localizar o arquivo criado
e clicar Abrir.
Para ambos existe um atalho de teclado: CTRL+O.
Abrir o seu navegador padro que mostrar algo parecido com a
tela abaixo:
Voc dever ver no navegador o texto digitado entre os tags <p> e
</p>. Nossos exerccios em XHTML sero todos testados desta maneira.
Figura 3: Resultado do primeiro arquivo - Mozilla Firefox
5.2 Validando um documento
Para vericar se voc seguiu corretamente o padro, existe uma
ferramenta online que faz o teste de conformidade.
Entre na internet no endereo validator.w3.org clique na aba Vali-
date by File Upload, selecione o seu arquivo e clique em Check. Se tudo
estiver certo ver a mensagem Congratulations. No caso de erro, o sis-
tema apresenta o que voc fez de errado. Corrija o que ele pediu e tente
novamente.
5.2.1 Testando pginas com erro
Geramos um arquivo com erro para aprendermos o que ocorre
quando este validado.
O erro est na linha 8 da gura abaixo, no foi fechado a tag de
pargrafo.
Figura 4: Resultado da Validao bem-sucedida da Primeira Pgina
Resultado da Validao:
Figura 5: Documento escrito com erro
Figura 6: Pgina de validao com erros
Observem que o erro foi encontrado na linha 8 do nosso docu-
mento, mas o validador mostrou o primeiro erro na linha 9. Isto ocorreu
porque ele tentou encontrar a tag </p> que fecha o pargrafo aberto e
no achou.
Corrija a linha 8, salve o arquivo novamente e revalide-o.
Guarde o endereo do Validator no seu favoritos. Devemos utili-
z-lo sempre para vericar se estamos atendendo as normas do W3C.
Importante! Algumas regras para conseguir a validao:
Os caracteres maisculos e minsculos so obrigatoriamente
como apresentados. (HTML diferente de html)
Cuidado ao usar o ctrl+c e ctrl+v do navegador: verifque que
todas as aspas esto trocadas por aspas inglesas. Quando copiar o con-
tedo de um arquivo para o editor de texto apague as aspas que foram
coladas e redigite as aspas dupla, normalmente ca prxima ao nmero 1
do teclado.
Cuidado com o fnal da tag meta: charset=iso-8859-1 /> Ob-
serve que depois das aspas usamos espao, barra e maior. O espao obri-
gatrio. Ocorre a mesma coisa com as tags <br />, <hr /> e <img src=....
alt=... />, estas so tags nicas, no existe tags de abertura para elas,
Figura 7: Erros encontrados
ento deve ser digitado a tag e seus atributos, o espao, a barra e maior.
J conhecemos a estrutura bsica de uma pgina XHTML, vamos
increment-la?
Precisamos aprender: a marcar pargrafos, ttulos, cdigos de pro-
gramao, inserir guras, criar tabelas (s depois format-los), colocar cor.
Tamanho e efeitos na nossa pgina ser o ltimo passo.
Todas as tags deste captulo sero utilizadas dentro do <body> </
body>.
Importante: Todos os cdigos aqui mostrados devem ser digitados
em um arquivo .html para teste.
6.1 Ttulos
Como em todo texto, as pginas Web tambm possuem vrios ttu-
los, em vrios nveis. Repare no ndice desta apostila, perceber isto, sendo
um para cada captulo e vrios subttulos.
H 6 nveis de ttulos: h1, h2, h3, h4, h5 e h6. O nvel 1 para os
ttulos mais importantes da pgina e os outros devem ser usados para ca-
racterizar subttulos.
A hierarquia dos ttulos construda de acordo com a importncia
das informaes e no em relao aparncia. Por enquanto esquea a
aparncia, poderemos alter-la quando estivermos trabalhando com CSS.
UNIDADE 6 - TRABALHANDO COM
TEXTOS
Objetivos da aula
- Aprender a formatar testos em XHTML.
6.1.1 Treinando
Entre no editor de texto e digite o arquivo abaixo, depois salve com
titulos.html.
Figura 8: Exemplo de Ttulos
6.2 Pargrafos
Em XHTML todo o texto simples deve ser delimitado com a tag p.
Desta maneira:
<p>Primeiro pargrafo. Ele pode conter vrias frases. Veja que uma
frase na mesma linha no deve ser delimitada. Um pargrafo diferente de
uma frase, certo?</p>
<p>Por padro, inserido um pequeno espao entre os pargra-
fos. Voc poder alterar o espao via CSS.</p>
<p>No podemos digitar texto solto na nossa pgina, ele deve
sempre estar entre tags, seja elas de pargrafos, listas, ttulos ou qualquer
outra.</p>
6.3 Listas Ordenadas e No Ordenadas
Utilizamos listas para enumerar ou listar itens, um recurso bastan-
te utilizado. Existem dois tipos: numeradas e no-numeradas ou ordenadas
e no ordenadas.
As lista no numeradas (no ordenadas) usam duas tags ul (unor-
Figura 9: Visualizao
dered list) para delimitar a lista, e li (list item) para cada item da lista.
Para cada item da lista ele coloca um marcador, que pode ser uma seta ou
bolinha. Assim:
1
<ul>
2 <li>primeiro item da lista</li>
3 <li>segundo item da lista</li>
4
<li>terceiro item da lista</li>
5
<ul>
Resultado:
primeiro item da lista
segundo item da lista
terceiro item da lista
As listas numeradas (ordenadas) automaticamente incluem nme-
ros antes de cada item da lista. Funciona igual a lista no-numerada. No
exemplo anterior trocando ul por ol (ordered list) obteramos:
1
<ol>
2 <li>primeiro item da lista</li>
3 <li>segundo item da lista</li>
4
<li>terceiro item da lista</li>
5
<ol>
Resultado:
1 primeiro item da lista
2 segundo item da lista
3 terceiro item da lista
No necessrio digitar os nmeros.
6.4 Listas de Denio
Existe ainda a lista de denio, parecida com um dicionrio.
Em uma lista de denies, h os termos a serem denidos e h
uma denio para cada termo. Para construir uma lista de denio te-
mos 3 tags:
dl denition list, delimita o incio e m da lista
dt denition term, delimita cada um dos termos da lista
dd denition description, delimita cada denio da lista
Veja um cdigo de exemplo:
1
<dl>
2
<dt>dl</dt> <dd>defnition list, delimita o incio e fm da
lista</dd>
3
<dt>dt</dt><dd>Delimita cada um dos termos da lista</dd>
4
<dt>dd</dt><dd>Delimita cada defnio da lista</dd>
5
</dl>
Resultado:
6.5 Endereos
Address serve para indicar o endereo de um local, assim como
marcar qualquer tipo de informao de contato.
Dentro do elemento address pode inserir quaisquer outros elemen-
tos inline, como a, span, strong, entre outros.
Figura 10: Exemplos de pargrafos e listas
1
<address>
2
<a href="http://www.cefetsp.br/edu/sjbv/"> IF Campus
SJBV</a>
3
<span>
4
Acesso Dr. Joo Batista Merlin, s/n <br />Jardim It-
lia - 13872-551 <br />So Joo da Boa Vista - SP - (19) 3634-
1100
5
</span>
6
</address>
ou
1
<address>Este meu endereo</address>
6.6 Citaes
Utilizado para fazer citaes de texto de um livro, site ou mesmo
uma frase de outro autor, a tag <cite>:
1
<cite>Seu futuro depende de muitas coisas, mas
2
principalmente de voc. </cite>
Para blocos de citaes mais longas com pargrafos inteiros, temos
ainda a tag <blockquote>. Observe que ele exige um ou mais blocos den-
tro:
1
<blockquote><p>Esta citao inclui mais de um
2
pargrafo</p>
3
<p>Este o segundo pargrafo da
4
citao</p></blockquote>
Sem os tags <p> dentro do blockquote o cdigo no validado.
Na tag <blockquote> opcional indicar quem o autor da citao. Use o
parmetro cite:
1
<blockquote cite=Einstein>A velocidade da luz
2
igual para todos os referenciais
3
inerciais.</blockquote>
O texto em cite no mostrado, mas armazenado para o rob
dos sistemas de busca.
6.7 Cdigo
Cdigo de programao um tipo de informao muito comum
em sites especializados em informtica, principalmente programao. Esta
tag deve estar dentro de pargrafos ou ttulos. Para indicar que algo c-
digo, temos a tag code:
1
<code>
2
System.out.println(Tabuada do 5);
3
for(i=1;i<=10;i++){
4
System.out.println(5 x + i + = + (i*5));
5
}
6
</code>
6.8 Resultados de Programas
Utilizado para mostrar resultados de sadas de programas. Esta tag
deve estar dentro de pargrafos ou ttulos.
Exemplo:
1
<p>Mostrando o resultado do programa acima:
2
<samp>5 x 1 = 5</samp></p>
6.9 nfase e nfase forte
Para destacar uma frase ou palavra no meio de um pargrafo, te-
mos duas opes: utilizar de nfase ou de nfase forte. Os tags so, res-
pectivamente, <em> e <strong>:
1
<p>Exemplo de pargrafo. Agora um exemplo <em>de
2
algo muito importante e que necessite
3
destaque</em>. No entanto isso <strong>ainda
4
mais importante e deve ser ainda mais
5
destacado.</strong></p>
Observe que a aparncia padro para <em> o itlico e <strong>
o negrito. Mas isso o padro e podem ser modicados via CSS. Textos
enfatizados fazem parte de um pargrafo, ou outro tipo de bloco, como:
code, cite, etc.
6.10 Sobrescrito e Subscrito
Para textos subscritos (subscribed) e sobrescritos (supercribed), te-
mos respectivamente os tags <sub> e <sup>:
1
H<sub>2</sub>O
2
H
2
O
3
a<sup>2</sup>= b<sup>2</sup>+c<sup>2</sup>
4
a
2
=b
2
+c
2
Importante: Aluno, teste todos os exemplos vistos, isto funda-
mental para o seu aprendizado, teste-os no validator.w3.org
6.11 Mais recursos para a pgina
Como j criamos alguns exemplos e voc testou todos os exemplos
anteriores, deve ter percebido que a pgina est esttica, parada, sem sa-
da para outro local. Podemos modicar isto, mas como? Atravs de links
e ncoras.
Veremos tambm como criar tabelas. Vale destacar que tabela foi criada
apenas para tabular dados, mostrar informaes de forma concisa e no
para fazer a estrutura de uma pgina .html, como era utilizada antigamen-
te.
6.12 Links e ncoras
Atualmente, a internet o que graas aos links, que na maioria
das vezes caracterizado como textos com um sobrescrito embaixo e ge-
ralmente em azul, quando clicados levam a outro contedo da internet, de
forma automtica.
Usar fcil, mas vocs vero que criar um link quase to simples
quanto utiliz-lo.
Os atributos HTML so caractersticas de uma tag que adicionam
funcionalidades a ela. Por exemplo: no basta criar um link, preciso de-
nir uma pgina destino. Como j vimos, a tag usada para linkar <a></
a>. Para adicionar a essa tag a pgina de destino do link, usaremos um
atributo dessa tag, chamado href. Todo atributo XHTML segue as seguintes
regras:
1 deve ser escrito em letras minsculas;
2 ca dentro da tag de abertura;
3 Respeita a seguinte sintaxe:
nome_do_atributo = valor_do_atributo
Vejamos como caria nosso link, usando o atributo href:
1
<a href=http://www.ifsp.edu.br >Conhea o IFSP</a>
O texto sublinhado indica o local que o navegador ir carregar no
momento que o usurio clicar no link, e o Conhea o IFSP ser o texto que
o usurio ver.
Quando criarmos links para as pginas que esto dentro do nosso
prprio servidor, no necessrio o caminho completo (http://www.do-
minio.com.br/etc), basta apenas declarar o nome do arquivo, e sua
hierarquia de pastas (quando necessrio).
interessante podermos escolher aonde queremos que seja aberto
o link, em qual janela o link ser aberto. Temos duas opes: abrir links na
mesma janela, obrigando o usurio a utilizar o boto VOLTAR, do navega-
dor, para retornar a nossa pgina; abrir links em uma nova janela. Por pa-
dro, os links abrem na mesma janela, mas para forar a abertura de links
em uma nova janela precisaremos do atributo target. Lembrando que para
quem utiliza softwares leitores de tela (pessoas com decincias visuais) a
abertura de links em outra janela ou aba diculta a navegao pela pgina.
Veja como funciona:
1
<h1>Link para mesma janela</h1>
2
<a href=pagina.html>Link</a>
3
<h1>Link abrindo em nova janela</h1>
4
<a href=pagina.html target=_blank>Link</a>
Basta adicionar o atributo target com o valor _blank e o link
abrir em uma nova janela.
Importante: Quando necessrio utilizar mais de um atributo na tag,
deve-se separ-los por um espao em branco.
6.13 ncoras
J aprendemos como criar links para outros sites ou outras pginas,
agora aprenderemos a criar links para dentro do prprio documento.
Imagine uma pgina enorme, cheia de contedo dividido em cap-
tulos, mas tudo em uma nica pgina, caria difcil navegar por este site,
se utilizssemos ndices facilitaria a navegabilidade. Para isso, criaremos
links ncoras, ou seja, links que apontem para o prprio documento.
Para criar uma ncora necessrio dois passos:
1 Denir um pedao da pgina para ser o destino do link;
2 Criar um link apontando para o pedao da pgina selecionado
como destino.
Para denir um trecho da pgina como destino do link ncora, ser
preciso envolv-lo com as tags <a></a> acrescentando o atributo id. Veja
como funciona:
1
<h4><a id=ancora1>Ttulo 1</a></h4>
2
<p>Pargrafo 1...</p>
Bem, denimos um pargrafo de nossa pgina como uma ncora,
agora preciso criar um link apontando para essa ncora. Para isso, basta
criar um link normalmente, e no caminho da pgina de destino colocar o
seguinte valor: #nome_da_ancora.
1
<h4><a id=topo>Topo</a></h4>
2
<a href=#ancora1>Pargrafo 1</>
3
<h4><a id=ancora1>Ttulo 1</a></h4>
4
<p>Pargrafo 1...</p>
5
<a href=#topo>Voltar para o topo</a>
Nos casos em que a posio na pgina de destino um ttulo mar-
cado com ttulos (h1, h2 .. h6), ou mesmo um pargrafo ou qualquer ob-
jeto especco, pode-se usar o parmetro id. Exemplo:
1
<h4 id=respond>Envie um comentrio</h4>
6.14 Tabelas
Muitas pginas foram construdas com tabelas, pois na poca, era
o nico recurso para constru-las com uma boa aparncia. Para montar
layout de pginas cada vez mais elaboradas e detalhadas, a tabela ainda
uma ferramenta muito usada, embora esta prtica seja desencorajada.
Tabelas devem ser utilizadas apenas para tabulao de dados.
Atualmente, h outros recursos mais avanados para isso, por
exemplo: CSS.
Dica: Se quiser se livrar das tabelas em layout de pgina, conhea o
site http://tableless.com.br/artigos/tutorial/.
Todas as tabelas devem possuir um ttulo, cabealho, corpo e ro-
dap. Criamos tabela com o elemento <table>. Podemos utilizar alguns
elementos juntamente com tabelas:
<table> indica incio e m da tabela, todos os outros elementos devem
ser utilizados dentro desta tag.
<caption> elemento opcional que indica o ttulo da tabela
<thead> delimita o cabealho da tabela
<tfoot> delimita o rodap da tabela
<tbody> delimita o corpo da tabela
<tr> delimita as linhas da tabela, observe que os dados de clulas cam
dentro de uma linha
<td> delimita as clulas da tabela
<th> delimita as clulas da tabela, porm como ttulos, uma clula de
cabealho (head), por padro j vem em negrito e centralizado.
Quando quisermos mesclar uma clula por mais de uma coluna,
como fazemos no Excel ou no Word, temos que utilizar o atributo cols-
pan seguido do nmero de colunas que a clula deve se expandir.
Se quiser que a clula ocupe mais de uma linha, o atributo a ser
utilizado o rowspan, ambos os atributos devem ser inseridos dentro de
uma declarao <td>.
A diferena aqui conceitual: duas clulas no so mescladas, mas
uma clula esticada.
Uma tabela possui alguns atributos importantes dos quais pode-
mos destacar:
Atributo Valor Descrio
border pixels
espessura da linha do
desenho da borda da
tabela
cellspacing pixels
espaamento entre as
clulas
cellpading pixels
espaamento entre o
contedo da clula e sua
borda
Exemplos:
1
2
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
3
trict.dtd">
4
<html xmlns = http://www.w3.org/1999/xhtml
5
ml:lang="pt-br" lang="pt-br">
6
<head>
7
<meta http-equiv=Content-Type
8
content=text/html; charset=ISO-8859-1 />
9
<title>Exemplo Tabelas</title>
10
</head>
11
<body>
12
<table cellpadding=5px cellspacing=0
13
border=1px>
14
tbody><tr>
15
<td>Clula 1-1 </td>
16
<td>Clula 1-2</td>
17
<td>Clula 1-3</td>
18
</tr>
19
<tr>
20
<td>Clula 2-1 </td>
21
<td>Clula 2-2</td>
22
<td>Clula 2-3</td>
23
</tr>
24
<tr>
25
<td>Clula 3-1 </td>
26
<td>Clula 3-2</td>
27
<td>Clula 3-3</td>
28
</tr>
29
<tr>
30
<td>Clula 4-1 </td>
31
<td>Clula 4-2</td>
32
<td>Clula 4-3</td>
33
</tr>
34
<tr>
35
<td>Clula 5-1 </td>
36
<td>Clula 5-2</td>
37
<td>Clula 5-3</td>
38
</tr>
39
</tbody></table>
40
</body></html>
Exemplo de uso de tabelas com unio de clulas:
1
2
Strict//EN"
Figura 11: Resultado da Tabela
3
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
<html xmlns = "http://www.w3.org/1999/xhtml"
5
ml:lang="pt-br" lang="pt-br">
6
<head>
7
<meta http-equiv="Content-Type"
8
content="text/html; charset=ISO-8859-1" />
9
<title>Tutorial Tabelas</title>
10
</head>
11
<body>
12
<h1> Exemplo </h1>
13
<table border = "1px">
14
<caption> Titulo </caption>
15
<thead><tr><td
16
colspan="3">Cabecalho</td></tr></thead>
17
<tfoot><tr><td colspan="3">Rodape da
18
tabela</td></tr> </tfoot>
19
<tbody>
20
<tr>
21
<td colspan="2">Linha 1 Coluna 1</td>
22
<td>Linha 1 Coluna 3</td>
23
</tr>
24
<tr>
25
26
27
<td rowspan="2">Linha 2 Coluna 3</td>
28
</tr>
29
<tr>
30
31
32
</tr>
33
</tbody>
34
</table>
35
</body>
36
</html>
Relembrando: Tabelas so somente para construir tabelas com da-
dos e no para estruturar o layout de uma pgina.
6.15 Imagens
Imagine um site sem qualquer imagem, seria estranho, no seria?
Para inserir imagem em um documento XHTML, aconselhvel que ela
esteja salva na mesma pasta do seu site ou dentro de uma pasta chamada
imagens, dentro da pasta do seu site.
Para os nossos exerccios e testes, salvaremos as imagens na mesma
pasta em que estamos salvando o arquivo XHTML em que ser inserido.
Depois s incluir uma referncia no XHTML:
1
<img src= testeQF.jpg alt=descrio da imagem />
Em caso de referncia em outro servidor ou em algo publicado na
net, devemos usar o endereo completo:
Figura 12: Resultado da Tabela com Clulas Mescladas
1
<img src=
2
http://www.sinergianet.com.br/testes/images/
3
esteQF.jpg alt=imagem de um homem ao lado de
4
um cofrinho no formato de porco />
Imagens devem estar dentro de pargrafos ou outros blocos para
serem validadas.
Dois parmetros so altamente recomendados:
alt Defne um texto alternativo caso o dispositivo no possa car-
regar a imagem (celulares ou navegadores texto). Usado pelo Internet Ex-
plorer como ajuda (hint) em amarelo quando paramos com o mouse sobre
a imagem. Obrigatrio para Strict.
title Defne um ttulo para a imagem. Usado pelo navegador para
identicar a imagem. No refox usado como hint.
1
<img src=rosa.jpg alt=Imagem de rosa
2
title=imagem de rosa />
Pessoal, agora que j aprendemos o bsico de XHTML, podemos
comear a ver CSS, que permite mudar o comportamento e aparncia pa-
dro dos tags que j vimos.
O objetivo at agora foi escrever pginas XHTML com o contedo
bem bsico, usando links, tabelas e listas que sejam validadas no W3C va-
lidator (http://validator.w3.org).
Com CSS modicamos o comportamento padro dos tags XHTML,
mudando a aparncia das pginas.
CSS signica Cascading Style Sheet, traduzindo: folhas de estilo em
cascata.
Segundo Silva (2003), a introduo deste conceito preconiza o uso
dos elementos (tags) HTML/XHTML, exclusivamente para marcar e estrutu-
rar o contedo do documento. Nenhum elemento XHTML ser usado para
alterar a apresentao, ou seja, estilizar o contedo.
A tarefa de estilizao car a cargo das CSS, que nada mais do
que um arquivo independente do arquivo XHTML no qual so declaradas
propriedades e valores de estilizao para os elementos do XHTML.
Estas declaraes de estilo, quer sejam estruturadas em um arquivo
externo com extenso .css, quer sejam declaradas de outros modos (impor-
tadas, lincadas, incorporadas ou inline), contm todas as regras de estilo
para os elementos do documento XHTML.
7.1 O Efeito Cascata
Quando h conito de estilos especicados (por exemplo: uma re-
gra de estilo determina que os pargrafos sero na cor azul e outra que
UNIDADE 7 - INTRODUO AO
CSS
Objetivos da aula
- Compreender o que CSS.
- Princpio bsico para a utilizao do CSS.
sero na cor verde) para um mesmo elemento XHTML, qual estilo ser
utilizado?
Entrar em execuo o efeito cascata, que nada mais do que o
estabelecimento de uma prioridade para aplicao da regra de estilo ao
elemento.
Para determinar a prioridade, so considerados diversos fatores,
entre eles: o tipo de folha de estilo, o local fsico da folha de estilo no seu
todo, o local fsico da regra de estilo na folha de estilo e a especicidade
da regra de estilo.
A prioridade para o efeito cascata em ordem crescente:
1. folha de estilo padro do navegador do usurio;
2. folha de estilo do usurio;
3. folha de estilo do desenvolvedor;
estilo externo (importado ou lincado).
estilo incorporado (defnido na seo head do documento);
estilo inline (dentro de um elemento HTML);
4. declaraes do desenvolvedor com !important;
5. declaraes do usurio com !important;
Assim, uma declarao de estilo com !important denido pelo usu-
rio, prevalece sobre todas as demais, a de mais alta prioridade. Entre
as folhas de estilo denidas pelo desenvolvedor do site, os estilos inline
(dentro de um elemento HTML) tem a prioridade mais elevada, isto , pre-
valecer sobre a folha de estilo denida na seo head, e esta prevalecer
sobre uma folha de estilo externa. A prioridade mais baixa para estilo
padro do navegador.
7.2 CSS Como usar?
Voc pode denir regras de CSS de trs formas, podendo combin-
las livremente nas suas pginas. A maneira como as regras interagem entre
si est relacionada parte em cascata. As trs formas so:
1) Em um documento separado fora de todos os documentos
HTML, chamado mtodo EXTERNO:
O Mtodo Externo signica que voc coloca as regras de CSS em
um arquivo separado, e ento sua pgina HTML pode fazer um link para
esse arquivo. Essa abordagem lhe permite denir regras em um ou mais
arquivos que podem ser aplicadas em alguma pgina do seu web site.
Para denir um conjunto de regras de estilo, que voc pode facil-
mente aplicar em alguma pgina do seu site, preciso colocar as regras em
um arquivo de texto. Voc pode criar este arquivo com um editor de textos
simples e dar ao nome desse arquivo a extenso .css.
Sempre que quiser utilizar esses estilos em uma nova pgina, basta
colocar uma tag <LINK> no cabealho que referencie esse arquivo .css.
Veja o exemplo:
1
Arquivo estilo.css
2
H1 {font-family: 'Comic Sans MS';
3
font-size: 36pt;
4
color: blue;}
5
P {font-family: 'Courier';
6
margin-left: 0.5in;}
Agora, para utilizar os estilos denidos neste arquivo .css voc pre-
cisa adicionar a tag a seguir ao cabealho da pgina, onde nome_do_ar-
quivo uma referncia absoluta ou relativa ao arquivo *.css. Deve-se inserir
este texto entre as tags <head>...</head> e colocar a localizao correta
do seu arquivo e seu nome.
1
<link rel="stylesheet"
2
href=http://www.ifsp.edu.br/estilo.css
3
type="text/css">
2) No cabealho de um documento HTML. Esse mtodo chamamos
de INCORPORADO. Veja mais:
Incorporado signica que voc especica as regras de CSS no ca-
bealho do documento. As regras incorporadas afetam somente a pgina
atual.
Se quiser criar um conjunto de estilos que se aplicam a uma ni-
ca pgina, voc pode congurar os estilos exatamente como zemos no
exemplo dos estilos externos - mas em vez de colocar as tags <style>...</
style> e as regras em um arquivo separado, coloque estas tags na prpria
pgina HTML. A estrutura bsica de uma pgina da web que utiliza estilos
incorporados semelhante ao seguinte cdigo:
1
<head>
2
<title>Exemplo Estilos Incorporados</title>
3
<style type="text/css">
4
P {background-color: #FFFFFF;
5
font-family:'Comic Sans MS';
6
font-size: 14pt;}
7
</style>
8
</head>
9
<body>
10
</body>
11
</html>
3) Dentro de uma tag de HTML, pelo mtodo denominado INLINE:
Inline signica que voc especica as regras de CSS dentro da tag de HTML.
Essas regras afetam somente a tag atual.
Os estilos inline so os que tm menos efeitos. Eles afetam somente a tag
atual - no outras tags na pgina e tampouco outros documentos. A sinta-
xe para denir um estilo inline a seguinte:
1
<tag style="regras css">
Exemplo:
1
<a style="color: green; text-decoration: none"
2
HREF="http://www.cefetsp.br/edu/sjbv/">
Note que em vez das tags <style>...</style>, voc apenas utiliza
um atributo style dentro da tag para denir o estilo. E, em vez de colocar
as regras de CSS entre colchetes, voc as coloca entre aspas, separando-as
com ponto-e-vrgula como de costume.
7.3 Criando Estilos
Cada estilo que voc cria denido como uma regra CSS. Cada
regra deve utilizar a seguinte sintaxe:

1
elemento {atributo1: valor; atributo2: valor ...;}
Elemento - descreve o elemento de design ao qual o estilo ser
aplicado. A mesma tag HTML, mas sem os sinais de maior e menor. Essa
parte da regra s vezes chamadas de seletor.
Atributo - o aspecto especco do elemento que voc quer usar
como estilo. Deve ser um nome de atributo CSS vlido, como o atributo
font-size.
Valor - a congurao aplicada ao atributo. Deve ser uma con-
gurao vlida para o atributo em questo , como 20pt (20 pontos) para
font-size.
Atributo:valor - a parte declarao da regra. Voc pode atribuir
mltiplas declaraes se desejar separ-los com ponto-e-vrgula (;). Exem-
plo: uma regra CSS que especica que todos os ttulos de nvel 1 (tags
<h1>) sejam exibidos em uma fonte de 36 pontos:
1
H1 {font-size: 36pt;}
Aqui est um exemplo de regra que diz que todos os ttulos de nvel
2 (tags <h2>) devem ter tamanho de 24 pontos e cor azul;
1
H2 {font-size: 24pt; color: blue;}
Voc pode inserir quebras de linha e espaos em branco dentro da
regra como quiser.
Assim, possvel ver mais facilmente todas as declaraes e certi-
car-se de que colocou todos os sinais de ponto-e-vrgula e colchetes nos
lugares corretos. Por exemplo: aqui est uma regra que diz que os pargra-
fos aparecero em fonte Times, 12 pontos, azul e recuados meia polegada
a partir da margem esquerda da pgina:
1
P {font-family: Times;
2
font-size: 12pt;
3
color: blue;
4
margin-left: 0.5in;}
possvel mudar praticamente qualquer aparncia. Por exemplo:
para a cor de fundo usa-se background-color:
1
BODY{
2 color: red;
3 background-color: green;}
Muitas vezes no queremos todo o texto da pgina da mesma
cor, quase sempre no. Ento, podemos aplicar mudanas para cada tag
XHTML individualmente:
1
H1 { color: blue;}
2
H2, H3, H4, H5, H6 {color: gray;}
O segundo exemplo mostra que possvel aplicar a mesma modi-
cao a vrios seletores simultaneamente. Aqui indicamos que a fonte dos
ttulos H1 so azuis e dos outros ttulos cinza.
7.4 Tags Personalizadas
Com as classes de estilo, possvel denir diversas variaes de
uma nica tag. Por exemplo: voc poderia fazer um estilo de pargrafo
texto alinhado direita, um estilo de pargrafo texto centralizado e
assim por diante, criando mltiplos temas em torno da tag de pargrafo
<p>.
7.4.1 Seletores
Existem situaes que desejamos modicar um nico pargrafo,
um ttulo apenas da pgina, ou um grupo de pargrafos e no todos os
elementos pargrafos. Para executar esta tarefa, existem dois parmetros
que podemos incluir nos tags XHTML: id e class.
id: identicar um elemento nico na pgina. como um RG de
um elemento de pgina, e justamente por isso no pode ser repetido.
1
<table id="Alunos">
2
...
3
</table>
4
<table id="Professores">
5
...
6
</table>
class: identicador que pertena a um grupo de elementos.
usado para classicar um tag como pertencente a um grupo. Um tag pode
ser identicado como parte de um nico grupo de elementos.
1
<p>Pargrafo comum</p>
2
<p class="pergunta">Este um pargrafo com uma pergunta</
p>
3
<p class="resposta">Este um pargrafo com uma resposta</
p>
4
<p class="pergunta">Este um pargrafo com outra pergunta</
p>
5
<p class="resposta">Este um pargrafo com outra resposta</
p>
Uma vez denido a class ou id possvel aplicar um CSS dire-
tamente a eles. Para class use o caracter .:
1
.pergunta {
2
color: #ccc;
3
word-spacing: 1.2em;}
4
.resposta {
5
background-color:#ccc;
6
color: #fff;}
E para id usamos o caracter #:
1
#Alunos {
2
color:#fff;
3
background-color:#000;}
4
#Professores {
5
color:#OOO;
6
background-color:#FFF;}
Algumas vezes a mesma tag pode ser identicado por um id e fazer
parte de um class:
1
<p id="principal" class="resposta">Esta a
2
"principal" resposta.</p>
Neste caso os CSS de #principal e .resposta sero aplicados, com
prioridade para #principal.
7.4.2 Utilizando a tag <div>
As tags <div>...</div> podem ser usadas para formatar um grande
bloco de texto abrangendo diversos pargrafos e outros elementos. Isso as
torna uma boa opo para denir estilos que afetam grandes sees de um
texto em uma pgina. Veja:
1
2
div.sidebar {font=family: "Arial";
3
font-size: 12pt;
4
text-align: right;
background-color: #C0C0C0;
margin-left: 1in;
margin-right: 1in;}
</style>
Ao colocar na tag <div> o atributo CLASS, voc estar fazendo
com que todos os elementos que estejam englobados nesta tag sigam
estes padres.
7.4.3 Utilizando a tag <span>
As tags <span>...</span> so como tags <div>...</div> no sentido
de que voc pode utiliz-las para denir estilos que formatam um bloco
de texto. Ao contrrio de <div>, que utilizada para divises de texto
grandes, a tag <span> especializada para blocos de textos menores - que
podem ser to pequenos como um nico caracter. Veja um bom exemplo
do que se pode fazer utilizando esta tag.
1 <style type="text/css">
2 span.hot {color:green;
3 text-decoration: underline;}
4 </style>
Exemplos
No arquivo .html:
1
<p>Dormir cedo e acordar cedo faz o homem
2
<span class="caract">saudvel</span>,
3
<span class="caract">rico</span>
4
<span class="caract">sbio</span>.</p>
5
<div id="presidentes">
6
<ul>
7
<li>Franklin D. Roosevelt</li>
8
<li>Harry S. Truman</li>
9
<li>John F. Kennedy</li>
10
<li>Lyndon B. Johnson</li>
11
<li>Jimmy Carter</li>
12
<li>Bill Clinton</li>
13
</ul>
14
</div>
No arquivo .css:
1
span.caract {
2
color:red;}
3
#presidentes {
4
background:blue;}
7.5 Estilizando
7.5.1 Formatando textos e fontes com
CSS
7.5.1.1 Parmetros Text
Antes de comearmos a formatar a nossa pgina, vamos conhecer
os parmetros que modicam a aparncia do texto:
direction: direo do texto. Valores: ltr e rtl, respectivamente es-
querda para direita e direita para esquerda;
line-height: distncia entre linhas. Valores: normal, numrico,
ou porcentagem;
letter-spacing: espao entre caracteres. Valores: normal e nu-
mrico;
text-align: alinhamento texto. Valores: left, right, center e justi-
fy;
text-decoration: Modifcadores para decorao. Valores: none
(no apresenta decorao), underline (sobrelinha), overline (uma linha aci-
ma), line-through (texto riscado) e blink (efeito piscante, evite utilizar);
text-indent: endentao da primeira linha do bloco. Valores: nu-
mrico e porcentagem;
text-transform: coloca texto em maiscula ou minscula. Valores:
none, capitalize (primeira letra maiscula e restante minscula), uppercase
(maiscula) e lowercase (minscula);
white-space: defne como o espao entre as palavras dentro de
um bloco gerenciado. Valores: normal (padro do XHTML), pre (per-
mite repetir espaos e respeita enter e outros), nowrap (no quebra a linha
automaticamente);
word-spacing: aumenta ou diminui o espao entre palavras. Valo-
res: normal ou numrico.
Exemplo:
1
p {
2
text-indent: 20px; /* 20pixels */}
3
h1,h2,h3,h4 {
4
word-spacing: 1.4em; /* 1,4 vezes a largu-
ra
5
de uma letra */
6
letter-spacing: 0.3em; /* metade da largura
de uma letra */
7
de uma letra */
8
text-align: center;}
7.5.1.2 Parmetros Font
color: Cor da fonte.
font-family: denir uma lista com o nome da fonte utilizado ou
um nome de famlia genrica. Valores:
nome da fonte. Usar aspas em caso de nomes compostos lucida
console.
nome de uma famlia genrica: serif, sans-serif, cursive, fantasy e
monospace.
font-size: tamanho da fonte. Valores: xx-small, x-small, small, me-
dium, large, x-large, xx-large, smaller, larger, numrico e porcentagem.
font-style: estilos da fonte. Valores: normal, italic, oblique.
font-weight: Dene a fora do negrito. Valores: normal, bold,
bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900
font-variant: dene as letras em maisculo. Valores: small-caps;
font: defne vrios dos elementos acima ao mesmo tempo, veja o
exemplo h1.
Exemplo:
1
body {
2
font-family: courier, serif;
3
color: black;}
4
p {
5
font-family: arial, "lucida console", sans-serif;
6
font-weight: bold;
7
font-style: italic;
8
font-size: 12px ;}
9
h1{
10
font: italic 900 22px arial,"lucida console",sans-serif
Importante: Para visualizar a tabela de cores utilizadas na web vi-
site: http://www.mxstudio.com.br/Conteudos/Dreamweaver/
Cores.htm
7.5.2 Dividindo o documento XHTML e For-
matando
Referente diagramao, existem dois tipos de tags disponveis:
tags de blocos e tags de trechos, block e inline.
Os tags de blocos tem o comportamento de pargrafos, possui im-
plcito uma quebra de linha ao nal e pode ser usado diretamente no corpo
do documento <body>, exceto que no seja parte de uma lista ou tabela.
Alguns exemplos de tags de bloco: p, ul, ol, li, table, tr, td, tr, th,
entre outras.
Os tags de trechos (em ingls inline) devem estar denidos dentro
de um bloco necessariamente. Tem o comportamento de uma parte de pa-
rgrafo, como uma palavra ou frase e no executam uma quebra de linha.
Alguns tags inline: i, strong, em, img, entre outros.
7.5.3 Margens, espaamento, larguras e
bordas
Cada bloco denido por um par de tags (<p> </p>, ou <img
/>) tem um conjunto de opes de aparncia de bloco customizveis com
CSS: marging, padding, height, width, border.
Vejamos a gura abaixo, exemplo retirado do site Tecnoclasta:
Figura 13: Exemplo de formatao
Neste bloco as medidas referem-se a :
A Margin: Margem transparente com a separao de um bloco e
o bloco vizinho.
B Padding: preenchimento ou espaamento interno do bloco.
Espao entre o contedo do bloco, no caso o pargrafo e a borda.
C Border: Largura da borda.
Alm destas medidas, temos ainda a altura (height) e a largura (wi-
dth), medidas dentro da rea com texto na gura.
Isso , a rea em azul menos o espao sem texto (padding). Portan-
to a largura total visvel do bloco width + 2*padding + 2*border.
Todas estas opes so congurveis para cada um dos 4 lados do
bloco individualmente: top, left, bottom, right. Assim:
1
p{ margin-top: 15px;
2
margin-right: 10px;
3
margin-bottom: 20px;
4
margin-left: 12px;
5
padding-top: 10px;
6
padding-right: 12px;
7
padding-...
8
border-width-top: 10px;
9
border-width-left: 12px;}
Pode-se tambm congurar em conjunto:
1
p{
2
margin: 15px 10px 20px 12px; // defne na
3
segncia: topo, direita, base, esquerda, no
4
sentido do relgio.
5
padding: 10px 12px; // defne topo e base
6
como 10px e laterais como 12px
7
border-width: 20px; // toda borda com 20px
8
de largura}
Para as bordas temos ainda estilo e cor:
1
p {
2
border-width: 10px 12px; //borda 10px de
3
largura no topo e base e 12px nas laterais
4
border-style: solid; // borda cheia para
5
todos os lados.
6
border-color: red;}
As opes para estilo de borda so:
dotted srie de pontos,
dashed tracejados,
solid linha contnua,
double duas linhas slidas,
groove uma linha em baixo relevo
ridge uma linha em alto relevo
inset simula o bloco todo inserindo na tela
outset simula o bloco todo saltando para fora da tela

J para a largura da borda (width) alm das medidas em pixels (px)
ou caracteres (em), temos as opes abaixo:
thin: na
medium: mdia
thick: grossa

As opes das bordas podem ser denidas em conjunto:
1
<body>
2
<div id=titulopagina>
3
<h1>Ttulo da Pgina</h1>
4
<h2>Descrio da pgina parte do ttulo</h2>
5
<p>Autor: Lus Eduardo. Tambm parte do ttulo</p>
6
</div>
7
<div id=menu>
8
<h2>Menu de opes:</h2>
9
<ul>
10
<li class=impar>Opo 1</li>
11
<li>Opo 2</li>
12
13
<li>Opo 4</li>
14
15
</ul>
16
</div>
17
<div id=conteudo>
18
<h2>Contedo principal da pgina</h2>
19
...
20
</div>
21
</body>
praticamente obrigatrio o uso da propriedade id na tag div,
pois s assim possvel modicar alguma aparncia em CSS.
1
#menu {
2
margin: 10px, 20px;
3
padding: 5px, 10px;
4
border: dotted 3px #FCC;}
Para mudar o comportamento de um tag somente para um dos
blocos, basta combinar o id do bloco com a tag a ser modicado:
1
#menu h2 {
2
font-size: 20px;
3
color: red;} // defne cor vermelha e
4
tamanho 20px para ttulo 2 no bloco menu
6
#titulopagina h1 { color: blue ;} //defne cor
7
azul para ttulo 1 no bloco titulo pagina
8
#titulopagina h2 {
9
font-size: 20px;
10
color: red ;} // defne cor vermelha e tamanho
11
20px para ttulo 2 no bloco menu, desta forma o
12
h2 no bloco 'menu' ser diferente do h2 no bloco
13
'titulopagina'.
E aqui algo mais complicado, usando a mesma lgica:
1
#menu li { color: #000000 ;} //defne cor preto
2
para item de lista no menu.
3
#menu li.impar { color: #cccccc ;} //defne cor
4
cinza para item de lista de classe impar no menu.
Utilizando <span>:
1
<p>Este um pargrafo como outro qualquer. O
2
custo de produo foi <span class="dinheiro">R$
3
100,00</span>. Embora seja um bom valor, melhor
4
ainda foi o lucro de <span
5
lass="dinheiro">R$95,00</span>.</p>
Denido assim, podemos escolher uma aparncia para o dinhei-
ro:
1
.dinheiro {
2
font-weight: bolder;
3
color: #eee;}
Normalmente usamos <span> com o parmetro class e <div> com
o parmetro id.
7.5.4 Plano de Fundo
Para denir como ser o comportamento do fundo de qualquer
bloco, utilizamos os parmetros background. O fundo inclui a rea de con-
tedo e o preenchimento (padding). possvel denir uma cor para o fun-
do, ou preencher o fundo com uma gura. Esta gura pode ser repetida
por toda a rea ou de outras maneiras. Vamos denir um bloco para reali-
zar os testes:
1
<body>
2
<p>este o bloco de teste</p>
3
</body>
4
</html>
E em style denir algumas caractersticas:
1
2
p {
3
padding: 40px;
4
margin: 50px;
5
heigth: 200px;
6
width: 300px ;}
7
</style>
Pronto, assim teremos uma caixa para aplicar os padres de fundo.
Vamos testar primeiro a cor de fundo:
1 p{
2 background-color: #ccc; /* cor de fundo cinza */}
7.5.5 Utilizando guras como fundo
Voc j deve ter alguma imagem gravada na sua pasta de trabalho,
caso ainda no tenha, pesquise e salve alguma da internet, *.gif ou *.jpg.
possvel aplicar um padro repetido por todo o bloco usando:
1
p{
2
background-image: url(rosa.jpg);}
Repetindo a imagem, dentro da formatao do pargrafo acima,
escolha uma das opes abaixo:
1
background-repeat: no-repeat; /* a imagem
2
somente uma vez */
3
background-repeat: repeat-y; /* a imagem repete
4
na vertical */
5
background-repeat: repeat-x; /* a imagem repete
6
na horizontal */
7
background-repeat: repeat; /* a imagem repete na
8
vertical e horizontal (padro) */
Para manter o fundo xo enquanto rola-se a pgina:
1
background-attachment: fxed;
2
background-attachment: scroll; /* rolagem de
3
forma padro */
Posicionar a imagem em um local especco:
1
background-position: x-pos y-pos ; x-% y-% ; top
2
left ; top center ; top right ; center left ;
3
center center ; center right ; bottom left ;
4
bottom center ; bottom right ;
Exemplo:
1
p{
2
background-image: url(nomearquivo.gif);
3
background-repeat: no-repeat;
4
background-position: center center;}
Como os outros parmetros, podemos escrever um grupo de op-
es de uma vez s:
1
p{
2
background: url(nomearquivo.gif) no-repeat
3
center center fxed;}
7.5.6 Parmetro Float
Os blocos <div> se comportam exatamente como os pargrafos
<p>. Quando colocamos um pargrafo na pgina e denimos uma largura
menor que a largura da pgina evidente que sobrar espao a direita do
bloco. Veja a gura abaixo:
Digamos que o bloco em azul claro o fundo do navegador, e os
blocos amarelo e verde so dois pargrafos. Usamos CSS para denir o
pargrafo amarelo e o bloco verde com largura 100px:
1 #paragrafoamarelo, #paragrafoverde {width:100px;}
Mesmo existindo espao para os dois pargrafos carem lado a
lado, como so blocos, eles terminam com quebra de linha e o bloco verde
continua abaixo.
O parmetro oat permite que um pargrafo simplesmente no
quebre a linha no nal. O comportamento de utuao. O bloco pode
ser colocado a esquerda e o restante vai contornar conforme a gura:
Figura 14: Exemplo de uso de <div> sem o Float - Site Tecnoclasta
Aqui o bloco amarelo possui os seguintes parmetros:
1
#paragrafoamarelo{
2
width: 100px;
3
foat: left; /* futuando a esquerda */}
4
/* e o verde: */
5
#paragrafoverde{
6
width:100%; /* pargrafo verde ocupando toda a largura da
7
na horizontal */
Para colocar os dois pargrafos um ao lado do outro:
1
#paragrafoamarelo{
2
width: 100px;
3
foat: left; /* futuando a esquerda */}
4
/* e o verde: */
5
#paragrafoverde{
6
width:100px;
7
foat:left; /* futuando a esquerda */ }
Exemplo de cdigo de uma pgina. Digite-o no seu editor e com-
plete as partes faltantes.
1
2
<body>
3
<div id=tudo>
4
<div id=titulopagina>
5
<h1>Ttulo da Pgina</h1>
6
<h2>Descrio da pgina parte do ttulo</h2>
7
<p>Autor: Lus Eduardo. Tambm parte do ttu-
lo</p>
8
</div> <!- fechando titulopagina -->
9
<div id=menu>
10
<h2>Menu de opes:</h2>
11
<ul >
12
13
<li>Opo 2</li>
14
15
<li>Opo 4</li>
16
17
</ul>
18
</div> <!- fechando menu -->
19
<div id=conteudo>
20
<h2>Contedo principal da pgina</h2>
21
UNIDADE 8 - DIAGRAMAO COM

CSS
Objetivos da aula
- Aprender como diagramar pginas WEB como uso de CSS.
22
</div> <!- fechando contedo -->
23
<div id=rodape>
24
<h2>Feito por Lus Eduardo</h2>
25
26
</div> <!- fechando rodap -->
27
</div> <!- fechando tudo -->
28
</body>
Queremos que o site tenha a aparncia abaixo:
Vamos considerar algumas escolhas:
A largura total da pgina ser fxa e com 758px. (para que
no aparea a barra de rolagem inferior em tela com resoluo 800600)
A altura depender do contedo.
A barra lateral em amarelo ter 250px
O ttulo com altura de 200px;
O rodap ter altura 40px;
Vamos l CSS com as medidas:
1
#tudo {
2
width : 758px;
3
background-color: #ffcccc;}
4
#titulopagina {
5
height : 200px;
6
background-color: #00ff00;}
7
#menu {
8
width : 250px;
9
margin: 2px;
10
background-color:yellow;}
11
#conteudo {
12
width : 498px; /* 758px- 250px -10px (margens dos blocos)
13
margin: 2px;
14
background-color: orange;}
15
#rodape {
16
height : 40px;
17
background-color: red;}
Isso far com que todos os blocos estejam na medida correta, po-
rm um abaixo do outro. Para acertar os blocos no lugar iremos acrescen-
tar o oat no contedo e no menu:
1
#menu { ...
2
foat:left;
3
...}
4
/* e */
5
#conteudo {...
6
foat:right;
18
...}
Isso colocar os blocos menu e contedo lado a lado. Porm, o
comportamento do rodap ainda ser errado. Teste no Firefox e no In-
ternet Explorer e veja por si mesmo. Para corrigir isso, utilize o parmetro
clear, que probe qualquer contedo ao lado de um bloco:
1
#rodape {...
2
clear: both; /*probe contedo direita e a
3
esquerda do rodap, o fazendo ir para baixo */
4
...}
H ainda alguns problemas como ajustes de padding dos blocos e
as cores de fundo que no se expandem para baixo no menu e contedo,
eliminar os pontinhos no menu, centralizar o layout, entre outros.
1
body {
2
margin : 0px 0px;
3
text-align:center;}
4
#tudo {
5
text-align : left;
6
...}
7
#menu *, #conteudo * {
8
padding: 0 6px;}
9
#menu ul li {
10
list-style-type:none;}
Alguns atributos de CSS lhe permitem fazer diversas congu-
raes em uma declarao. Por exemplo: suponha que voc queira denir
diversos aspectos da fonte utilizada para tags H1, como segue:
1
H1 {font-style: italic;
2
font-weight: bold;
3
font-size: 18pt;
4
font-family: 'Times Roman';}
Como alternativa a especicar todas essas formataes de fonte
individualmente, voc pode utilizar o atributo font: para deni-las todas de
uma s vez, assim:
1
H1 {font: italic bold 18pt 'Times Roman';}
Note que os diversos valores - itlico, negrito, 18pt e Times Roman
- so separados apenas por um espao em branco. Essas regras abreviadas
certamente poupam espao e tempo de digitao.
UNIDADE 9 - ATRIBUTO
Objetivos da aula
- Apresentar os Atributos
9.1 Tabela de Atributos de CSS

n n nn
nn n
n n
n n nn
nn Pnn n
n n n
L 4
L n

y E
w L
4
L q

y E
w L
L

y E
w L
y E 4
L

y E
w L
w L 4
En n q
n
P vv n
n

T n
y S n x v

T n
S n
n E vn n n
n
@n n n qv HTL
ny T n
nz Tn n
ny Fn
nvn Fn
nw P n n
A x n
@ F
P n
q n
n Dn n
n Dn n n
y T
y
yn P
yy nv
n Tn 4 n
n Tn q
n Tn
n Tn n
n Tn
vw Ex n q q

n E n n
n E n
n

n E q n
n E n
n E
n
n q n
n
n q n n n
n n n n n
xn Ann x
xn Sn n
xnn n
xn Tn
n n
P n
n
vn Ann v n
vy S n vv nvv
w L n
znx P n n
Referncias
CATLOGO NACIONAL DE CURSOS TCNICOS, Eixo Tecnolgico: Produo
Cultural e Design. Disponvel em: <http://portal.mec.gov.br/catalogonct/
et_producao_cultural_design/t_multimidia.php>. Acesso em: 11 de julho
de 2009.
DESENVOLVIMENTO WEB COM XHTML E CSS. Disponvel em: <http://ta-
bleless.com.br/>. Acesso em: 10 de junho de 2009.
ESTILO CSS, O site do webmaster - Tebleless, estilos CSS e muito mais.
Disponvel em: <http://www.estilocss.com.br>. Acesso em: 23 de julho de
2009.
FREEMAN, Elisabeth e FREEMAN, Eric. Use a Cabea HTML com CSS e
XHTML. Alta Books, 2008.
O PAPEL DO WEB DESIGN. Disponvel em: <http://professorathaisprwb.
blogspot.com/2007/08/o-papel-do-web-designer-no-projeto.html>. Aces-
so em: 14 de julho de 2009.
PORTAL O QUE INTERNET? Disponvel em: <http://www.idbrasil.gov.br/
menu_auxiliar/09-o_que_e_internet>. Acesso em: 11 de julho de 2009.
SILVA, Maurcio Samy. Construindo sites com CSS e (X)HTML, sites contro-
lados por folhas de estilo em cascata. Novatec, 2008.
SITE DO MAUJOR, Tutorial sobre XHTML. Disponvel em: <http://maujor.
com/tutorial/xhtml.php>. Acesso em: 10 de junho de 2009.
TECNOCLASTA, Detonando a Tecnologia. Disponvel em: <http://www.tec-
noclasta.com/2007/11/20/setima-aula-blocos-trechos-e-pouca-diagrama-
cao/>. Acesso em: 07 de junho de 2009.
W3SCHOOLS ONLINE WEB TUTORIALS. Disponvel em: <http://www.w3s-
chools.com/>. Acesso em: 07 de junho de 2009.
ZEN GARDEN, A beleza em design CSS. Disponvel em: <http://www.cs-
szengarden.com/tr/portuguese/>. Acesso em: 21 de julho de 2009.
Anexos
Exemplo completo de um site
Arquivo zengarden-sample.html
<!DOCTYPE HTML PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.
w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
<html xml:lang=pt-br xmlns=http://www.w3.org/1999/xhtml><head>
<meta http-equiv=content-type content=text/html; charset=ISO-
8859-1>
<meta name=author content=Dave Shea>
<meta name=keywords content=design, css, cascading, style, sheets,
xhtml, design grfco, w3c, padres web, visual>
<meta name=description content=Uma demonstrao do que pode ser
conseguido visualmente por meio de um design baseado em CSS>
<meta name=robots content=all>
<title>css Zen Garden: A Beleza em Design CSS</title>

<script type=text/javascript></script>
<style type=text/css title=currentStyle>
@import zengarden-sample.css;
</style>
<link rel=Shortcut Icon type=image/x-icon href=http://www.csszen-
garden.com/favicon.ico>
<link rel=alternate type=application/rss+xml title=RSS href=http://
www.csszengarden.com/zengarden.xml>

</head><body id=css-zen-garden>
<div id=container>
<div id=intro>
<div id=pageHeader>
<h1><span>css Zen Garden</span></h1>
<h2><span>A Beleza de um Design <acronym
title=Cascading Style Sheets>CSS</acronym></span></h2>
</div>
<div id=quickSummary>
<p class=p1><span>Uma demonstrao do que
pode ser conseguido visualmente por meio de um design baseado em <acronym
title=Cascading Style Sheets>CSS</acronym>. Escolha qualquer folha de estilo
da lista para carregar um novo design nesta pgina.</span></p>
<p class=p2><span>Faa o download dos arquivos
de exemplo <a href=http://www.csszengarden.com/zengarden-sample.html
title=O cdigo HTML desta pgina que no deve ser modifcado>html</a> e <a
href=http://www.csszengarden.com/zengarden-sample.css title=Este o arqui-
vo CSS desta pgina; o cdigo que voc deve modifcar>css</a>.</span></p>
</div>
<div id=preamble>
<h3><span>A Estrada para a Iluminao</span></h3>
<p class=p1><span>Entulhando uma escura e aterrori-
zante estrada jazem as relquias antigas de elementos especfcos a navegadores,
<acronym title=Document Object Model>DOM</acronym>s incompatveis e fal-
ta de suporte correto ao padro <acronym title=Cascading Style Sheets>CSS</
acronym>.</span></p>
<p class=p2><span>Precisamos limpar as nossas men-
tes das prticas passadas. A iluminao Web foi atingida graas aos esforos in-
cansveis de pessoas como os membros do <acronym title=World Wide Web
Consortium>W3C</acronym>, <acronym title=Web Standards Project>WaSP</
acronym> e dos criadores dos principais navegadores em uso atualmente. </span></
p>
<p class=p3><span>O css Zen Garden convida voc a
relaxar e meditar nas importantes lies do mestres. Comece a ver com clareza.
Aprenda a usar as tcnicas (que ainda sero) consagradas pelo tempo de maneiras
novas e revigorantes.</span></p>
</div>
</div>
<div id=supportingText>
<div id=explanation>
<h3><span>Sobre o Qu Este Site?</span></
h3>
<p class=p1><span>Existe uma clara necessidade de que
artistas grfcos levem o padro <acronym title=Cascading Style Sheets>CSS</
acronym> mais a srio. O Zen Garden tem como alvo entusiasmar, inspirar e enco-
rajar a participao de todos. Para comear, veja alguns dos designs existentes na
lista. Ao clicar em qualquer um deles, a folha de estilo correspondente ser carrega-
da nesta pgina. O cdigo permanece o mesmo; a nica coisa que muda o arquivo
.css externo. Srio!</span></p>
<p class=p2><span>O <acronym title=Cascading Style
Sheets>CSS</acronym> permite o controle completo e total sobre o modo como
um documento renderizado. O nico modo pelo qual esse fato pode ser demons-
trado de uma maneira que entusiasme as pessoas demonstrar quo verdadeira
a realidade do mesmo uma vez que as rdeas so colocadas nas mos daqueles que
so capazes de criar beleza a partir da estrutura. At o dia de hoje, a maior parte
dos exemplos e truques interessantes que podem ser feitos nesta rea foram de-
monstrados por estruturadores e programadores. Artistas grfcos ainda no dei-
xaram a sua marca nessa arena. Isto precisa mudar agora.</span></p>
</div>
<div id=participation>
<h3><span>Participao</span></h3>
<p class=p1><span>Somente artistas grfcos podem
participar. Voc vai modifcar a apresentao desta pgina e, para isto, uma boa
dose de habilidade com <acronym title=Cascading Style Sheets>CSS</acronym>
requerida, embora os arquivos de exemplo estejam comentados o sufciente para
permitir que mesmo novatos com o padro possam us-los como uma base para seus
experimentos. Para dicas e tutoriais avanados sobre <acronym title=Cascading
Style Sheets>CSS</acronym> veja o <a href=http://www.mezzoblue.com/zengar-
den/resources/ title=Uma lista de recursos adicionais relacionados a CSS>guia
de recursos adicionais</a>.</span></p>
<p class=p2><span>Voc pode modifcar a folha de estilo
de qualquer maneira que achar necessria, mas o cdigo <acronym title=HyperText
Markup Language>HTML</acronym>
deve ser deixado como est. Isso pode parecer difcil no comeo se voc nunca tra-
balhou desse modo antes, mas siga a lista de recursos para aprender mais e use os
arquivos de exemplo como guias.</span></p>
<p class=p3><span>Faa o download dos arquivos
de exemplo <a href=http://www.csszengarden.com/zengarden-sample.html
title=O cdigo HTML dest pgina que no deve ser modifcado>html</a> e <a
href=http://www.csszengarden.com/zengarden-sample.css title=Este o arqui-
vo CSS desta pgina; o cdigo que voc deve modifcar>css</a>
para trabalhar localmente. Assim que voc completar a sua obra-prima (e, por favor,
no envie trabalhos incompletos), coloque o arquivo .css resultante em um servidor
web sob o seu controle. <a href=http://www.mezzoblue.com/zengarden/submit/
title=Use o formulrio de contato para nos mandar o seu arquivo CSS>Envie-nos
um link</a> para o arquivo e, se ns nos decidirmos a us-lo, ns obteremos as ima-
gens associadas atravs do mesmo. Submisses fnais sero colocadas em nosso
servidor.</span></p>
<p class=p4><span>Atualizao:
Estamos procurando tradutores. Se voc fuente em ingls e outra linguagem,
esta outra maneira de se envolver com o projeto. Por favor, <a href=http://
www.mezzoblue.com/contact/ title=Envie-nos um e-mail mencionando as lin-
guagens nas quais voc fuente>contate-nos</a> para maiores detalhes. Al-
gumas tradues j esto <a href=http://www.mezzoblue.com/zengarden/
translations/>disponveis</a>. Traduo por <a href=http://www.refectivesur-
face.com/weblog-br/>Ronaldo Ferraz</a>.</span></p>
</div>
<div id=benefts>
<h3><span>Benefcios</span></h3>
<p class=p1><span>Para qu participar? Para obter re-
conhecimento, inspirao, e um recurso ao qual todos ns poderemos nos referir
quanto batalharmos pelo uso de designs baseados em <acronym title=Cascading
Style Sheets>CSS</acronym>.
Iso ainda muito necessrio hoje. Muitos grandes sites esto convertendo suas p-
ginas para este tipo de design, mas a vasta maioria ainda usa cdigo ultrapassado e
invlido. Um dia esta galeria ser uma curiosidade histrica; porm, este dia ainda
no chegou.</span></p>
</div>
<div id=requirements>
<h3><span>Requerimentos</span></h3>
<p class=p1><span>Ns gostaramos de ver o mximo
possvel de <acronym title=Cascading Style Sheets, verso 1>CSS1</acronym>.
O uso de <acronym title=Cascading Style Sheets, verso 2>CSS2</acronym>
deve ser limitado aos elementos suportados pelos navegadores em uso atualmen-
te. O css Zen Garden existe para demonstrar o uso prtico e funcional do padro
<acronym title=Cascading Style Sheets>CSS</acronym> e no para mostrar
os truques mais avanados ainda somente disponveis para os 2% do pblico que
usa navegadores mais modernos. O nico requerimento real, entretanto, o seu
<acronym title=Cascading Style Sheets>CSS</acronym> valide.</span></p>
<p class=p2><span>Infelizmente, criar o design dessa
maneira colocar em evidncia as falhas nas vrias implementaes <acronym
title=Cascading Style Sheets>CSS</acronym> disponveis atualmente. Diferen-
tes navegadores comportam-se de maneira distinta quanto a alguns elementos,
mesmo quando o <acronym title=Cascading Style Sheets>CSS</acronym> v-
lido. Isso pode se converter em uma fonte de frustraes,
principalmente quando uma correo para um navegador atrapalha outro.
Veja a pgina de <a href=http://www.mezzoblue.com/zengarden/resources/
title=Uma lista de recursos adicionais relacionados a CSS>recursos</a> para al-
gumas solues disponveis. Compatibilidade total com todos navegadores ainda
um sonho e ns no esperamos que voc consiga um design perfeitamente preciso
at o ltimo pixel em todas as plataformas. Mesmo assim, teste em todas que con-
seguir. Se o seu design no funciona pelo menos no IE5+/Win e Mozilla (que com-
pem 90% da populao de navegadores), as chances so grandes de que ns no
o aceitaremos.</span></p>
<p class=p3><span>Ns pedimos que voc envie ilustra-
es originais. Por favor, respeite as leis de copyright. Mantenha o material ques-
tionvel ao mnimo: nudez artstica aceitvel; pornografa explcita ser rejeitada
imediatamente.</span></p>
<p class=p4><span>Este um exerccio de aprendi-
zado na mesma medida em que uma demonstrao. Voc manter o copyright
completo de todos os seus grfcos, mas pedimos que voc libere o seu <acronym
title=Cascading Style Sheets>CSS</acronym> sob uma licena Creative Com-
mons idntica <a href=http://creativecommons.org/licenses/sa/1.0/ title=Veja
a informao da licena do css Zen Garden>deste site</a> de modo que outros
possam aprender do seu trabalho.</span></p>
<p class=p5><span>A banda usada por este site
est sendo graciosamente doada por <a href=http://www.mediatemple.net/
lang=en>mediatemple</a>.</span> </p>
</div>
<div id=footer>
<a href=http://validator.w3.org/check/referer
title=Verifque a validade do XHTML deste site>xhtml</a>
<a href=http://jigsaw.w3.org/css-validator/check/refe-
rer title=Verifque a validade do CSS deste site>css</a>
<a href=http://creativecommons.org/licenses/by-
nc-sa/1.0/ title=Veja os detalhes da licena deste site, cortesia de Creative
Commons>cc</a>
<a href=http://bobby.watchfre.com/bobby/bobbyServle
t?URL=http%3A%2F%2Fwww.mezzoblue.com%2Fzengarden%2F&output=S
ubmit&gl=sec508&test= title=Confrma a acessibilidade deste site de
acordo com os regulamentos da U.S. Section 508>508</a>
<a href=http://bobby.watchfre.com/bobby/bobbyServle
t?URL=http%3A%2F%2Fwww.mezzoblue.com%2Fzengarden%2F&output=S
ubmit&gl=wcag1-aaa&test= title=Verifque a acessibilidade deste site
de acordo com as WAI Content Accessibility Guidelines 1>aaa</a>
</div>
</div>
<div id=linkList>
<div id=linkList2>
<div id=lselect>
<h3 class=select><span>Selecione um De-
sign:</span></h3>
<ul>
<li><a href=http://www.csszengarden.
com/tr/portuguese/?cssfle=/213/213.css&page=0 title=Tecla de acesso:
a accesskey=a>Under the Sea!</a> por <a href=http://www.ericstoltz.com/
class=c>Eric Stoltz</a></li>
com/tr/portuguese/?cssfle=/212/212.css&page=0 title=Tecla de acesso: b
accesskey=b>Make ’em Proud</a> por <a href=http://skybased.com/
class=c>Michael McAghon and Scotty Reifsnyder</a></li>
com/tr/portuguese/?cssfle=/211/211.css&page=0 title=Tecla de acesso: c
accesskey=c>Orchid Beauty</a> por <a href=http://www.kevinaddison.com/
class=c>Kevin Addison</a></li>
com/tr/portuguese/?cssfle=/210/210.css&page=0 title=Tecla de acesso: d
accesskey=d>Oceanscape</a> por <a href=http://www.pixel-house.com.au/
class=c>Justin Gray</a></li>
<li><a href=http://www.csszengar-
den.com/tr/portuguese/?cssfle=/209/209.css&page=0 title=Tecla de aces-
so: e accesskey=e>CSS Co., Ltd.</a> por <a href=http://www.benklemm.de/
class=c>Benjamin Klemm</a></li>
<li><a href=http://www.csszengar-
den.com/tr/portuguese/?cssfle=/208/208.css&page=0 title=Tecla de
acesso: f accesskey=f>Sakura</a> por <a href=http://www.re-bloom.com/
class=c>Tatsuya Uchida</a></li>
g accesskey=g>Kyoto Forest</a> por <a href=http://rpmdesignfactory.com/
class=c>John Politowski</a></li>
h accesskey=h>A Walk in the Garden</a> por <a href=http://users.skynet.be/
bk316398/temp.html class=c>Simon Van Hauwermeiren</a></li>
</ul>
</div>
<div id=larchives>
<h3 class=archives><span>Arquivos:</span></
h3>
<ul>
com/tr/portuguese/?cssfle=/001/001.css&page=1 title=View next set of de-
signs. AccessKey: n accesskey=n><span class=accesskey>n</span>ext designs
</a></li>
<li><a href=http://www.mezzoblue.
com/zengarden/alldesigns/ title=veja todas as submisses feitas para o Zen Gar-
den. Tecla de acesso: v accesskey=v><span class=accesskey>V</span>eja to-
dos designs</a></li>
</ul>
</div>
<div id=lresources>
<h3 class=resources><span>Recursos:</
span></h3>
<ul>
com/001/001.css title=Veja o cdigo do arquivo CSS para o design atual. Te-
cla de acesso: u accesskey=v>Veja o cdigo <acronym title=Cascading Style
Sheets>CSS</acronym> do design at<span class=accesskey>u</span>al</a></
li> <li><a href=http://www.mezzoblue.
com/zengarden/resources/ title=Links to great sites with information on using
CSS. Tecla de acesso: r accesskey=r><span class=accesskey>R</span>ecursos
<acronym title=Cascading Style Sheets>CSS</acronym></a></li>
<li><a href=http://www.me-
zzoblue.com/zengarden/faq/ title=Questes comuns. Tecla de acesso: q
accesskey=q><acronym title=Frequently Asked Questions>FA<span
class=accesskey>Q</span></acronym></a></li>
com/zengarden/submit/ title=Envie o seu prprio arquivo CSS. Tecla de acesso: s
accesskey=s>Envie <span class=accesskey>s</span>eu design</a></li>
com/zengarden/translations/ title=Veja as verses traduzidas desta pgina.
Tecla de acesso: t accesskey=t><span class=accesskey>T</span>radues</
a></li>
</ul>
</div>
</div>
</div>
</div>

<div id=extraDiv1><span></span></div><div id=extraDiv2><span></span></
div><div id=extraDiv3><span></span></div>
<div id=extraDiv4><span></span></div><div id=extraDiv5><span></span></
div><div id=extraDiv6><span></span></div>
</body></html>
Arquivo zengarden-sample.css
/* css Zen Garden default style v1.02 */
/* css released under Creative Commons License - http://creativecommons.org/li-
censes/by-nc-sa/1.0/ */
/* This fle based on Tranquille by Dave Shea */
/* You may use this fle as a foundation for any new work, but you may fnd it easier
to start from scratch. */
/* Not all elements are defned in this fle, so youll most likely want to refer to the
xhtml as well. */
/* Your images should be linked as if the CSS fle sits in the same folder as the ima-
ges. ie. no paths. */
/* basic elements */
html {
margin: 0;
padding: 0;
}
body {
font: 75% georgia, sans-serif;
line-height: 1.88889;
color: #555753;
background: #ff url(blossoms.jpg) no-repeat bottom right;
margin: 0;
padding: 0;
}
p {
margin-top: 0;
text-align: justify;
}
h3 {
font: italic normal 1.4em georgia, sans-serif;
letter-spacing: 1px;
margin-bottom: 0;
color: #7D775C;
}
a:link {
font-weight: bold;
text-decoration: none;
color: #B7A5DF;
}
a:visited {
font-weight: bold;
text-decoration: none;
color: #D4CDDC;
}
a:hover, a:active {
text-decoration: underline;
color: #9685BA;
}
acronym {
border-bottom: none;
}
/* specifc divs */
#container {
background: url(zen-bg.jpg) no-repeat top left;
padding: 0 175px 0 110px;
margin: 0;
position: relative;
}
#intro {
min-width: 470px;
}
/* using an image to replace text in an h1. This trick courtesy Douglas Bowman,
http://www.stopdesign.com/articles/css/replace-text/ */
#pageHeader h1 {
background: transparent url(h1.gif) no-repeat top left;
margin-top: 10px;
width: 219px;
height: 87px;
foat: left;
}
#pageHeader h1 span {
display:none
}
#pageHeader h2 {
margin-top: 58px;
width: 200px;
height: 18px;
foat: right;
}
#pageHeader h2 span {
display:none
}
#pageHeader {
padding-top: 20px;
}
#quickSummary {
clear:both;
margin: 20px 20px 20px 10px;
width: 160px;
foat: left;
}
#quickSummary p {
font: italic 10pt/22pt georgia;
text-align:center;
}
#preamble {
clear: right;
padding: 0px 10px 0 10px;
}
#supportingText {
padding-left: 10px;
}
#footer {
text-align: center;
}
#footer a:link, #footer a:visited {
margin-right: 20px;
}
#linkList {
margin-left: 600px;
position: absolute;
top: 0;
right: 0;
}
#linkList2 {
font: 10px verdana, sans-serif;
background: transparent url(paper-bg.jpg) top left repeat-y;
padding: 10px;
margin-top: 150px;
width: 130px;
}
#linkList h3.select {
margin: 10px 0 5px 0;
width: 97px;
height: 16px;
}
#linkList h3.select span {
display:none
}
#linkList h3.favorites {
width: 60px;
height: 18px;
}
#linkList h3.favorites span {
display:none
}
#linkList h3.archives {
width:57px;
height: 14px;
}
#linkList h3.archives span {
display:none
}
#linkList h3.resources {
width:63px;
height: 10px;
}
#linkList h3.resources span {
display:none
}
#linkList ul {
margin: 0;
padding: 0;
}
#linkList li {
line-height: 2.5ex;
background: transparent url(cr1.gif) no-repeat top center;
display: block;
padding-top: 5px;
margin-bottom: 5px;
list-style-type: none;
}
#linkList li a:link {
color: #988F5E;
}
#linkList li a:visited {
color: #B3AE94;
}
#extraDiv1 {
background: transparent url(cr2.gif) top left no-repeat;
position: absolute;
top: 40px;
right: 0;
width: 148px;
height: 110px;
}
.accesskey {
text-decoration: underline;
}
Glossrios de termos de Internet
(Retirado do Ajuda do www. brofce.org)
Se voc for novato na Internet, ser confrontado com termos estra-
nhos: navegador, marcador, e-mail, home page, mecanismo de pesquisa e
muitos outros. Para facilitar seus primeiros passos, este glossrio descreve
algumas das terminologias mais importantes que voc encontrar na Inter-
net, na intranet, em mensagens e em notcias.
Quadros
Os quadros so teis para projetar o layout de pginas HTML. O
BrOfce.org usa quadros utuantes nos quais possvel posicionar ob-
jetos, tais como: guras, arquivos de lmes e sons. O menu de contexto
do quadro mostra as opes para restaurar ou editar os contedos dos
quadros. Alguns desses comandos tambm aparecem em Editar - Objeto
quando o quadro selecionado.
FTP
FTP refere-se a File Transfer Protocol, o protocolo padro para
transferncia de arquivos na Internet. Um servidor FTP um programa
em um computador conectado Internet que armazena os arquivos a se-
rem transmitidos por meio do FTP. O FTP responsvel pela transmisso e
pelo download de arquivos da Internet, ao passo que o HTTP (Hypertext
Transfer Protocol) permite congurar a conexo e transferir dados entre os
servidores e clientes WWW.
HTML
HTML (Hypertext Markup Language) consiste em uma linguagem
de cdigo de documento, utilizada como o formato de arquivo para docu-
mentos WWW. Deriva-se de SGML e integra texto, grcos, vdeos e som.
Para digitar diretamente comandos HTML, por exemplo, ao fazer
exerccios de um dos vrios livros HTML disponveis, lembre-se de que p-
ginas HTML so arquivos de texto puro. Salve o documento como tipo de
documento Texto e escolha a extenso de nome de arquivo .HTML. Certi-
que-se de que no haja tremas ou outros caracteres especiais do conjunto
de caracteres estendidos. Para reabrir esse arquivo no BrOfce.org e editar
o cdigo HTML, preciso carreg-lo com o tipo de arquivo Texto e no com
o tipo de arquivo pginas da Web.
H vrias referncias na Internet que oferecem uma introduo
linguagem HTML.
HTTP
O Hypertext Transfer Protocol consiste em um registro de transmis-
so de documentos WWW entre servidores WWW (hosts) e navegadores
(clientes).
Hyperlink
Os hyperlinks so referncias cruzadas, realados no texto em v-
rias cores e ativados por meio de um clique no mouse. Com eles, os leitores
podem saltar para uma informao especca dentro de um documento,
bem como para informaes relacionadas em outros documentos.
O BrOfce.org permite que voc atribua hyperlinks a texto e qua-
dros de texto e guras (consulte o cone Caixa de Dilogo do Hyperlink na
barra de status).
Mapa de imagem
Um Mapa de Imagem um quadro de texto ou uma gura sens-
vel a uma referncia. Voc pode clicar em reas denidas de uma gura
ou quadro de texto para acessar um destino (URL) que esteja vinculado
rea. As reas de referncia, junto com os URLs vinculados e com o texto
correspondente exibido quando se pousa o ponteiro do mouse sobre elas,
so denidas no Editor do Mapa de Imagem.
Existem dois tipos diferentes de Mapas de imagem. O Mapa de
imagem no lado cliente avaliado no computador cliente, que carregou
a imagem grca da Internet, ao passo que o Mapa de imagem no lado
servidor avaliado no computador servidor, que fornece a pgina HTML
na Internet. Na avaliao no servidor, um clique no Mapa de imagem envia
as coordenadas relativas do cursor dentro da imagem para o servidor e um
programa dedicado responde. Na avaliao do cliente, um clique em um
ponto de acesso denido no Mapa de imagem ativa o URL, como se ele
fosse um link de texto normal. O URL aparece abaixo do ponteiro do mou-
se quando o usurio passa o cursor sobre o Mapa de imagem.
Como os Mapas de imagem podem ser usados de diferentes ma-
neiras, podem ser armazenados em diferentes formatos.
Formatos de Mapas de Imagem
Os Mapas de imagem se dividem basicamente entre aqueles anali-
sados no servidor (ou seja, seu provedor de Internet) e aqueles analisados
no navegador da Web do computador do leitor.
Mapas de Imagem do Servidor
Os Mapas de Imagem do Servidor so exibidos para o leitor como
uma gura ou um quadro na pgina. Clique no Mapa de Imagem com o
mouse para enviar ao servidor as coordenadas da posio relativa. Com
o auxlio de um programa extra, o servidor ento determinar a prxima
etapa a ser seguida. H vrios mtodos incompatveis para denir este pro-
cesso; os dois mais comuns so:
Servidor W3C (CERN) HTTP (Tipo de Formato: MAP - CERN)
Servidor NCSA HTTP (Tipo de formato: MAP - NCSA)
O BrOfce.org cria mapas de imagem para ambos os mtodos. Selecione o
formato na lista Tipo de arquivo da caixa de dilogo Salvar como do Editor
de mapa de imagem. So criados arquivos de Mapas individuais que voc
deve carregar no servidor. necessrio perguntar ao provedor ou ao admi-
nistrador de rede que tipo de mapas de imagem podem ser colocados do
servidor, e como acessar o programa de avaliao.
Mapa de imagem do Cliente
A rea da gura ou do quadro na qual o leitor pode clicar indica-
da por um link de URL, que aparecer quando o mouse for passado sobre
esta rea. O Mapa de imagem armazenado em uma camada abaixo da
gura e contm informaes sobre as regies referenciadas. A nica des-
vantagem dos Mapas de imagem no lado cliente que os navegadores da
Web mais antigos no podem l-los; no entanto, essa desvantagem ser
solucionada a tempo.
Ao salvar o Mapa de Imagem, selecione o tipo de arquivo SIP
Mapa de Imagem StarView. Esta ao salva o Mapa de Imagem direta-
mente em um formato aplicvel a todas as guras ou quadros ativos do
documento. Contudo, para usar o Mapa de Imagem somente na gura
ou quadro de texto atual, no necessrio salv-los em um formato es-
pecial. Depois de denir as regies, apenas clique em Aplicar. Nada mais
necessrio. Os Mapas de imagem do cliente salvos em formato HTML so
inseridos diretamente na pgina em cdigo HTML.
Java
A linguagem de programao Java uma linguagem de programa-
o desenvolvida pela Sun Microsystems Inc. (http://www.sun.com)
independente de plataforma que especialmente adequada para
ser utilizada na internet. Pginas Web e aplicaes programadas com ar-
quivos de classes Java podem ser utilizadas em todos os sistemas opera-
cionais modernos. Programas utilizando a linguagem de programao Java
so normalmente desenvolvidos em um ambiente de desenvolvimento Java
e ento compilados para um byte-code.
Plug-in
As extenses que fornecem funes adicionais nos navegadores da
Web so chamados plug-ins.
Plug-In um termo usado em vrios contextos:
Plug-ins existentes no site BrOfce.org
Voc notar no BrOfce.org que a barra Formatao muda depois
de determinadas operaes. Por exemplo: se voc inserir uma frmula no
documento de texto, voc ver cones para a edio da frmula, na ver-
dade os mesmos cones que voc v em documentos de frmula. Neste
sentido, referimos-nos frmula como um plug-in dentro do documento
de texto.
Utilizar plug-ins para estender seus programas
Plug-ins, de uma forma geral, so adies de software a determina-
das aplicaes que oferecem uma maior gama de funes. Frequentemen-
te, ltros de importao e de exportao para vrios formatos de arquivo
so armazenados como plug-ins em um diretrio especco.
Extenses do navegador da Web Netscape, produzidas pela Nets-
cape Communication Corporation, tambm so chamadas de plug-ins. So
programas externos, provenientes principalmente do campo multimdia,
que estabelecem comunicao com o navegador atravs de interfaces pa-
dronizadas. possvel vincular esses plug-ins a documentos do BrOfce.
org.
Todos os plug-ins (de 32 bits) do Netscape instalados no seu siste-
ma so reconhecidos automaticamente pelo BrOfce.org.
Proxy
Um proxy um computador da rede que atua como um tipo de rea
de transferncia para a transferncia de dados. Sempre que voc acessa a
Internet a partir de uma rede da empresa e solicita uma pgina da Web
que j tenha sido lida por um colega, o proxy capaz de exibir a pgina de
maneira muito mais rpida, desde que ela ainda esteja na memria. Para
isso, somente necessrio vericar se a pgina armazenada no proxy a
ltima verso. Nesse caso, no ser necessrio baixar a pgina da Internet,
o que seria muito mais lento, mas apenas baix-la diretamente do proxy.
SGML
SGML refere-se a Standard Generalized Markup Language. SGML
baseada na idia de que os documentos possuem elementos estruturais e
semnticos que podem ser descritos sem que se faa referncia maneira
como eles devem ser exibidos. A exibio real desse documento pode va-
riar, dependendo da mdia de sada e das preferncias de estilo. Em textos
estruturados, a SGML no somente dene estruturas (na DTD = Document
Type Denition) como tambm garante que elas sejam usadas de forma
consistente.
HTML um aplicativo especializado de SGML. Isso signica que a
maioria dos navegadores da Web oferece suporte apenas a uma faixa limi-
tada de padres de SGML, e praticamente todos os sistemas compatveis
com SGML podem produzir pginas HTML atraentes.
Mecanismos de pesquisa
Um mecanismo de pesquisa (busca) um servio da Internet que
usado para explorar uma vasta quantidade de informaes por meio de
palavras-chave.
Tags
As pginas HTML contm determinadas instrues estruturais e
de formatao, denominadas tags (etiquetas). Tags consistem em palavras
de cdigos contidas entre sinais de maior e menor na linguagem HTML
de descrio do documento. Muitas tags contm texto ou referncias a
hyperlinks entre os smbolos de abertura e de fechamento. Por exemplo: os
ttulos so identicados pelas tags <h1> no incio do ttulo e por </h1> no
nal do ttulo. Algumas tags aparecem sozinhas, tais como <br> (que indi-
ca quebra de linha) ou <img ...> (que indica um vnculo para uma gura).
URL
O URL (Uniform Resource Locator) exibe os endereos de um do-
cumento ou servidor na Internet. A estrutura geral de um URL varia de
acordo com o tipo deste, mas geralmente utiliza um formato :/servio://
nomeservidor:porta/caminho/pgina#marcador, Embora nem todos os ele-
mentos sejam sempre obrigatrios. Um URL pode ser um endereo FTP,
um endereo WWW (HTTP), um endereo de arquivo ou um endereo de
e-mail.
Fonte: Glossrio de termos da Internet BROfce.org
Mais dados no cabealho
No cabealho ou <head>, podemos colocar uma srie de infor-
maes sobre o documento. Com estes dados, o navegador e os sistemas
de busca podem entender melhor o contedo do documento. O ttulo do
documento a principal informao do cabealho. Porm, com a tag meta
podemos denir uma srie de outras informaes teis:
1
<meta name=author content= e-Tec Brasil /> O autor do documento.
<meta name=copyright content=
2009 e-Tec /> Questes de copyright
<meta name=keywords content= trabalho, mudanas, java
/> Importantssimo: palavras chave para o motor de busca do
Google e Yahoo.
2
<meta name= description content= Aulas sobre XHTML e CSS
/> Descrio do contedo da pgina.

3354 HTML XHTML Css

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

3354 HTML XHTML Css

Enviado por

Direitos autorais:

Formatos disponíveis

Tcnico em Informtica

UNIDADE 8 - DIAGRAMAO COM

Você também pode gostar