Apostila HTML, CSS e JAVASCRIPT

Computao
F
iel a sua misso de interiorizar o ensino superior no estado Cear, a UECE,
como uma instituio que participa do Sistema Universidade Aberta do
Desenvolvimento para Web

Computao
Brasil, vem ampliando a oferta de cursos de graduao e ps-graduao
na modalidade de educao a distncia, e gerando experincias e possibili-
dades inovadoras com uso das novas plataformas tecnolgicas decorren-
tes da popularizao da internet, funcionamento do cinturo digital e
massificao dos computadores pessoais.
Comprometida com a formao de professores em todos os nveis e
a qualificao dos servidores pblicos para bem servir ao Estado,
os cursos da UAB/UECE atendem aos padres de qualidade
Desenvolvimento
estabelecidos pelos normativos legais do Governo Fede-
ral e se articulam com as demandas de desenvolvi- para Web
mento das regies do Cear.
Universidade Estadual do Cear - Universidade Aberta do Brasil

Joaquim Celestino Jnior
Robrio Gomes Patricio
ilO otirB sottaM ed ointnA odnanreF

ilO otirB sottaM ed solraC ocsicnarF
Cincias Artes
Qumica Biolgicas Plsticas Computao Fsica Matemtica Pedagogia
Computao
Desenvolvimento
para Web

2a edio
Fortaleza
2015
Cincias Artes
Qumica Biologia
Biolgicas Artes
Plsticas Computao Fsica Matemtica Pedagogia
Copyright 2015. Todos os direitos reservados desta edio UAB/UECE. Nenhuma parte deste material
poder ser reproduzida, transmitida e gravada, por qualquer meio eletrnico, por fotocpia e outros, sem a
prvia autorizao, por escrito, dos autores.
Editora Filiada
Presidenta da Repblica Conselho Editorial

Dilma Vana Rousseff
Antnio Luciano Pontes
Ministro da Educao
Renato Janine Ribeiro Eduardo Diatahy Bezerra de Menezes
Presidente da CAPES Emanuel ngelo da Rocha Fragoso
Carlos Afonso Nobre Francisco Horcio da Silva Frota
Diretor de Educao a Distncia da CAPES Francisco Josnio Camelo Parente
Jean Marc Georges Mutzig Gisafran Nazareno Mota Juc
Governador do Estado do Cear Jos Ferreira Nunes
Camilo Sobreira de Santana
Liduina Farias Almeida da Costa
Reitor da Universidade Estadual do Cear
Jos Jackson Coelho Sampaio Lucili Grangeiro Cortez
Vice-Reitor Luiz Cruz Lima
Hidelbrando dos Santos Soares Manfredo Ramos
Pr-Reitor de Ps-Graduao Marcelo Gurgel Carlos da Silva
Jerffeson Teixeira de Souza
Marcony Silva Cunha
Coordenador da SATE e UAB/UECE
Maria do Socorro Ferreira Osterne
Francisco Fbio Castelo Branco
Maria Salete Bessa Jorge
Coordenadora Adjunta UAB/UECE
Elosa Maia Vidal Silvia Maria Nbrega-Therrien
Direo do CED/UECE Conselho Consultivo
Jos Albio Moreira de Sales
Antnio Torres Montenegro (UFPE)
Coordenao da Licenciatura em Computao
Francisco Assis Amaral Bastos Eliane P. Zamith Brito (FGV)
Coordenao de Tutoria da Homero Santiago (USP)
Licenciatura em Computao Ieda Maria Alves (USP)
Maria Wilda Fernandes Felipe
Manuel Domingos Neto (UFF)
Editor da UECE
Erasmo Miessa Ruiz Maria do Socorro Silva Arago (UFC)
Coordenadora Editorial Maria Lrida Callou de Arajo e Mendona (UNIFOR)
Rocylnia Isidio de Oliveira Pierre Salama (Universidade de Paris VIII)
Projeto Grfico e Capa Romeu Gomes (FIOCRUZ)
Roberto Santos Tlio Batista Franco (UFF)
Diagramador
Francisco Oliveira
Reviso Ortogrfica
Fernanda Ribeiro
Editora da Universidade Estadual do Cear EdUECE

Av. Dr. Silas Munguba, 1700 Campus do Itaperi Reitoria Fortaleza Cear
CEP: 60714-903 Fone: (85) 3101-9893
Internet: www.uece.br E-mail: eduece@uece.br
Secretaria de Apoio s Tecnologias Educacionais
Fone: (85) 3101-9962
Sumrio
Apresentao...................................................................................................... 5
Captulo 1 Histrico e Fundamentos...........................................................7
1. Introduo............................................................................................................9
2. A Internet..............................................................................................................9
3. World Wide Web............................................................................................... 11
4. Servidores e Protocolos....................................................................................12
5. Motores de busca..............................................................................................12
6. Scripting no lado do Cliente..............................................................................13
7. Programao no lado Servidor........................................................................13
Captulo 2 Noes Bsicas de HTML....................................................................17
1. Introduo..........................................................................................................19
2. O que HTML...................................................................................................19
3. Tags Bsicas para formatao de Fonte e Texto............................................21
4. Imagens de Fundo e Cores de Fundo.............................................................23
4.1. Cor de Fundo.............................................................................................23
4.2. Inserir uma Imagem de Fundo..................................................................23
4.3. Inserindo Imagens.....................................................................................23
4.4. Definir Altura e Largura..............................................................................24
4.5. Inserindo Imagens em Hiperlinks.............................................................24
4.6. Inserir Hiperlinks........................................................................................24
4.7. Abrir links em Novas Janelas....................................................................24
4.8 Endereos Absolutos e Relativos..............................................................24
5. Criando Tabelas................................................................................................25
5.1. Tags de tabela bsicas..............................................................................25
5.2. Definindo contorno para a Tabela.............................................................26
5.3. Definindo Espao que Envolve as Clulas - CELLSPACING................26
5.4. Definindo espao no Interior das Clulas - CELLPADDING..................26
5.5. Definindo a largura de uma Tabela...........................................................27
5.6. Definindo a largura das Colunas..............................................................27
5.7. Definindo a Altura de uma Tabela.............................................................28
5.8. Definindo Listas.........................................................................................31
6. Definindo formulrios HTML e seus elementos..............................................32
6.1. Form...........................................................................................................32
6.2. Input............................................................................................................33
7. Textarea.............................................................................................................33
7.1. Select..........................................................................................................34
7.2. Exibindo caracteres Especiais..................................................................35
Captulo 3 CSS..........................................................................................................37
1. Introduo..........................................................................................................39
2. O que CSS?...................................................................................................39
3. Sintaxe...............................................................................................................40
4. Usando seletores..............................................................................................42
4.1. Seletor Universal........................................................................................42
4.2. Seletor de Elemento..................................................................................42
4.3. Seletor de Classe......................................................................................43
4.4. Seletor com ID...........................................................................................43
4.5. Seletores mais Complexos.......................................................................43
5. Integrando nas pginas HTML.........................................................................44
5.1. Estilos em Linha.........................................................................................44
5.2. Estilo embarcado.......................................................................................44
5.3. Estilo Externo.............................................................................................46
5.4. Detalhes de Implementao.........................................................50
Captulo 4 Noes bsicas de JavaScript................................................53
1. Introduo..........................................................................................................55
2. O que JavaScript?.........................................................................................55
3. Iniciando.............................................................................................................55
3.1. A sintaxe.....................................................................................................57
4. Operadores Lgicos e Matemticos................................................................58
4.1. Operadores Lgicos..................................................................................58
4.2. Operadores Matemticos..........................................................................59
4.3. Usando Variveis.......................................................................................59
4.4. Estruturas Condicionais............................................................................59
4.7. Estruturas de Repetio............................................................................60
Sobre os autores..............................................................................................68
Apresentao
So inmeros os avanos tecnologicos promovidos pelo novo modelo

de distribuio de conteudos e servios pela Internet. A Web tornou-se uma
grande teia de conhecimentos, provida de largo alcane e altamente demo-
crtica quanto ao contedos e seu publico alvo.
A partir do momento que percebeu-se o seu grande potencial, a Web
trouxe uma nova demanda pela capacidade de gerar contedos adequados e
adaptados aos seus protocolos, restries e caractersticas. Um grande con-
junto de tecnologias e tentativas de padronizao surgiram, destancando-se
dentre elas o HTML, CSS, Javascript e as linguagens de programao adap-
tadas ao modelo da Web. Partindo de cenrios bastante elementares, com
pginas contendo apenas texto simples com algumas referncias e links para
outros documentos, os web sites evoluiram em seus contedos e na experi-
ncia promovida ao usurio. Hoje, os usurios so capazes de ter pginas de
alta riqueza de contedos e interaes, com funcionalidades nunca antes pre-
vistas para um ambiente inicialmente to elementar e pobre em interatividade.
Esse livro fala sobre a Internet a algumas de suas tecnologias, explo-
rando conceitos e ferramentas amplamente utilizadas na construo de sites
e aplicativos que executam na Internet. Aqui a linguagem HTML abordada
como a estrutura bsica para a criao de pginas para a Web. Com a adio
da linguagem de estilo CSS possvel conferir maior riqueza visual e interati-
va a essas pginas e, aliada a tecnologias como Javascript e linguagens de
script que executam no lado servidor, possvel gerar contedos dinmicos,
os quais podem ser aplicados nos mais diferentes contextos, desde o comer-
cio eletrnico ao mercado do entretenimento.
Os Autores
Captulo 1
Histrico
e Fundamentos
9
Objetivos
Contextualizar o aluno quanto aos conceitos e termos relacionados Inter-

