apostila - web desing

Prévia do material em texto

Unidade I - Design na Web ................................................................... 4 
Introdução ao Web Design; .......................................................................... 4 
Front-End............................................................................................... 4 
A importância do planejamento da navegação do site. .................................... 5 
Definições dos objetivos ............................................................................... 5 
Planejamento do conteúdo ............................................................................ 6 
Arquitetura da informação ............................................................................ 6 
Design de interface ...................................................................................... 6 
Implementação ............................................................................................ 7 
Unidade II - O webdesigner e a padronização. .................................... 7 
Princípios básicos para boa navegabilidade .................................................... 7 
Uma forma de pesquisar por conteúdo .......................................................... 7 
Seções e subseções ...................................................................................... 8 
Utilitários ..................................................................................................... 8 
Acessibilidade, usabilidade e funcionalidade na Web .......................... 8 
Acessibilidade ............................................................................................... 8 
Alguns exemplos que podem ser colocados no site ......................................... 9 
Usabilidade .................................................................................................. 9 
Funcionalidade e Usabilidade ...................................................................... 10 
Unidade III – Contextos da web. ........................................................ 11 
Mídias Sociais ............................................................................................. 11 
Games Web ............................................................................................... 12 
Web Móvel ................................................................................................. 12 
Microcomputador ....................................................................................... 12 
Celular ....................................................................................................... 13 
Web Multiplataforma .................................................................................. 13 
Unidade IV – Contextos da web. ......................................................... 14 
Publicidade na Web .................................................................................... 14 
Unidade V e VI – XHMTL e a criação de páginas. ................................ 17 
XHMTL e a criação de páginas ..................................................................... 17 
Histórico e versões do HTML ....................................................................... 17 
Dezembro de 1997 ..................................................................................... 18 
Abril de 1998 ............................................................................................. 18 
 
 
 
Dezembro de 1999 ..................................................................................... 19 
Maio de 2000 ............................................................................................. 19 
Janeiro de 2008 ......................................................................................... 19 
Estrutura de páginas e uso de TAGs ............................................................ 19 
Criação de formulários ................................................................................ 30 
Unidade VII e VIII – CSS e aplicação de Estilos. ................................ 32 
Folhas de estilo - CSS ................................................................................. 32 
O uso de folhas de estilo permite: ............................................................... 33 
Regras das folhas de estilos: ....................................................................... 34 
Uma regra simples do CSS constitui-se de duas partes: ................................ 34 
O seletor - o elemento de ligação entre o documento HTML e o estilo. .......... 34 
O código a ser aplicado em uma página é: ................................................... 35 
O código a ser aplicado em cada página é: .................................................. 36 
Precedência ............................................................................................... 37 
Ordem de precedência ................................................................................ 37 
Arquivos externos: exemplo de formatação .................................................. 37 
Como definir a cor de fundo e fixando a imagem de fundo da página: ........... 38 
A definição geral de estilo inclui os 3 tipos possíveis de links: ........................ 38 
Exemplo de arquivo de estilo externo .......................................................... 39 
Como usar ................................................................................................. 42 
Importância do CSS .................................................................................... 42 
Aplicação de títulos ..................................................................................... 43 
Ênfase ....................................................................................................... 44 
Colocação dos elementos em CSS - caixas ................................................... 44 
BIBLIOGRAFIA ........................................................................................... 45 
 
 
 
Unidade I - Design na Web 
Introdução ao Web Design; 
 
Como o próprio nome induz, Web Design é o design criado para elaboração 
de sites para web. Seu principal profissional é o Web designer responsável por 
pensar em como os usuários vão interagir com o site, quais informações devem 
ter ali, onde cada elemento deve estar posicionado, quais cores e fontes 
tipográficas utilizar, etc. 
Sendo um grande gestor no processo de criação. 
Por ser um campo vasto, existem vários tipos de especialistas dentro do Web 
Design, como por exemplo: arquitetos de informação, especialistas em User 
Experience (Experiência do Usuário), designers de interfaces, que se 
preocupam muito mais com a parte visual e gráfica e, desenvolvedores Front-
End. 
Back-End 
Os sites que utilizam a arquitetura cliente/servidor, onde a informação vem 
sempre de uma base de dados armazenada no servidor. 
A parte do projeto que é executada no servidor chama-se Back-End e utiliza 
linguagens de programação como PHP, Java, C#, ou qualquer linguagem de 
servidor que acesse base de dados. 
Front-End 
Chamamos de desenvolvimento Front-End a criação do layout e a manipulação 
dos elementos visuais em um site. 
Para esta parte do projeto, usamos as linguagens de marcação tais como 
HTML, XHTML, CSS e Javascript, sendo esse trabalho executado no navegador 
(cliente). 
 
 
 
Assim, o Web Designer trabalha mais diretamente com o desenvolvimento 
Front-End, usando programas de editoração de imagens, como photoshop, e de 
editoração para web como dreamweaver. 
A importância do planejamento da navegação do site. 
 
O site de uma empresa é seu cartão de visita que apresenta sua área de 
negócios e sua identidade no mercado, ou ainda, como uma vitrine virtual em 
que é possível, em muitos casos, expor e vender seus produtos. Projetar, criar 
e manter um site não é uma tarefa simples. 
Há na internet milhões de sites que oferecem centenas de informações 
semelhantese criar mais um para oferecer a mesma coisa, não atrai a atenção 
do usuário. Por isso, em tempos de Web 2.0 é preciso inovar, ser diferente e 
oferecer o que o usuário quer, sem, no entanto, incomodar ou prejudicar sua 
experiência na internet, pois ele está a apenas um clique de mouse para 
abandonar um site e encontrar outro que o agrade. 
Antes de publicar um site na internet ou mesmo começar a construir um, é 
importante que se faça um planejamento com todas as partes interessadas 
para melhor organizar cada etapa de desenvolvimento do projeto. 
Definições dos objetivos 
 
A primeira etapa na definição dos objetivos é a reunião com o cliente para 
definir o que ele pretende com o site. 
Nesta reunião, que é chamada de Briefing, devemos definir uma série de 
parâmetros e principalmente os objetivos que o cliente que alcançar com o site. 
Feito isso devemos fazer uma reunião interna na empresa para definir as 
etapas de desenvolvimento do projeto. 
Como primeira etapa devemos criar um planejamento completo do site, onde 
normalmente a equipe de desenvolvimento se reúne com seus stakeholders 
(interessados) para discutir ideias e opiniões sobre o projeto. 
 
 
 
Nesta reunião é importante definir e detalhar os objetivos do projeto, pois com 
bases neles é que várias outras decisões importantes para o sucesso do projeto 
são tomadas. 
Uma vez definidos os objetivos, é o momento de observar o cenário atual em 
que o site estará inserido. 
Podemos utilizar a estratégia de visitar o site dos concorrentes para analisar 
certos comportamentos do mercado e buscar algum diferencial que atraia mais 
atenção do usuário. 
E, depois dos objetivos definidos e uma visão geral do mercado, chega-se o 
momento de pensar em alguns pontos importantes como: o público alvo, onde 
encontrá-lo e como se pretende atingir este público. 
 Planejamento do conteúdo 