net, em particular com a Web, dando a este uma oportunidade de torna-se
familiar com algumas das tecnologias aqui abordadas.
1. Introduo
Esse captulo foi desenvolvido para contextualizar o aluno quanto aos concei-
tos e termos relacionados Internet, em particular com a Web. Caso voc no
se sinta familiar com alguns dos termos e tecnologias abordados nesse texto,
ou classifica a si mesmo como apenas mais um consumidor de contedos e
servios da Internet, os tpicos a seguir sero cruciais para o entendimento
do restante livro.
Os principais tpicos cobertos nesse captulo so:
A Internet
World Wide Web
Scripting no lado do Cliente
Programao no lado Servidor
2. A Internet
A Internet basicamente uma coleo de computadores, todos conectados
em conjunto a uma grande rede. Sua topologia prov um mecanismo de
acesso e entrega da informao de modo que fragmentos desta possam to-
mar mltiplas rotas de um ponto a outro. Essas mltiplas rotas tornam a rede
incrivelmente robusta se uma parte falha, a informao pode ainda viajar por
outras rotas alternativas.
Essa informao tipicamente toma a forma de:
Pedidos por informaes ou servios
Respostas contendo a informao ou resultado de um servio
Respostas informativas, isto , as razes por que o servio ou infor-
mao no pode ser entregue
10 JOAQUIM CELESTINO JNIOR E ROBRIO GOMES PATRCIO
A informao entregue em um modelo Cliente/Servidor; em outras pala-

vras, clientes(usurios) conectam-se a servidores na Internet e usam seus recursos.
Em um cenrio real, muitos Clientes podem conectar-se a um dado
Servidor ao mesmo tempo, concorrentemente e causar uma sobrecarga
em sua capacidade caso este logo alcance seus limites de poder de proces-
samento. Essa capacidade medida de duas maneiras a potncia do Ser-
vidor e a quantidade de recursos de rede disponveis para ele. Esses fatores
iro afetar o nmero de usurios que podem conectar-se ao mesmo tempo
sendo ainda assim possvel a entrega dos servios requisitados.
Em seus primeiros dias a Internet foi impulsionada pelo poder de pro-
cessamento de servidores menos capacitados que os disponveis atualmente.
Nessa poca a maioria dos contedos disponveis eram somente em formato
de texto. Os servidores no eram capazes de entregar nada mais complexo que
isso, e as redes interconectadas no eram rpidas nem confiveis suficiente-
mente para permitir a transferncia de algo mais complexo que texto puro.
Um dos primeiros tipos de aplicao para a Internet disponvel para
o pblico em geral foi o E-mail. Isso trouxe uma revoluo nas possibili-
dades de comunicao: era uma soluo barata que apresentava o ime-
diatismo de uma chamada telefnica, mas se dava de forma assncrona,
tal como uma carta.
Outros servios de interface de texto incluam o Gopher [1], que ofe-
recia menus hierrquicos de informao. Estes foram acessados atravs
de
uma interface somente texto, chamado de cliente Telnet [2], sendo considera-
do como o precursor do browser. Telnet, neste caso, o protocolo usado para
a comunicao entre o cliente e o servidor.
Isso permitiu um certo nvel de interatividade, mas com tempos de res-
posta lentos. Isso ficou conhecido como Lag entre os primeiros usurios da
Internet. Lag o tempo decorrente entre a solicitao e a resposta.
Os gargalos de desempenho de rede tambm se refletiram no tempo que
levava para realizar o download de arquivos de imagens, documentos e software.
Como o desempenho da rede aumentou, juntamente com o poder de
computao em geral, a primeira onda de inovaes trouxe o conceito de
hipertexto. Hipertexto(do termo em ingls hipertext), uma forma de vincular
documentos em conjunto, utilizando referncias que contenham a localizao
de outros documentos e recursos binrios.
Logo veio a idia de incorporar recursos em documentos. O programa
que foi usado para exibir estas pginas tornou-se conhecido como um brow-
ser; nessa primeira onda de aplicaes surgiu o NCSA Mosaic [3], que mais
tarde se tornou o Netscape Navigator.
11
O conceito de hipertexto transformou-se em HTML (HyperText Markup

Language, tambm conhecida na poca como HyperText Meta Language),
um padro aberto, usada para troca de informaes. Como uma linguagem
de marcao(ver Figura 1), HTML fornecia os detalhes reais de como a pgi-
na deve parecer para o browser(Figura 2).
Figura 1 - Exemplo de cdigo em HTML
Figura 2 - Pgina HTML exibida no browser
Os documentos originais so codificados em texto simples. Quaisquer

elementos grficos tem que ser baixados em tempo de execuo; esses re-
cursos so referenciados no documento e exibidos.
O HTML tambm criou a possibilidade de publicar informaes a um
pblico muito grande nas mos dos usurios. Esta nova liberdade deu origem
a uma web, uma teia em ingls, de documentos e outros recursos, todos
conectados uns aos outros, da o termo World Wide Web, ou WWW.
3. World Wide Web

A World Wide Web (WWW ou simplesmente Web) uma coleo de recursos
vinculados. Documentos (chamados de pginas), imagens, vdeos, applets
interativos (mini aplicaes) e msica (MP3, por exemplo) so apenas alguns
dos recursos disponveis para os surfistas ou navegantes. No entanto, ela no
funciona por mgica, e til ter um pouco de conhecimento sobre as tecnolo-
gias subjacentes para entender melhor como programao na Web funciona
na prtica.
4. Servidores e Protocolos
A Web ainda um ambiente cliente/servidor, com base em pedidos e respos-
tas. Essas conversas entre o navegador(o cliente) e o servidor precisavam de
uma estrutura padro para a comunicao, e alguns protocolos foram estabe-
lecidos para fornecer uma forma padronizada de troca de informaes.
Os dois protocolos mais frequentemente usados na
internet so:
HTTP (HyperText Transfer Protocol) - Protocolo de Transferncia de
Hipertexto: um protocolo de comunicao utilizado para sistemas
de informao de hipermedia distribudos e colaborativos. ampla-
mente utilizado para recuperao e envio de dados na comunicao
com sites da web.
FTP(File Transfer Protocol) - Protocolo de Transferncia de Arquivos):
um protocolo padro de rede usado como forma bastante rpida e
verstil de transferir arquivos, sendo uma das mais usadas na Internet.
H tambm um padro, MIME (Multipurpose Internet Mail Exten-
sions), para a troca de e-mail, o qual baseia-se em uma especifi-
cao para o formato de anexos de e-mail que no so textos, per-
mitindo que o anexo seja enviado pela Internet. Por meio do MIME
possvel a um aplicativo cliente de e-mail ou Browser enviar e re-
ceber anexos como planilhas e arquivos de udio, vdeo e grficos
atravs de e-mails na Internet.
Todos esses protocolos prevem tambm um conjunto de respostas
padronizadas que permitem que o navegador exiba as informaes adequa-
das nos casos que as requisies no podem ser atendidas.
5. Motores de busca
Dado o grande volume de documentos e artefatos na Web, tornou-se imperativo
que os usurios tivessem uma maneira de realizar buscas diante do que estava
disponvel. Surgiu da a ne cessidade de algum tipo de servio capaz de indexa-
o e recuperao de informaes com base em seu contedo. Estes ficaram
conhecidos como motores de busca, tambm conhecidos como sites de busca.
Um motor de busca um servio baseado na Web que permite aos con-
sumidores localizar artefatos ou recursos na Internet como um todo. O usurio
de hoje estar familiarizado com nomes como Google [4] , Yahoo [5], Bing [6],
Altavista [7], e assim por diante, os quais so exemplos de motores de busca.
Dado o volume de informaes disponveis na Web, os mecanismos de
busca tornaram-se uma parte vital da relao produtor-consumidor. Motores
de busca so o nico modo pelo qual os surfistas (os consumidores) podem
muitas vezes localizar a informao que lhes interessa.
13
Idealmente, voc pode desejar que essas pesquisas aconteam em

tempo real, mas desde que isso no realmente vivel, os resultados so
baseados em pesquisas sobre cpias pr-indexadas. Cada sesso de inde-
xao cria um banco de dados que pode ser pesquisado sob demanda, com
pginas retornadas que se encaixam consulta feita pelo surfista.
6. Scripting no lado do Cliente

A programao do lado cliente sofreu e promoveu tambm uma grande re-
voluo na Internet. Desde os Applets Java[8], passando por animaes em
Adobe Flash[9] at chegar ao to falado atualmente HTML5[10] foi bastante
longo o caminho. A idia era trazer para os browser parte do processamento
necessrio para a execuo de algumas aes, livrando o lado servidor de ta-
refas que envolviam exibio, formatao ou animaes em cima dos dados
enviados aos browsers.
A seguir so listadas algumas das tecnologias utilizadas para criao de
pginas dinmicas e animaes na Web usando programao no lado do cliente:
Applets Java
DHTML
Adobe Flash
Adobe Flex
SVG
HTML 5
7. Programao no lado Servidor

A programao do lado servidor quem impulsiona a maior parte dos sites na in-
ternet atualmente. Desde um servidor HTTP (como Apache ou IIS), que lida com
as solicitaes e entrega de dados, at as vrias aplicaes interativas (como
Facebook [11], MySpace [12], YouTube [13]), sem a existncia de alguma lgica
sendo executada no lado servidor nenhum destes servios seria possvel.
A fim de criar Web sites mais interativos, dinmicos e personalizados foi
necessrio disponibilizar formas de programao no lado do servidor. Assim,
as primeiras pginas web que eram baseadas apenas em texto esttico de-
ram lugar a folhas de estilo e scripts do lado do cliente, os quais ajudaram a
tornar tais pginas mais sofisticadas visualmente e ricas em funcionalidades,
usabilidade e interatividade.
Com o avano dessas tecnologias, os programadores de sites da Web
sentiram a necessidade de dar um passo adiante, criando mecanismos que
ajudassem a gerar pginas dinamicamente. Logo os programadores comea-
ram a criar pequenos programas que foram projetados para rodar em segun-
do plano e capazes de gerar contedo em formato HTML. Esses programas

executavam nativamente nos servidores, utilizando-se de recursos dos siste-
mas operacionais subjacentes, como aplicaes capazes de realizar a inter-
face com o servidor Web, interagindo com os bancos de dados e provendo as
funcionalidades necessrias para a apresentao de contedo.
Esta acabou no sendo uma boa soluo uma vez que como todos os
Sistemas Operacionais so diferentes, havia a necessidade de encontrar uma
forma de executar scripts de maneira padronizada, funcionando igualmente
em todos os servidores Web e gerando contedo para todos os tipos de na-
vegadores. As razes a adoo de linguagens de script eram muitas, mas as
motivaes principais eram:
As linguagens de script podem ser misturadas com HTML.
Os scripts executados no lado servidor podem ter acesso aos servios
oferecidos pelos prprios servidores Web, como autenticao, acesso a Ban-
cos de Dados, dentre outros.
Para reforar a viabilidade, as linguagens de script so interpretadas.
Isto significa que o provedor de uma linguagem pode distribuir um programa
interpretador, construdo em vrias verses de plataforma, como Windows,
Linux, MacOS, e assim por diante, e assim todos os usurios da linguagem
podem trocar scripts sem ter que escrev-los especificamente para cada pla-
taforma. Isso confere s linguagens de script a vantagem da portabilidade do
cdigo produzido a ser executado no lado servidor.
Hoje, para facilitar a vida dos desenvolvedores e publicadores de con-
tedos, existem os CMS (ou Content Management Systems), que permitem
criar sistemas de entrega de documentos complexos de uma forma bem ami-
gvel. Blogger [14] e WordPress[15] um exemplo de uma implementao
bastante simples de CMS. Mais CMS mais complexos permitem a categori-
zao de documentos, a publicao, controle de verso, criao de menus
dinmicos, e outras caractersticas.
Com essa capacidade de criar e compartilhar informaes de forma
mais dinmica e fcil, o conceito da Web 2.0 surgiu e cresceu e assim, graas
integrao de tecnologias de lado cliente e servidor atravs da Internet os
usurios tm acesso a contedos cada vez mais dinmicos e alinhados aos
seus interesses e expectativas.
15
Atividades de avaliao
1. Pesquise sobre Applets Java, Adoble Flash, JavaScript e HTML 5, criando
um quadro comparativo sobre essas tecnologias, destacando a data de
criao, pontos fortes e pontos fracos de cada um destes.
2. Pesquise sobre CGI, ASP, APS .NET, linguagem PHP e Java, criando um
quadro comparativo sobre essas tecnologias, destacando a data de cria-
o, pontos fortes e pontos fracos de cada um destes.
3. Pesquise sobre 5 diferentes motores de busca atualmente encontrados na
Internet, especificando a data de criao, fundadores e que empresa atual-
mente responsvel por cada um destes.
Referncias
[1] Gopher, disponvel em: http://pt.wikipedia.org/wiki/Gopher
[2] Telnet, disponvel em: http://pt.wikipedia.org/wiki/Telnet
[3] NCSA Mosaic, disponvel em: http://pt.wikipedia.org/wiki/Mosaic
[4] Google, disponvel em: http://www.google.com
[5] Yahoo, disponvel em: http://www.yahoo.com
[6] Bing, disponvel em: http://www.bing.com
[7] Altavista, disponvel em: http://www.altavista.com.br
[8] Applets, disponvel em: http://pt.wikipedia.org/wiki/Applet
[9] Adobe Flash, disponvel em: http://www.adobe.com/br/products/flash.html
[10] HTML5, disponvel em: http://pt.wikipedia.org/wiki/HTML5
[11] Facebook, disponvel em: http://www.facebook.com
[12] MySpace, disponvel em: http://myspace.com
[13] YouTube, disponvel em: http://www.youtube.com
[14] Blogger, disponvel em: http://www.blogger.com/
[15] WordPress, disponvel em: http://wordpress.com/
Captulo 2
Noes Bsicas de HTML
19
Objetivos
Dar ao aluno a oportunidade de encontrar exemplos e atividades que o aju-
daro a compreender melhor o processo de criao de um web site usando
a linguagem HTML.
1. Introduo
Esse captulo apresenta os fundamentos da linguagem HTML[1], sua sintaxe
e os elementos bsicos com os quais possvel iniciar o processo de criao
de pginas para a web. Aqui o aluno pode encontrar exemplos e atividades
que o ajudaro a compreender melhor o processo de criao de um web site,
possibilitando uma viso prtica desse processo.
Os principais tpicos cobertos nesse captulo so:
O que HTML
Estrutura bsica de um documento HTML
Tags bsicas para formatao de fonte e texto
Imagens de fundo e cores de fundo
Tabelas
Elementos de formulrio
2. O que HTML
Criada como um linguagem de marcao, o HTML(HyperText Markup Lan-
guage, que significa Linguagem de Marcao de Hipertexto)[1, 2, 3], tem
como objetivo ajudar na definio da estrutura de documentos na Web. Trata-
-se de uma linguagem composta por TAGS (ou rtulos, elementos entre pa-
rnteses angulares < e >), que so usadas no inicio e no final do texto que vai
ser envolvido e afetado pelo cdigo.
Uma tag de inicio por exemplo a tag <b> que usada para colocar
uma poro de texto em negrito, dando-lhe destaque. A tag de fechamento
correspondente ser </b> que deve ser usada ao final desse texto que se
deseja formatar. Assim, quando se deseja colocar em negrito a palavra Ol!
da frase abaixo, ento o cdigo HTML fica:
<b>Ol!</b> O meu nome Carlos.

e o resultado visualmente ser:
Ol! O meu nome Carlos.
Uma tag composta por comandos, atributos e valores. Os atributos
modificam os comportamentos padres dos comandos e os valores especifi-
cam com detalhes essa mudana. Veja o exemplo a seguir:
<hr color=red />
O cdigo acima estabelece que seja criada uma linha horizontal de cor
vermelha:
hr = elemento que desenha a linha horizontal
color = atributo que define a cor da linha
red = valor do atributo color, que especifica a cor da linha a ser dese-
nhada
Estrutura Bsica de um Documento HTML
A construo de um documento HTML inicia-se pela definio do layout
bsico deste. Observando o exemplo a seguir fcil perceber a estrutura de-
finida pelas tags HTML nesse documento:
<html>
<head>
<title>Ttulo da sua pgina</title>
<meta name=description content=Breve descrio da sua pgina>
<meta name=keywords content=Palavras chave da sua pgina>
</head>
<body>
Nesta rea ficam os elementos visveis no browser, texto e imagens, bem

como todas as tags HTML de formatao.
</body>
</html>
Prtica 01 Meu Primeiro HTML

Antes de iniciar uma descrio mais aprofundada do comportamento de cada
elemento no exemplo anterior, digite o cdigo HTML acima usando um editor
de textos simples(Bloco de Notas, por exemplo) e salve o arquivo com o nome
exemplo-01.html em uma pasta de sua preferncia. Em seguida clique no
arquivo para exibi-lo no seu navegador e veja o resultado final.
21
As tags <html> e </html> dizem ao browser onde comea e onde termi-

na o cdigo HTML.
As tags <title> e </title> define qual o ttulo da pgina. O ttulo pode ser
visto no canto superior esquerdo do seu browser. O texto que for definido entre
estas tags tambm o texto que usado como ttulo pelos motores de busca
quando apresentam as pginas nos resultados de uma pesquisa.
A tag <meta name=description ...> contem detalhes que podem ser
teis para os motores de busca. Eles podem usar o contedo dessa tag para
fornecer uma descrio da pgina quando esta apresentada nas pesquisas,
podendo em alguns casos tambm ser usada uma parte aleatria do conte-
do do elemento <body> da pgina.
A tag <meta name=keywords ...> pode tambm ser usada pelos moto-
res de busca na indexao da pgina, o que ajuda nas pesquisas. comum
colocar as palavras-chave separadas por vrgulas no interior desta tag.
O contedo da pgina deve ser colocado entre as tags <body> e </
body>, sendo este o que visualizado no browser.
Uma vez inseridos os cdigos HTML e o contedo pretendido, deve-se
salvar o arquivo com a extenso .html. Para visualizar a pgina no browser
basta clicar duplamente sobre o arquivo.
3. Tags Bsicas para formatao de Fonte e Texto

Prtica 02 Formatao de Fonte e Texto
Crie um novo documento HTML e execute os seguintes exemplos, fa-
zendo experimentos com as seguintes tags que sero demonstradas.
Novo Pargrafo: Inicia um novo pargrafo inserindo uma linha em
branco entre o novo pargrafo e o anterior.
<p>texto</p>
Exemplo: <p> Esse apenas um simples exemplo de como criar um
pargrafo! </p>
Alinhar texto esquerda:

<p align=left>texto</p>
Exemplo: <p align=left> Esse apenas um simples exemplo de como
criar um pargrafo alinhado esquerda! </p>
Alinhar texto direita:
<p align=right>texto</p>
Exemplo: <p align=right> Esse apenas um simples exemplo de como
criar um pargrafo alinhado direita ! </p>
Itlico:
<i>texto</i>
Exemplo: <p> Esse apenas um <i>simples</i> exemplo de como criar
um pargrafo! </p>
Sublinhado:
<u>texto</u>
Exemplo: <p> Esse <u>apenas</u> um <i>simples</i> exemplo de
como criar um pargrafo! </p>
Negrito:
<b>texto</b>
Exemplo: <p> Esse <u>apenas</u> um <i>simples</i> exemplo de
como criar um <b>pargrafo</b>! </p>
Texto Riscado:
<s>texto</s>
Exemplo: <p> Esse exemplo mostra um texto <s>riscado</s>! </p>
Quebra de linha: Esta tag faz com que o texto seguinte mude para a
linha subsequente.
<br />
Centralizar:
<center>texto</center>
Alterar cor do texto: Pode-se tambm utilizar os cdigos HEX para
definir as mais variadas cores.
<font color=red>texto</font>
Alterar o tamanho: (escolher entre 1 e 7)
<font size=2>texto</font>
Alterar a fonte:
<font face=Arial>texto</font>
23
Prtica 03 Usando formataes de Fonte e Texto