O conteúdo é a parte mais importante em um projeto de site, pois na maioria 
dos casos, o sucesso do projeto depende em grande parte da sua qualidade. 
Por isso, definir, planejar e criar conteúdo deve ser parte de uma estratégia 
importantíssima no projeto, pois é ele que será o canal de comunicação com o 
usuário para passar a mensagem que queremos transmitir. 
Arquitetura da informação 
Considerando os objetivos do site e o conteúdo que estará disponível, faz-se 
nessa etapa uma categorização das informações e cria-se uma hierarquia do 
conteúdo de forma a privilegiar as informações mais importantes, colocando em 
destaque os conteúdos mais relevantes para o público, facilitando assim ao 
máximo a busca pelas informações que ele deseja dentro do site. 
Design de interface 
O design da interface preocupa-se com a interação humano-computador do 
site. 
Nesta etapa projetamos uma estrutura gráfica que crie uma identidade única 
para o site, acolha o conteúdo da arquitetura da informação, preveja cada 
detalhe das funcionalidades de navegação e que seja, no mínimo, agradável ao 
usuário. O objetivo é criar uma interface que atenda a todas as exigências 
possíveis. 
 
 
 
Muitos webdesigners, nessa fase de desenvolvimento, utilizam uma ferramenta 
chamada wireframe que permite visualizar o site antes mesmo de começar a 
construí-lo.. 
Implementação 
A implementação consiste no trabalho de execução em si. Montar o site de 
acordo com o que foi projetado no wireframe e definido nas fases anteriores. 
Temos assim, a criação das páginas com seus conteúdos, imagens, vídeos e 
outras mídias quando necessário. 
 
Unidade II - O webdesigner e a padronização. 
Princípios básicos para boa navegabilidade 
 
Cinco elementos que devem obrigatoriamente estar presentes em um site: 
Identificação ou logotipo do site 
Geralmente no canto superior esquerdo da tela tal qual na mídia impressa, 
sendo o primeiro local de importância em uma diagramação; 
Uma forma rápida e fácil de voltar ao início (navegação) 
 
Um botão ou link assim em todas as páginas, garantem ao usuário que por 
mais perdido que ele possa estar, sempre há uma forma de voltar ao início. Há 
também uma convenção de que o logotipo seja um atalho para o início do site; 
Uma forma de pesquisar por conteúdo 
 
Dependendo do tamanho e da complexidade do site, procurar o que precisamos 
através da navegação é uma tarefa dispendiosa, e para tanto, todo site deve 
possuir uma caixa de busca ou um link para uma página de pesquisa por 
conteúdo; 
http://www.hiperbytes.com.br/geral/diferenca-entre-webdesigner-e-webmaster/
 
 
 
Seções e subseções 
 
Uma boa hierarquia na arquitetura da informação é fundamental para auxiliar o 
usuário a encontrar a informação que deseja; 
Utilitários 
 
Links que oferecem informações importantes, mas que não façam parte da 
hierarquia de conteúdo do site. Alguns exemplos de links utilitários são: 
“Mapa do site”, “Ajuda”, “Sobre” e “Entre em contato”. 
 
Acessibilidade, usabilidade e funcionalidade na Web 
Acessibilidade 
 
A expressão acessibilidade Web refere-se a prática inclusiva de fazer websites 
que possam ser utilizados por todas as pessoas que tenham deficiência ou não. 
Quando os sites são corretamente concebidos, desenvolvidos e editados, todos 
os usuários podem ter igual acesso à informação e as suas funcionalidades. 
As necessidades da "acessibilidade web" 
Visual 
Deficiências visuais, incluindo cegueira, vários tipos comuns de baixa 
visão e baixa acuidade visual, vários tipos de daltonismo; 
Motora 
Dificuldade ou impossibilidade de utilizar as mãos, incluindo tremores, 
lentidão muscular, perda ou baixo controle muscular, entre outras, 
devidas a condições tais como doença de Parkinson, distrofia muscular, 
paralisia cerebral, acidente vascular cerebral; 
Auditivos 
Surdez ou deficiência auditiva, incluindo indivíduos com pouca audição; 
Convulsões 
 
 
 
Convulsão visual causada pelos efeitos visuais tais como pisca pisca. 
Cognitiva 
Deficiência de desenvolvimento, dificuldades de aprendizagem; 
Alguns exemplos que podem ser colocados no site 
 
Quando o texto e as imagens são grandes e/ou passíveis de ampliação a leitura 
e compreensão do conteúdo torna-se mais fácil para os usuários com visão 
deficiente. 
Quando os links são sublinhados (ou diferenciados), tem-se a garantia de que 
usuários daltônicos sejam capazes de diferenciá-los. 
Quando os links e áreas clicáveis são grandes isso ajuda os usuários que não 
podem controlar um mouse com precisão. 
Quando as páginas são codificadas para os usuários poderem navegar 
utilizando somente o teclado ou uma única tecla de acesso ajuda os usuários 
que não pode utilizar um mouse ou até mesmo um teclado padrão. 
Quando vídeos são legendados ou são disponibilizados com versões em 
linguagem de sinais, os usuários surdos ou com dificuldade de audição podem 
entender o vídeo. 
Quando o conteúdo é escrito em linguagem simples e ilustrado com gráficos e 
animações instrucionais os usuários com dislexia e dificuldades de 
aprendizagem são capazes de compreender melhor o conteúdo. 
Quando os sites são corretamente construídos e mantidos, as necessidades de 
todos esses usuários podem ser acomodadas, sem causar impacto na 
usabilidade do site para os demais usuários. 
Usabilidade 
 
Termo usado para definir a facilidade com que as pessoas podem empregar 
uma ferramenta ou objeto a fim de realizar uma tarefa específica e importante. 
 
 
 
A usabilidade pode também se referir aos métodos de mensuração da 
usabilidade e ao estudo dos princípios por trás da eficiência percebida de um 
objeto. 
Na Interação Humano-computador e na Ciência da Computação, usabilidade 
normalmente se refere à simplicidade e facilidade com que uma interface, um 
programa de computador ou um website pode ser utilizado. 
A usabilidade em meios digitais, como na internet é definida como a 
necessidade de entender as necessidades dos interagentes no ambiente virtual, 
facilitandosua compreensão do conteúdo disponibilizado. 
Até quem tem dificuldade motora ou problemas de navegação por falta de 
conhecimento técnico poderá alcançar a informação, se os processos de 
usabilidade forem respeitados, deixando o usuário da página web mais à 
vontade, mais independente. 
Antes, porém, de abordar o tema ou a definição de Cultura Organizacional, 
apresentamos uma breve consideração sobre Cultura. 
Entende-se Cultura como sendo um conjunto de variáveis que abrangem 
filosofias, crenças, normas, valores, moral, hábitos, costumes, sentimentos, 
artes e conhecimentos de um determinado grupo social ou de uma nação. Há, 
entre estas variáveis, um inter-relacionamento. 
Ao se influenciarem mutuamente, influenciam também o comportamento de 
indivíduos e grupos, dando, assim, subsídios para entender-se a Cultura 
Organizacional. 
Funcionalidade e Usabilidade 
 
Funcionalidade 
É tudo aquilo que um produto pode fazer. Provar a funcionalidade significa 
assegurar que o produto funciona tal como foi especificado. 
 
 
 
Usabilidade 
É como as pessoas utilizam um produto. Provar a usabilidade significa 
assegurar de que as pessoas saibam utilizar as funcionalidades para cumprir 
seus objetivos. 
Unidade III – Contextos da web. 
Mídias Sociais 
 