Crie uma nova pgina HTML de acordo com o seguinte layout apresentado
na figura abaixo. Use os elementos vistos acima para elaborar sua pgina o
mais parecida possvel.
4. Imagens de Fundo e Cores de Fundo

4.1. Cor de Fundo
Para usar cores de fundo deve-se procurar uma combinao entre a cor de
fundo e a cor do texto que no dificulte a leitura. Em geral as cores claras fun-
cionam bem com uma cor escura para o texto.
Para usar uma cor de fundo na sua pgina deve-se usar o seguinte
cdigo dentro da tag <body>:
<body bgcolor=blue>
Pode-se tambm utilizar os cdigos HEX para definir as cores que com-
binem melhor.
4.2. Inserir uma Imagem de Fundo

Caso se deseje definir uma imagem de fundo deve-se usar o seguinte cdigo:
<body background=fotos/imagem.jpg>
importante lembrar-se que fotos/imagem.jpg a localizao do arqui-
vo da imagem. Trata-se de uma URL relativa que aponta para a pasta fotos
que deve estar no seu site. possvel tambm usar um URL absoluta, que pode
apontar para o seu site ou ento para outra imagem localizada em algum lugar
na internet. Um exemplo do cdigo da imagem de fundo com URL absoluta :
<body background=http://www.meudominio.com/fotos/imagem.jpg>
4.3. Inserindo Imagens

A tag para inserir imagens <img src=imagem.jpg>. O atributo src especifica a
URL do arquivo da imagem. Alm disso, o atributo alt deve ser usado para quan-
do se deseja que um texto aparea todas as vezes que o mouse estiver sobre a
imagem. Este mesmo texto tambm aparece como texto descritivo quando a exi-
bio das imagens no est ativa ou no possvel carregar a imagem. A tag fica:
<img src=imagem.jpg alt=Evento de Natal 2011 >
4.4. Definir Altura e Largura

possvel definir a largura de uma imagem usando-se o atributo width e
para altura o height. Para isso, os valores desses atributos pode ser defini-
dos em pixels ou em percentagem:
<img src=imagem.jpg width=200 height=100>
4.5. Inserindo Imagens em Hiperlinks

Para transformar imagens em links clicveis que possam redirecionar os usu-
rios para outras pginas, basta usar uma combinao das duas tags HTML
para imagem e para links:
<a href=http://www.uma_outra_pagina.com><img src=fotos/imagem.
jpg></a>
4.6. Inserir Hiperlinks

A tag para se inserir hiperlinks <a href=http://www.paginaDestino.com>Nome
do Link</a>. O resultado deste cdigo :
Nome do Link
4.7. Abrir links em Novas Janelas

Quando no se deseja que o usurio abandone completamente o site ao cli-
car nos links, possvel definir os links para abrirem numa nova janela com o
atributo target=_blank:
<a href=http://www.paginaDestino.com target=_blank>Nome do
Link</a>
4.8 Endereos Absolutos e Relativos

Uma URL (de Uniform Resource Locator), o endereo dos sites que todos
esto habituados a colocar na barra de endereos do navegador de internet.
Pode-se usar links para outras pginas usando URLs absolutas ou relativas.
URLs absolutas
Uma URL absoluta contm o caminho completo para a localizao do
arquivo/recurso do site que se pretende acessar.
Caso o usurio quisesse abrir uma pgina chamada alencar.html, que
se encontrava no interior de uma pasta chamada escritores, e esta pasta se
encontrava na raiz do site, ento a URL absoluta seria:
<a href=http://www.seusite.com/escritores/alencar.html> Jos de Alen-
car </a>
25
uma boa prtica o uso de URLs absolutas em pginas que possam

mudar de posio na estrutura de pastas do site. Dessa forma se a pgina que
contm os links mudar de pasta, os links vo continuar funcionando.
URLs relativas
Uma URL relativa indica apenas o caminho a percorrer desde a posio
em que a pgina com o link est at chegar ao recurso desejado.
Se por exemplo a partir da pgina alencar.html (que se encontra dentro
da pasta escritores) e deseja-se linkar de volta para a pgina principal (para
a pgina index.html da raiz do site), ento a URL relativa seria:
<a href=../index.html>Pgina Principal</a>
Os dois pontos, seguidos de uma barra, dizem ao browser para subir
um nvel na hierarquia na estrutura de pastas do site.
A URL relativa permite que o site possa ser testado offline. Desta forma
os links vo funcionar se abrirmos as pginas do site a partir do disco.
5. Criando Tabelas
Usando-se tabelas possvel ordenar os contedos do site de uma determi-
nada forma, ordenando-se imagens lado a lado, ou em linha, criar colunas
para o layout do site, criar uma barra lateral, etc.
5.1. Tags de tabela bsicas

So 3 as tags bsicas para inserir tabelas em pginas HTML:
<table> a tag que inicia e finaliza uma tabela
<tr> que significa table row( linha de tabela) a tag que representa
uma linha na tabela
<td> que significa table data (dados da tabela) a tag que repre-
senta uma clula da tabela dentro da linha
Pelo que foi proposto no pargrafo anterior, fcil perceber que em
HTML ento no existe o conceito de linhas e colunas como em uma ma-
triz. Na verdade, o que existem so linhas que podem conter clulas con-
tendo dados, mas na prtica vai ser comum ouvir e dizer que tem-se linhas
e colunas.
O exemplo a seguir mostra como possvel criar uma tabela simples:
<table>
<tr> <td>Clula A</td><td>Clula B</td> <td>Clula 3</td> </tr>
<tr> <td>Clula D</td> <td>Clula E</td><td>Clula F</td> </tr>
</table>
E o resultado desta tabela :

Clula A Clula B Clula C
Clula D Clula E Clula F
Observa-se que a tabela tem 3 linhas e 2 colunas. No cdigo HTML aci-
ma, cada <tr> uma linha. Como no interior de cada linha existem 2 tags <td>
isso resulta em 2 clulas por cada linha, ou 2 colunas na tabela final.
5.2. Definindo contorno para a Tabela

A definio de um contorno para uma tabela feita ao colocar no atributo
border a espessura do contorno desejado:
<table border=2>
<tr> <td>Clula A</td><td>Clula B</td> <td>Clula C</td> </tr>
<tr> <td>Clula D</td> <td>Clula E</td><td>Clula F</td> </tr>
</table>
E o resultado :
5.3. Definindo Espao que Envolve as Clulas - CELLSPACING

Caso deseje-se aumentar ou diminuir o espao no interior da tabela que en-
volve as clulas, necessrio usar o atributo cellspacing.
<table border=2 cellspacing=15>
<tr> <td>Clula 1</td><td>Clula 2</td> <td>Clula 3</td> </tr>
<tr> <td>Clula 4</td> <td>Clula 5</td><td>Clula 6</td> </tr>
</table>
assim:
5.4. Definindo espao no Interior das Clulas - CELLPADDING

Para aumentar ou diminuir o espao no interior das clulas usa-se o atributo
cellspadding.
<table border=2 cellpadding=10>
</table>
27
ficando:
Clula 1 Clula 2 Clula 3
5.5. Definindo a largura de uma Tabela

Para definir a largura de uma tabela usa-se o atributo width, podendo o seu
valor ser definido em pixels ou em percentagem. Exemplo:
<table border=2 width=100%>
</table>
resultado:
Ao usar-se um valor em pixels, por exemplo 400px, a tabela vai ter uma largu-
ra fixa de 400px.
<table border=2 width=400>
</table>
o resultado final desta tabela:

5.6. Definindo a largura das Colunas

Caso no se deseje que todas as colunas tenham a mesma largura, pos-
svel definir um atributo de largura dentro da tag <td>. Ao usar percentagens
tem-se por exemplo o seguinte cdigo:
<tr> <td width=50%>Clula 1</td><td>Clula 2</td> <td>Clula 3</td> </tr>
<tr> <td width=50%>Clula 4</td> <td>Clula 5</td><td>Clula 6</td> </tr>
</table>
e o resultado da tabela:
5.7. Definindo a Altura de uma Tabela

possvel tambm definir uma altura para a tabela adicionando o atributo
height:
<table border=2 height=200 width=400>

<tr> <td width=250>C 1</td><td width=75>C 2</td> <td width=75>C 3</td> </tr>
<tr> <td width=250>C 4</td> <td width=75>C 5</td><td width=75>C 6</td> </tr>
</table>
resultado:
C1 C2 C3
C4 C5 C6
5.7.1. Alinhando Horizontalmente o Contedo das Clulas

Por padro o contedo das clulas encontra-se alinhado esquerda, entre-
tanto possvel tambm centralizar o contedo e alinhar direita. Para isso
usa-se o atributo align no interior da tag <td>:
<tr> <td width=250 align=center>C 1</td><td width=75>C 2</td> <td
width=75>C 3</td> </tr>
<tr> <td width=250 align=center>C 4</td> <td width=75>C 5</td><td
</table>
resultado:
C1 C2 C3
C4 C5 C6
Caso deseje-se alinhar direita necessrio usar align=right.
5.7.2. Alinhando Verticalmente o Contedo das Clulas

Por padro os dados ficam alinhados verticalmente no meio (middle) da c-
lula, entretanto possvel alinhar o contedo para o fundo (bottom) e para o
topo (top) da clula. Para isso usa-se o atributo valign no interior da tag <td>:
<table border=2 height=200 width=400>
<tr> <td width=250 valign=bottom>C 1</td><td width=75>C 2</td> <td
<tr> <td width=250 valign=top>C 4</td> <td width=75>C 5</td><td
</table>
29
resultado:
C1 C2 C3
C4 C5 C6
Prtica 04 Criando tabelas

Crie um novo arquivo HTML, digite o seguinte cdigo nele e em seguida salve
o arquivo em uma pasta de sua preferncia. Veja se o resultado final parece
com a figura vista logo a seguir:
<html>
<body>
<table border=1>
<caption
<tr>
<th>Turno</th>
<th>Segunda</th>
<th>Terca</th>
<th>Quarta</th>
<th>Quinta</th>
<th>Sexta</th>
</tr>
<tr>
<td>AB</td>
<td>Algoritmos</td>
<td>PAA</td>
<td>Algoritmos</td>
<td>PAA</td>
<td>POO</td>
</tr>
<tr>
<td>CD</td>
<td>Automatos</td>
<td>Web 2.0</td>
<td>Automatos</td>
<td>Web 2.0</td>
<td>POO</td>
</tr>
</table>
</body>
</html>
31
Figure 1 - Exemplo de Tabela
5.8. Definindo Listas

5.8.1. Lista numerada
Para apresentar uma lista de itens numerados usa-se a tag <ol>, iniciais de
ordered list, para a lista, e a tag <li>, iniciais de list item, para cada item:
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
e o cdigo resultante :
1. Item 1
2. Item 2
3. Item 3
5.8.2. Lista no numerada

Para apresentar uma lista de itens no numerada usa-se a tag <ul>, iniciais de
unordered list, para a lista, e a tag <li>, iniciais de list item, para cada item:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
e o cdigo resultante :
Item 1
Item 2
Item 3
6. Definindo formulrios HTML e seus elementos

Formulrios podem ser usados para enviar dados pela web. Muitas vezes so
usados como formulrios de contato para converter informao inserida por
um usurio em um e-mail, ou mesmo para capturar os dados de um usurio
que deseja efetivar uma compra em um site de comrcio eletrnico. A figura a
seguir exibe um formulrio usado para envio de e-mail:
Figura 2 - Exemplo de formulrio
As tags bsicas usadas num formulrio HTML so form, input, textarea,

select e option.
6.1. Form
A tag form usada para definir o formulrio propriamente dito. Essa tag possui
um atributo obrigatrio, o action, que especifica o endereo do destino onde
os dados do formulrio sero processados.
O atributo opcional method diz a forma a ser utilizada pelo formulrio
no enviado dos dados, podendo ter o valor get (que o valor padro) ou post.
33
Esses valores correspondem aos mtodos suportados pelo protocolo HTTP

e comportam-se exatamente como estes. uma boa prtica usa-se post que
esconde a informao (get envia a informao atravs da URL, deixando-a
totalmente exposta). Exemplo:
<form action=enviarEmail.do method=post></form>
6.2. Input
A tag input a mais verstil de todas quando o assunto construo de for-
mulrios, podendo apresentar-se de dez formas diferentes, como possvel
ver abaixo:
Text: a caixa de texto padro. Ela tambm pode ter uma atributo
value, que define o valor inicial da caixa de texto.
Password: similar caixa de texto, mas o que for digitado pelo
usurio no vai ser visvel.
Checkbox: uma checkbox, que pode ser marcada e desmarcada
pelo usurio.
Radio: similar a um checkbox, mas o usurio s pode selecionar
um radio button em um grupo.
File: uma campo que permite procurar e escolher um arquivo no
computador, e usado para permitir ao usurio fazer upload de ar-
quivos.
Submit: um boto que quando clicado envia o formulrio.
Image: uma imagem que vai enviar as coordenadas do ponto em
que o usurio clicou.
Button: um boto que no faz nada sem cdigo extra adicionado.
Reset: um boto que quando clicado limpa os campos do formul-
rios para seus valores default.
Hidden: um campo que no aparece na tela e usado para passar
informao no exibvel ao servidor que processa o formulrio.
7. Textarea
A tag textarea define uma caixa de texto grande que requer os atributos rows
(linhas) e cols (colunas) e funciona da seguinte forma:
<textarea rows=5 cols=20>O texto fica aqui.</textarea>
7.1. Select
A tag select trabalha junto com a tag option pra criar caixas de seleo
drop-down. Exemplo:
<select>
<option value=primeira opo>Opo 1</option>
<option value=segunda opo>Opo 2</option>
<option value=terceita opo>Opo 3</option>
</select>
Todos os campos de formulrios precisam de nomes pra que possam

ser identificados pelo programa responsvel por eles. Isso feito por meio do
atributo name. Exemplo de formulrio:
<form action=algumscript.php method=post>
<p>Nome:</p>
<p><input type=text name=nome value=Seu nome /></p>
<p>Comentrios: </p>
<p><textarea rows=10 cols=20 name=comentarios>Seus comen-
trios</textarea></p>
<p>Voc :</p>
<p><input type=radio name=vocee value=homem />Homem</p>
<p><input type=radio name=vocee value=mulher />Mulher</p>
<p><input type=submit value=Enviar/></p>
<p><input type=reset value=Limpar/></p>
</form>
O formulrio acima deve ser exibido como pode ser visto na figura a
seguir:
35
Figura 3 - Formulrio de Opinio
7.2. Exibindo caracteres Especiais

Alguns caracteres especiais no so exibidos corretamente durante a exe-
cuo da pgina no navegador. A tabela a seguir apresenta os cdigos que
devem ser usados para exibir alguns desses caracteres:
Cdigo Carcter Descrio

< < Menor que
> > Maior que
™ Trademark
& & Ampersand
® Marca Registada
© Copyright
&dagger; Cruz
" Aspas
» Seta de citao
« Seta de citao
Tracejado
° 20 Grau
Cdigo Carcter Descrio
¼ Um quarto
½ Um meio
¾ Trs quartos
· Ponto no meio
¡ Ponto exclamao invertido
Para que apaream um dos smbolos da coluna amarela em destaque,

basta adicionar pgina HTML o respectivo cdigo.
1. Pesquise sobre os seguintes tipos de links e fornea exemplos de como
cria-los:
Hiperlinks ncora ou Marcadores
Links para E-mails
2. Hiperlinks por definio tm a cor azul. Pesquise e fornea exemplos de
como possvel alterar suas cores.
3. Pesquise no site da Adobe Kuller[4] combinaes de cores que voc pos-
teriormente usaria na construo de sua prpria Home Page.
4. Construa usando os elementos HTML visto nesse captulo sua Home Page,
apresentando os seguintes itens:
a. Dados Cadastrais com foto
b. Formao escolar
c. Experincias profissionais
d. Cursos e Treinamento
5. Usando tabelas, listas enumeradas e outros elementos HTML, crie uma
agenda semanal contendo suas tarefas a serem executadas com suas de-
vidas descries, horrios e datas.
Captulo 3
CSS
39
Objetivos
Apresentar os elementos bsicos usados em CSS que iro ajudar o aluno
a construir pginas mais leves, interativas e fceis de manter.
1. Introduo
Esse captulo trata do uso de folhas de estilo CSS para construo e melhoria
no design de pginas na Web. Aqui so apresentados os elementos bsicos
usados em CSS que iro ajudar o aluno a construir pginas mais leves e
fceis de manter, bem como mais atrativas e que estejam de acordo com as
novas tendncias da Web.
2. O que CSS?
CSS[1] um acrnimo para Cascading Style Sheet(termo em ingls que signi-
fica Folhas de Estilo Encadeadas), uma linguagem de estilo, simples e bastante
til, usada para definir a apresentao de documentos escritos em uma lingua-
gem de marcao. Uma de suas principais caractersticas sua capacidade de
prover a separao entre o formato e o contedo de um documento, ajudando
na confeco de documentos mais bem estruturados e fceis de manter.
Quando se faz uso de CSS na construo de um Web site, por exem-
plo, possvel definir toda a aparncia dos elementos visuais que compem
o mesmo a partir do CSS, deixando o cdigo responsvel pela formatao
completamente livre desse tipo de tarefa. Assim, por apenas alterar o CSS,
possvel obter-se uma aparncia nova, com fontes, cores e texturas diferen-
ciadas sem alterar a estrutura dos documentos de marcao em si.
O uso de CSS pode ser dar internamente nas pginas de contedo
como tambm por meio de arquivos externos. O uso de arquivos externos
ganhou muita popularidade na Web, sendo uma prtica bastante comum uma
vez que representa a possibilidade de modularizar e reaproveitar de forma
mais racional os mesmos.
Em sua idia inicial, o CSS foi criado para resolver um problema ine-
rente ao HTML 4[2] com relao presena de tags de estilo como <font>
e que foram embutidas na grande maioria dos documentos HTML da poca,
tornando difcil a manuteno destes. Para resolver esse problema, o World

Wide Web Consortium (W3C)[3] criou o CSS. A partir do HTML 4.0, toda a
formatao pde ser removida dos documentos HTML e guardada a salvo em
arquivos separados.
Por ser capaz de definir como os elementos HTML devem ser exibidos,
de uma forma declarativa, descrita em arquivos externos especficos .css, o uso
de CSS facilitou em muito a modularizao e o reuso de elementos visuais, aju-
dando tambm na consistncia de estilo entre esses, podendo-se ainda contar
com o fato de todos os browsers atualmente suportarem essa linguagem.
3. Sintaxe
Como toda linguagem, CSS apresenta uma sintaxe que deve ser seguida
para se obter os resultados desejados quanto a estilo. Uma regra CSS di-
vidida em duas partes principais, um seletor e uma ou mais declaraes[5]:
Figura 1 - Exemplo da Sintaxe CSS
Cada seletor normalmente um elemento HTML sobre o qual deseja-se

aplicar o estilo. Cada declarao consiste de uma um par propriedade e valor,
sendo a propriedade o atributo estilo que deseja-se modificar de acordo com
um dado valor.
Uma declarao CSS sempre termina com o smbolo de ; e um conjun-
to de declaraes que precisam estar agrupadas devem ser envolvidas por
um bloco definido pelos smbolos { e }, conforme pode ser visto no exemplo
a seguir:
Figura 2 - CSS modificando contedo de um pargrafo

41
muito comum colocar uma declarao em cada linha por questes