As "ferramentas de mídias sociais" são sistemas projetados para possibilitar a 
interação social a partir do compartilhamento e da criação colaborativa de 
informação nos mais diversos formatos. Eles possibilitaram a publicação de 
conteúdos por qualquer pessoa, baixando a praticamente zero o custo de 
produção e distribuição. Antes esta atividade se restringia a grandes grupos 
econômicos. 
Elas abrangem diversas atividades que integram tecnologia, interação social e a 
construção de palavras, fotos, vídeos e áudios. 
Esta interação e a maneira na qual a informação é apresentada dependem nas 
várias perspectivas da pessoa que compartilhou o conteúdo, visto que este é 
parte de sua história e entendimento de mundo. 
As mídias sociais têm várias características que as diferem fundamentalmente 
das mídias tradicionais, como jornais, televisão, livros ou rádio. 
Antes de tudo, as mídias sociais dependem da interação entre pessoas, porque 
a discussão e a integração entre elas constroem conteúdo compartilhado, 
usando a tecnologia como condutor. 
No contexto de marketing de internet, mídias sociais se referem a grupos com 
diversas propriedades, sempre formados e alimentados pelos usuários, como 
fóruns, blogs, sites de compartilhamento de vídeos e sites de relacionamentos. 
 
 
 
Games Web 
 
É impossível ignorar o impacto que as mídias sociais trouxeram para a internet 
e para a sociedade nos últimos anos. 
Twitter e Facebook e as novas redes que estão surgindo, fazem parte de nosso 
cotidiano, permitindo que estejamos sempre conectados. 
As mídias sociais permitem uma interação constante entre as pessoas, e grande 
parte desta interação é realizada através de games. 
A participação de jogadores de todas as idades cuidando de suas fazendas e 
cidades nas redes sociais indica como os jogos sociais estão revolucionando 
nosso modo de interagir. 
O jogo passou a ser a forma de se ficar conectado por mais tempo dentro da 
rede social, fazendo com que todos se comuniquem o tempo todo. 
Web Móvel 
 
Internet móvel pode ser definida como o uso de tecnologias de comunicação 
sem fio (wireless) para acesso a informações e aplicações Web a partir de 
dispositivos móveis, como celulares ou handhelds. 
A Internet móvel, pelas suas características, tem aspectos bem diferentes da 
Internet tradicional, tipicamente acessada por desktops. 
O acesso móvel apresenta peculiaridades que devem ser compreendidas e 
devidamente exploradas. 
Microcomputador 
 
Um desktop comum possui uma quantidade de memória suficiente para a 
imensa maioria das aplicações Web, um processador igualmente satisfatório, 
um monitor de alta resolução, interface de acesso gráfico via mouse e teclado 
ergonômico e multifuncional. 
 
 
 
Além disso, a maioria dos computadores de mesa e notebooks com acesso à 
Internet possuem uma velocidade que permite exibir sites diversos com 
rapidez, mesmo os que possuem muitas imagens. 
Celular 
 
Um celular, ao contrário, é bastante restrito em termos de potência de 
computação e interfaces (o que está mudando rapidamente nos últimos 
tempos): processadores de pouca capacidade, memória bem pequena, uma tela 
e teclado diminutos. 
E a capacidade de banda é limitada (embora evoluindo rapidamente), com 
pouca estabilidade de conexão e disponibilidade pouco previsível. 
 
Com isso essa nova tecnologia, que ganha espaço a cada momento, está 
passado por uma reformulação e a cada dia apresentam novas formas de uso 
da web. 
Web Multiplataforma 
 
A crescente popularização do acesso à internet e a diversidade de dispositivos 
portáteis estão criando um novo panorama de comportamento. 
Cada vez mais as pessoas sentem a necessidade de estarem o tempo todo 
conectadas. São smartphones, tablets, computadores, notebooks, consoles de 
jogos e TVs, entre outros, possibilitando esse contato frequente com a rede. 
Desktops e laptops ainda são as formas mais utilizadas para acessar a internet, 
mas as mesmas pesquisas também apontam que os jovens utilizam menos 
computadores e mais smartphones, tablets e consoles de videogame. 
Em um mundo cada vez mais conectado e com tantas plataformas disponíveis, 
o design para web se vê diante de um grande desafio: desenvolver projetos 
que atendam às necessidades de todos os usuários, independentemente do tipo 
de suporte que ele esteja utilizando. 
 
 
 
Como desenvolver atendendo às boas práticas de usabilidade, interatividade, 
conteúdo e agilidade no carregamento da página, para telas que podem variar 
das dimensões de um smartphone até a de uma tv de 72 polegadas, por 
exemplo? 
As técnicas e boas práticas de design aliadas às novas linguagens de 
programação, prática denominada Responsive Design que faz com que o 
design projetado se adapte a qualquer forma e tamanho de mídia, a partir da 
programação. 
Estas técnicas estão em constante processo de aperfeiçoamento para que a 
web se torne cada vez mais um ambiente amigável e que a experiência do 
usuário seja cada vez mais satisfatória. 
Unidade IV – Contextos da web. 
Publicidade na Web 
 
No fim da década de 90, com o "boom" da Internet, muitas pessoas 
acreditavam que bastava criar um site qualquer na Internet e através de 
publicidade teriam lucros assegurados. 
Os resultados foram muitas vezes catastróficos o que levou a um descrédito 
acerca da publicidade na Web. 
No entanto, como é que se explica que uma empresa que apresenta lucros da 
ordem dos 721 milhões de dólares por trimestre, tenha o seu modelo de 
negócio baseado em publicidade na web? 
A questão não é se deve publicitar na web, mas sim, como o deve fazer. 
As pessoas utilizam a web como uma fonte rápida de informação, seja para fins 
profissionais ou de lazer, é importante que as páginas web estejam escritas de 
modo a satisfazer esta necessidade de informação, mesmo que contenham 
publicidade. 
 
 
 
A publicidade sempre que possível deverá fazer parte da informação que os 
utilizadores procuram, ou seja, deverá ser colocada em sites visitados pelo 
público-alvo da sua empresa ou produto. Esta publicidade direcionada é a 
chave do sucesso do Google, porque os anúncios aparecem de acordo com a 
pesquisa que o utilizador efetuou. 
Após escolher o(s) sites mais adequados para colocar a sua publicidade é 
necessário escolher a forma mais adequada de o fazer. 
Muitas vezes, o departamento de Marketing de uma empresa tem uma vasta 
gama de artigos publicitários prontos como animações, filmes ou fotografias 
que são reutilizados para criar publicidade na web. 
Isto pode constituir um erro grave, uma vez que o contexto de publicação naweb é diferente e necessita de conteúdo específicos de acordo com a página 
onde serão colocadas. 
Se a informação da página onde irá colocar a sua publicidade é um texto, a sua 
publicidade deverá também ser um texto. 
Colocar publicidade sobre o texto que os utilizadores estão a tentar ler ou usar 
animações para "chamar" a atenção, constituem erros crassos na criação de 
publicidade em páginas web. 
A razão principal é que o cérebro humano funciona de maneira diferente 
quando está a ler de quando está a ver uma animação, por exemplo. 
A atenção do utilizador está focada na leitura e o restante é automaticamente 
considerado ruído que impede o cérebro de efetuar a sua tarefa. 
Pelo que, está publicidade torna-se invisível para a grande maioria das pessoas. 
Publicidade de sucesso deverá estar embutida na informação que o utilizador 
procura. 
Anúncios muito pequenos tendem a ser ignorados pelos utilizadores. O local 
mais proveitoso para colocar anúncios é o topo da página porque é a primeira 
informação que o utilizador recebe. 
 
 
 