de legibilidade e facilidade de manuteno como pode ser visto no exemplo
a seguir:
Figura 3 - CSS mais legvel.
O exemplo a seguir demonstra como pode ser aplicado o estilo CSS

definido acima em uma pgina HTML simples:
Figura 4 - CSS embutido na pgina
A seguir possvel visualizar o resultado:
Figura 5 - Resultado do CSS embutido na pgina

Ao observar o exemplo acima, percebe-se o uso de CSS internamente

ao documento HTML (linhas 3 a 8). O estilo definido estabelece que todo ele-
mento do tipo pargrafo, isto <p>, deve ter seu contedo exibido em verme-
lho e alinhado ao centro.
Ao definir estilos CSS possvel fazer uso de comentrios para documen-
tar e esclarecer os detalhes do uso do CSS. Os comentrios CSS sero sempre
ignorados pelo browser no momento de carregamento da pgina. Um comentrio
CSS comea com /* e termina como */ , como se pode ver a seguir:
Figura 6 - Usando comentrio em CSS
4. Usando seletores
4.1. Seletor Universal
Um seletor universal aquele que est associado a todo e qualquer elemento
encontrado no documento HTML. Sua definio se d pelo uso do caracter *
(asterisco), como pode ser visto a seguir:
* {color : red;}
A regra acima quando executada ir exibir todo o texto da pgina na cor

vermelha.
4.2. Seletor de Elemento

aquele se est associado a todas as instncias de um dado elemento na
pgina. Exemplo:
p {color : blue;}
43
A regra acima quando executada vai exibir todos os pargrafos da p-

gina HTML em cor azul.
4.3. Seletor de Classe

aquele que est associado a qualquer elemento ao qual tenha sido associa-
do o nome da classe definida em CSS. Com isso, um mesmo estilo pode ser
aplicado a vrios elementos distintos, desde que nestes exista uma referncia
classe CSS. A seguir demostrado um exemplo de como definido um se-
letor de classe, ficando para um momento posterior a demonstrao de como
aplica-lo:
.total {color : green;}
Vale observar que para um seletor de classe, obrigatrio o uso do

caracter . (ponto) iniciando sua definio.
4.4. Seletor com ID

aquele que est associado especificamente a um nico elemento que con-
tem um dado ID associado a ele como atributo. Para a definio esse seletor
necessrio usar o carter # como visto a seguir:
#score {color: blue;}
O browser ir aplicar o estilo definido somente no elemento que apre-

sentar o atributo ID com o valor score.
4.5. Seletores mais Complexos

A seguir so exemplificados cenrios onde seletores podem ser combinados
de uma maneira mais complexa visando obter resultados mais sofisticados:
h1.main {color: blue;}
O seletor acima foi definido para associar-se a todos os elemento h1

que estejam em primeiro nvel e que usem a classe denominada .main.
h1, h2, h3 {color: green;}

O seletor acima foi definido para englobar todos os elemento h1, h2 e

h3 exibindo-os em cor verde.
5. Integrando nas pginas HTML

Existem trs maneiras diferentes de fazer uso de CSS em documentos HTML,
a citar:
Estilos em Linha(Inline Styles): os estilos so embutidos dentro dos
elementos da pgina.
Estilo embarcado(Embedded Style Sheet): os estilos so definidos
na sesso head do documento HTML.
Estilo Externo(External Style Sheet): os estilos so definidos em um
arquivo externo o qual referenciado a partir do documento HTML.
5.1. Estilos em Linha

Para fazer uso dessa estratgia adicione um atributo style a cada elemento
que deseja acrescentar estilo. Exemplo:
<p style=color:green;> Ol mundo CSS! </p>

<p style=font-size:9; color:red;text-align:center> Bye CSS! </p>
No exemplo acima os dois pargrafos sero exibidos com estilos dife-

rentes, o primeiro com a fonte na cor verde, o segundo em cor vermelha, com
tamanho de fonte 9 e alinhamento de texto ao centro.
5.2. Estilo embarcado

Apesar de ser possvel usar CSS em linha, aconselha-se evitar a no em
casos muito simples de uso. Uma outra opo seria definir o CSS dentro da
prpria pgina mas em um s lugar facilitando o processo de manuteno e
reuso de cdigo.
Para usar CSS embarcado use a tag style dentro do elemento head,
adicionando a ele as regras desejadas de estilo. Exemplo:
45
<html>
<head>
<title>Usando Estilo Embarcado </title>

<style type=text/css>

h1 {
color : purple
text-decoration : underline;
text-align : center;
}

h2 {
color: orange;
background-color: black;
text-align: center;
}
p{
font-weight: bold;
font-style: italic;
color: blue;
}
</style>
</head>
<body>
<h1>Esse H1 tem um estilo e cor purple, sublinhado e com alinha-
mento de texto ao centro. </h1>
<h2>Esse H2 tem um estilo em cor orange com fundo black e
alinhamento de texto ao centro.</h2>
<p>
Esse paragrafo tem estilo em cor blue com texto em destaque em
negrito e italico.
</p>
</body>
</html>
A figura a seguir exibe o resultado desse estilo:
Figura 7 - Resultado do uso do CSS
5.3. Estilo Externo

Os mesmos estilos CSS podem ser usados seguindo uma outra estratgia:
os estilos devem ser escritos em um arquivo externo ao documento HTML
e referenciado por meio da tag style. Com isso tambm possvel diminuir o
tamanho do documento HTML, evitando perda de tempo no carregamento do
arquivo. A seguir exemplo de como deve ser referenciado um css externo a
partir de um HTML:
<link rel=stylesheet type=text/css href=ENDEREO DO CSS />
O mesmo resultado obtido na figura anterior pode se dar usando essa

abordagem como pode ser visto no exemplo a seguir com a pgina HTML e o
estilo css declarados em um arquivos separados:
47
<html>
<head>
<link rel=stylesheet type=text/css href=estilo.css />
</head>
<body>
<h1>Esse H1 tem um estilo e cor purple, sublinhado e com alinha-
mento de texto ao centro. </h1>
<h2>Esse H2 tem um estilo em cor orange com fundo black e
alinhamento de texto ao centro.</h2>
<p>
Esse paragrafo tem estilo em cor blue com texto em destaque em
negrito e italico.
</p>
</body>
</html>
h1 {
color : purple
text-decoration : underline;
text-align : center;
}

h2 {
color: orange;
background-color: black;
text-align: center;
}
p{
font-weight: bold;
font-style: italic;
color: blue;
}
Prticas
Prtica 1: Navegao[7] com CSS
Nessa sesso o aluno vai criar atravs de exemplos prticos uma menu de
navegao baseado em elementos HTML e CSS.
Passo 01
Crie um arquivo HTML com o seguinte contedo:
<html>
<head>
<link rel=stylesheet type=text/css href=menu.css />
</head>
<body>
<ul id=nav>
<li id=nav_hom><a href=/>Home</a></li>
<li id=nav_quem><a href=/quem-somos.html>Quem Somos</a></li>
<li id=nav_neg><a href=/nosso-negocio.html>Nosso Negcio</a></li>
<li id=nav_con><a href=/contato.html>Contato</a></li>
</ul>
</body>
</html>
Passo 2
Em seguida crie o arquivo de estilo, chamado menu.css, e insira as seguintes
linhas nele:
Passo 3
Clique no arquivo HTML e visualize-o no seu browser. O resultado esperado
deve ser semelhante ao da figura seguinte:
/* Seletor 1 */
html {
font: small/1.4 Lucida Grande, Tahoma, sans-serif;
}
49
/* Seletor 2 */
body {
font-size: 92%
}
/* Seletor 3 */
#nav-bar {
margin: 0;
padding: 0;
background: #6F6146;
list-style-type: none;
width: 180px;
}
/* Seletor 4 */
#nav-bar li {
margin: 0;
padding: 0;
}
/* Seletor 5 */
#nav-bar a {
display: block; /* aumenta a rea clicvel do link. */
color: #FFF;
text-decoration: none; /* link exibido sem sublinhado */
padding: 0 15px;
line-height: 2.5;
border-bottom: 1px solid #FFF;
}
/* Seletor 6 */
#nav-bar #nav_con a {
border: none;
}
/* Seletor 7 */
#nav a:hover {
background: #4F4532;
}
Figura 8 - Menus com CSS
5.4. Detalhes de Implementao