O formato da publicidade deve seguir o formato da informação principal que o 
utilizador procura. 
Se o utilizador está a ler o texto de uma página, a publicidade deverá ser 
textual. 
Se necessitar mesmo de utilizar animações numa página, certifique-se de que 
estas carregam rapidamente, são focadas na mensagem que pretende 
transmitir e correm a uma velocidade que permite que utilizador tenha tempo 
de captar a mensagem. 
No máximo utilize uma animação com 3 frames. Existem outras formas de 
publicitar na web além dos banners. 
Num site de fotografia a sua publicidade poderá aparecer num dos cantos das 
fotografias mais populares. 
Num site de filmes ou outras animações a sua publicidade poderá aparecer 
durante a exibição do próprio filme. 
Efetue testes com vários tipos de anúncios numa página onde pensa vir a 
publicitar. 
Poderá simular a inclusão de anúncios usando diversos formatos numa página 
guardada no seu PC. 
O criador da página ou do anúncio não deverá pensar que a sua opinião ou 
impressão acerca do anúncio é representativa da maioria das pessoas que irão 
lê-lo. Um teste muito simples e eficaz consiste em pedir as várias pessoas para 
encontrarem uma dada informação numa página e depois pedir-lhes para 
descreverem o conteúdo da página. 
Se a sua publicidade não fizer parte da descrição, então precisa de ser 
reformulada. 
Para gerir com sucesso a sua publicidade na web, o seu trabalho não termina 
com a criação do seu anúncio e compra de um espaço para o publicitar. 
 Monitorize os acessos ao seu site e verifique se está a receber visitas 
originadas nos sites onde publicitou. 
 
 
 
Por outro lado, a sua publicidade poderá estar a ter sucesso mesmo que não 
origine visitas ao seu site, mas este sucesso será visível no aumento do seu 
volume de negócio. Procure sempre descobrir como é que os seus clientes 
descobriram o seu site ou negócio. 
Unidade V e VI – XHMTL e a criação de páginas. 
XHMTL e a criação de páginas 
 
O XHTML, ou eXtensible Hypertext Markup Language, é uma 
reformulação da linguagem de marcação HTML, baseada em XML. 
Combina as tags de marcação HTML com regras da XML. Este processo de 
padronização provê a exibição de uma página Web neste formato por diversos 
dispositivos (televisão, palm, celular, etc), além da melhoraria da acessibilidade 
do conteúdo. 
A principal diferença entre XHTML e HTML, é que o primeiro é XML válido, 
enquanto o segundo possui sintaxe própria.Ambos possuem sentido semântico. 
Para verificar se uma página foi construída corretamente no padrão XHTML, 
existem diversos validadores sendo que a W3C disponibiliza um validador de 
códigos online. 
Histórico e versões do HTML 
 
O HTML 1.0 nunca existiu, foi definido como todo o trabalho antes do HTML 
realmente se tornar um padrão, criando então o HTML 2.0 que foi publicado 
pelo IETF RFC 1866. Novos suplementos foram adicionados: 
• Novembro de 1995: RFC 1867 (formulário base para upload de 
arquivos) 
• Maio 1996: RFC 1942 (tabelas) 
• Agosto 1996: RFC 1980 (mapas de imagem do lado cliente) 
• Janeiro 1997: RFC 2070 (Internacionalização) 
 
 
 
Em junho de 2000, todos esses se tornaram obsoletos/ registro no 
RFC 2854. 
 
Janeiro de 1997 
HTML 3.2 é publicado como uma recomendação do W3C. 
Foi a primeira versão desenvolvida e padronizada pelo W3C, pois o IETF havia 
fechado o seu grupo de trabalho em setembro de 1997. 
O HTML 3.2 omitiu várias fórmulas matemáticas, sobrepôs várias extensões 
proprietárias e adotou Markup tags do Netscape. Tags como <blink> da 
Netscape e <marquee> da Microsoft foram omitidas após um acordo mútuo 
entre as duas empresas. 
A capacidade de incluir fórmulas matemáticas no HTML não foi padronizada até 
anos mais tarde, com o MathML. 
Dezembro de 1997 
 
O HTML 4.0 é publicado como uma recomendação do W3C. Foram criadas 3 
versões: 
• Strict: elementos em desuso são proibidos 
• Transitional: elementos em desuso aqui são permitidos 
• Frameset: utilizado em documentos que fazem o uso de frames 
Inicialmente sob o codinome “Cougar”, o HTML 4.0 adotou vários 
elementos e atributos, mas ao mesmo tempo procurou eliminar marcação 
proprietária e em desuso a favor das folhas de estilo. 
Abril de 1998 
 
HTML 4.0 foi editado em edições menores mais sem aumentar o número de 
versão. 
 
 
 
Dezembro de 1999 
 
HTML 4.01 foi publicado como uma recomendação do W3C. Ele possuía as 
mesmas versões do HTML 4.0 e sua errata foi publicada em 12 de Maio de 
2001. 
Maio de 2000 
 
ISO/IEC 15445:2000 (“ISO HTML”, baseado no HTML 4.01 Strict), foi publicado 
como uma norma ISO / IEC padrão internacional. 
Em meados de 2008, HTML 4.01 e ISO / IEC 15445:2000 são as versões mais 
recentes do HTML. 
Desenvolvida em paralelo, o XHTML, baseado em XML ocupava o grupo de 
trabalho do W3C até meados de 2000. 
Janeiro de 2008 
 
HTML5 é publicado como um novo projeto do W3C. 
Apesar de sua sintaxe ser semelhante a do SGML, o HTML 5 abandonou 
qualquer tentativa de ser uma aplicação SGML, e tem definido seu próprio 
vocabulário HTML, além de uma alternativa baseada em XML, o XHTML 5. 
Estrutura de páginas e uso de TAGs 
 
Um exemplo simples de XHTML: 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
 
 
 <head> 
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-
8" /> 
 <title>Dados para Cadastro</title> 
 </head> 
 <body> 
 <form action=""> 
 <fieldset> 
 <legend>Dados para Cadastro</legend> 
 <label for="nome">Nome:</label> 
 <input type="text" name="nome" id="nome" /><br /> 
 <label for="tipo">Tipo:</label> 
 <input type="text" name="tipo" id="tipo" /><br /> 
 <label for="data">Data:</label> 
 <input type="text" name="data" id="data" /><br /> 
 <input type="submit" value="enviar" /> 
 </fieldset> 
 </form> 
 </body> 
</html> 
 
A semelhança com o HTML é grande, mas reparem que apresentam diversas 
marcações semelhantes ao XML. Além disso usa o CSS como formatador. 
 
O código CSS que formataria este XHTML seria: 
 
form input, form label, form legend { 
 font-size: 11px; 
} 
form input { 
 border: solid #ccc thin; 
 font-family: 'Trebuchet MS', Verdana, Tahoma, serif; 
 
 
 
 width: 100%; 
} 
form input[type="submit"] { 
 display: block; 
 float: right; 
 margin-top: 13px; 
 width: auto; 
} 
form fieldset, form legend { 
 border: solid black thin; 
 margin: 10px; 
 padding: 6px; 
} 
form fieldset { 
 width: 40%; 
} 
form label { 
 display: block; 
} 
form legend { 
 background-color: #e8e8e8; 
 font-weight: bold; 
} 
 