Os seletores 1 e 2 definem detalhes sobre tipo de fonte a ser utilizado no
documento.
O seletor 3 especifica como deve ser exibida a lista no-enumarada de
links:
Define a margem e a distancia interna entre a lista e seus elementos
internos.
Define a cor de fundo do menu.
Define a largura do menu.
A linha list-style-type remove o smbolo de marcao geralmente as-
sociado a um item de lista no-enumarada.
O seletor 4 define que os elementos do menu sero exibidos sem margem
e sem espaamento interno.
O seletor 5 define que todo link que ser usado como item de menu deve:
Ser maior que o habitual, com uma rea clicvel expandida;
Apresentar letras em cor branca;
Apresentar contedo dos links sem sublinhado;
Apresentar uma borda slida em volta do item de menu.
51
O seletor 6, define que o ltimo item do menu deve ser exibido sem borda
inferior, evitando que esta aparea caso o fundo da pgina no seja branco.
O seletor 7 muda a cor do item de menu quando o mouse passado por
cima do item.
1. Construa um mini-site para uma empresa fictcia baseado na prtica acima
sobre menus com CSS e os contedos vistos nos demais captulos. Seu
site deve ter as seguintes sesses(pginas):
a. Home Page
b. Quem somos
c. Nosso Negcio
d. Contato
2. Pesquise na Internet sobre Web Standards e Tableless. O que significam
essas palavras? De que tratam esses conceitos?
3. Pesquisa na Internet se existe diferena na construo de um site para
ser acessado em dispositivos mveis. Os cdigos usados em geral so os
mesmos para celulares, tablets e computadores pessoais?
Referncias
[1] CSS W3C, disponvel em: www.w3.org/Style/CSS/
[2] HTML 4.01 Specification - W3C: disponvel em: www.w3.org/TR/html401/
[3] W3C, disponvel em: http://www.w3c.br/
[4] Curso de CSS3, disponvel em: http://www.w3c.br/Cursos/CursoCSS3
[5] Guia de Referncia CSS 2.1, disponvel em: http://www.w3c.br/divulga-
cao/guiasreferencia/css2/
[6] CSS Tutorial, disponvel em: http://www.w3schools.com/css/
[7] Adams & Cols. A arte e a Cincia do CSS, Bookman, 2009
Captulo 4
Noes bsicas
de JavaScript
55
Objetivos
Apresentar os fundamentos da linguagem JavaScript e descrever por meio
de cenrios e exemplos simples como ela pode ser utilizada para construir
aplicaes mais dinmicas e usveis na Web.
1. Introduo
Esse captulo apresenta os fundamentos da linguagem JavaScript e descreve
por meio de cenrios e exemplos simples como ela pode ser utilizada para
construir aplicaes mais dinmicas e usveis na Web.
2. O que JavaScript?
Segundo [1], JavaScript, ou JS como muitos referenciam, pode ser definida
como A linguagem da Web. Ela usada em bilhes de pginas Web para
adicionar funcionalidades, validar formulrios, comunicar com o lado servidor
e muito mais.
Esse captulo aborda somente sobre o JavaScript em client-side, ou
seja, somente cdigos que so inseridos nas pginas HTML sendo executa-
das pelo browser do cliente.
JS permite ao programador o acesso a todos os elementos de uma
pgina Web, como imagens, elementos de um formulrio, links entre outros.
Estes objetos podem ser manipulados ou modificados de maneira programti-
ca, uma vez que JavaScript permite ao programador capturar eventos, como
um click do mouse ou uma tecla pressionada de seu teclado. Com isso
possvel criar aes em resposta ou mesmo baseadas nas aes do usurio
ao integragir com as pginas Web.
3. Iniciando
Para inserir cdigos JS em um documento HTML necessrio o uso de uma
tag especfica para isso, a tag <script>. O contedo JS deve ficar envolvido
por essa tag como pode ser visto a seguir:
<script>
comandos...
</script>
possvel tambm inserir os cdigos JS em um arquivo externo e em

seguida fazer referncia a esse arquivo a partir da pgina HTML. Para isso a
mesma tag deve ser utilizada com a adio do atributo SRC que deve apontar
para a localizao do arquivo JS(veja a seguir).
<script src=meucodigo.js></script>
recomendado que a tag script seja inserida logo no topo do docu-

mento HTML, mas na verdade ela pode estar inserida em qualquer posio
do mesmo. Como uma boa prtica, deve-se colocar essa tag dentro do ca-
bealho da pgina, isto , dentro da tag <head> como pode ser visto a seguir:
<html>
<head>


<link rel=stylesheet type=text/css href=estilo.css />
<script>
function mostrarAlerta(){
alert(Olah Mundo JS!);
}
</script>
</head>
<body>
<p>
<input type=button onclick=javascript:mostrarAlerta();
value=Clique aqui />
</p>
</body>
</html>
57
A seguir veja o resultado da visualizao da pgina HTML acima e a

execuo do cdigo JS. Observe no cdigo acima como cdigo JS usado
na pgina, embutido na tag script.
3.1. A sintaxe
A sintaxe do JavaScript similar a sintaxe do C/C++ e do Java, sendo assim
como estas tambm uma liguagem case sensitive(faz distino entre lestras
maisculas e misculas). Na verdade ela fruto de uma padronizao re-
sultante de um esforo da Netscape foi junto a um corpo internacional de
padres chamado ECMA, ao qual a Netscape submeteu a especificao da
linguagem JavaScript. A ECMA, em junho de 1997, produziu um padro cha-
mado ECMA-262 (tambm conhecido como ECMAScript). [2]
As instrues de repetio e execuo condicional, normalmente en-
contradas em C e Java tambm esto presentes em JS, havendo algumas
diferenas quanto a declarao de variveis e seus tipos.
Prtica 01 A Funo document.write()

Toda pgina JS apresenta um objeto implcito chamado document. Uma de
suas principais funes write(), usada para escrever no corpo da pgina.
Teste o cdigo abaixo no seu browser:
<html>
<head>
<title>Primeiro JS</title>
<script>
var browserName browserName = navigator.appName;

document.write(seu browser + browserName);
</script>
</head>
<body>
</body>
</html>
Ao executar o cdigo acima no navegador e clicar no boto exibido,
resultado esperado deve ser semelhante ao da figura a seguir:
Figura 1 - Resultado do clique com JS
4. Operadores Lgicos e Matemticos

4.1. Operadores Lgicos
JavaScript suporta os seguintes operadores lgicos:
Operador Significado
== Igual
!= Diferente
> Maior
< Menor
>= Maior ou Igual
<= Menor ou Igual
&& E lgico
|| Ou lgico
59
4.2. Operadores Matemticos

Os seguintes operadores matemticos so suportados:
Operador Significado
+ Serve para adicao de valores e ao mesmo tempo pode ser usado na concatenacao de
strings.
- Utilizado na subtracao de valores
* Utilizado em multiplicacao de valores
/ Utilizado para divisao de valores
% Obtem o resto de uma divisao
4.3. Usando Variveis

Uma varivel pode ser chamada de um identificador. Em JS use a palavra var
para declarar suas variveis, podendo ela ser de qualquer tamanho, conter
nmeros, dgitos e underscores/underlines (_), sem a necessidade de espe-
cificar um tipo. Exemplo:
var minha_idade = 10;

var cor = azul;
var altura = 1.75;
* Nota: No se esquea: JavaScript case-sensitive!
4.4. Estruturas Condicionais