Este código poderia vir no início do XHTML ou emum arquivo separado. 
Veremos isso na parte do CSS. 
 
 
Principais TAGs e atributos 
 
Tags estruturais 
 
 
 
<!-- --> 
Cria um comentário 
<html> </html> 
Envolve todo um documento html 
<head> </head> 
Envolve o cabeçalho de um documento html 
<meta > 
Fornece informações gerais sobre o documento 
<style> </style> 
Informações de estilo 
<script> </script> 
Linguagem script 
<noscript> </noscript> 
Conteúdo alternativo para quando a linguagem script não for suportada 
<title> </title> 
O título do documento 
<body> </body> 
Envolve o corpo (texto e tags) do documento html 
• bgcolor - Cor de fundo #RRGGBB 
• background - Imagem como plano de fundo 
• text - Cor do texto principal 
• link - Cor dos links existentes na página 
• vlink - Cor do link já visitado 
• alink - Cor do link que foi ativado 
• marginheight - Elimina a margem esquerda apenas no Netscape 
• marginwidth - Elimina a margem no topo da página apenas no 
Netscape 
• topmargin - Elimina a margem no topo da página apenas no 
Internet Explorer 
• leftmargin - Elimina a margem esquerda apenas no Internet 
Explorer 
Cabeçalhos 
 
 
 
<hn> </hn> 
Cabeçalho nível n para n de 1 a 6 
Parágrafos 
<p> </p> 
Um simples paragrafo 
• align - Alinhamento do parágrafo: left, right, center e justify 
Links 
<a> </a> 
Cria um link e inclui atributos em comum 
• href - O URL do documento que será vinculado a este. Para e-
mail: mailto e link externo: http 
• name - O nome da âncora 
• target - Identifica a janela ou local em que o link deverá ser 
aberto: blank, self, top, parent 
• rel - Define os tipos de link que avançam 
• rev - Define os tipos de link que revertem a ação 
• acesskey - Atribui uma tecla de atalho para este elemento 
• shape - Para uso com formas de objeto 
Html e Xhtml Página 28 
• coords - Para uso com formas de objeto 
• tabindex - Determina a ordem das guias 
• onclick - É um evento JavaScript 
• onmouseover - É um evento JavaScript 
• onmouseout - É um evento JavaScript 
Listas 
<ol> </ol> 
Uma lista ordenada 
• start - Define a partir de qual número a listagem começa 
• type - Tipos de caracteres ordenados: A, a, I, i, 1 
<ul> </ul> 
Uma lista não ordenada 
• type - Tipos de caracteres não ordenados: disk, square, circle 
 
 
 
<li> </li> 
Um item da lista 
• value - Numeração individual do item da lista 
• type - Tipos de caracteres ordenados: A, a, I, i e 1 para listagem 
ordenada e disk, square e circle para não ordenada 
<menu> </menu> 
Um menu com uma lista de itens 
<dir> </dir> 
Uma listagem de diretórios 
<dl> </dl> 
Uma lista de definições ou glossário 
<dt> </dt> 
Marca o texto especificado como um termo de definição de um glossário 
<dd> </dd> 
Especifica o texto referente a um termo criado pela tag <dt> dentro de 
uma lista de definições 
Formatação de caracteres 
<em> </em> 
Maior ênfase em itálico 
<strong> </strong> 
Maior ênfase em negrito 
<code> </code> 
Amostra de código 
<kbd> </kbd> 
Texto a ser digitado 
<var> </var> 
Uma variável ou espaço reservado para um outro valor 
<samp> </samp> 
Texto de amostra 
<dfn> </dfn> 
Aplica um formatação no texto definido como termo de um glossário 
<cite> </cite> 
 
 
 
Uma citação 
<b> </b> 
Texto em negrito 
<i> </i> 
Texto em itálico 
<u> </u> 
Texto sublinhado 
<tt> </tt> 
Fonte monoespaçada (texto semelhante à máquina de escrever) 
<pre> </pre> 
Texto pré-formatado 
<strike> </strike> 
Texto riscado 
<s> </s> 
Html e Xhtml Página 30 
Texto tachado 
<sub> </sub> 
Texto subscrito 
<sup> </sup> 
Texto sobrescrito 
<big> </big> 
Texto em fonte maior do que o padrão 
<small> </small> 
Texto em fonte menor do que o padrão 
<blink> </blink> 
Texto piscando somente no Nestcape 
<marquee> </marquee> 
Texto animado no Internet Explorer 
Outros elementos 
<hr> 
Uma régua horizontal 
• size - Espessura da linha em pixels 
 
 
 
• width - Largura da linha em pixels ou porcentagem 
• align - Alinhamento da linha em center, left, right 
• color - Cor da linha em #RRGGBB 
• noshade - Linha sólida 
<br> 
Uma quebra de linha 
<center> </center> 
Centralizar 
<div> </div> 
Conteúdo 
• align - Alinhamento: left, center e right 
<blockquote> </blockquote> 
Texto com mais margem 
<address> </address> 
Assinaturas ou informações gerais sobre o autor de um documento 
<font> </font> 
Alterna tamanho , cor e tipo de fonte exibida 
• size - O tamanho da fonte varia de 1 a 7 
• color - A cor da fonte #RRGGBB 
• face - O tipo da fonte 
<basefonte> 
Define o tamanho padrão para a fonte na página atual 
• size - O tamanho da fonte varia de 1 a 7 
Imagens 
<img> 
Insere uma imagem in-line no documento e inclui atributos comuns 
• usemap - Um mapa de imagens do lado cliente 
• src - O URL da imagem 
• alt - Uma string de texto que será exibida em navegadores que 
não possam suportar imagens 
• align - Determina o alinhamento de uma determinada imagem: 
top, middle, bottom, left e right 
 
 
 
• height - É a altura sugerida em pixels 
• width - É a extensão sugerida em pixels 
• vspace - O espaço entre a imagem e o texto acima e abaixo dela 
• hspace - O espaço entre a imagem e o texto à esquerda e à 
direita dela 
• border - Largura da borda 
Frames 
<frameset> </frameset> 
Define um frameset 
• rows - Número de linhas no frame 
• cols - Número de colunas no frame 
• frameborder - Borda do frame 
• framespacing - Espaçamento 
• onload - É um evento intrínseco 
• onunload - É um evento intrínseco 
<frame> </frame> 
Define um frameset 
• name - É o nome do frame-alvo 
• src - Chama a fonte de conteúdo do frame 
• frameborder - Determina a borda do frame 
• marginheight - Determina a largura das margens 
• noresize - Determina a capacidade de redimensionar frames 
• scrolling - Determina a capacidade de rolagem dentro dos 
frames: auto, yes e no 
<iframe> </iframe> 
Define um frame in-line 
<noframes> </noframes> 
Alterna o conteúdo quando os frames não são suportados 
Tabelas 
<table> </table> 
Cria uma tabela 
• background - Imagem de plano de fundo 
 
 
 
• bgcolor - Cor de plano de fundo 
• border - Largura da borda em pixels 
• cols - Número de colunas 
• cellpadding - Espaçamento nas células 
• cellspacing - Espaçamento entre as células 
• width - Largura da tabela 
• align - Alinhamento da tabela: left, center, right 
• bordercolor - Cor na borda da tabela 
<caption> </caption> 
A legenda para a tabela 
<tr> </tr> 
Uma linha na tabela 
• align - O alinhamento horizontal do conteúdo das células dentro 
dessa linha com os valores possíveis left, right, center, justify e 
char 
• bgcolor - Cor de fundo 
• valign - o alinhamento vertical do conteúdo das células dentro 
dessa linha com os valores possíveis top, middle, bottom e 
baseline 
• background - Figura como plano de fundo 
<th> </th> 
Um cabeçalho de célula da tabela 
• align - Alinhamento horizontal 
• valign - Alinhamento vertical 
• bgcolor - Cor de plano de fundo 
• rowspan - O número de linhas pelo qual essa célula se expandirá 
• colspan - O número de colunas pelo qual essa célula se 
expandirá 
• nowrap - Desliga o enquadramento de texto em uma célula 
<td> </td> 
Define uma célula de dados da tabela 
• align - Alinhamento horizontal 
 
 
 
• valign - Alinhamento vertical 
• bgcolor - Cor de plano de fundo 
• rowspan - O número de linhas pelo qual essa célula se expandirá 
• colspan - O número de colunas pelo qual essa célula se 
expandirá 
• nowrap - Desliga o enquadramento de texto em uma célula 
• width - Largura da célula 
• height - Altura da célula 
Formulários 
<form> </form> 
Define um formulário 
• action - Responsável por determinar o exato local para onde as 
informações coletadas no formulário deverão ser enviadas 
• method - Método de empacotamento dos dados do formulário: 
get, post e enctype="multipart/form-data" 
• name- Nome do objeto 
<input> 
Caixa de texto 
• type - Tipo de dado: text, file, radio, checkbox, hidden, 
password, submit, reset, button, image 
• name - Identificação do campo 
• size - Largura 
• maxlength - Número máximo de caracteres permitidos 
• value - Texto que aparece dentro da caixa ou nome do botão 
• checked value - Valor assumido quando este campo for 
selecionado 
<textarea> </textarea> 
Permite criar elementos de entrada com características de texto 
• rows - Tamanho da linha da caixa de texto 
• cols - Tamanho da coluna da caixa de texto 
• name - Identificação do campo 
• wrap - Quebra de linha da caixa de texto: off, virtual, physical 
 
 
 
<select> </select> 
Seleção 
• name - Identificador 
<option> </option> 
Opção 
• value - Valor do campo 
 
Criação de formulários 
 
Os formulários constituem uma das principais formas de interação entre 
“clientes” e “servidores”. São um dos principais responsáveis pelo surgimento 
de sites dinâmicos, com informação dinâmica. 
 
<body> 
<form name="formulario" id="formulario" method="___" 
action="___" ...> 
### elementos de formulário ### 
</form> 
</body> 
 
A tag <form> 
 
Principais atributos 
id/name(opcional) 
Permite identificar o formulário para referenciação em JavaScripte CSS 
action (obrigatório em algumas situações) 
Usado para especificar o nome do recurso que irá ser “chamado” quando o 
formulário for submetido 
(Exemplo: action="processafrom.php") 
method(opcional) 
 
 
 
Permite especificar o método a ser usado na submissão deste formulário Pode 
assumir os valores GET e POSTPor defeito assume o valor GET 
enctype(opcional) 
Usado para especificar o tipo dos dados submetidos usando o método 
POSTAssume por defeito o valor “application/x-www-form-urlencoded”Em casos 
em que é necessário efectuar o uploadde ficheiros o valor terá ser 
“multipart/form-data” 
 
Para armazenar as informações fornecidas pelo usuário podemos fazer uso do 
elemento <input /> , que possui os seguintes atributos: 
 
Atributos 
Atributo Valor Descrição 
name - nome especifica o nome do elemento 
value - valor especifica o conteúdo inicial do elemento 
disabled - informa que um elemento não pode ser 
manipulado pelo usuário 
type - tipo informa o tipo do elemento 
 
Os principais tipos do elemento input são: 
text - caixa que pode ser utilizada para inserção de informações [texto] 
password - caixa utilizada para digitação de senhas, ou campos que 
não devem ser lidos por terceiros [texto] 
file - caixa para digitação do nome de um arquivo, conta ainda como um 
botão para realizar a busca do elemento [texto] 
submit - cria um botão que ao ser clicado submete o conteúdo do 
formulário [botão] 
reset - cria um botão que ao ser clicado restaura os campos ao seu 
valor default [botão] 
 
 
 
button - cria um botão que pode ser associado a um java script image 
insere uma imagem [botão] checkbox - insere uma caixa de seleção, 
que permite a seleção de mais de uma elemento ao mesmo tempo 
[seleção] 
radio - inserida uma caixa de seleção, que não permite seleções 
múltiplas [seleção] 
hidden - insere campos ocultos, que não são exibidos, mas que podem 
ser utilizados para o armazenamento temporário de informações 
O elemento INPUT do tipo texto, possui os atributos: 
Atributos 
width - numeral quantidade máxima de caracteres 
maxlenght - numeral largura máxima do elemento 
readonly - o conteúdo da caixa não pode ser alterada 
O elemento INPUT do tipo seleção, possui o atributo: 
Atributos 
checked - especifica quais elementos estão marcados como selecionado 
Outro elemento de inserção de informação é o textarea ( <textarea> 
</textarea> ), que permite a digitação de várias linhas, seus atributos são: 
Atributos 
cols - numeral quantidade de caracteres por linha 
rows - numeral quantidade de linha na caixa 
id - nome identificação do elemento 
Unidade VII e VIII – CSS e aplicação de Estilos. 
Folhas de estilo - CSS 
 
Quando se deseja garantir uma formatação homogênea e uniforme em todas as 
páginas de um site as folhas de estilo em cascata (Cascading Style Sheets) 
facilitam muito o trabalho de criação. 
 
 
 
Folha de estilo em cascata é um mecanismo simples para adicionar estilos 
(exemplos: fontes, cores, espaçamentos) em documentos Web. 
Ou seja, CSS é um padrão de formatação (Web Standards) para páginas que 
permite ir além das limitações impostas pelo HTML. 
Web Standards é um conjunto de normas, diretrizes, recomendações, notas, 
artigos, tutoriais e afins de caráter técnico, e destinados a orientar fabricantes, 
desenvolvedores e projetistas para o uso de práticas que possibilitem a criação 
de uma Web acessível a todos, independentemente dos dispositivos usados ou 
de suas necessidades especiais. 
Foi proposto pelo World Wide Web Consortium, W3 Consortium, o qual é 
uma comissão que define os padrões de programação para a WWW, em duas 
especificações: CSS1 e CSS2. 
A CSS 1 foi lançada em 12/1996 e tem aproximadamente 60 propriedades. É 
um modelo simples de formatação, na maior parte para apresentações screen-
based. A CSS 2 foi finalizado em 05/1998. 
Mantém todas as propriedades da CSS1 e introduziu 70 propriedades novas. 
O uso de folhas de estilo permite: 
 
 Maior versatilidade na programação do layout de páginas, sem aumentar 
o seu tamanho em Kb´s. 
 Maior controle sobre os atributos de uma página, como tamanho e cor 
das fontes, espaçamento entre linhas e caracteres, margem do texto, 
caixas de texto, botões de formulário, entre outros. 
 A utilização de "layers", permitindo a sobreposição de objetos, textos e 
imagens, em camadas. 
 Modificar rapidamente todo o "layout" de um "site", ou de um certo 
grupo de formatação. 
 
 
 
 
Regras das folhas de estilos: 
 