JavaScript incorporou as principais estruturas de deciso do C/C++.
4.5. A instruo IF
Usada para implementar tratamento condicional diante de uma deciso a ser
tomada, exemplo:
// exibe uma mensagem com Maior de idade!, caso a idade seja maior que 18.
if (idade >= 18) {
alert(Maior de idade!;
}
Essa instruo pode vir acompanhada de sua complementar else,

como visto a seguir:
// exibe uma mensagem com Maior de idade!, caso a idade seja maior que 18.
// Caso contrrio, exibe Ainda menor de idade!
if (idade >= 18) {
alert(Maior de idade!);
} else {
alert(Ainda menor de idade!);
}
4.6. A instruo Switch

Usada quando se tem mais de duas opes de escolha baseadas em valores
predefinidos. Exemplo:
switch (param) {
case 1:
alert(Opo 1 - listar);
break;
case 2:
alert(Opo 2 - Adicionar);
break;
case 3:
alert(Opo 3 - Remover);
break;
default:
alert(Sem opo - Sair!);
break;
}
4.7. Estruturas de Repetio

4.7.1. A instruo for
Para execuo de aes repetitivas possvel usar a instruo for. Ele
composta de trs partes distintas: inicializao, teste e incremento. A seguir
possvel observar seu uso:
61
for(var i = 1; i < 10; i++) {

document.write(i + <br />);
}
4.7.2. A instruo while

Assim como a instruo for, while usada para repetitivas. A idia pratica-
mente a mesma que a instruo anterior como pode ser visto a seguir:
var i = 0; // inicializao
while(i < 10){ // teste
document.write(i + <br />);
i++; // incremento
}
O exemplo a seguir demonstra muitos dos conceitos abordados at ago-
ra, dentre eles, variveis, operadores e instrues de repetio e condicionais:
<html>
<head>

<title>Usando Operadores e Instrucoes </title>

<script>
function validarPrimo(){
// Recuperando o valor digitado no campo de texto.
var valor = document.forms[0].numero.value;

var ehPrimo = true;

for(var i = 0; i < valor; i++) {
if ((valor % 2) == 0) {
ehPrimo = false; // o numero tem divisor
break;
}
}

// Verificando e exibindo o resultado.
if (ehPrimo){
alert(O numero + valor + primo!);
} else {
alert(O numero + valor + NAO primo!);
}
}
</script>
</head>
<body>
<form>
<p>
Numero: <input type=text name=numero />
</p>
<p>
<input type=button onclick=javascript:validarPrimo();
value=Clique aqui />
</p>
</form>
</body>
</html>
O resultado esperado pode ser visto a seguir:

63
Objetos
Em JavaScritp possvel trabalhar com objetos sendo alguns destes pre-de-
finidos na linguagem e acessveis para uso em pginas HTML. Dentre esses
objetos merecem destaque window e forms, que representam a janela atual e o
conjunto de formulrios HTML de uma dada pgina, respectivamente. O exem-
plo a seguir mostra como possvel acessar tais objetos de forma indexada:
<form method=post>
Nome: <input type=text name=nome />
Idade: <input type=text name=idade />
<input type=button name=enviarBtn />
</form>

<script type=text/javascript>
// acessando o valor do campo nome
var nome = document.forms[0].nome.value;
alert(nome);
</script>
No exemplo acima so utilizados dois objetos implcitos a toda pgina

HTML: document que representa a prpria pgina e forms. Esse cdigo aces-
sa o primeiro formulrio presente na pgina e em seguida busca o contedo
de um campo de formulrio chamado nome.
No exemplo a seguir usado um nome especfico para acessar o for-
mulrio, baseado em seu atributo name:
<form name=dados method=post>

<input type=button name=enviarBtn />
</form>

// dados o nome do form
var nome = document.dados.nome.value;
alert(nome);
</script>
Dessa forma fica fcil perceber que os objetos podem ser tratados de
duas formas: uma delas e chamando por um nome ordenado de uma proprie-
dade do documento e a outra e chamando pelo prprio nome.
Outro detalhe interessante que esses objetos podem ter proprieda-
des (caractersticas) e mtodos(comportamentos) e esses dois conceitos so
bastante explorados durante a programao JS.
Eventos
O browser interpreta o JavaScript esperando que eventos aconteam. Esses
eventos podem vir a acontecer quando a pgina termina de ser carregada ou
quando o usurio executa alguma interao com a pgina, como por exemplo
mover o mouse sobre um link ou clicar em um boto. A associao de even-
tos com funes tratadoras desses feita inserindo-se dentro das tags HTML
instrues que ligam os dois . A maioria dos eventos e precedido da palavra
ON, como por exemplo onMouseOver.
Cabe ao programador definir funes que contenham as devidas aes
a serem tomadas quando um dado evento disparado. A seguir possvel ver
uma tabela que ilustra que elementos so capazes de disparar eventos, que
tipo de eventos e em que situao isso acontece:
65
Tag Evento Quando chamado

onClick O usuario clica no link.
a onMouseOver O ponteiro do mouse e colocado em cima do link.
onMouseOut Quando o mouse sai fora do link.
onBlur A janela ou frame contendo esta pagina perde o focus.
onFocus Ao contrario do onBlur a pagina recebe o focus.
body
onLoad Quando a pagina foi terminada de carregar.
onUnlod Quando o usuario sai da pagina.
onReset Quando o botao RESET e pressionado.
form
onSubmit Quando o Botao submit e pressionado.
Tag Evento Quando chamado
onAbort A leitura da imagem foi parada por uma acao do usuario
img onLoad Quando a leitura da imagem e terminada.
onError Quando um erro ocorreu enquanto a imagem foi lida.
input:button ou
Quando um elemento do formulario clicado com o
checkbox ou radio ou onClick
mouse.
reset

onBlur Quando o elemento do formulario perde o focus.
onChange Quando o usuario muda o item selecionado.
input:text ou textarea
onFocus Quando um usuario clica em um item.
onSelect Quando um elemento do formulario recebe o focus
Prticas
Prtica 01 Validando dados do Formulrio
Crie a seguinte pgina HTML:
<html>
<head>
<title>Prtica-01</title>
function validarCampos() {
var nome = document.dados.nome.value;
var idade = document.dados.idade.value;

if ((nome == null) || (nome == )){
alert(O campo nome obrigatrio!);
}

if ((idade == null) || (idade == )){
alert(O campo idade obrigatrio!);
}
}
</script>
</head>
<body>
<form name=dados method=post>
<input type=button name=enviarBtn
onclick=validarCampos();/>
</form>
</body>
</html>
O cdigo acima faz uso do evento onClick no elemento button e chama

a funo JS denominada validarCampos() que responsvel por verificar se
todos os campos do formulrio foram preenchidos.
67
Sntese do captulo
Esse captulo trata da linguagem JavaScript, seus fundamento s princi-
pais elementos de programao. Os exemplos contidos nele ajudam a ter um
entendimento inicial de como criar tratadores de eventos em pginas HTML.
1. Crie uma pgina com um formulrio contendo os seguintes campos:
a. Nome
b. Endereo
c. Cidade
d. Cep
e. Cidade
f. UF
g. Data de Nascimento
Valide o formulrio como demonstrado na prtica 01.
2. Crie uma pgina com dois formulrios independentes, cada um contendo
campos HTML distintos. Crie duas funes de validao independentes
para cada formulrio, baseado no exerccio anterior.
Referncias
[1] w3schools/JS. Disponvel em: http://www.w3schools.com/js/
[2] ECMA-262. Disponvel em: http://developer.netscape.com/docs/javas-
cript/e262-pdf.pdf
[3] JavaScript Tutorial, disponvel em: www.w3schools.com/js/
[4] JavaScript - The W3C DOM, disponvel em: http://www.tutorialspoint.
com/javascript/javascript_w3c_dom.htm
Sobre os autores
Joaquim Celestino Jnior: Possui graduao em Engenharia Eletrnica
pela Pontifcia Universidade Catlica do Rio de Janeiro (1985), mestrado
em Cincia da Computao pela Universidade Federal da Paraba/Campina
Grande(1989), doutorado em Redes de Computadores - Universite de Paris
VI (Pierre et Marie Curie) (1994) e ps-doutorado em Redes Veiculares pela
Columbia University in New York City (2010). professor adjunto da Univer-
sidade Estadual do Cear (UECE). Tem experincia na rea de Cincia da
Computao, com nfase em Teleinformtica, atuando principalmente nos se-
guintes temas: redes de computadores, gerenciamento de redes e segurana.
Robrio Gomes Patricio: especialista em Desenvolvimento de Solues

Web usando a Plataforma Java EE pela Faculdade de Juazeiro do Norte,
possui graduao em Cincia da Computao pela Universidade Estadual do
Cear e Mestrando em Cincia da Computao pela Universidade Estadual
do Cear. Atuou como professor em Instituies de Ensino Pblico e Priva-
do de renome no estado do Cear, dentre elas a Instituto Federal do Cear,
Universidade Estadual do Cear(UAB), Universidade de Fortaleza, Faculdade
Sete de Setembro, Faculdade Leo Sampaio, Faculdade de Juazeiro do Nor-
te em cursos de Graduao e Ps-Graduaco. Atualmente trabalha na Facul-
dade Sete de Setembro como Vice-Coordenador do Curso de Bacharelado
em Sistemas de Informao e atua como Arquiteto de Software/Consultor em
Fortaleza(desde 2000) em projeto na area de TIC, exercendo atividades de
Consultor de TI e Instrutor de Cursos de Extenso nos mais diversos temas
tais como: Java, OOAD, SOA, SCRUM, Java EE, Java ME, Games, UML e
Design Patterns.
Computao
F
iel a sua misso de interiorizar o ensino superior no estado Cear, a UECE,
como uma instituio que participa do Sistema Universidade Aberta do

Computao
Brasil, vem ampliando a oferta de cursos de graduao e ps-graduao
na modalidade de educao a distncia, e gerando experincias e possibili-
dades inovadoras com uso das novas plataformas tecnolgicas decorren-
tes da popularizao da internet, funcionamento do cinturo digital e
massificao dos computadores pessoais.
Comprometida com a formao de professores em todos os nveis e
a qualificao dos servidores pblicos para bem servir ao Estado,
os cursos da UAB/UECE atendem aos padres de qualidade
Desenvolvimento
estabelecidos pelos normativos legais do Governo Fede-
ral e se articulam com as demandas de desenvolvi- para Web
mento das regies do Cear.
Universidade Estadual do Cear - Universidade Aberta do Brasil

ilO otirB sottaM ed ointnA odnanreF

ilO otirB sottaM ed solraC ocsicnarF
Cincias Artes
Qumica Biolgicas Plsticas Computao Fsica Matemtica Pedagogia

Apostila HTML, CSS e JAVASCRIPT

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Apostila HTML, CSS e JAVASCRIPT

Hochgeladen von

Copyright:

Verfügbare Formate

Computao

Desenvolvimento para Web

Universidade Estadual do Cear - Universidade Aberta do Brasil

ilO otirB sottaM ed ointnA odnanreF

Joaquim Celestino Jnior

Presidenta da Repblica Conselho Editorial

Editora da Universidade Estadual do Cear EdUECE

So inmeros os avanos tecnologicos promovidos pelo novo modelo

Contextualizar o aluno quanto aos conceitos e termos relacionados Inter-

A informao entregue em um modelo Cliente/Servidor; em outras pala-

O conceito de hipertexto transformou-se em HTML (HyperText Markup

Figura 1 - Exemplo de cdigo em HTML

Figura 2 - Pgina HTML exibida no browser

Os documentos originais so codificados em texto simples. Quaisquer

3. World Wide Web

Idealmente, voc pode desejar que essas pesquisas aconteam em

6. Scripting no lado do Cliente

7. Programao no lado Servidor

do plano e capazes de gerar contedo em formato HTML. Esses programas

<b>Ol!</b> O meu nome Carlos.

Nesta rea ficam os elementos visveis no browser, texto e imagens, bem

Prtica 01 Meu Primeiro HTML

As tags <html> e </html> dizem ao browser onde comea e onde termi-

3. Tags Bsicas para formatao de Fonte e Texto

Alinhar texto esquerda:

Prtica 03 Usando formataes de Fonte e Texto

4. Imagens de Fundo e Cores de Fundo

4.2. Inserir uma Imagem de Fundo

4.3. Inserindo Imagens

4.4. Definir Altura e Largura

4.5. Inserindo Imagens em Hiperlinks

4.6. Inserir Hiperlinks

4.7. Abrir links em Novas Janelas

4.8 Endereos Absolutos e Relativos

uma boa prtica o uso de URLs absolutas em pginas que possam

5.1. Tags de tabela bsicas

E o resultado desta tabela :

5.2. Definindo contorno para a Tabela

5.3. Definindo Espao que Envolve as Clulas - CELLSPACING

5.4. Definindo espao no Interior das Clulas - CELLPADDING

5.5. Definindo a largura de uma Tabela

o resultado final desta tabela:

5.6. Definindo a largura das Colunas

5.7. Definindo a Altura de uma Tabela

<table border=2 height=200 width=400>

5.7.1. Alinhando Horizontalmente o Contedo das Clulas

5.7.2. Alinhando Verticalmente o Contedo das Clulas

Prtica 04 Criando tabelas

Figure 1 - Exemplo de Tabela

5.8. Definindo Listas

5.8.2. Lista no numerada

6. Definindo formulrios HTML e seus elementos

Figura 2 - Exemplo de formulrio

As tags bsicas usadas num formulrio HTML so form, input, textarea,

Esses valores correspondem aos mtodos suportados pelo protocolo HTTP

Todos os campos de formulrios precisam de nomes pra que possam

Figura 3 - Formulrio de Opinio

7.2. Exibindo caracteres Especiais

Cdigo Carcter Descrio

Para que apaream um dos smbolos da coluna amarela em destaque,

tornando difcil a manuteno destes. Para resolver esse problema, o World

Figura 1 - Exemplo da Sintaxe CSS

Cada seletor normalmente um elemento HTML sobre o qual deseja-se

Figura 2 - CSS modificando contedo de um pargrafo