Exemplicando com o comando que diz que parágrafos definidos como título 3 
terão a cor amarela, nesse tom: 
H3 { color:#00ffff } 
Nesse comando CSS existe uma regra, ou seja, uma indicação do aspecto de 
um ou mais elementos. Essa REGRA configura a cor de todos os títulos H3 do 
arquivo. 
Uma regra simples do CSS constitui-se de duas partes: 
 
Em que: Seletor: é a parte antes das chaves e Declaração: a parte entre as 
chaves. 
O seletor - o elemento de ligação entre o documento HTML 
e o estilo. 
 
O seletor especifica qual(is) elemento(s) são afetados pela declaração. A 
declaração configura o efeito que o seletor terá. No exemplo acima, o seletor 
H3 e a declaração é "color: 00ffff". 
É importante notar que com essa regra aplicada ao documento HTML, todos os 
elementos H3 serão afetados, ou seja, eles terão a cor marela, pois a 
propriedade "color" afeta apenas a cor da fonte. 
A declaração 
Uma declaração também tem duas partes, separadas por dois pontos. 
parte antes dos dois pontos e Valor: a parte depois dos dois pontos. 
é uma qualidade ou uma característica que um elemento deve possuir. 
No exemplo essa característica é a cor. O valor define exatamente a 
característica. No exemplo é amarela. 
 
 
 
Deve-se ressaltar que as chaves - { } - e os dois pontos - : - são absolutamente 
necessários para que os navegadores possam distinguir o seletor, a propriedade 
e o valor. 
Modos de aplicar 
Há alguns modos de aplicar as folhas de estilo: 
 
1. Embedding (interno, incorporado, ou embutido) 
 
Os comandos CSS ficam dentro de cada página HTML. Permite que uma página 
possa utilizar uma formatação diferente das outras de um "site". O comando 
STYLE deve estar entre <HEAD> e </HEAD>. 
 
O código a ser aplicado em uma página é: 
 
<STYLE TYPE="text/css"> 
<!- 
......... 
Os comandos CSS ficam nesta área 
......... 
-> 
</STYLE> 
 
 
2. Inline (em Linha) 
 
Os comandos de um certo estilo ficam diretamente no elemento HTML que se 
deseja alterar. Possibilita que só aquele elemento seja estilizado, sem alterar 
todos os outros da página. 
 
 
 
 
Pode-secolocar quantos comandos dentro de cada página HTML e pode-se 
utilizar comandos CSS InLine, inclusive se os modos embedding ou linking 
estiverem sendo usados. 
 
Exemplo: Eis um CSS Inline em um tag parágrafo, que determina que fique 
indentado em 3cm, na cor amarela e na fonte verdana: 
 
Texto modificado 
O código usado foi: 
 
<p style="text-indent: 3cm; color: rgb(255, 255, 0); font-family: 
Verdana, Arial;"><b>Texto modificado</b></p> 
 
Notar que se a fonte Verdana não estiver instalada no computador do leitor 
será usada a fonte Arial). 
 
 
3. Linking (externo, importado, ligado) 
 
Criar um arquivo texto, com todos os estilos a serem aplicados. Salvar com o 
fomato .css. 
 
A ligação do arquivo externo, XXX.css com as páginas HTML será feita por meio 
de um comando inserido na seção <HEAD> de cada página HTML que se 
desejar estilizar. 
O código a ser aplicado em cada página é: 
 
<LINK REL=StyleSheet HREF="arquivo.css" TYPE="text/css"> 
 
 
 
 
É importante observar que uma folha de estilo externa é ideal para ser aplicada 
a várias páginas, pois alterando-se apenas o arquivo .css pode-se alterar a 
aparência de um "site" inteiro fácil e rapidamente. 
Precedência 
 
Qual estilo será aplicado quando há mais de um estilo especificado para um 
elemento HTML? 
 
Evidentemente, quando se usa diferentes modos de estilo (exemplo: Inline e 
Linking) as especificações podem entrar em conflito. 
 
Então, o navegador tem que decidir qual dos valores deve usar. Essa escolha é 
feita com base numa ordem de precedência. 
Ordem de precedência 
 
1. Estilo inline (dentro de um elemento HTML) 
2. Folha de estilo Incorporada (definida na tag < head> do documento); 
3. Folha de estilo Externa (importada e linkada); 
4. Estilo padrão (default) do navegador 
 
É importante lembrar esta ordem de precedência para que se saiba qual valor 
de estilo sobrepujará os outros. Assim sendo, um estilo inline tem a prioridade 
mais elevada, o que significa que prevalecerá sobre aquele definido na tag 
<head>. Esse, por sua vez, sobrepujará o definido em uma Folha de Estilo 
Externa, e esse sobre o formato que o navegador especifica. 
 
 
 
Arquivos externos: exemplo de formatação 
 
É muito útil definir a apresentação geral do documento (fundo, cor e fonte de 
texto e a apresentação dos links) em um arquivo externo, pois bastará 
modificá-lo que todas as páginas do "site" serão alteradas. 
Como definir a cor de fundo e fixando a imagem de fundo da 
página: 
 
body { 
background-color: #xxxxxx; 
background-image: url("/nome.do.arquivo.jpg") } 
background-repeat: no-repeat; 
background-attachment: fixed 
} 
A definição geral de estilo inclui os 3 tipos possíveis de 
links: 
 
a:link { 
color:#xxxxxx 
 } 
a:hover { 
color:#xxxxxx 
 } 
a:visited { 
color:#xxxxxx 
 } 
 
Além da cor, pode-se indicar se o link deve ser sublinhado ou não (underline) 
ou não (none) por meio do atributo text-decoration. O link também pode 
aparecer riscado (line-through). 
 
 
 
 
Abaixo, define-se o link não sublinhado, o efeito de "mouse-over" sublinhado e 
o link visitado com efeito de texto riscado: 
 
a:link { 
color:#xxxxxx; text-decoration: none 
 } 
a:hover { 
color:#xxxxxx; text-decoration: underline 
 } 
a:visited { 
color:#xxxxxx; text-decoration: line-through 
 }Pode-se, ainda, definir uma cor de fundo para o link. 
Exemplo: 
a:hover { 
color:#xxxxxx; text-decoration: none; background:#xxxxxx 
 } 
Exemplo de arquivo de estilo externo 
 
Um exemplo de folha de estilo com definições para o documento (cor do texto, 
fonte, tamanho da fonte, cor do fundo, imagem do fundo, definição de 3 tipos 
de títulos, definição de parágrafos, definação de enfatizado e cores e 
presença/ausência de sublinhado nos 3 tipos de links), seria: 
 
 
Código CSS 
Significado 
body { 
color: #000000; 
font-family: arial; verdana; 
 
 
 
font-size: 10pt; 
background-color: #ffffff; 
background-image: url(bgdicas.jpg); 
} 
h4 { 
color:#33ff33; 
font-family: arial; verdana; 
font-size: 11pt; 
} 
h3 { 
font-weight: bold; 
color:#ffffff; 
font-family: arial; verdana; 
font-size: 10pt; 
} 
h5 { 
font-style: italic; 
font-weight: normal; 
color:#ffffff; 
font-family: arial; verdana; 
font-size: 10pt; 
} 
p { 
color: #ffffff; 
font-family: arial; verdana; 
font-size: 10pt; 
margin:0px; 
padding:2px 5px; 
} 
em { 
font-style: normal; 
color:#33ff33; 
 
 
 
} 
tr { 
font-size: 10pt; 
} 
a:link { color:#00ffff; text-decoration: underline } 
a:hover { color:#77ff99; text-decoration: none } 
a:visited { color:#ccffff; text-decoration: underline } 
o texto aparecerá 
- em cor preta 
- em Arial, ou, se essa fonte não existir, em verdana 
- em tamanho = 10 
a cor do fundo será branca e a imagem bgdicas.jpg será usada como fundo. 
Parágrafos definidos como títulos 4 terão a cor verde limão e aparecerão em 
Arial, ou, se essa fonte não existir, em verdana, e em tamanho = 11 
Parágrafos definidos como títulos 3 terão a cor branca e aparecerão em arial, 
ou, se essa fonte não existir, em verdana, em negrito e em tamanho = 10 
Parágrafos definidos como títulos 5 terão a cor branca e aparecerão em arial, 
ou, se essa fonte não existir, em verdana, em itálico e em tamanho = 10 
Parágrafos terão a cor branca e aparecerão em arial, ou, se essa fonte não 
existir, em verdana, em itálico e em tamanho = 10, sem espaço na margem. 
palavra (s) enfatizada(s) terão a cor verde limão e terão estilo normal. 
As linhas das tabelas terão tamanho = 10. 
Os links terão a cor #00ffff e serão sublinhados, quando clicados exibirão a cor 
#77ff99 e não serão sublinhados. 
os links visitados terão a cor#ccffff e serão sublinhados. 
 
 
 
Como usar 
 
Basta salvar o conteúdo da primeira coluna acima, a partir de body, em um 
arquivo separado, 
- substituir os códigos das cores e tamanhos e estilos da fonte pelos desejados. 
usando o código hexadecimal para cores, 
- dar-lhe um nome (Exemplo: arquivo.css) e 
- colocá-lo junto com as páginas HTML. 
 
Evidentemente, o nome do arquivo deve ser o mesmo que consta em <LINK 
REL=StyleSheet HREF="arquivo.css" TYPE="text/css"> 
Note que se desejar modificar algo depois, no site todo, como o tamanho ou 
tipo da fonte, a cor ou a figura do fundo, bastará modificar esse arquivo! 
Para ver alguns comandos, parâmetros e unidades em CSS, clique aqui. 
Importância do CSS 
 
O CSS, no modo Linking, ou seja, quando se cria um outro arquivo, 
independente, só para as regras de estilo, realmente representa uma ruptura 
no ato de criar páginas. E uma enorme facilidade quando se deseja alterar a 
aparência dos sites. 
Há duas grandes vantagens em usá-lo: 
- Separação entre formatação e conteúdo com conseqüente facilidade para 
atualização do site e 
- Diminuição drástica no tamanho do código de cada página. 
Ou seja, com o seu uso, os elementos (tags) HTML ficam destinados 
exclusivamente para marcar e estruturar o conteúdo do documento. 
 
 
 
Assim, não se deve usar qualquer elemento HTML para alterar o visual, ou seja, 
para estilizar o conteúdo. 
A estilização será feita em um arquivo independente que, inclusive, pode ser 
construído como um arquivo txt no Metapad (ou Notepad) e depois renomeado 
com terminação .css, em que se declarará todas as regras de estilo, as 
propriedades e valores de estilização para os elementos do documento HTML. 
A forma correta de formatar, com estilos 
 
O World Wide Web Consortium Consortium (W3C) removeu o elemento <font> 
das suas recomendações HTML 4 e XHTML. Nas versões modernas do HTML 
todo o arranjo gráfico e formatações se obtêm recorrendo apenas a estilos CSS. 
Títulos e Sub-títulos 
Pode-se definir até 6 tipos de títulos, de <h1> até <h6>, definindo exatamente 
o seu formato. Por exemplo: 
h1 { color: #000000; background: #ffffff } - tornatodos os títulos de nível 1, 
ou seja, que estiverem entre <h1>... e... </h1> de uma página, na cor preto, 
sobre um fundo na cor branca; 
Da mesma forma, os outros títulos podem ser definidos, no tamanho, cor e 
estilo desejados. 
Aplicação de títulos 
 
1. Escolhe-se como serão os parágrafos de título ( tipo, estilo, tamanho e 
cor da fonte ). O máximo possível são 6 tipos diferentes. 
2. Define-se no arquivo css como será cada parágrafo. 
3. Seleciona-se o parágrafo desejado. 
4. Clica-se no menu "Format" e em "Paragraph". 
5. Assinalar o tipo de parágrafo escolhido, entre os 6 tipos de títulos, de 1 a 
6, que correspondem a <h1> até <h6>. 
Imediatamente todo o estilo definido aparecerá no parágrafo selecionado. 
 
 
 
Ênfase 
 
1. Escolhe-se como será o formato da(s) palavra(s) a ser enfatizadas(s): ( 
tipo, estilo, tamanho e cor da fonte ). 
2. Define-se no arquivo css como será todo o estilo da ênfase 
3. Seleciona-se (s) palavra(s) desejada(s). 
4. Clica-se no menu "Formatar" e em "Estilo do texto". 
5. Assinalar "Emphasis". No código fonte a palavra aparecerá entre <em> e 
</em>. 
 
Imediatamente o estilo definido aparecerá apenas na(s) palavra(s) 
selecionada(s). 
 
Colocação dos elementos em CSS - caixas 
 
Todos os elementos que podem ser vistos numa página ocupam uma certa área 
na página, que tem a forma de um retângulo, e que é chamada de caixa. 
A caixa de um elemento contém tudo aquilo que lhe diz respeito: conteúdo, 
linhas de contorno, margens e espaço em branco. 
Esse esquema representa as diferentes áreas que constituem a caixa de um 
elemento: 
Conteúdo: fica na parte mais interna. 
 Padding: espaço que pode existir entre o conteúdo e suas bordas. 
 Border: designa o limite do elemento 
 Margin: pode existir e separa o elemento de outros da mesma página 
 Largura do elemento: é determinada pela largura do conteúdo 
 Largura da caixa: é determinada pela soma das larguras do conteúdo, 
mais as larguras ocupadas pelas linhas de contorno (border), pelo 
espaço em branco (padding) e pelas larguras das margens. 
 
 
 
 
BIBLIOGRAFIA 
 
Referência de XHTML 1.0 
(www.w3schools.com/xhtml/xhtml_reference.asp); 
 
Tutorial da W3C (www.w3schools.com/w3c); 
 
W3Schools (www.w3schools.com/default.asp); 
 
WebSemântica (www.comciencia.br/reportagens/internet/net08.htm). 
 
Manual e XHTML em inglês 
(http://www.htmlstaff.org/xhtmlmanual/Cover.html) 
 
Apostila XHTML, Prof. José Celso Freire Junior, Universidade Estadual Paulista, 
Ano de 2003 
 
Folhas de Estilo 
http://www.icmc.usp.br/ensino/material/html/css.html 
 
Seção CSS da abcDICAS.com.br 
http://www.abcdicas.com.br/html/css/csspage.html 
 
CSS para Web Design 
http://www.maujor.com/tutorial/intrtut.php 
 
 
 
 
Tutorial e Referência de CSS 
http://www.artifice.web.pt/tutoriais/cntd/tut_css1.html 
 
Site sobre CSS e Web Standards 
http://www.maujor.com/ 
 
Tutorial CSS - Tabela de conteúdos 
http://www.pt-br.html.net/tutorials/css/