Introducao Ao Desenvolvimento WEB PDF

2009
Introduo ao
Desenvolvimento WEB
Verso 3.1
Este documento aborda tpicos tcnicos utilizados na criao da Interface Web:
HTML , CSS e Javascript bsico. Ideal para o iniciante ou desenvolvedor com
conhecimento mediano do assunto
1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

2: <html>
3: <head>
4: <html xmlns="http://www.w3.org/1999/xhtml">
5: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
6: <title>Minha primeira página web</title>
7: </head>
8: <body>
9: Oi mundo!
10: </body>
11: </html>
Professor Carlos Majer

Introduo ao Desenvolvimento WEB 2004 ~2009
ltima reviso em 02/01/2009
INTRODUO AO DESENVOLVIMENTO WEB VERSO 3.1
Este material pertence a Carlos A. Majer, Professor Universitrio de Tecnologia da

Informao e encontra-se disponvel em HTTP://www.carlosmajer.com.br
Licena de Uso
Este trabalho est licenciado sob uma Licena Creative Commons Atribuio-Permitida a Criao de Obras
Derivadas 2.5 Brasil. Para ver uma cpia desta licena, visite http://creativecommons.org/licenses/by-
nd/2.5/br/ ou envie uma carta para Creative Commons, 559 Nathan Abbott Way, Stanford, California 94305,
USA.
Isto significa que voc poder copiar, distribuir, exibir e realizar trabalhos derivados desta obra com as
seguintes restries:-
Voc dever sempre fazer referncia ao autor (Ou seja, Eu)
Voc no poder utilizar este trabalho para fins ilegais, imorais ou de forma a denegrir ou prejudicar
outras pessoas ou instituies.
Para maiores informaes envie um e-mail para

contato@carlosmajer.com.br ou cmajer@uol.com.br ou cmajer@ig.com.br.
Caso acredite que este material tenha lhe ajudado, envie um e-mail de agradecimento. Isto o suficiente para motivar-me a
continuar desenvolvendo este tipo de material e disponibiliz-lo para o pblico. Caso note algum erro ou tenha alguma sugesto,
sinta-se vontade para me contatar.
Prof. Carlos Majer Pgina 2

Contedo
Introduo Internet .............................................................................................................................. 6
Funcionamento da WEB ....................................................................................................................... 6
Conectando-se na Grande Rede ............................................................................................................ 7
IPs fixos e IPs dinmicos ...................................................................................................................... 7
Nmeros IPs e Resoluo de Nomes ..................................................................................................... 7
URL Uniform Resource Locator .......................................................................................................... 8
Protocolo ......................................................................................................................................... 8
Host do domnio ............................................................................................................................... 9
Nome do domnio. ............................................................................................................................ 9
:Nmero da Porta ............................................................................................................................. 9
A pgina HTML ..................................................................................................................................... 11
Introduo ........................................................................................................................................ 11
Elementos de uma pgina web ........................................................................................................... 11
Extenso HTML ou HTM ? .................................................................................................................. 11
Estrutura HTML (Marcas).................................................................................................................... 12
Sobre as marcas HTML ................................................................................................................... 13
As marcas bsicas .............................................................................................................................. 14
Cabealho ...................................................................................................................................... 14
Pargrafos ..................................................................................................................................... 15
Quebras de Linha ........................................................................................................................... 15
Comentrios ................................................................................................................................... 15
Trabalhando com texto ...................................................................................................................... 16
A marca PRE .................................................................................................................................. 16
Marcas de estilizao de texto mais utilizadas .................................................................................. 17
Entidades : Caracteres Especiais...................................................................................................... 18
Estilizando cores, fontes e tamanhos ............................................................................................... 18
Imagens............................................................................................................................................ 24
Formatos de imagem mais utilizados na Internet .............................................................................. 24
Inserindo imagens na pgina .......................................................................................................... 24
Links ................................................................................................................................................. 26
Criando Links Internos .................................................................................................................... 27
Criando Links Externos ................................................................................................................... 29
Inserindo um link numa imagem ..................................................................................................... 30
Inserindo um link numa imagem externa ......................................................................................... 30
Abrindo o link numa outra pgina .................................................................................................... 31
Tabelas ............................................................................................................................................. 31
Tamanho das clulas numa tabela ................................................................................................... 32
Bordas ........................................................................................................................................... 33
Inserindo ttulo / legenda numa tabela ............................................................................................ 34
Cabealhos na tabela ...................................................................................................................... 34
Cores nas Tabelas.............................................................................................................................. 35
Trabalhando o Layout das tabelas....................................................................................................... 37
Distanciamento das bordas ............................................................................................................. 37
Distanciamento entre as clulas ...................................................................................................... 38
Alinhamento ................................................................................................................................... 39
Agrupando elementos de tabelas ........................................................................................................ 41
Listas ................................................................................................................................................ 43
Criando Listas Ordenadas................................................................................................................ 43
Atributos de Tipos de Estilo de Listas Numeradas ............................................................................. 43
Criando Listas No Ordenadas ......................................................................................................... 44
Listas de Definio ......................................................................................................................... 46
Frameset (Conjunto de Quadros) ........................................................................................................ 47
Criando Frames .............................................................................................................................. 48

Frame de Navegao ...................................................................................................................... 49

Quadros Inseridos (In-Line Frames) .................................................................................................... 50
Vantagens e desvantagens no uso de frameset ................................................................................ 51
Formulrios ....................................................................................................................................... 52
Criando formulrios ........................................................................................................................ 52
Mtodos de Envio de Objetos de Formulrios ................................................................................... 52
Objetos de Formulrios ................................................................................................................... 53
Elemento Caixa de Texto ................................................................................................................ 53
Elemento Senha ............................................................................................................................. 54
Elemento Botes de Rdio .............................................................................................................. 55
Elemento Caixa de Verificao ......................................................................................................... 56
Elemento Lista de Seleo............................................................................................................... 57
Elemento rea de Texto.................................................................................................................. 59
Elemento Conjunto de Campos........................................................................................................ 59
Elemento Boto .............................................................................................................................. 59
Elemento LABEL ............................................................................................................................. 60
Elemento Upload de Arquivo ........................................................................................................... 61
HTML ou XHTML? .............................................................................................................................. 62
CSS - Folha de Estilo em Cascata ........................................................................................................... 64
CSS - Cascade Style Sheet (Folha de Estilo em Cascata)....................................................................... 64
O que ? ........................................................................................................................................ 64
Porque Surgiu? ............................................................................................................................... 65
Quando surgiu? .............................................................................................................................. 65
Definies e Conceitos ....................................................................................................................... 65
Criando estilos ................................................................................................................................... 66
Estrutura do estilo .......................................................................................................................... 66
Especificando diversos atributos ...................................................................................................... 66
Atributo baseado em texto .............................................................................................................. 67
Agrupando definies de estilo ........................................................................................................ 67
Aplicando CSS ................................................................................................................................... 67
Folha Externa ................................................................................................................................. 68
Estilo Interno (na pgina HTML) ...................................................................................................... 68
Estilo Em Linha (in-line) .................................................................................................................. 68
Prioridade de Aplicao ................................................................................................................... 69
Criando Classes ................................................................................................................................. 70
Delimitando o escopo de uma classe ............................................................................................... 72
Blocos e Estrutura em rvore ............................................................................................................. 72
Elementos de Bloco............................................................................................................................ 73
Elementos em nvel de linha ............................................................................................................... 74
A propriedade background ................................................................................................................. 75
A propriedade background-color ...................................................................................................... 75
A propriedade background-image .................................................................................................... 76
Medidas ............................................................................................................................................ 78
A propriedade display......................................................................................................................... 79
inline ............................................................................................................................................. 79
block ............................................................................................................................................. 79
list-item ......................................................................................................................................... 79
none .............................................................................................................................................. 79
Espaamento ..................................................................................................................................... 79
Margens ............................................................................................................................................ 81
Posicionamento ................................................................................................................................. 83
Posicionamento Esttico (static) ...................................................................................................... 83
Posicionamento Relativo (relative) ................................................................................................... 83
Posicionamento Absoluto (absoluto) ................................................................................................ 83

Aplicaes ...................................................................................................................................... 83
Criando Menus................................................................................................................................... 88
Estrutura do Menu .......................................................................................................................... 88
Identificando visualmente os elementos da estrutura ........................................................................ 89
Estilizando o Menu.......................................................................................................................... 89
Menus do Tipo Drop Down ................................................................................................................. 90
JAVASCRIPT ......................................................................................................................................... 92
Inserindo Comandos Javascript numa pgina WEB............................................................................... 92
Inserindo Comandos Javascript num evento de elemento de pgina WEB ............................................. 93
Eventos de uma pgina WEB .............................................................................................................. 93
Trabalhando com textos e expresses do tipo caractere ....................................................................... 95
Utilizao de variveis no Javascript .................................................................................................... 95
Expresses Matemticas..................................................................................................................... 95
Operadores Matemticos ................................................................................................................ 95
Operadores de Comparao ............................................................................................................ 96
Operadores de Associao .............................................................................................................. 97
Operadores Lgicos ........................................................................................................................ 97
Criando Funes / Procedimentos em Javascript ............................................................................... 98
DOM - Document Object Model .......................................................................................................... 99
Introduo ..................................................................................................................................... 99
Acessando atributos via Javascriipt ................................................................................................ 100
Consistindo Campos de Formulrios............................................................................................... 103
Colocando o foco num determinado campo .................................................................................... 104
Criando Mscaras para edio de dados ............................................................................................ 107
Identificando o objeto que iremos manipular .................................................................................. 107

Introduo Internet
Funcionamento da WEB
A Internet foi criada com base na ARPANET, uma rede descentralizada de comunicaes do Departamento
de Defesa (DoD) dos Estados Unidos. Durante a guerra fria, contra a Unio Sovitica, o DoD estava muito
preocupado com a reao que poderia advir de um ataque dos soviticos, que destrusse um dos elos (ns)
de sua rede, e em funo disto desabilitar as comunicaes entre os quartis generais de defesa. Em funo
disto, foi criada a rede experimental ARPANET que se utilizava de uma rede onde diversos computadores
poderiam utilizar rotas alternativas para comunicar-se com outros computadores da rede. Sendo assim, caso
uma rota fosse inviabilizada, os pacotes de informaes (dados) utilizaram outras rotas para chegar a seus
destinos.
Neste processo de criao e aprimoramento da ARPANET diversas tecnologias de telecomunicaes foram

criadas ou adaptadas. Protocolos, nmeros de identificao, mtodos de recuperao de erro e transporte
de dados e outros elementos foram trabalhados no sentido de viabilizar e maximizar o funcionamento da
rede.
Com o tempo e o esfriamento da guerra fria, esta rede evoluiu e passou a ser utilizada tambm no meio
acadmico, para depois de certo tempo ser aberta para o pblico geral resultando naquilo que hoje
chamamos de teia de alcance mundial (World Wide Web) ou Internet.
Atualmente, a Internet caracteriza-se por ser uma grande rede de computadores, que
os interligava atravs de um grande cabo imaginrio conhecido como backbone,
atravs do qual as pessoas se comunicam, trocando informaes e dados em
velocidades cada vez maiores.
No momento da conexo de um computador com a rede, este recebe um nmero IP (Internet Protocol).

Este nmero IP serve como identificao nica, para este computador. Isto quer dizer que num determinado
momento, cada dispositivo conectado na tem sua identificao que nica, e que possibilita ele ser
localizado e identificado por outros dispositivos.
Conectando-se na Grande Rede

Quando um usurio se conecta num provedor de acesso, como por exemplo, no IG , um de
@ seus servidores gera um nmero IP para este computador. Neste momento, este computador faz
parte da rede de computadores do IG, passando a ter acesso Internet. O processo anlogo
em qualquer outro provedor, como por exemplo, do Virtua .
Sendo um dispositivo interligado na Net, e tendo um nmero IP de identificao, ele pode efetuar consultas
e solicitaes por servios na Internet. Da mesma forma, ele tambm passa a ser passvel de varreduras,
podendo ser sondado, receber solicitaes de acesso, de servios e at ser invadido (ao menos enquanto
estiver conectado na rede).
IPs fixos e IPs dinmicos

A diferena entre uma conexo que utiliza um IP fixo e uma que utiliza um IP dinmico a de o IP fixo
nunca muda. Exemplos tpicos de IPs fixos so os das servidores que hospedam pginas web. Exemplos
tpicos de IPs dinmicos so aqueles utilizados por usurios de diversos tipos de provedores, especialmente
os de conexo via linha discada, que ao conectar num provedor de acesso recebem um nmero IP que
esteja disponvel, que provavelmente no ser (mas em alguns casos pode ser) igual ao da ltima vez que
acessou.
Nmeros IPs e Resoluo de Nomes

Cada byte, sendo composto de 8 bits pode conter at 256 combinaes diferentes (de 0 at 255). Um
nmero IP um conjunto de 4 bytes separados por um ponto, utilizando este formato de endereamento de
bits. Exemplo do site da Unicid (junho de 2006):-
200.212.140.185
ping www.cidadesp.edu.br
Disparando contra www.cidadesp.edu.br [200.212.140.185] com 32 bytes de
dados:
Resposta de 200.212.140.185: bytes=32 tempo=38ms TTL=248

Estatsticas do Ping para 200.212.140.185:

Pacotes: Enviados = 4, Recebidos = 4, Perdidos = 0 (0% de perda),
Aproximar um nmero redondo de vezes em milissegundos:
Mnimo = 24ms, Mximo = 45ms, Mdia = 35ms
Este nmero IP pode ser mudado pelo administrador da rede da UNICID. Atualmente (Fev/2009),
verifiquei que o cdigo em uso o 200.212.140.183
Como mais simples de se lembrar de um nome do que de um nmero IP, foi criada uma maneira para se
utilizar nomes do que nmeros. O servio DNS (Domain Name Server) efetua a resoluo de nomes,

associando os nmeros IPs nomes (alias) que ficam armazenando em tabelas nos servidores da Internet,
que efetuam constantes trocas de tabelas entre si, para ficarem sempre atualizados.
Isto quer dizer que voc pode digitar no seu navegador tanto 200.212.140.185 quanto
www.cidadesp.edu.br, para acessar o site da Unicid.
Que tal tentar?
URL Uniform Resource Locator

Diversos servios podem ser encontrados na Internet. Os mais comuns so:-
Servidor WEB (Internet)
Servidor FTP
Servidor de e-Mails
Servidor de Notcias
Servidor de Banco de Dados
Estes servios podem ser encontrados em diversos computadores na Internet. Os computadores que provm
(servem) algum destes servios so conhecidos como servidores.
Em geral, este computador tem um software que disponibiliza o servio (veja lista acima).
URL significa Uniform Resource Locator, ou seja, Localizador de Recursos Uniformes e a forma pela qual
formatamos o endereamento para acesso a um determinado recurso da Internet.
A Estrutura da URL definida da seguinte forma:-

1) Protocolo
2) Domnio
3) Porta de Acesso
4) Pasta
URI significa Uniform Resource Identifier, ou seja, Identificador de Recurso Uniform e a formatao para
se acessar um recurso especfico, como por exemplo, uma pgina web.
Para formatamos um URI adicionamos o nome do recurso na URL. Exemplo:-

1) Protocolo
2) Domnio
3) Porta de Acesso
4) Pasta
5) Arquivo
Vamos ver estes itens em detalhe:-
Protocolo
O protocolo como se fosse o nome da lngua pela qual as partes devero se comunicar.
Este protocolo define o que o programa que est solicitando o servio deseja e como o servidor deve se
comportar.
Um exemplo bem prtico disto o do navegador solicitando uma pgina a um servidor. O usurio em seu
navegador (cliente), tenta acessar uma pgina.

Assim que o usurio teclar ENTER, o navegador, por padro, insere o protocolo HTTP (Hyper Text Transfer
Protocol), na frente do nome de pgina:-
O navegador faz isto para que o servidor (computador que ir receber a solicitao, localizado no endereo
fornecido acima) ao receber a solicitao de abertura de pgina consiga passar esta responsabilidade
(localizar e disponibilizar a pgina) para o software correto (software servidor web, muitas vezes o IIS
Internet Information Services ou Apache).
Sem o uso do protocolo, o servidor (computador) no saberia qual software executar para atender a
demanda.
Com base neste protocolo, o servidor web (software que est rodando no computador servidor) identifica a
solicitao web (http), localiza a pgina desejada e devolve ao cliente (navegador).
Os protocolos mais comuns so:-
Protocolo Utilizao
http:// Localiza um recurso (pgina www, imagem, etc) num servidor Web
ftp:// Localiza um arquivo num servidor FTP
news:// Localiza um servidor de notcias na Web
file:// Localiza um arquivo num computador ou rede local
Host do domnio
Quando no informado, o host assumido como www.
Nome do domnio.
o nome pelo qual seu domnio foi registrado na entidade de registro de domnios de seu pas. No Exemplo
abaixo estar sendo utilizado o domnio da UOL (uol.com.br)
:Nmero da Porta
Como um dispositivo (computador) pode ter diversos servios disponveis (veja lista acima) , e considerando
que o endereo do dispositivo nico, a maneira pela qual ele disponibiliza seus servios atravs do uso
de portas. As portas so identificaes especficas de certos servios, e muitas vezes sua utilizao se d de
forma transparente, sem que o usurio note sua utilizao.
Como um exemplo disto, podemos afirmar que os navegadores (Internet Explorer, Mozila Firefox, etc) esto
configurados para acessar um dispositivo (computador) na Internet e fazer uma solicitao na porta 80, que
a porta padro da Internet.
Alguns exemplos de portas:-
Porta Uso
20 e 21 Servio FTP
23 Telnet
25 SMTP Simple Mail Transfer Protocol - Uso para Envio de e-Mails
53 DNS Domain Name Server
80 INTERNET Porta de acesso para servio de pgina
109 e 110 POP Post Office Protocol Para Recebimento de e-Mails
119 NNTP Network News Transfer Protocol Para recebimento de Notcias
Exemplo de endereamento de um recurso:-

http://www.cidadesp.edu.br:8080/pastavirtual/majer/historia.html
Inicialmente temos o protocolo http://
Em seguida temos a informao de host e do domnio de destino
www.cidadesp.edu.br
Em seguida temos a porta 8080
Em seguida temos o nome da Pasta dentro do domnio.

pastavirtual/majer
E finalmente o recurso desejado, que o arquivo:-

historia.html

A pgina HTML
Introduo
HTML significa Hyper Text Markup Language, que traduzida para o portugus significa Linguagem de
Marcao de Hipertexto. Esta linguagem permite a utilizao de um conjunto de comandos para exibio
de contedo e formatao de layout de pginas para Internet.
Os arquivos do tipo HTML so arquivos textos, que podem ser abertos e editados pelo Bloco de Notas ou
qualquer programa editor de textos simples.
Ao examinarmos o contedo de um arquivo HTML, notamos a existncia de comandos (as marcas), que
determinam a maneira pela qual a pgina web ser interpretada por um navegador (Internet Explorer,
Mozilla Firefox, Safri, Opera, etc.).
As marcas podem utilizar atributos, que so informaes especficas de como o comando (marca) dever ser
executado.
Em funo de seu formato aberto e no proprietrio, este tipo de arquivo pode ser visualizado em diversas
plataformas dentre elas Windows, Linux, Unix, Macintosh, etc.
Elementos de uma pgina web

Uma pgina web pode conter diversos tipos de elementos:-
Textos: o tipo de informao mais comum em pginas da INTERNET. Costumam ser dispostos
em diversos tamanhos e cores, despertando o interesse do usurio.
Imagens: Diversos tipos de imagens so utilizados para enriquecer a experincia do usurio na
rede. Dentre elas podemos destacar as imagens estticas, geralmente nos padres JPEG e PNG, as
imagens animadas no formato GIF e principalmente as animaes feitas em FLASH.
Elementos de Formulrio: Os formulrios representam uma interface entre o site e o usurio,
solicitando informaes do usurio com diversos intuitos dentre eles o de se cadastrar o usurio no
site para receber informaes, inserir pedidos de informaes especficas, efetuar buscas, efetuar
pedidos de compras, etc.
Arquivos de udio: Os arquivos de udio colocam-se como uma outra maneira para se melhorar a
interface com o usurio e chamar a ateno sobre determinado site.
Arquivos de Vdeo: Atualmente muito em uso, os arquivos de vdeo inseridos em pginas web
permitem uma maior facilidade na transmisso da informao, alm do que tambm serve como
ferramenta de marketing e propaganda.
Jogos e aplicaes Java: Diversos tipos de aplicaes esto sendo construdos para Internet
atravs da utilizao da linguagem Java, dentre elas Acesso a Bancos, Interfaces com dispositivos
diversos, Jogos e muito mais.
Links: Os links so a base de funcionamento da web, visto que se baseia no conceito de Hipertexto,
no qual um texto (ou parte dele) ao ser clicado pode conduzir o usurio para um outro texto,
localizado em qualquer local do documento (pgina).
Extenso HTML ou HTM ?

Pode ser utilizada tanto uma quanto a outra. Em funo de restries de alguns sistemas operacionais
antigos (DOS), os arquivos s podiam utilizar trs letras em sua extenso. Hoje no importa qual a extenso
utilizada, pois ambas so vlidas.

Estrutura HTML (Marcas)

Uma pgina html delimitada pelas marcas:-
<html>
</html>
Dentro dela temos uma rea de cabealho, onde podemos inserir alguns comandos de configurao, como
por exemplo, o ttulo da pgina. Esta rea criada atravs das marcas:-
<head>
</head>
Em seguida existe uma segunda rea, que a rea do corpo da pgina, que ir abrigar o contedo a ser
exibido na tela do navegador. Esta rea criada atravs das marcas:-
<body>
</body>
As marcas HTML ficam contidas entre os sinais de < menor que e > maior que.
Abaixo notamos um exemplo da estrutura em cdigo HTML de uma pgina web:-
E em seguida a sua apresentao num navegador:-

Para verificar como est ficando sua pgina, salve-a numa pasta (diretrio) e em seguida abra-a
atravs de seu navegador. Clicando duplamente no arquivo gerado ir automaticamente acionar seu
navegador padro (Firefox, Microsoft Internet Explorer) para a abertura da pgina web.
O contedo de uma pgina web fica em cach, que uma memria temporria que o seu
navegador utiliza para agilizar o carregamento de uma pgina.
Muitas vezes, ao tentar abrir-se uma pgina, o contedo que aparece o que est neste cach (e
no a pgina que acabou de ser alterada e salva). Quando isto ocorrer, utilize o boto de recarga de
pgina (geralmente F5) do Navegador para atualizar seu cache com o contedo atualizado da
pgina.
Sobre as marcas HTML

Ciclo de vida
Atravs da continua evoluo da tecnologia, certas marcas HTML vo se tornando obsoletas (depreciadas),
ou seja, deixando de ser utilizadas. Outras so trocadas por marcas ou tecnologias mais novas. Isto uma
evoluo natural. A prpria criao e uso do CSS (Folha de Estilos em Cascata abordado adiante, neste
documento) um exemplo disto, na medida em que seus comandos acabam sendo recomendados para
utilizao, no lugar de algumas marcas, para efeitos de apresentao do contedo das pginas HTML.
O ciclo de vida das marcas HTML basicamente o seguinte:-

Concepo Proposta Especificao Depreciao Obsoletismo
Fase Descrio
Concepo Quando a marca concebida para uso em determinadas circunstncias.
Proposta A marca (ou tecnologia) enviada para o W3C que ir verificar vantagens e viabilidade de
implementao
Especificao Ocorre quando uma marca (ou tecnologia) aceita pelo W3C e faz parte da especificao de
uma verso do HTML.
Depreciao Quando uma marca (ou tecnologia) trocada por outra melhor, mas deve ainda ser
suportada pelos navegadores por questes de compatibilidade com verses de pginas
anteriores.
Obsoleta Quando uma marca (ou tecnologia) considerada obsoleta de forma que no existe mais
garantia de que a mesma ser suportada por um navegador.
Embora algumas marcas possam ser consideradas depreciadas, pois foram trocadas por outras tecnologias
comum o fato das mesmas continuarem a ser utilizadas por um bom tempo, at que a comunidade absorva
e utilize com regularidade a nova tecnologia.

As definies sobre padres Internet so efetuadas pelo W3C World Wide Web Consortium.
As marcas bsicas
Cabealho
Os cabealhos so definidos atravs das marcas <h1> representando a fonte maior, at <h6> para se
definir a fonte menor.
Exemplo:-
<h1>Cabealho do tipo h1</h1>

</h1>
</h2>
</h3>
</h4>
</h5>
</h6>
Uma linha antes e aps o cabealho sempre inserido pelo HTML.

Pargrafos
Os pargrafos so definidos atravs
s da marca <p>.
Exemplo:-
<p>Eu sou um pargrafo</p>
<p>Eu sou outro pargrafo</p>
</p>
Uma linha antes e aps o cabealho sempre criada na utilizao do pargrafo.

O navegador ignora o nmero de espaos repetidos ou pulos de linha manual de seu texto (ENTER)
trocando estas ocorrncias por um nico espao, ou seja, se numa posio do seu texto voc tiver
10 espaos no texto, ou tenha teclado cinco vezes a tecla <ENTER>, somente ser exibido um
espao no lugar
Quebras de Linha
Quebras de linha so definidas atravs de uma marca <br>.
Ela deve ser utilizada quando se deseja inserir uma nova linha, levando o contedo para a prxima linha,
sem iniciar um novo pargrafo.
Exemplo:-
<p>O contedo desta linha foi <br>quebrado para a linha <br>de baixo</p>
Podemos dizer que atualmente, no

o sabemos
sabe em que dispositivo um site pode ser aberto.
Pode ser um computador, Palmtop ou SmartPhone.
Querer forar um layout atravs do uso de pargrafos, espaos e quebra de linhas pode no
n gerar o
resultado esperado.
o navegador quem verifica o tamanho da resoluo de vdeo e adapta o contedo a ser exibido,
exibido ajustando
o texto e demais elementos conforme o tamanho da janela.
A configurao dos navegadores e a configurao do vdeo do usurio fazem com que seja muito
difcil um site ser exibido exatamente igual em dois navegadores diferentes.
Comentrios
Comentrios podem ser inseridos no HTML atravs
atrav do uso das marcas 
Exemplo:-
>

Trabalhando com texto

Utilizar texto dentro de uma pgina HTML bem simples. digitar o texto abaixo da marca body e o
mesmo aparece no navegador, quando a pgina carregada.
Verificamos tambm que podemos inserir um trecho de texto dentro de um pargrafo (marca <p>), como
um cabealho (marcas <h1> a <h6>) e at forar a quebra de linha (marca <br>).
O ideal que o desenvolvedor, ao criar uma pgina HTML estruture seu contedo, identificando os
cabealhos, pargrafos, tabelas e outros tipos de informao, objetivando acomodar de maneira adequada o
contedo a ser exibido.
O HTML disponibiliza ao desenvolvedor um conjunto de marcas que possibilitam estilizar determinados

trechos de textos.
A marca PRE
Esta marca faz com que o texto contido na mesma seja exibido de forma exata como digitado.
Isto pode ser muito til quando queremos preservar a formatao de um trecho de texto.
Exemplo:-
<body>
<p> A funo abaixo foi desenvolvida em Javascript. Ela solicita um nome ao
usurio e verifica se algo foi informado</p>
<pre>
function PegaNome()
{
var lRet=true
var nome=''
while(nome=='' || (nome==null))
{
nome=prompt('Favor informar seu nome:','')
if ((nome=='') || (nome==null))
{
alert('Nome em branco \nCampo Obrigatrio!!')
lRet=false
}
}
return lRet
}
</pre>
</body>
Resultado:-

Marcas de estilizao de texto mais utilizadas

Marca Descrio
small Diminui a fonte do texto
big Aumenta a fonte do texto
em Enfatiza um texto.
texto * Equivalente marca <i>
strong Enfatiza um texto com maior intensidade (Negrito).
(Negrito) * Equivalente marca <b>
sub Exibe o texto em formato subescrito
sup Exibe o texto formato superescrito
ins Utilizado para marcar um trecho de texto que foi inserido numa nova verso de um
documento
del Utilizado para marcar um trecho de texto que foi eliminado de uma verso anterior de
um documento
* Equivalente s marcas <strike> e <s>
Exemplos:-
<body>
Texto Normal,<small>Texto
Texto Menor</small>,<em>Texto Enfatizado</em>
</em> <br>
<strong>Texto em Negrito</strong>
</strong>, <sub>Texto Subescrito</sub>,
<sup>Texto Superescrito</sup><br>
</sup><br>
<ins>Texto
Texto Inserido numa nova verso de documento</ins>,<del>Texto
documento Texto eliminado na
nova verso do documento</del>
</del>
</body>
Resultado:-

Acostume-se a digitar as marcas em letra minscula, que uma das regras do padro XHTML,
explicado adiante
Entidades : Caracteres Especiais

Muitas vezes queremos inserir um caractere especfico na pgina HTML. Como por exemplo, o caractere de
sinal de menor. Ocorre que certos caracteres (como neste caso) tm significado e uso especfico (reservado)
pelo HTML. No caso do sinal de menor (<), este caractere utilizado para definir o incio de uma marca.
Se voc inserir um sinal de menor, o navegador vai entender que voc est informando uma marca. Neste
caso, como voc iria exibir na tela o texto abaixo?
.... caso x < 5, ento.....
Para que possamos trabalhar com alguns caracteres especiais (como no exemplo acima), trechos de textos
especiais como entidades foram criados para serem utilizados no lugar do caractere (reservado) desejado.
Tabela de Entidades mais comuns

Caractere Uso Exemplo Caractere Uso
Espao
Menor que < < < Ã
Maior que > > > õ
E comercial & & & Õ
Aspas duplas " ç
Aspas simples ´ ' Ç
Centavo ¢ á
Libra £ Á
Yen ¥ é
Pargrafo de documento § É
Copyright © í
Marca Registrada ® Í
Multiplicao × ó
Diviso ÷ Ó
Mais e Menos ± ú
Graus ° Ú
ã À
Pode at ocorrer de algum navegador exibir o caractere especial inserido na pgina, mas isto no
garantia de que esta pgina ser exibida em todos os navegadores de forma correta.
Estilizando cores, fontes e tamanhos

Para estilizar cores, tamanhos e famlias de fontes em trechos de texto, o HTML disponibiliza a marca
<font>. Esta marca funciona com os seguintes atributos:-
A palavra <font color="blue">cu</font> est em cor azul.

O desenvolvedor pode selecionar uma cor pelo seu nome em ingls conforme a tabela de cores (mencionado
mais para a frente neste documento) RGB (mistura das cores Red vermelho, Green Verde e Blue Azul)
reconhecida pelos navegadores, conforme regras do W3C. Copie e cole o exemplo abaixo para verificar no
seu navegador:-
<html>
<head>
<title>Algumas variaes do azul - HTML</title>
</head>
<body>
<table>
<tr>
<td>Azul - Navy</td>
<td width="60" bgcolor="Navy"> </td>
</tr>
<tr>
<td>Azul - Acqua</td>
<td bgcolor="Acqua"> </td>
</tr>
<tr>
<td>Azul - cdigo #0000FF</td>
<td bgcolor="#0000FF"> </td>
</tr>
</tr>
<tr>
<td>Azul - cdigo #112D77</td>
<td bgcolor="#112D77"> </td>
</tr>
<tr>
<td>Azul - cdigo #6141FA</td>
<td bgcolor="#6141FA"> </td>
</tr>
</table>
</body>
</html>
Resultado:-

Tabela de Cores RGB
<html>
<head>
<title>Tabela de Cores</title>
</title>
</head>
<body>
<table border="1" bordercolor="#CCCCCC">
bordercolor
<tr>
<th> Nome </th>
<th> Número RGB </th>
<th> Exemplo </th>
</tr>
<tr>
<td> White </td>
<td>>#FFFFFF </td>
<td bgcolor="#FFFFFF " width="20"> </td>
width
</tr>
<tr>
<td> Black </td>
<td>>#000000 </td>
<td bgcolor="#000000 " width="20"> </td>
</tr>
<tr>
<td> Gray </td>
<td>>#808080 </td>
<td bgcolor="#808080" width="20"> </td>
width
</tr>
<tr>
<td> Silver </td>
<td>>#COCOCO</td>
<td bgcolor="#COCOCO"" width="20"> </td>
</tr>
<tr>
<td> Red </td>
<td>>#FF0000</td>

<td bgcolor="#FF0000" width="20"> </td>

</tr>
<tr>
<td> Purple </td>
<td>>#800080</td>
</tr>
<tr>
<td> Fuchsia </td>
<td>>#FF00FF</td>
</tr>
<tr>
<td> Pink </td>
<td>>#FFC0CB</td>
<td bgcolor="#FFC0CB" width="20"> </td>
</tr>
<tr>
<td> Maroon </td>
<td>>#800000</td>
</tr>
<tr>
<td> Green </td>
<td>>#008000</td>
</tr>
<tr>
<td> Olive </td>
<td>>#808000</td>
</tr>
<tr>
<td> Lime </td>
<td>>#00FF00</td>
<td bgcolor="#00FF00" width="20"> </td>
</tr>
<tr>
<td> Teal </td>
<td>>#008080</td>
</tr>
<tr>
<td> Yellow </td>
<td>>#FFFF00</td>
<td bgcolor="#FFFF00" width="20"> </td>
</tr>
<tr>
<td> Blue </td>

<td>>#0000FF</td>
<td bgcolor="#0000FF" width="20"> </td>
</tr>
<tr>
<td> Navy </td>
<td>>#000080</td>
</tr>
<tr>
<td> Acqua </td>
<td>>#00FFFF</td>
<td bgcolor="#00FFFF" width="20"> </td>
</tr>
</table>
</body>
</html>
Resultado:-
Quanto ao tamanho, o desenvolvedor tem a sua disposio a propriedade size, da marca <FONT>. Os
valores (tamanhos) variam de 1 a 7. Exemplo:-
<html>

<head>
<title>Propriedade SIZE da marca FONT </title>
</head>
<body>
<font size="1">Tamanho 1, </font>
</body>
</html>
Resultado:-
Diversas famlias de fontes so disponibilizadas. Quando uma pgina tenta utilizar uma da lista, e o
navegador no a encontra no micro do cliente, ele tenta a segunda da lista e em caso de problemas, ele
tenta em seguida a terceira.
<html>
<head>
<title>Propriedade SIZE da marca FONT </title>
</head>
<body>
<font face =" Arial, Helvetica, sans-serif "> Famlia Arial, Helvetica, Sans-serif </font> <br>
<font face =" Times New Roman, Times, serif"> Famlia Times New Roman, Times, serif </font> <br>
<font face =" Courier New, Courier, mono"> Famlia Courier New, Courier, mono </font> <br>
<font face =" Georgia, Times New Roman, Times, serif"> Famlia Georgia, Times New Roman, Times, serif
</font> <br>
<font face =" Verdana, Arial, Helvetica, sans-serif"> Famlia Verdana, Arial, Helvetica, sans-serif</font>
<br>
<font face =" Geneva, Arial, Helvetica, sans-serif"> Famlia Geneva, Arial, Helvetica, sans-serif</font>
</body>
</html>
Resultado:-

Imagens
Formatos de imagem mais utilizados na Internet
Existem diversos tipos de imagens que em geral podemos identific-las conforme sua extenso:-
JPG Joint Photograph Experts Group

um dos padres de imagem mais utilizados atualmente na Internet.
Este formato que tem seu tamanho real reduzido (nmero de bytes) em funo de uso de um algoritmo de
compresso de dados que pode alterar a qualidade da imagem. Isto quer dizer que o usurio pode escolher
o nvel de compresso deseja aplicar. Quanto mais comprimido, menos qualidade se tem.
GIF Graphics Interchange Format

Padro de imagem com menor qualidade (limite de 256 cores) que implementa algoritmo de compresso de
dados e entrelaamento (permite a carga parcial para rpida visualizao da imagem). Uma de suas
interessantes caractersticas o fato de se poder armazenar num nico arquivo diversas imagens que ao
serem trocadas seqencialmente criam a sensao de uma animao.
PNG Portable Network Graphics

Padro de imagem que trabalha com 24 bits permitindo grande nmero de cores. Este tipo de imagem
trabalha com transparncia. Isto quer dizer que uma imagem no precisa ser exatamente quadrada de
forma que ao aplicarmos sobre um fundo digamos escuro, no aparece o fundo (Exemplo:quadrado branco
ao redor da imagem) que em geral surge quando utilizado certos tipos de imagem.
Inserindo imagens na pgina

A insero da imagem numa pgina HTML nada mais do que uma marca que informa onde a imagem
pode ser encontrada. Uma imagem pode estar:-
Na mesma pasta (diretrio) da pgina que est tentando exibi-la
Numa pasta diferente da pgina que est tentando exibi-la
Num outro endereo/servidor web
Para exemplificar estas situaes iremos utilizar as duas imagens abaixo:-
Simbolo2000.jpg
Alce.jpg
Imagem existente na mesma pasta da pgina web
Vamos agora imaginar que temos os seguintes arquivos numa mesma pasta:-
Disney.htm: Pgina que voc est desenvolvendo.
Simbolo2000.jpg: Imagem do smbolo das festas do ano 2000, que voc quer exibir na pgina
Disney.htm.
Voc poder carregar a imagem Simbolo2000.jpg, na pgina Disney.htm atravs do uso da marca
<img> da seguinte forma:-
<img src =" Simbolo2000.jpg">

Isto o suficiente para exibir esta imagem na pgina, considerando que ambos os arquivos (da imagem e
da pgina) esto na mesma pasta.
Lembre-se de que o Firefox se importa com a caixa (letras maisculas e minsculas) dos nomes de
arquivos. Isto quer dizer que se o arquivo foi salvo com tudo em maisculo (Exemplo:
SIMBOLO2000.JPG), e inserido na pgina como no exemplo acima, o Firefox no conseguir
localizar este arquivo. Para que ele funcione, voc ter que informar na pgina o nome do arquivo
exatamente como foi gravado no diretrio, letra por letra.
Imagem existente em subpasta (dentro da pasta do projeto)
Vamos imaginar agora outra situao:

Na medida em que voc vai criando novas pginas e gerando novas imagens, voc percebe que existem
muitos arquivos na mesma pasta, o que est lhe dificultando a tarefa de gerenciar estes arquivos.
Algo que comum a se fazer neste caso separar as pginas web (arquivos HTML) numa pasta e as
imagens em outra pasta. Exemplo:-
Podemos verificar no exemplo acima que foi criada uma pasta de nome Projetos. Dentro dela, foi criada
uma pasta de nome Disney que onde iremos inserir/criar as pginas web (HTML). Dentro desta ltima foi
criada outra pasta de nome imagens, que onde sero inseridas todas as imagens do Projeto Disney.
Para que isto funcione, precisaremos ento ajustar a marca que carrega a imagem, para considerar a
mudana de pasta:-
<img src =" imagens/Simbolo2000.jpg">
Note que como a pasta imagens est dentro da pasta corrente/atual, precisamos apenas informar seu nome
e uma barra para separar o nome do arquivo de imagem.
Imagem existente em diretrio anterior ao do projeto

Vamos imaginar uma situao onde as imagens precisam estar disponveis para diversos projetos. Podemos
viabilizar esta situao criando uma pasta imagens no mesmo nvel das pastas dos projetos. Exemplo:-
No exemplo acima podemos verificar a existncia de dois projetos (Canad e Disney). Ao criarmos a pasta
imagens no mesmo nvel destes projetos, podemos utilizar os arquivos (as imagens) desta pasta em
qualquer um dos projetos.
Isto quer dizer que todas as imagens ficariam numa nica pasta e seriam acessveis por qualquer pgina (de
qualquer projeto). Vamos ajustar nossa pgina Disney.htm para ver como fica?
<img src =" ../imagens/Simbolo2000.jpg">
Antes de comear a explicar, para quem no conhece o funcionamento do sistema de pastas e diretrios,
utilizamos barras para separar a informao de caminho quando navegar por diversas pastas.

O exemplo abaixo significa que o arquivo carro.jpg est contido na pasta atual, dentro da subpasta
imagens:-
<img src =" imagens/carro.jpg">
Voltando nossa explicao, podemos verificar que o caminho a ser percorrido para encontrar a imagem
desejada :-
" ../imagens/Simbolo2000.jpg"
Utilizamos dois pontos (..) para voltar ao diretrio anterior, e em seguida entramos na pasta imagens para
em seguida poder acessar o arquivo desejado.
Utilizando este mesmo exemplo para criao de uma pgina Canad, que precise carregar a imagem
Alce.jpg, podemos ter a seguinte pgina:-
" ../imagens/Alce.jpg"
Note a semelhana para o acesso das imagens existentes na mesma pasta.
Utilizando imagens existentes em outro site

Vamos dizer que voc visitou um site e gostou de uma imagem e decidiu utiliz-la
temporariamente na sua pgina, mas no quer armazenar a imagem (o arquivo)
em sei site.
Vamos supor que este site se chame www.site.com.br, e a imagem esteja numa pasta chamada cidades e
seu arquivo (imagem) seja NY.png.
Para voc utilizar esta imagem em seu site, o comando abaixo dever ser utilizado (em sua pgina):-
<img src =" http://www.site.com.br/cidades/NY.png">
Voc pode referenciar qualquer imagem em seu site, isto , fazer uma referencia a uma imagem
que exista em outro servidor/endereo web
Voc precisa informar a URL completa. (No sabe o que isto? Volte ao comeo desta apostila)
Voc corre o risco da imagem sumir, de uma hora para outra, caso o administrador do site onde a
imagem se encontra decida remov-la
Links
Os links (ligaes) ou ncoras so elementos (trechos de texto, imagens, etc) utilizados para
ligao/conexo com outros elementos que podem estar na mesma pgina ou em outras pginas (de outros
sites). Estes elementos podem ser de diversos tipos (pgina web, imagens, vdeos, etc) na Internet.
Hipertexto denota um link baseado em texto enquanto que Hiperlink significa qualquer tipo de link.
Hipermdia significa qualquer tipo de mdia (udio, vdeo, texto, grficos, etc) que tenha um link
ativado.
Um link executado ao ser clicado. Percebe-se a existncia de um link quando ao posicionar-se sobre o link,
o desenho do cursor muda para uma mo. Em alguns casos, em se tratando de links baseados em texto, o
estilo do texto fica sublinhado e numa cor diferente do resto do texto.

A sintaxe para criao de um link :-
<a href =" url "> Contedo a ser mostrado na pgina </a>
Onde a letra a significa ncora, que serve como um aviso de referncia para algum local (interno ou
externo), e em seguida temos o cdigo href que um atributo que identifica a URL destino a ser
referenciada. Onde se l url, no comando acima, troque pelo endereo completo da pgina a ser
referenciada. Isto quer dizer que basicamente encapsulamos o contedo a ser exibido dentro das marcas
<a href...> e </a>.
Exemplo de criao de um link:-
Clique <a href =" http://www.cidadesp.edu.br /"> aqui </a> para entrar no Site da Unicid.
Sempre insira o contedo de um atributo dentro de aspas duplas. Como ser verificada
posteriormente, esta uma das regras do padro XHTML
Os links podem ser de dois tipos: Links internos e links externos.
Criando Links Internos

Um link interno ocorre quando criamos um link para uma informao existente na mesma pgina. Vamos
imaginar que temos um livro, em formato HTML (em pginas web). Numa destas pginas temos uma
referncia a uma informao que se encontra detalhada no final da pgina. Podemos inserir um link nesta
referncia de modo que ao ser clicado, a parte da pgina que descreve esta referencia exibida.
No exemplo abaixo, temos um link no trecho de texto 4 Descrio de Caso de Uso:-

O link 4 Descrio de Caso de Uso,

Uso ao ser clicado, desce a pgina at localizar e exibir a informao
linkada.
Criando links / ncoras para elementos dentro do mesmo documento.

Um link para um elemento dentro da mesma pgina criado
criad em duas partes:-

O primeiro passo criar uma ncora identificada para um determinado local, que nada mais do que o local
que queremos que seja exibido quando o usurio clicar no link. Exemplo:-
<a name ="dados_cliente"> Dados do Cliente </a>
Neste exemplo, utilizamos a marca a (ncora) com o atributo name identificando uma determinada rea
(neste caso, uma regio de texto) pelo nome de dados_cliente. Isto o que chamamos por ncora
identificada.
O segundo passo colocar um link para esta rea, na mesma pgina.

Exemplo:-
Consulte os <a href ="#dados_cliente"> Dados do Cliente </a> para saber mais a respeito.
ncoras identificadas so geralmente utilizadas para se criar um ndice no incio ou final de um

documento.
Exemplo de utilizao de ncora identificada.

<a name ="inicio"> <h1>Introdução</h1></a>
<p> De acordo com as regras do W3C World Wi........</p>

<p>Os <strong>padrões de desenvolvimento web<strong> devem.......................................
.............. </p>

Clique <a href ="#inicio"> aqui </a> para voltar ao topo de pgina.
Criando Links Externos

A criao de links externos funciona referenciando-se a URL completa que se deseja ligar.
No exemplo abaixo, temos um trecho de texto que um link para o site da Unicid (que ser aberto na
janela aberta, do navegador):-
<a href =" http://www.cidadesp.edu.br /"> Unicid </a>
No exemplo abaixo, temos um trecho que um link o IP do UOL (em fevereiro de 2009), abrindo a pgina
ndex.html:-
<a href =" http://200.98.249.120/index.html"> UOL </a>

Inserindo um link numa imagem

Vamos imaginar que desejamos inserir uma imagem em nossa pgina
(brubovnik.jpg) e criar um link, nesta imagem, para o site da cidade de
Dubrovnik (http://www.dubrovnik-online.com/)
Exibir uma imagem na pgina HTML um comando relativamente simples.

Neste caso, seria algo assim:-
<img src =" imagens/dubrovnik.jpg">
Neste exemplo assumo que o arquivo da imagem dubrovnik.jpg

encontra-se na pasta imagens, existente no mesmo nvel da pgina web
editada.
O prximo passo encapsular o comando acima (abaixo em cinza) dentro de um link para o site da cidade
de Dubrovnik: www.dubrovnik-online.com:-
<a href =" http://www.dubrovnik-online.com/"> <img src =" imagens/dubrovnik.jpg"> </a>
O contedo em cinza acima, representa a imagem a ser exibida. Note que ela est encapsulada pelo
comando que faz dela um link: <a href=...> e </a>.
Inserindo um link numa imagem externa

Uma imagem externa nada mais do que um arquivo (de imagem) que se encontra num endereo web
(URL). Isto ns j vimos como se faz, mas vamos fazer uma recapitulao.
Vamos imaginar que a imagem abaixo esteja no site http://www.site.com.br, numa pasta chamada imagens
e seu nome de arquivo seja familia.png.
Voc deseja inserir esta imagem em seu blog (na sua pgina de blog), mas devido a restries deste site de
blogs, a nica coisa que voc consegue fazer nele inserir textos. Como j visto anteriormente, voc pode
fazer uma referncia (exibir na sua pgina) a uma imagem existente em outros sites. Neste caso, o
comando HTML da sua pgina (de blog) para exibir esta imagem seria:-
<img src =" http://www.site.com.br/imagens/familia.png">
E pronto! A imagem aparece na sua pgina, como se ela estivesse no seu site.
S que voc gostaria que, caso o usurio clicasse nesta imagem, o site acima fosse carregado.
Para isto, devemos encapsular o comando/marca acima dentro de um link. Vamos l?
<a href ="http://www.site.com.br/">

<img src ="http://www.site.com.br/imagens/familia.png">

</a>
Pronto! Agora temos em nossa pgina uma referncia imagem que existe em outro site e a mesma um
link para o site desejado.
Abrindo o link numa outra pgina

Quando o usurio clica no link existente na pgina, este link ser aberto na prpria pgina. Ocorre que as
vezes queremos que este link seja aberto numa nova pgina.
Para isto, podemos utilizar o atributo _target, informando o valor _blank para definir onde o documento
apontado pelo link ser aberto.
No exemplo abaixo, uma nova janela ser aberta pelo navegador:-
<a href ="http://www.cidadesp.edu.br/" target="_blank">Unicid</a>
Os outros valores para target so:-

_self: Abre o link na mesma pgina (padro)
_parent: Abre o link na pgina pai (veja frameset)
_top: Abre o link na pgina inicial (veja frameset)
Tabelas
O HTML possibilita a utilizao de tabelas, internamente divididas em linhas e clulas. Tabelas so criadas
atravs das marcas <table>..</table>, sendo dividida em linhas atravs da marca <tr>..</tr>.
As linhas so divididas internamente em clulas de dados atravs da marca <td>..</td> ou clulas de
cabealho, atravs da marca <th>..</th>.
Dentro da clula inserimos o contedo desejado (textos, imagens , listas, formulrios, etc.).
Quando no for especificado, o atributo border da tabela assumido com o valor zero (0), ou seja, a
tabela no conter bordas.
Exemplo de uma tabela sem borda:-
<table>
<tr>
<td>Linha 1, Clula 1</td>
</tr>
<tr>
</tr>
</table>

Note que ao no utilizar-se borda numa tabela (exemplo acima), no se percebe a separao entre o
contedo das diversas clulas.
Tamanho das clulas numa tabela

Usualmente, utilizamos uma nica clula para insero de contedo. Entretanto, existem alguns casos onde
o contedo de uma clula pode ocupar mais do que uma linha ou coluna. Para estes casos, o HTML
disponibiliza os seguintes atributos:-
Rowspan:
Possibilita informar tabela qual o nmero de linhas que uma clula ir ocupar. No exemplo, definimos que
a primeira clula ir ocupar trs linhas:-
<table border="1">
<tr>
<th rowspan="3">Professores</th>
<th>Projeto de Interfaces</th>
<th>Sistemas</th>
</tr>
<tr>
<td>Carlos</td>
<td>Tatiana</td>
</tr>
<tr>
<td>Fernando</td>
<td>Jadir</td>
</tr>
</table>
Resultado:-
Colspan:-
Este atributo informa ao navegador o nmero de colunas que uma clula ir ocupar.
Observe que no exemplo abaixo, informamos que as clulas de cabealho iro ocupar 2 colunas, cada uma:-
<table border="1">
<tr>
<th colspan="2">Projeto de Interfaces</th>
<th colspan="2">Sistemas</th>
</tr>

<tr>
<td>Carlos</td>
<td>Tatiana</td>
<td>Fernando</td>
<td>Jadir</td>
</tr>
</table>
Resultado:-
Bordas
Para inserir uma borda numa tabela, utilizamos o atributo border, especificando a espessura da borda
desejada.
Se mudarmos a marca de criao da tabela acima, configurando-a para exibir a borda, teremos uma tabela
com o seguinte layout:-
<table border="1">
Ao aumentarmos o tamanho da borda, temos alguns efeitos visuais interessantes:-

<table border="5">
<table border="25">
Determinando a cor das bordas

Podemos determinar a cor da borda utilizando o atributo bordercolor. Exemplo:-
<table border="3" border-color="blue">

Alguns efeitos interessantes podem ser conseguidos com isto:-
<table border="25" border-color="green">
Inserindo ttulo / legenda numa tabela

O desenvolvedor pode inserir uma legenda, que ir acompanhar o layout da tabela.
Para isto, ele utiliza-se da marca <caption>,logo aps abrir a marca <table>. Exemplo:-
<caption> Legenda/titulo da Tabela </caption>
A legenda ser posicionada sobre a tabela, isto , antes da tabela ser exibida.
Cabealhos na tabela
Clulas de cabealho na tabela so definidas atravs da marca <th>
<table border="1">
<tr>
<th> Cabealho </th>
<th> Cabealho 2</th>
</tr>
<tr>
<td> Linha 1, Clula 1</td>
</tr>
<tr>
</tr>
</table>

Os cabealhos so centralizados na clula e em negrito.
Cores nas Tabelas

Tabelas podem ter suas linhas (e consequentemente suas clulas) configuradas para a utilizao de
determinadas cores de fundo.
Exemplo:-
<table border="1">
<tr bgcolor="yellow">
<th> Marca </th>
<th> Uso </th>
</tr>
<tr>
<td> <h1> a <h6></td>
<td> Marcas de Incio de Cabealho</td>
</tr>
<tr bgcolor="cyan">
<td><p></td>
<td> Marca de incio de pargrafo </td>
</tr>
<tr>
<td> <table> </td>
<td> Marcas de Incio de Tabela</td>
</tr>
<tr bgcolor="cyan">
<td><tr></td>
<td> Table Row Inicia uma linha numa tabela</td>
</tr>
<tr>
<td> <td> </td>
<td> Table Data Inicia uma coluna numa tabela</td>
</tr>
</table>

A aplicao do atributo bgcolor pode ser feito em diversos elementos da tabela, dentre eles, nas marcas
table, tr, th e td.
O desenvolvedor pode modificar a cor de fundo de apenas uma clula (marca <td> ou <th>) de uma
tabela, se assim o desejar.
<table border="1">
<tr>
<th> Aluno </th>
<th> Resultado </th>
</tr>
<tr>
<td> João </td>
<td> Aprovado </td>
</tr>
<tr>
<td> Joé </td>
<td bgcolor="red"> Reprovado </td>
</tr>
<tr>
<td> Marina </td>
<td> Aprovada </td>
</tr>
</table>
Alm dos nomes de algumas cores, o navegador est preparado para reconhecer um cdigo de cor no
formato RGB (Red-Green-Blue) que uma cor baseada na mistura das cores vermelha, verde e azul,
conforme uma intensidade que varia de 0 a 255. O desenvolvedor deve utilizar o caractere # seguido por
seis nmeros, onde cada dois nmeros representa a intensidade de cada cor (RGB).

Trocando a cor de fundo = red, do exemplo acima, pela cor #FD9886, temos o seguinte resultado:-
<td bgcolor="#FD9886"> Reprovado </td>
Trabalhando o Layout das tabelas

Distanciamento das bordas
Em geral, o contedo da clula fica encostado s suas bordas.
O atributo cellpadding da tabela, nos permite determinar uma distncia a ser aplicada, entre o contedo e
as bordas das clulas.
<table border="1" cellpadding="20">
<tr bgcolor="#999999">
<th> Marca </th>
<th> Carro </th>
</tr>
<tr>
<td> Wolkswagen </td>
<td> Fox, Gol, Polo </td>
</tr>
<tr>
<td> Fiat </td>
<td> Palio, Siena, Marea </td>
</tr>
<caption> Modelos de carros mais vendidos por fabricante</caption>
</table>
Resultado:-

No cdigo acima, informamos um espao entre o contedo e as bordas de vinte pixels.
Distanciamento entre as clulas

De forma similar, podemos distanciar uma clula da outra atravs da utilizao do atributo cellspacing, na
tabela. Alterando a linha de criao da tabela, no exemplo acima, temos o seguinte:-
<table border="1" cellspacing ="20">
Resultado:-
No caso acima, verificamos um distanciamento de 15 pixels entre uma clula e outra.
Caso juntemos ambas as opes temos o seguinte resultado:-

<table border="1" cellspacing ="15" cellpadding="20">
Alinhamento
O contedo das clulas de uma tabela pode ser alinhado. As opes existentes so de alinhamento
horizontal (em sua largura) ou de alinhamento vertical (em sua altura).
Alinhamento Horizontal
Este tipo de alinhamento pode ser esquerda (normal), centralizado, direita ou justificado.
O atributo que define o alinhamento o align e as opes so:-

left Exemplo: <th align="left">
center Exemplo: <th align="center">
right Exemplo: <td align="right">
justify Exemplo: <td align="justify ">
A tabela abaixo tem as colunas alinhadas da seguinte forma:-

Colunas de Cabealhos: Todas centralizadas e em Negrito (padro da marca <th>)
Nome: Alinhada naturalmente esquerda
Salrio: Alinhada direita
Cargo: Centralizada
Descrio: Centralizado
Exemplo de tabela com os quarto alinhamentos:-

Cdigo da tabela exemplo:-
<table border="1" cellpadding="20">

<tr>
<th width ="100"> Nome</th>
<th width ="100"> Salário </th>
<th width ="140"> Cargo </th>
<th> Descrição</th>
</tr>
<tr>
<td> Claudia</td>
<td align ="right"> R$ 2.750,00</td>
<td align ="center"> Gerente de RH </td>
<td width ="310" align ="justify"> Responsvel pelo Departamento Pessoal,
Plano de Cargos e Salrios, Treinamento e Qualificao Pessoal.</td>
</tr>
<tr>
<td> Marcos </td>
<td align ="center"> Gerente Comercial </td>
<td width ="310" align ="justify"> Responsvel pelos contatos com clientes,
levantamento de pedidos, fechamento de vendas e faturamento da empresa.</td>
</tr>
<tr>
<td> Roberto</td>
<td align ="center"> Diretor Financeiro</td>
<td width ="310" align ="justify"> Responsvel pelo controle e planejamento
financeiro da empresa dentre eles: Caixa, Tesouraria, Previso Oramentria e Controle
Bancrio.</td>
</tr>
</table>

Alinhamento Vertical
Este tipo de alinhamento pode feito com base no topo (alto), no meio (padro), no fundo (embaixo) ou na
linha base da clula. Como dificilmente se utiliza a linha base, no irei explicar este atributo.
O atributo que define o alinhamento o align e as opes so:-

top Exemplo: <th valign="top">
middle Exemplo: <th valign="middle ">
bottom Exemplo: <td valign="bottom">
A tabela abaixo tem as colunas alinhadas da seguinte forma:-

Colunas de Cabealhos: Todas centralizadas e em Negrito (padro da marca <th>)
Top: Alinhada no topo
middle: Alinhada no meio
Bottom: Alinha no fundo
Note tambm que para se visualizar o alinhamento vertical, defini a altura (height) da clula com 50 pixels.
Cdigo da tabela exemplo:-

<table border="2">
<tr>
<th> Topo </th>
<th> Meio </th>
<th> Fundo </th>
</tr>
<tr>
<td valign="top" height="50"> Conteúdo </td>
<td valign="middle" height="50"> Conteúdo </td>
<td valign="bottom" height="50"> Conteúdo </td>
</tr>
</table>
Agrupando elementos de tabelas

As marcas <thead>, <tfoot>e <tbody> podem ser opcionalmente usadas na estruturao de uma tabela.
Elas possibilitam definir o cabealho, rodap e corpo de dados das tabelas.
No exemplo abaixo definimos os itens de cabealho e rodap antes do grupo de dados (tbody) da tabela.
No momento da exibio da tabela no navegador, a mesma ser exibida conforme sua estrutura de
cabealho, dados e rodap.
Exemplo:-
<table border="1">
<caption> Sua nota</caption>

<tbody>
<tr>
<th>1</th>
<td>Avaliação Presencial</td>
<td align="center">8</td>
</tr>
<tr>
<th>2</th>
<td> Avaliação Continuada</td>
<td align="center">1,5</td>
</tr>
<tr>
<th>3</th>
<td> Comparecimento </td>
<td align="center">75%</td>
<td align="center">80%</td>
</tr>
</tbody>
<thead>
<tr>
<th>Item</th>
<th>Elemento Avaliado</th>
<th>Nota Mxima</th>
<th>Nota Obtida</th>
</tr>
</thead>
<tfoot>
<tr>
<th align ="right" colspan="3">Resultado:</th>
<td>Aprovado</td>
</tr>
</tfoot>
</table>

Listas
O HTML permite a criao de listas ordenadas e no ordenadas. Listas ordenadas caracteriza-se por uma
relao de elementos, geralmente de mesmo tipo ou natureza, que so dispostos numa determinada ordem
e numerados (quando o caso) automaticamente pelo navegador.
Criando Listas Ordenadas

A criao de listas ordenadas se d pela marca de abertura de listas ordenadas <ol> e em seguida pela
criao dos itens de lista pela marca <li>. Cada Item de lista deve ter sua marca fechada </li> , bem
como a lista </ol>.
OL = Ordered List, LI = List Item

As listas inserem uma linha em branco antes e depois de seu comando de criao
Para inserir itens encadeados, isto , como se fossem subitens da lista, deve-se criar uma nova lista, que
pode ser ordenada ou no.
Exemplo:-
<strong>Frutas Tropicais</strong>
<ol>
<li>Banana</li>
<ol>
<li>Nanica</li>
<li>Maça</li>
</ol>
<li>Laranja</li>
<li>Abacaxi</li>
</ol>
FIM
Resultado:-
Atributos de Tipos de Estilo de Listas Numeradas

A configurao de uma lista numerada ser marcada por nmeros. O Atributo TYPE permite definir o estilo
numrico de seus itens. Os atributos possveis so:-

Atributo Estilo
A Letras do Alfabeto em Maisculo
A Letras do Alfabeto em Minsculo
I Nmeros Romanos em Maisculo
i Nmeros Romanos em Minsculo
1 Lista em ordem numrica (padro)
Tambm possvel misturar os tipos. Exemplo:-
<strong>Frutas Tropicais</strong>
<ol type="A" >
<li>Banana</li>
<ol type="i" >
<li>Nanica</li>
<li>Maça</li>
</ol>
<li>Laranja</li>
<li>Abacaxi</li>
</ol>
FIM
Criando Listas No Ordenadas

A criao de listas ordenadas se d pela marca de abertura de listas ordenadas <ul> e em seguida pela
criao dos itens de lista pela marca <li>. Cada Item de lista deve ter sua marca fechada </li> . No final,
a lista tambm deve ser fechada pela marca </ul>.
UL = Unordered List
<strong>Carros</strong>
<ul>
<li> Fiat </li>
<li> Ford </li>
<li> GM </li>
<li> VW </li>
</ul>
FIM

Resultado:-
Atributos de Tipos de Estilo de Listas No Numeradas

Listas no numeradas so marcadas por um determinado desenho. O Atributo TYPE permite definir o estilo
numrico de seus itens. Os atributos existentes so:-
Atributo Estilo
circle Circulo Aberto
square Quadrado Fechado
Disc Losango Fechado
<strong> Carros Populares </strong>

<ul>
<li> Fiat </li>
<ul type="circle" >
<li> Uno Mille </li>
</ul>
<li> Ford </li>

<ul type="disc" >
<li> Ka </li>
</ul>
<li> GM </li>
<ul type="square" >
<li> Corsa</li>
</ul>
<li> VW</li>
<ul >
<li> Gol</li>
</ul>
</ul>
FIM
Resultado (no navegador Internet Explorer):-

As marcas (cones) que precedem os itens de uma lista no ordenada variam conforme o navegador
Listas de Definio
Diferentemente de listas de itens, as listas de definio disponibilizam uma forma de se explicar o que
significam certos termos. Os itens contidos nas listas de definio no tm marcao (de nmeros ou
desenhos).
A criao de listas ordenadas se d pela marca de abertura de listas de definio <dl> e em seguida pela
criao dos termos da lista pela marca <dt>, e em seguida a criao da rea de explicao do termo,
pela marca de descrio da definio <dd>. Exemplo:-
<dl>
<dt>IBM PC</dt>
<dl>
<dd><strong>Personal Computer</strong>. Este termo ainda hoje muito utilizado
para designar os computadores pessoais que fizeram muito sucesso por conta da
poltica de vendas implementada pela IBM no comeo dos anos 80.
</dd>
<dt> AT</dt>
<dd><strong> Advanced Technology </strong>. Este termo foi muito utilizado para
designar os computadores da IBM, lanados aps o PC (8086), com destaque o 80286,
processador muito conhecido como 286.
</dd>
</dl>
Resultado:-
Dl = Definition List, dt = Definition Term, dd = Definition Data

Frameset (Conjunto de Quadros)

Frameset utilizado quando se deseja trabalhar a tela do navegador (Internet Explorer, Firefox, Safri, etc)
como um local separado por partes (reas) independentes. Cada rea pode tambm ser dividida em
subreas atravs da criao de novos framesets.
Por final, dentro das reas criadas temos o quadro (frame) que quem contem de fato o contedo.
No exemplo abaixo temos um conjunto de quadros (frameset) estruturado em cinco colunas, cada qual
contendo apenas um quadro (frame) em seu interior:-
Uma determinada rea pode ser subdividida em outras reas. No exemplo abaixo, o frameset (conjunto de
quadros) est dividindo em trs colunas. A primeira coluna tem apenas um quadro. A segunda coluna est
subdividida em 2 linhas (novo conjunto de quadros). E a terceira coluna est subdividida em 3 linhas (novo
conjunto de quadros). Cada linha representa um quadro (frame).
Podemos notar com isso que um quadro (frame) parecido como uma clula de uma tabela.
No exemplo abaixo, iremos verificar como uma estrutura de quadros baseado em linhas.

Quando o navegador trabalha com quadros (frames), ele trata o contedo de cada quadro separadamente,
ou seja, o contedo de cada quadro (frame) advm de um arquivo .HTML, que carregado e manipulado
de forma independente dos demais quadros.
Criando Frames
O primeiro passo na criao de quadros o estabelecimento do conjunto de quadros, atravs da marca
<frameset>.
Esta estrutura define como os quadros internos sero criados. O desenvolvedor dever informar se ele
deseja separar o layout da pgina em linhas (rows) ou colunas (cols).
Quando se utiliza a marca <frameset>, no permitido a utilizao da marca <body>, exceto quando
ela for inserida dentro na marca <noframe>, que utilizada para navegadores que no entendem
quadros.
Exemplo de quadros utilizando linhas:-

<html>
<frameset rows="10%, 10%, *">
<frame src="parte1.html ">
</frameset>
</html>
Resultado do Layout da Pgina HTML:-

Exemplo de quadros utilizando colunas:-

<html>
<frameset cols="10%, 10%, *">
</frameset>
</html>
Resultado do Layout da Pgina HTML:-
Na criao de quadros, deve-se prever o uso de navegadores que no tenham este recurso.
Para isto, a marca <NOFRAME> deve ser utilizada. Exemplo:-
<html>
<frameset rows="10%, 10%, *">
<noframes>
<body>

</body>
</noframes>
</frameset>
</html>
Um dos erros mais comuns quando o desenvolvedor insere a marca <frameset> dentro da marca
<body>. As marcas em vermelho no exemplo abaixo esto incorretas:-
<html>
<body>
<frameset cols="10%, 10%, *">
</frameset>
</body>
</html>
Frame de Navegao
muito comum o desenvolvedor criar uma rea para navegao do site.
O primeiro exemplo montar uma pgina baseada em conjunto de quadros (frameset) que ir carregar dois
frames:-
Frame de nome MENU que carregar o arquivo menu.html
Frame de nome CONTEUDO que carregar o arquivo contedo.html

Analisando o cdigo HTML

O primeiro arquivo ser o que contm a estrutura do conjunto de quadros. Vamos nome-lo como
EXEMPLO.HTML.
Este frameset baseado em duas colunas.
Primeira Coluna
A primeira coluna ter 200 pixels e a segunda o restante. Nela ser criado um quadro (frame) cujo nome
menu e seu contedo vir do arquivo menu.html.
Segunda Coluna
A segunda coluna ocupar o restante da rea visvel da tela do navegador e se chamar contedo. Seu
contedo vir do arquivo conteudo.html.
Arquivo exemplo.html
<html>
<head>
<title> Teste com Frameset</title>
</head>
<frameset cols="200,*">
<frame src="menu.html" name="menu " >
<frame src="conteudo.html" name="conteudo" >
</frameset>
</html>
O arquivo de menu criar dois links na tela, na rea conteudo.

Arquivo menu.html
<html>
<head> </head>
<body>
<a href="parte1.html" target="conteudo"> Opo 1 - Clique aqui</a> <br>
<a href="parte2.html" target="conteudo"> Opo 2 - Clique aqui</a> <br>
</body>
</html>
Quadros Inseridos (In-Line Frames)

possvel inserir quadros que ocupam um espao especfico dentro de uma pgina (ou de um quadro html)
atuando como se fosse uma pgina independente do resto da pgina onde o mesmo est inserido.
Isto permite ao desenvolvedor tratar uma determinada rea como se fosse uma pgina a parte, contendo
um cdigo especfico.Exemplo:-

<html>
<head> </head>
<body>
<table width="788" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50" height="22"> </td>
<td width="738" valign="top" align="center" > Veja o Site da Unicid no quadro abaixo:</td>
</tr>
<tr>
<td height="163"> </td>
<td align="top"> <iframe src="http://www.cidadesp.edu.br/" width="60%"> </iframe> </td>
</tr>
</table>
</body>
</html>
Resultado:-
Vantagens e desvantagens no uso de frameset

Algumas dificuldades relacionadas no uso de quadros so:-
Conseguir voltar pgina anterior (Uso do boto VOLTAR)
Conseguir imprimir a tela (como um todo)
O desenvolvedor deve gerenciar cada um dos arquivos de cada frame
No to fcil identificar o endereo que o frame aponta
Por outro lado, o uso de quadros permite as seguintes vantagens:-

Certas partes da tela sempre permanecem visveis liberando o desenvolvedor da tarefa de ter que se
preocupar com o que ele dever mostrar numa parte da tela do navegador
A barra de navegao pode ser simplificada, e deixada apenas num dos quadros, sem ter a
necessidade de existir nos diversos arquivos .html

Formulrios
Basicamente, um formulrio permite uma interao especfica entre o usurio (cliente) e o site, muitas vezes
levando a uma troca de informaes entre as partes.
Eles so basicamente utilizados para envio de objetos para uma determinada URL. As aplicaes mais
comuns so encontradas no preenchimento de informaes pessoais e/ou comerciais para envio de pginas
dinmicas que armazenam tais informaes em banco de dados.
Estas pginas dinmicas, desenvolvidas em linguagens de programao para web (CGI Common Gateway
Interface, Perl, PHP, ASP, ASP.NET, etc) recebem as informaes enviadas pela pgina onde foi criado o
formulrio, abrindo o banco de dados destino e gravando as informaes em suas tabelas.
Outra possibilidade o envio de informaes atravs do uso do software de correio eletrnico.
Criando formulrios
Um formulrio criado atravs da tag FORM. Exemplo:-
<form name=frmCadastro method=post

action=http://www.meusite.com.br/CadCliente.ASP>
...
... Contedo a ser exibido
... E elementos (de formulrio) a serem preenchidos pelo usurio
...
</form>
A marca <form> tem como atributos os elementos:-

name: Define o nome do objeto de formulrio. No exemplo acima, o nome do formulrio frmCadastro.
method: Define a maneira pela qual os objetos (e seus contedos) sero enviados para a pgina destino.
No exemplo acima o mtodo a ser utilizado o POST (explicado abaixo)
action: Define qual a pgina destino dos dados. No exemplo acima, a pgina que ir tratar estes objetos
a http://www.meusite.com.br/CadCliente.ASP
Mtodos de Envio de Objetos de Formulrios

Existem dois mtodos para envio dos objetos de formulrios:-
GET: Caracteriza-se por enviar os dados (objetos e seus contedos) para a pgina destino utilizando a barra
de endereos. Suas restries consistem no nmero limitado de caracteres que a linha de endereos permite
(geralmente 128 caracteres) e a menor segurana percebida por expor claramente o nome das variveis e
seus contedos, possibilitando que usurios com menor conhecimento consigam reproduzir o envio de dados
de uma pgina informando manualmente os contedos dos objetos.
O primeiro objeto deve ser inserido no final da barra de endereos utilizando o ponto de interrogao, seu
nome (do objeto), e o sinal de igual para envio do contedo. Os demais objetos devem ser separados por
um sinal de E comercial (&), seu nome, o sinal de igual e seu contedo. Exemplo:-
http://br.altavista.com/web/results?itag=ody&q=unicid&kgs=1&kls=0

No exemplo acima podemos verificar que a URL http://br.altavista.com/web/results est sendo executada,
com os seguintes objetos:-
itag=ody : Objeto de nome itag com o contedo ody
q=unicid : Objeto de nome q com o contedo unicid
kgs=1 : Objeto de nome kgs com o contedo 1
kls=0 : Objeto de nome kls com o contedo 0
A maneira pela qual os objetos sero utilizados sero tratados conforme a programao da URL destino.
POST:Caracteriza-se por enviar os dados junto com a pgina, de forma transparente e no visual. O usurio
no consegue enxergar quais so os dados que esto sendo enviados. Apenas o endereo de destino
visualizado na tela. Permite o envio de grande quantidade de objetos.
Objetos de Formulrios
Diversos objetos podem ser criados dentro de um formulrio. Eles podem ser digitados pelo usurio,
selecionados atravs de uma lista ou clicados numa rea especfica.
Elemento Caixa de Texto

Este tipo de elemento caracteriza-se por uma rea onde o usurio poder digitar ou visualizar uma
determinada informao textual e ocupa uma determinada rea numa nica linha.
Sintaxe Bsica:-
<input type="text" name="NomeDoobjeto" />
Atributos
Para este tipo de elemento, os atributos possveis so:-
Atributo Descrio
disabled="disabled" Desabilita a entrada do objeto de forma que o usurio no
consegue alterar seu contedo. Visualmente falando, o
usurio consegue perceber que este campo est desabilitado,
pois a cor do texto deste objeto modificada para cinza.
name="nome" Define o nome exclusivo do objeto. Tenha cuidado ao no informar um nome
que j est sendo utilizado por um outro objeto na pgina, ou numa funo
Javascript.
maxlength="n" Determina n como sendo o nmero mximo de caracteres que pode ser
inserido neste objeto
readonly= "readonly" Desabilita a entrada de dados, no permitindo sua edio pelo usurio.
size="n" Determina como n o tamanho do elemento
value="texto" Determina um texto inicial j carregado no objeto.
Exemplos:-
1) Criao de uma de caixa de texto identificada como endereco:-
Digite seu endereço <input type="text" name="endereco" />

2) Criao de uma de caixa de texto previamente preenchida com o texto So Paulo:-
Cidade:<input type="text" name="nome" value="São Paulo" />
3) Criao de uma caixa de texto com tamanho 10 e que permite at 15 caracteres de digitao
Nome:<input type="text" name="nome" maxlength="15" size="10" value="Carlos Majer"

/>
3) Criao de uma caixa de texto o atributo readonly, o que no permite alterao de seu contedo
Senha Anterior: <input type="text" name="nome" readonly="readonly" value="smart"

/>
4) Criao de uma caixa de texto o atributo disabled, o que no permite alterao de seu contedo e serve
como indicao visual ao usurio de que o campo est desabilitado para alteraes
Senha Anterior: <input type="text" name="nome" disabled="disabled" value="smart"

/>
Elemento Senha
Basicamente uma caixa de texto que mostra asteriscos quando o usurio digita
alguma coisa. Uma de suas particularidades a de que quando o usurio clica no
boto de VOLTAR, do navegador, este campo perde seu valor anterior ( limpo).
Sintaxe Bsica:-
<input type="password" name=" NomeDoobjeto" />
Atributos
So os mesmos do campo tipo texto.
Exemplo:-
1) Criao de uma de caixa de senha identificada como senha:-
Digite sua senha: <input type="password" name="senha" />

Obs: Exemplo capturado quando o usurio estava digitando a senha
Elemento Botes de Rdio

Os botes de rdio permitem ao usurio selecionar uma nica opo, dentre
diversas outras.
Neste tipo de objeto, o desenvolvedor deve criar os diversos botes com o

atributo name igual para todos. Assim, ele caracteriza um mesmo grupo de opes.
Sintaxe Bsica:-
<input type="radio" name=" NomeDoobjeto " value="ValorDoObjeto" /> Primeira Opo

a ser exibida
<input type="radio" name=" NomeDoobjeto " value="ValorDoObjeto" /> Segunda Opo

a ser exibida
Atributos
Atributo Descrio
checked="checked" Determina um objeto pr-selecionado
disabled="disabled" Desabilita a entrada do objeto de forma que o usurio no consegue alterar seu
contedo. Visualmente falando, o usurio consegue perceber que este campo
est desabilitado, pois a cor do texto deste objeto modificada para cinza.
Javascript.
value="valor" Determina o valor que ser enviado para a pgina destino (action) do
formulrio ao submet-lo.
Exemplos:-
1)Uma seleo de botes para se escolher o sexo da pessoa.
<input type="radio" name="sexo" value="A" /> Masculino

<input type="radio" name=" sexo" value="F" /> Feminino
2)Uma seleo de botes com a opo VW selecionada e a opo FIAT desabilitada:-
<input type="radio" name="marca" value="A" />Audi<br />

<input type="radio" name="marca" value="F" disabled="disabled" />Fiat<br/>
<input type="radio" name="marca" value="V" checked="checked" />VW<br />

* Quando o usurio clicar no boto ENVIAR (boto submit do formulrio), a pgina

destino ir receber o objeto de nome marca e o valor deste objeto ser uma das
seguintes opes: A ou V, j que a opo Fiat (valor F) est desabilitada.
O nome boto de rdio uma analogia aos antigos rdios de carros, onde o ouvinte tinha que
apertar um boto para escolher uma rdio pr-selecionada, e quando assim o fizesse, um outro
boto anteriormente travado (pressionado) seria solto.
Elemento Caixa de Verificao

As caixas de verificao permitem ao usurio selecionar uma determinada opo do
tipo Sim/No (checado / no checado).
comum encontrar formulrios com diversas opes, onde o usurio seleciona

diversas opes de uma s vez. um modo simples e rpido que facilita a
comunicao com o usurio.
Sintaxe Bsica:-
<input type="checkbox" name="NomeDoobjeto" value="ValorDoObjeto" /> Texto a ser
exibido
Atributos
Atributo Descrio
checked="checked" Determina que o objeto j est selecionado
disabled="disabled" Desabilita a entrada do objeto de forma que o usurio no consegue alterar seu
contedo. Visualmente falando, o usurio consegue perceber que este campo
est desabilitado, pois a cor do texto deste objeto modificada para cinza.
Javascript.
value="valor" Determina o valor que ser enviado para a pgina destino (action) do
formulrio ao submet-lo.
Exemplos:-
1) Pergunta ao usurio se ele deseja receber e-mails:-
<input name="emails" type="checkbox" value="1" />Desejo receber e-mails
Neste exemplo, o programa que receber o formulrio (definido em ACTION), ao avaliar o contedo da
varivel de nome emails, poder receber o valor em branco (""), caso o objeto no esteja checado ou o
valor "1", caso o objeto esteja checado.
Exemplo de programa em ASP que avaliar o objeto emails:-

<html>
<head>
<title>Documento Teste de Caixa de Checagem</title>
</head>

<body>
<%
emails=request("emails")
if emails="1" then
response.write("Voc dediciu receber e-mails<br />")
end if
%>
</body>
</html>
O objetivo de um objeto do tipo caixa de checagem ser avaliado pelo programa destino (ACTION
do formulrio), que ir tomar uma determinada ao em funo de seu valor. O valor deste tipo
de objeto est definido em seu atributo value.
2) Lista de aparelhos do escritrio. Alguns deles esto previamente selecionados

e o aparelho Telex est desabilitado:-
Marque tudo que tiver em seu escritrio<br />

<input type="checkbox" name="Telex" value="Telex" disabled= "disabled" />Telex<br
/>
<input type="checkbox" name="PC" value="PC" checked="checked" />Computador<br />
<input type="checkbox" name="Internet" value="NET" />Internet<br />
<input type="checkbox" name="Calculadora" value="Calculadora"checked="checked"
/>Calculadora<br />
Elemento Lista de Seleo

As listas de seleo permitem ao usurio a escolha de uma dentre diversas opes. O atributo selected
utilizado para selecionar um item default da lista , ou seja, ir mostrar um determinado quando da exibio
da lista. O atributo value de cada elemento/opo da lista o que ser enviado para o ACTION do
formulrio, quando de sua submisso.
<select name="carros">
<option value="volvo">Fiat</option>
<option value="saab" selected="selected">Ford</option>
<option value="fiat" >GM</option>

<option value="audi">VW</option>
</select>
Resultado:-
A marca optgroup pode ser utilizada em conjunto para agrupar e destacar conjunto de opes, de forma a
facilitar o entendimento das opes pelo usurio:-
<select name="cargo">
<option value ="nada" selected="selected">Escolha aqui</option>
<optgroup label="Direo">
<option value ="dc">Diretor Comercial</option>
<option value ="df">Diretor Financeiro</option>
</optgroup>
<optgroup label="Gerencia">
<option value ="gerente">Gerente</option>
<option value ="chefe">Chefia</option>
</optgroup>
<optgroup label="Operacional">
<option value ="responsavel">responsvel</option>
<option value ="operador">operador</option>
</optgroup>
</select>

Elemento rea de Texto

As reas de texto permitem ao usurio digitar informaes em formato de texto
livre, de forma similar a qualquer editor simples de texto, como o bloco de
notas.
Exemplo:-
Observações<br />
<textarea rows="6" cols="80" name="obs" >Digite seu texto aqui</textarea><br />
<input type="submit" name="Submit" value="Enviar">
O atributo rows define o nmero de linhas que o controle ir utilizar, enquanto que o controle cols define o
nmero de colunas (caracteres). Caso deseje, o desenvolvedor pode deixar o controle com um contedo
pr-determinando, inserindo-o entre suas marcas de abertura de fechamento, como no exemplo acima.
Elemento Conjunto de Campos

O elemento fieldset permite o agrupamento de objetos dentro de uma rea comum. Ao se utilizar a marca
legend, o contedo da mesma exibido na borda do conjunto.
<fieldset>
<legend>Sexo</legend>
<input type="radio" name="sexo" value="M" checked="checked" /> Masculino
<input type="radio" name="sexo" value="F" />Feminino
</fieldset>
Elemento Boto
Em geral, botes so utilizados dentro de formulrios para:-

Submeter um formulrio.

Carregar/Limpar (reset) os campos de um formulrio, isto , os valores dos

objetos do formulrio com suas informaes iniciais.
Executar uma ao especfica, estando o boto geralmente associado uma
rotina desenvolvida numa linguagem de programao.
No exemplo abaixo, dois objetos de caixa de texto so criados. Caso o usurio

preencha alguma informao e clique no boto LIMPAR, estes objetos tero seu
contedo (texto digitado) zedrado. Caso o usurio clique no boto Enviar, estes
objetos sero enviados para o endereo definido no atributo ACTION do
formulrios:-
<form name="cad" method="post" action="http://www.site.com.br/cad.php">

Nome: <input type="text" name="nome" id="nome" /><br />
e-Mail: <input type="text" name="email" id="email" /><br />
<input type="submit" value="Enviar" />
<input type="reset" value="Limpar" />
</form>
No exemplo abaixo, foi criado um boto que ao ser clicado exibe uma mensagem:-
<input type="button" value="Clique-ME" onClick="alert('Fui Clicado !!!')">
Elemento LABEL
A marca LABEL permite associar um trecho de texto a um elemento de formulrio.
<input type="checkbox" name="Item1" id="Item1" />Item 1<br />

<input type="checkbox" name="Item2" id="Item2" />Item 2 <br /><br />
<input type="radio" name="botao" id="tres" value="Tres">Item 3<br>
<input type="radio" name="botao" id="quatro" value="Quatro">Item 4<br />
<label for="Item2"><br>

Clique aqui para alterar o Item 2 - O comando label pode ser usado em diversos
lugares</label><br />
<label for="quatro">Clique aqui para alterar o Item 4- O comando label pode ser
usado em diversos lugares</label>
Elemento Upload de Arquivo
Este elemento permite o envio de um arquivo para o destino especificado pelo atributo ACTION do
formulrio. Exemplo:-
<form action="recebe.asp" method="post" name="form1" id="form1">

<input type="file" name="arquivo" id="arquivo" />
</form>

Convm notar que a pgina destino, informada no ACTION quem ir tratar o arquivo, aceitando-o
e/ou movendo-o para uma outra pasta.
HTML ou XHTML?
Uma das grandes criaes na WEB foi o XML (Extensible Markup Language Linguagem de Marcao
Estendvel). Esta nova linguagem permite a criao de marcas diferentes dentro do corpo de uma pgina
WEB facilitando a criao e o transporte de informaes relacionadas. Com base nisto, um novo padro de
pginas para Internet foi criado: o XHTML. Ele se baseia no HTML, mas aplica certas regras rgidas na
criao de uma pgina web, de maneira a assegurar sua qualidade em desenvolvimento, possibilitando uma
forma de se efetuar a verificao de erros em sua criao. Suas regras bsicas so:-
1) Todas as marcas devem ter um par finalizador ou seno for possvel, devero ter uma barra
finalizando a marca.
Exemplos usando Par Finalizador:-
<body> </body> , <p> </p> , <strong> </strong>
Exemplos usando Barra Finalizadora:-

<br />
<hr />
<area shape ="circle" coords ="120,70,4" />
Incorreto:-
No exemplo abaixo, as tags <br> e <hr> esto sem a barra finalizadora da marca
<br>
Site Atual
<hr>
No exemplo abaixo, a marca <title> no foi finalizada

<head>
<title>Site de Brinquedos
</head>
Insira um espao antes da barra fechadora, no caso de marcas sem par finalizador, para garantir a
compatibilidade com navegadores antigos.
2) Os valores dos atributos de uma marca devem ser delimitados por um par de aspas duplas.
Exemplo:-
<input type="text" name="endereco" />
Incorreto:-
<input type=text name=endereco />

Todos os atributos devem ser identificados atravs de seu atributo name
Exemplo:-
<input type="checkbox" name="chkMaior18Anos" />
Incorreto:-
<input type="checkbox" />
3) Todas as marcas e seus atributos devem ser criados atravs da utilizao de caixa baixa
(letras minsculas)
Exemplo:-
<textarea name="observacoes">Digite seu texto aqui</textarea>
Incorreto:-
<TEXTAREA name="observacoes">Digite seu texto aqui</TEXTAREA>
4) O atributo id deve ser utilizado no lugar do atributo name.

Exemplo:-
<textarea id="observacoes">Digite seu texto aqui</textarea>
Por uma questo de compatibilidade com navegadores mais antigos importante que se utilize, ao menos
temporariamente, tanto o atributo name, quanto o atributo id. Pode-se utilizar o mesmo valor para ambos
os atributos.
Exemplo:-
<TEXTAREA id="observacoes" name="observacoes">Digite seu texto aqui</TEXTAREA>
5) Todos os atributos devem ter seus valores informados explicitamente.

Alguns atributos, no HTML, permitem que pela sua simples existncia dentro da marca, j se
presumam sua utilizao. No XHTML, eles devem ser informados.
Exemplos de utilizao
<input type="text" id="nome" disabled="disabled" />
<input type="checkbox" id="ativo" checked="checked" />
Incorreto:-
<input type="checkbox" id="ativo" name="ativo" checked />
Atributos que so em geral minimizados em sua digitao:-

compact="compact" checked="checked" declare="declare" defer="defer"
disabled="disabled" multiple="multiple" nohref="nohref" noshade="noshade"
nowrap="nowrap" noresize="noresize" readonly="readonly" ismap="ismap"
selected="selected"

CSS - Folha de Estilo em Cascata

CSS - Cascade Style Sheet (Folha de Estilo em Cascata)
O que ?
Estilos (ou Folha de Estilos) uma tecnologia utilizada na criao de pginas para a Internet, cujo objetivo
o de facilitar o desenvolvimento destas pginas, ao separar o contedo (a ser exibido) da forma (como
exibir).
Este tipo de separao permite o tratamento (viso e manipulao) destes elementos (contedo e formato)
em locais separados, facilitando o processo de manuteno de pginas na Internet.
Contedo e Formato juntos:-

<body>
<h3>
<font color=blue> O Patinho Feio</font>
</h3>
...
Formato (style) e contedo (dentro de body) separados:-

<head>
<style>
h3 { color:blue; }
</style>
</head>
<body>
<h3> O Patinho Feio</h3>
...
Ao utilizar a CSS como uma camada que formata a apresentao da pgina e que pode ser manipulada sem
precisar preocupar-se com o contedo, o desenvolvedor consegue:-
Flexibilizao: O contedo independe de seu formato.
Reduo de erros: O desenvolvedor alterar apenas o contedo ou a apresentao, conforme a
necessidade.
Padronizao: Ao permitir ao desenvolvedor a utilizao de um determinado estilo para um
conjunto de objetos HTML.
Rapidez: O nmero de caracteres de uma pgina reduzido.
Facilidade de manuteno: O desenvolvedor sabe exatamente o que precisa atualizar e onde.

Porque Surgiu?
A partir do ano de 1993, acirrou-se a discusso entre os desenvolvedores de pginas web que achavem que
deveria haver uma forma do desenvolvedor poder alterar as formas de apresentao de uma pgina,
fugindo das limitaes impostas pelos navegadores. Desta forma, cores, tamanho de fontes e diversos
outros atributos que determinam o formato de uma pgina comearam a ser solicitados. Diversas questes
surgiram. Uma delas dizia respeito de como uma pgina deveria ser exibida.
Uma pgina deve ser exibida conforme a vontade de seu autor ou a do usurio?
Quando surgiu?
Diversos padres que antecederam o CSS foram lanados, cada qual com suas especificaes e
determinaes, mas s aps a constituio e operao da entidade W3C - World Wide Web Consortium,
que se deu a definio e largo uso do padro CSS. Isto ocorreu em funo da importncia dada ao rgo,
visto que diversas organizaes aderiram e participaram das chamadas dos fruns sobre esta questo, em
particular a Microsoft e a Netscape. No final de 1996 foi lanada a primeira recomendao CSS Nivel 1.
A especificao atual da CSS a 2.1 (Nvel 2, reviso 1), de 06 de Novembro de 2.006, e pode ser acessada
na lngua inglesa no seguinte endereo:-
http://www.w3.org/TR/CSS21/
Definies e Conceitos
O termo estilo utilizado para referenciar determinadas caractersticas de apresentao de um contedo, ou
seja, no do contedo em si, mas sim da forma como este contedo ser apresentado.
Note o exemplo abaixo:-
O Patinho Feio
O Patinho Feio
O Patinho Feio
O Patinho Feio
Podemos perceber, nos exemplos acima, que existem diversas formas de se apresentar um determinado
contedo. A proposta do CSS trabalhar estes elementos de formatao, atravs da manipulao de:-
Cores (frente e fundo)
Tamanhos (de fontes, tabelas, elementos em geral)
Estilos (Negrito, Itlico, etc.)
Famlias de Fontes (Arial, Verdana, Courier, etc)
Efeitos (opacidade, visibilidade, etc.)
Posicionamentos, espacejamentos, etc.
Imagens, Fotos, etc.

Criando estilos
Estrutura do estilo
A estrutura para criao e utilizao de um estilo de CSS, se divide
seletor
basicamente em trs partes:-
{
Seletor
propriedade: valor;
Propriedade
propriedade: valor;
Valor
}
O seletor um elemento que o CSS estar estilizando. Este elemento
pode ser uma marca HTML, o id de um elemento HTML ou uma classe (veja abaixo).
A propriedade (no CSS) muitas vezes equivalente ao atributo de uma marca HTML e diz respeito a uma
determinada caracterstica do elemento a ser alterado ou definido. Estas propriedades devem ser as
definidas para utilizao do CSS, de forma que os nomes de atributos do HTML (Exemplo: bgcolor) so
invlidos.
O valor a definio do contedo desta propriedade e deve seguir as regras pelas quais o CSS foi criado.
Na definio de estilo do seletor, deve ser utilizado um par de chaves, e dentro deste par dever ser inserido
o conjunto de propriedade(s) / valor (es) a ser definida(os) para este seletor (elemento).
Exemplo:-
P
{
color:yellow;
}
Neste exemplo, podemos verificar:-

1) O seletor utilizado foi a marca P, que em HTML representa o pargrafo criado na pgina HTML.
2) Seus estilos (atributo/propriedade) esto delimitados por um par de chaves {...}.
3) A cor do texto (color cor de frente) deste elemento (pargrafos) ser amarela.
Especificando diversos atributos

Para especificar diversos atributos, deve ser utilizado o ponto e vrgula (;) como separador.
Exemplo:-
h1 {
color:yellow;
background-color:blue;
font-size:25px;
font-family:times;
border:2px solid green;
text-align:center;
}

Neste exemplo, podemos verificar que:-

1) Este seletor (a marca h1, de primeiro nvel de cabealho HTML) ter cor de texto amarela (color).
2) Ser utilizada a cor de fundo azul.
3) Ser utilizado o tamanho de fonte de 25 pixels.
4) A fonte a ser utilizada ser a Times News Roman.
5) Este pargrafo ter uma borda de tamanho de 2 pixels, no estilo slido (linha contnua) na cor
verde.
Ao desenvolvermos o cdigo HTML abaixo:-

<body>
<h1>O Patinho Feio</h1>
O patinho feio ...
Teremos como resultado:-
Atributo baseado em texto

Ao informar atributos, cujo valor baseado em texto, o valor deve ser delimitado por aspas duplas:-
Exemplo:-
p
{
font-family: "Geneva, Arial, Helvetica, sans-serif"
}
Agrupando definies de estilo

Definies de estilo para diversos seletores podem ser agrupadas, desde que sejam separadas por vrgula.
No exemplo abaixo, todos os elementos de cabealho foram agrupados e exibidos na cor azul:-
Exemplo:-
h1,h2,h3,h4,h5,h6
{
color: blue
}
Aplicando CSS
A CSS pode ser aplicada de diversas formas:-
1) Folha Externa
2) Estilo Interno (dentro da marca <head>)
3) Estilo Em Linha (no objeto HTML)

Folha Externa
Cria-se um arquivo do tipo texto, contendo a formatao desejada, salvando-o com a extenso CSS. Na
pgina HTML deve ser inserido um comando que far uma referncia ao arquivo de estilo criado. Isto far
com que todos os estilos existentes no arquivo de estilo fiquem disponveis para o arquivo HTML.
Arquivo HTML Arquivo estilo.css
<head> p
<link rel = "stylesheet" type= "text/css" href = "estilo.css"> {
</head> color: red
}
No exemplo acima, foi efetuada uma ligao da pgina HTML com o arquivo Folha de Estilos estilo.css.
Neste arquivo, foi criado um estilo para o seletor p (pargrafo) onde a propriedade cor (color) ser vermelha
(red).
Uma outra possibilidade consiste em se importar a folha de estilo desejada:-
Arquivo HTML Neste exemplo, o arquivo Folha de Estilo estilo.css est sendo
importado para a pgina HTML. Para que isto funcione, o comando
<style type="text/css"> deve ser o primeiro aps a marca <stile>. Embora seu
@import "estilo.css"; funcionamento seja muito similar ao da folha de estilo ligada (link
</style> rel), deve ser informado que alguns navegadores mais antigos, como
por exemplo o Netscape 4 no sabe interpretar este tipo de comando.
O bom em se utilizar folhas de estilo externas que as mesmas podem

ser utilizadas em diversas pginas.
Estilo Interno (na pgina HTML)

Outra possibilidade a de criao de estilos dentro da seo <head> da pgina HTML,
<head>
<style type="text/css">
p
{
color: red
}
</style>
</head>
Voc pode informar apenas <STYLE> que a pgina HTML ir entender tratar-se de um estilo CSS.
Estilo Em Linha (in-line)

Neste tipo de aplicao de estilo, o elemento recebe o estilo no prprio (marca) de criao.
Exemplo:-

<p style="color=red">
Como informado anteriormente, pode-se manipular diversas propriedades atravs da utilizao do ponto e
virgula (;).
<p style="color=red;background-color:yellow">
Neste caso, o estilo definido para este pargrafo ter a propriedade color definida como vermelha (red),
enquanto o fundo do texto (propriedade background-color) ser amarelo (yellow).
Prioridade de Aplicao
O nvel de prioridade a ser obedecido, isto
Arquivo HTML (Pgina web) , caso haja uma formatao de estilo geral,
se dar na seguinte ordem de prioridade:-
<html> 1) O navegador ir inicialmente aplicar
<head> o estilo definido na folha externa
<link rel = "stylesheet" type= "text/css" href = "estilo.css"> 2) E, para em seguida aplicar o estilo
definido internamente (na pgina HTML,
<style type="text/css"> seo <head>, caso existir)
p 3) Finalmente ir aplicar o estilo
{ definido na linha de criao da marca (in-
color: red line).
}
</style>
</head> Arquivo estilo.css
<body>
<p>Linha 1</p> p{
<p style="color:black">Linha 2</p> color: green
</body> }
</html> Resultado
na Tela do Navegador:-
Linha 1
Linha 2
Apesar de que no arquivo estilo.css foi definido que o atributo cor do seletor p verde, o primeiro
pargrafo obedeceu cor definida na rea <head> da pgina HTML (cor vermelha). Caso o desenvolvedor
elimine a definio de estilo desta rea, este primeiro pargrafo seria renderizado na cor verde. Quanto ao
segundo pargrafo, verifica-se que sua formatao obedece ao estilo em linha, definido na marca (in-line).
Os possveis conjuntos de pares {propriedade:valor} de um seletor, que est definido entre suas chaves,
podem ser arranjados de qualquer maneira. Os exemplos abaixo so todos vlidos:-
p p{color: red} P
{ p{ {
color: red color: red} color:
} red}

Quando se define um estilo para uma marca, todas as referncias para esta marca utilizaro este
estilo.
Criando Classes
Uma vez que o desenvolvedor web estilizar uma marca, seu estilo ser utilizado sempre que a mesma for
criada na pgina web. Isto quer dizer que se o desenvolvedor definir que a cor da marca p (pargrafo) ser
azul, todos os pargrafos da pgina sero desta cor.
O CSS prev uma forma de se criar um estilo (ou conjunto) para ser aplicado nos elementos que o
desenvolvedor desejar.
Para isto, o desenvolvedor pode utilizar classes de estilos. Classes so nomes dados a derivaes de
conjuntos propriedade:valor que podem ser aplicadas a determinados seletores.
A definio/criao de uma classe no CSS se d atravs da utilizao de um ponto (.) e em seguida o nome
da classe.
No exemplo abaixo ser criada a classe titulo cujos atributos (estilos) so cor de texto azul e tamanho da
fonte definido em 16 pixels:-
<style>
.titulo {
color:blue;
font-size:22px;
}
</style>
Posteriormente, o desenvolvedor pode utilizar a classe nos elementos (marcas) que desejar. Exemplo:-
<body>
<h1>Utilizando classes</h1>
<p class="titulo">Pargrafo estilizado com classe</p>
<p>Pargrafo estilizado sem classe</p>
</body>
Resultado:-

Outros exemplos de classes:-

.destaque { color:blue}
.aviso {color:red}
Uma vez criada, uma classe genrica pode ser aplicada em qualquer elemento. Exemplos:-
Arquivo HTML
<html>
<head>
<title>Documento sem título</title>
<style>
.destaque { color:blue}
.aviso {color:red}
</style>
</head>
<body>
<h1 class="destaque">Rodzio de Veculos</h1>
<p>As carros com placas de final <span class="aviso">1 e 2</span> no podem trafegar no centro
estendido, de 2. A 6. Feira, no horrio de <span class="aviso">07:00 as 10:00</span> e <span
class="aviso">17:00 as 20:00 hs</span>.</p>
<p class="destaque">Fonte: DETRAN</p>
</body>
</html>
Resultado:-

Delimitando o escopo de uma classe

Existe uma forma de se criar estilos para uma classe que tenha sido usada por elementos criados dentro de
outros elementos. No exemplo abaixo, esto sendo criadas duas classes que s sero aplicadas em
elementos que as utilizem, desde que tenham sido criados dentro de pargrafos. Exemplo:-
<html>
<head>
<style>
p.aviso
{
color:red
}
p.titulo
{
Color:black
}
</style>
</head>
<body>
<p>Uso comum, sem estilo</p>
<p class="titulo">Título</p>
<p class="aviso">Mensagem</p>
</body>
</html>
Resultado:-
Uso comum, sem estilo
Ttulo
Mensagem
Note que estas classes foram criadas para o seletor p (marca <p>).
Blocos e Estrutura em rvore

De acordo com as definidas pelo W3C, os elementos contidos dentro de um documento (Explo: pgina
HTML) passvel da aplicao das especificaes da CSS Nvel 2, tm um elemento pai, com exceo do
elemento raz (root) que o elemento (inicial) que contm todos os demais elementos.

Isto quer dizer que um objeto est contido

dentro de outro (de seu pai) e que o
primeiro nvel desta rvore de documentos
o elemento raiz.
Desta forma, as propriedades relacionadas

ao posicionamento e tamanho de objetos
dependem de seu elemento pai.
Uma outra maneira de se enxergar esta
estrutura :-
Elementos de Bloco
De acordo com as especificaes de CSS Nvel 2, do W3C, elementos em nvel de bloco so aqueles
formatadas como um bloco.
No exemplo defino a propriedade de cor de fundo para exibio de pargrafos como laranja, e defino
tambm que qualquer camada (<div>) criada ter como cor de fundo a cor amarela, o tamanho horizontal
(largura) de 300 pixels e o tamanho vertical (altura) de 80 pixels.
Em seguida, foi criado o primeiro pargrafo na pgina, uma camada (div), um pargrafo dentro desta
camada, e um terceiro pargrafo, desta vez fora da camada.
Pode-se notar que o primeiro pargrafo toma como tamanho horizontal, o tamanho da janela do navegador
(verificao visual via cor de fundo). No caso do segundo pargrafo, cujo objeto pai a camada onde ele foi
inserido, pode se verificar que seu tamanho horizontal igual ao da camada.
Por fim, um terceiro pargrafo foi criado, fora da camada (div) de tal forma que, como o primeiro pargrafo,
pode-se perceber que ele toma toda a largura do navegador.
Cdigo:-
<html>
<head>
<title>Elementos de Bloco</title>
<style>
p
{

background-color:orange
}
div {
background-color:yellow;
width:300px;
height:80px;
}
</style>
</head>
<body>
<p>Primeiro</p>
<div>
<p>Segundo</p>
</div>
<p>Terceiro</p>
</body>
</html>
Resultado:-
Elementos em nvel de linha

Alm de elementos de bloco temos tambm os elementos em nvel de linha (in-line). Este tipo de elemento
gera um bloco de linha seqencial, que ocupa uma posio na linha em que criado. Exemplo:-
<p>Um <strong>elemento de linha</strong> não gera um novo bloco quando

criado.</p>
De acordo com o exemplo acima, pode-se verificar a existncia de um pargrafo, que um elemento de
bloco, e dentro deste pargrafo temos trs elementos em nvel de linha:-
O texto Um, que herda suas caractersticas do pargrafo
Um bloco de texto delimitado pela marca <strong> </strong>
Um texto finalizador da frase.

A propriedade background
Esta propriedade permite a definio do que ser exibido na rea de fundo dos elementos. Ela pode ser
utilizada para se definir uma cor ou uma imagem de fundo. Seus possveis valores so:-
Propriedade Descrio
background Utilizado para especificar todas as possibilidades de background do objeto, de
uma s vez.
background-color Provavelmente a mais utilizada, esta propriedade permite definir a cor de fundo
de um elemento.
background-image Permite a definio de uma imagem que ficar como fundo do elemento.
background-repeat Define a maneira pela qual a imagem (de fundo) ser utilizada.
background-attachment Define se a imagem de fundo
background-position ???@@@
A propriedade background-color
Esta propriedade define a cor de fundo de um elemento. Ela pode ser especificada da seguinte maneira:-
Atravs de uma palavra chave que especifica a cor. Exemplo: blue

Atravs do cdigo RGB de uma cor. O formato RGB pode ser especificado de trs formas:-
Atravs dos 3 dgitos hexadecimais que compem a cor, e que so transformados para 6 dgitos.
Exemplo: #abc #aabbcc
Atravs dos 6 dgitos hexadecimais que compem a cor. Exemplo: #ffffff
Atravs da notao funcional RGB, no formato: RGB( r,g,b) podendo ser representados por
nmeros de 0 a 255 ou por porcentagens. Exemplo: rgb(20,10,30).
Atravs da palavra transparent, que define o fundo como transparente. Exemplo: transparent.
Palavras chaves de cores

A propriedade background-image
background
Utilizamos a propriedade background-image
background image para determinar uma imagem que servir como fundo de um
elemento. O W3C aconselha a determinao da cor de fundo, quando da impossibilidade de localizao ou
carga da imagem de fundo.
Caso no se deseje uma imagem como fundo, o desenvolvedor pode informar o valor none.
Exemplo:-
<html>
<head>
<title>Imagem como Fundo</title>
</title>
<style>
#logo {
background-image: url(figuras.jpg);
background-color:white;
color:white;
width:100;
height:50
}
</style>
</head>

<body>
<div id="logo">
<p style="font-weight:bold">Aqui vai um Logo.</p>
</div>
</body>
</html>
Resultado:-
Nem sempre o tamanho da imagem igual ao tamanho de seu elemento pai. Quando isto acontece, a
imagem pode ser cortada ou duplicada, conforme o elemento pai. Se fizermos um pequeno ajuste no cdigo
CSS acima iremos verificar um resultado diferente:-
#logo {
width:100;
height:50
}
No CSS acima, as propriedades width e height da DIV foram eliminados, de forma que a DIV herda a altura
e largura de seu elemento pai.
Notem que a imagem foi duplicada no eixo dos x (horizontalmente). Uma imagem pode ser duplicada tanto
no eixo dos x, quanto no eixo dos y.
Exemplo:-
<html>
<head>
<title>Imagem como Fundo</title>
<style>
#logo {
background-repeat:repeat-y;
}
p {margin-left:60px}

</style>
</head>
<body>
<div id="logo">
<p style="font-weight:bold">
Na medida em que esta <br />
esta div vai crescendo<br />
verticalmente a imagem<br />
vai sendo duplicada,<br />
conforme o eixo dos y (vertical).</p>
</div>
</body>
</html>
Resultado:-
A maneira pela qual uma imagem de fundo pode ser repetida baseada na propriedade background-
repeat que pode ter os seguintes valores:-
Valor Descrio
Repeat A imagem se repete nos dois sentidos (horizontal e vertical)
repeat-x A imagem se repete no sentido horizontal (Eixo dos x)
repeat-y A imagem se repete no sentido vertical (Eixo dos y)
no-repeat A Imagem no se repete.
Medidas
As medidas no CSS so utilizadas para se determinar dimenses de altura e largura. Existem alguns casos
em que se pode utilizar um valor negativo, e desenvolvedores tm utilizado isto em algumas tcnicas para
exibio parcial de imagens.
As unidades de medidas utilizadas at a verso 2 do CSS so:-
px: Significa pixel

%: Significa uma porcentagem
em: Est relacionada a uma proporo da fonte herdada do elemento pai
ex: Est relacionada a altura da letra da fonte herdada do elemento pai
pt: Significa o nmero de pontos na proporo de 1/72 polegadas
pc: Significa o nmero de pica, que equivale a 12 pontos (pt) ou 1/6 de polegada
cm: Significa o nmero de centmetros

in: Significa o nmero de polegadas (2,54cm)
A propriedade display
A propriedade display uma das mais utilizadas, pois determina como ser o layout do elemento a ser
renderizado numa pgina web. Alguns valores mais utilizados so:-
inline
Faz com que o elemento crie uma caixa de linha.
block
Faz com que o elemento crie uma caixa em bloco.
list-item
Faz com que o elemento crie uma caixa em bloco e uma caixa de linha de item de lista.
none
Faz com que o elemento no crie caixa, de tal forma que o elemento criado no interfere na estrutura do
documento. Desta forma, seus objetos descendentes tambm no criaro caixas, sendo que mesmo que a
propriedade display dos objetos descendentes ser ignorada.
Espaamento
O CSS define algumas propriedades para especificar o espaamento de elementos HTML:-
Propriedade Descrio
padding Utilizado para especificar todas as possibilidades de espaamento do objeto, de uma s
vez. Quando utilizado, devem ser especificados os seguintes espaamentos (nesta
ordem):- superior direito fundo esquerdo, separados por espao. Exemplo:-
10px 30px 40px 20px Significa a aplicao de um espaamento com 10 pixels da parte
superior, 30 pixels da direita, 40 pixels do fundo e 20 pixels da esquerda.
padding-top Determina o espaamento do topo do objeto
padding-left Determina o espaamento do lado esquerdo do objeto
padding-right Determina o espaamento do lado direito do objeto
padding-bottom Determina o espaamento do fundo do objeto
Os possveis valores utilizados para se definir o espaamento so:-
auto: o valor padro de espaamento

valor: Um valor numrico, seguido da medida vlida CSS (Exemplo: px, cm, etc)
%: Porcentagem em relao ao elemento pai na estrutura
No exemplo, iremos criar 5 ids, que sero utilizados em pargrafos diferentes:-

Topo O texto deste pargrafo ter um espaamento de 10 pixels, da parte superior do
pargrafo.

Esquerda O texto deste pargrafo ter um espaamento de 20 pixels, da esquerda do

pargrafo.
Direita - O texto deste pargrafo ter um espaamento de 30 pixels, da esquerda do pargrafo.
Fundo - O texto deste pargrafo ter um espaamento de 40 pixels, do fundo do pargrafo.
Todos O texto deste pargrafo estar distante do topo do pargrafo em 10 pixels, da direita
em 30 pixels, do fundo em 40 pixels e da esquerda em 30 pixels.
Cdigo:-
<html>
<head>
<title>Teste de Padding</title>
<style>
p {background-color:yellow}
#topo {padding-top:10px;}
#esquerda{padding-left:20px;}
#direita{text-align:right; padding-right:30px;}
#fundo{padding-bottom:40px;}
#todos{padding:10px 30px 40px 20px;background-color:gray}
</style>
</head>
<body>
<p id="topo">Teste do Topo - 10 pixels</p>
<p id="esquerda">Teste da Esquerda - 20 pixels</p>
<p id="direita">Alinhamento a Direita - mas com distncia de 30 pixels</p>
<p id="fundo">Teste do Fundo - 40 pixels</p>
<p id="todos">Teste Completo - T: 10 D:30 F:40 E:20 pixels</p>
</body>
</html>

Margens
As margens tambm desempenham um papel especial j que permite um distanciamento entre os objetos
numa pgina web.
A aplicao de margens se d de maneira muito parecida com a de espaamento.

Temos as seguintes propriedades:-
Propriedade Descrio
margin Utilizado para especificar todas as possibilidades de margem do objeto, de uma s vez.
Quando utilizado, devem ser especificados as seguintes margens (nesta ordem):-
superior direito fundo esquerdo, separados por espao. Exemplo:-
10px 30px 40px 20px Significa a aplicao de um espaamento com 10 pixels da parte
superior, 30 pixels da direita, 40 pixels do fundo e 20 pixels da esquerda.
margin-top Determina a margem do topo do objeto
margin-left Determina a margem do lado esquerdo do objeto
margin-right Determina a margem do lado direito do objeto
margin-bottom Determina a margem do fundo do objeto

Os possveis valores utilizados para se definir a margem so:-
auto: o valor padro da margem

valor: Um valor numrico, seguido da medida vlida CSS (Exemplo: px, cm, etc)
%: Porcentagem em relao ao elemento pai na estrutura
No exemplo abaixo temos alguns exemplos de utilizao de margens:-
<html>
<head>
<title>Margens</title>

</style>
</head>
<body>
<p id="primeiro">Este primeiro paragrafo tem 10 pixels nas margens do topo,
esquerda, direita e fundo.</p>
<p id="segundo">Este segundo paragrafo tem de margem: S:20 D:30 F:40 E:50
pixels</p>
<p>Terceiro paragrafo herdando o estilo apenas do parágrafo</p>
</body>
</html>
Resultado:-

* Caso se utilize de valores negativos nas margens pode ocorrer uma sobreposio de objetos.
Posicionamento
Posicionamento Esttico (static)
Este tipo de posicionamento segue o fluxo de objetos, no local onde o mesmo foi inserido, no podendo ser
reposicionado.
Posicionamento Relativo (relative)

Similar ao posicionamento esttico, porm podendo ser manipuladas suas propriedades top e left, de tal
forma que seu posicionamento conforme o fluxo muda, de acordo com sua posio em relao a outros
objetos.
Posicionamento Absoluto (absoluto)

Trata o posicionamento do objeto como absoluto, ou seja, sem ligao com qualquer outro tipo de objeto,
de maneira independente. As informaes de topo (top) e esquerda (left) em funo pgina web devem
ser informadas (informadas inicialmente com 0px).
Aplicaes
Aplicando o posicionamento esttico

Considere o seguinte cdigo HTML
<html>
<head>
<title>O gato malhado</title>
</head>
<body>
<h1>O gato malhado</h1>
<img src="gato.JPG" />
</body>

</html>
Quando definimos que seu posicionamento esttico, a figura j no pode ser mudada de local, ou seja, o
objeto/elemento ir acompanhar o fluxo dos objetos/elementos inseridos na pgina e no pode ser mudado.
No exemplo abaixo, verificamos que o estilo de posicionamento do objeto/elemento f (a figura) foi

definido como esttico.
<img src="gato.JPG" name="f" id="f" style="position:static" />
Alguns desenvolvedores afirmam que esttico no exatamente uma forma de se alterar o

posicionamento, visto que os elementos criados numa pgina web por default seguem o fluxo
normal e esttico de posicionamento.
Abaixo, criada uma classe de nome posicionamento, que ter sua posio definida neste exemplo como
absoluta, nas coordenadas 0,0 (topo e esquerdo).
.posiciona
{
position:absolute;
top:0px;
left:0px;
}
Um pouco mais abaixo, utilizamos o Javascript para alterar a classe do objeto f (a figura) para a classe
posicionamento (mostrada acima). Ocorre que no estilo do objeto foi definido anteriormente que seu
posicionamento esttico, esta alterao no ter efeito nenhum.

<script>document.getElementById("f").className="posicionamento"</script>
Exemplo Completo:-
<html>
<head>
<style>
.absoluta
{
position:absolute;
top:0px;
left:0px;
}

</style>
</head>
<body>
teste
</body>
</html>
Aplicando o posicionamento relativo

No posicionamento relativo, como informado, podemos alterar as coordenadas de topo e margem esquerda.
Iremos mudar um pouco nosso exemplo, para deixar o objeto f (a figura) inicialmente com o posicionamento
relativo:-
<img src="gato.JPG" name="f" id="f" style="position:relative" />
Vamos mudar tambm a definio de posicionamento da classe, para verificarmos visualmente a ocorrncia
da alterao de posicionamento do objeto.
.posicionamento
{
position:absolute;
top:200px;
left:200px;
}
</style>
Agora temos a seguinte condio:-

O estilo do objeto (figura f) foi inicialmente definido como relativo. Aplicamos uma classe que define seu
posicionamento como absoluto, mas este objeto no aceitar esta mudana de propriedade. Na medida em
que mudamos as propriedades top e left, deste objeto, estas alteraes de posicionamento refletem no
objeto, mudando seu posicionamento 200 pixels para baixo e para a direita (colocando uma margem de 200
pixels no topo e no lado esquerdo do objeto) relativo ao local onde ele se encontra.
<html>
<head>
<style>
.posicionamento
{
position:absolute;
top:200px;

left:200px;
}
</style>
</head>
<body>
<img src="gato.JPG" name="f" id="f" style="position:relative" />
</body>
</html>
Resultado:-
Quanto ao posicionamento absoluto de um objeto, ele posicionado no local onde o usurio definir,
independente da posio de outros objetos.
Isto quer dizer que utilizando este tipo de posicionamento, um objeto pode sobrepor outro objeto.
Vamos alterar um pouco nosso cdigo exemplo, e sobrepor a imagem em cima do ttulo.
Exemplo:-
<html>
<head>
<style>
.posicionamento
{
top:25px;

left:150px;
}
</style>
</head>
<body>
<img src="gato.JPG" name="f" id="f" style="position:absolute" />
</body>
</html>
Resultado:-
Neste exemplo verificamos que atravs deste tipo de posicionamento possvel colocar um objeto em
qualquer local da pgina.

Criando Menus
Irei mostrar como desenvolver um menu com botes dispostos horizontalmente numa barra navegacional
utilizando CSS.
Estrutura do Menu
Estes menus sero baseados na marca no conjunto <ul> (unordered list - Lista no Ordenada ), <li> (list
item - Item de Lista).
Irei identificar as maneiras pela qual ser possvel trocar as cores de frente e do fundo, do item da lista, na
medida em que se definem estas caractersticas nos estados possveis de um item de lista (hover, visited).
Definiremos a estrutura do menu composta inicialmente de uma camada (<div>) utilizando uma lista no
ordenada (<ul>) contendo cinco itens (<li>), onde cada item ir apontar para um endereo/link (<a>), que
neste caso est apontando para uma referncia simblica (#), que voc poder posteriormente alterar para
o endereo desejado.
Note que existem diversas vantagens na criao deste tipo de menu, como por exemplo:-
Acessibilidade: Caso o CSS no seja utilizado, um deficiente auditivo ou visual pode usufruir das
caractersticas de acessibilidade do navegador e ferramentas de auxlio, visto que acessar a
estrutura de uma lista muito mais fcil do que tentar ler o contedo de uma tabela
Em termos de desenvolvimento, muito fcil rever esta estrutura, que pode ser facilmente revista,
aumentada ou diminuda.
Iremos inserir uma div para poder manipular com mais facilidade o menu, posteriormente.
Inicialmente criamos um lista no ordenada, contendo os seguintes itens de lista:-
<div id="menu">
<ul>
<li> <a href="#">Home Page</a> </li>
<li> <a href="#">Nossa Empresa</a> </li>
<li> <a href="#">Produtos</a> </li>
<li> <a href="#">Serviços</a> </li>
<li> <a href="#">Fale Conosco</a> </li>
</ul>
</div>
Neste instante, nosso menu est renderizado da seguinte forma:-

Identificando visualmente os elementos da estrutura
Estilizando o Menu
Criando as Classes
Iremos criar o id menu, que nos permitir estilizar a div criada com este nome. Na estilizao deste id
iremos definir as caractersticas de diversos elementos. Dentre estes itens iremos manipular:-
As marcas (desenhos/imagens) que antecedem os itens de uma lista no ordenada
As margens e espaos que deslocam os itens dentro da lista
A disposio vertical, que ser transformada para horizontal.
Configurando as propriedades da Lista

Para se remover os espaos e margens dos itens dentro de uma lista, devemos zerar as propriedades
margin e padding. Exemplo:-
.menu ul
{
margin:0;
padding:0;
}
Configurando as propriedades do Item de Lista

Para se tirar a marca (desenho/imagen) dos itens de lista, se deve atribuir o valor none na propriedade list-
style da lista. Exemplo:-
.menu ul.li
{
list-style:none;
}
Para se deixar um item da lista no formato horizontal, configuramos sua propriedade display para inline.
.menu li
{
display:inline;
}

Agora iremos estilizar os quatro possveis estados dos links, que so:-
Valor Descrio
up o estado inicial do link (logo aps a carga da pgina web)
hover o estado de quando se est por cima do link (Over)
active o estado de quando o link foi clicado (Down)
visited o estado do link quando j visitado.
Menus do Tipo Drop Down

<ul>
<li><a href="#">Home Page</a></li>
<li><a href="#">Empresa</a>
<ul>
<li><a href="#">Nossa Historia</a></li>
<li><a href="#">Filiais</a></li>
</ul>
</li>
<li><a href="#">Produtos</a>
<ul>
<li><a href="#">Linha Masculina</a></li>
<li><a href="#">Linha Feminina</a></li>
<li><a href="#">Linha Praia</a></li>
<li><a href="#">Produtos Especiais</a></li>
</ul>
</li>
<li><a href="#">Fale Conosco</a>
<ul>
<li><a href="#">SAC</a></li>
<li><a href="#">Financeiro</a></li>
<li><a href="#">Contabilidade</a></li>
<li><a href="#">Diretoria</a></li>
</ul>
</li>
</ul>

ul{
list-style: none;
margin: 0;
padding: 0;
}
#menu{
float: left;
width: 100px;
}
#conteudo{
float: left;
width: 500px;
}
</style>
<script type="text/javascript">
function insereTexto(qual){
if(qual == 1)
document.getElementById("conteudo").innerHTML = "Voc clicou no link
1";
else if(qual == 2)
2";
else
3";
}
</script>
<div id="menu">
<ul>
<li><a href="java script: insereTexto(1);">Link 1</a></li>
</ul>
</div>
<div id="conteudo"></div>

JAVASCRIPT
Nos tempos iniciais da criao de pginas para Internet, a nica linguagem
existente era a Linguagem de Marcao de Hyper Text (HTML). Basicamente, ela
permitia a criao de pginas web disponibilizando uma forma de se inserir
contedo, apresentao, estruturao de layout e elementos de formulrio.
Na medida em que o uso da Internet foi se ampliando, os grandes players do

mercado (Netscape e Microsoft) perceberam as limitaes que o HTML impunha, de
tal forma que comearam a criar linguagens de apoio para serem inseridas dentro
de seus navegadores. A Netscape criou o Javascript, linguagem com sintaxe e
estrutura muito parecida com JAVA , que desde seu lanamento tornou-se a
linguagem script padro de mercado enquanto que a Microsoft criou o VBScript ,
linguagem atualmente utilizada na maior parte de suas diversas ferramentas, em
particular no pacote Office, por conta de seu lanamento.
Iremos focar o estudo na utilizao do Javascript, em funo de sua alta

aderncia e utilizao pelos desenvolvedores web.
Basicamente, o Javascript utilizado para se manipular os objetos de uma pgina

web. Como qualquer boa linguagem, o Javascript permite a utilizao de comandos
lgicos aliados a diversos elementos que permitam a criao de estruturas
lgicas e algoritmos.
Um comando ou estrutura Javascript pode ser inserido dentro de uma pgina HTML.
Essa lgica pode ser inserida dentro de uma rea do HTML, numa funo Javascript
ou atravs de comandos injetados (inseridos) em eventos de objetos HTML.
Quando dentro de uma funo (ou procedimento) Javascript, seus comandos so

executados de forma seqencial.
Javascript uma linguagem interpretada (executada) na medida em que a pgina web vai sendo
carregada.
Inserindo Comandos Javascript numa pgina WEB

Uma maneira simples de se inserir diversos comandos Javascript, dentro de um
documento WEB se d atravs da marca <script>. Considerando que alguns
navegadores no tm suporte a Javascript, podemos inserir um bloco de
comentrios, logo aps a abertura da marca de script, e antes de seu fechamento.
Neste caso, este tipo de navegador ir ignorar as marcas <script> e </script> e

pelo fato de existirem as marca de comentrio (<!at ) ao redor dos cdigos
Javascript, o navegador tambm ir ignorar todos os comandos de script.
Exemplo:-
<script language="Javascript">

</script>
Embora tais comandos possam ser inseridos em qualquer local de uma pgina HTML,
recomendado que os mesmos sejam inseridos no comeo da pgina, de preferncia
entre as tags <head> e </head> de um documento WEB, pois uma das primeiras
sees a serem carregadas da pgina pelo navegador.
Uma forma de se inserir comentrios numa linha atravs da utilizao de barras duplas // ou da
marca 
</script>
</head>
<body onload="BoasVindas()">
Nosso Site
</body>
</html>
Exemplo de clculo de raiz quadrada:-
<html>
<head>
<title>Matemática Simples</title>
<script language="javaScript">

</script>
</head>
<body>
<p>Informe um Valor:
<input name="numero" type="text" id="numero" size="10" maxlength="10">
<br /> <br />
<input type="button" name="Submit" value="CALCULAR" onClick="Calcular()" />
<br /> <br /> </p>
</body>
</html>
DOM - Document Object Model

Introduo
O DOM (Modelo de objetos de documento) uma forma pela qual se consegue acessar os elementos dentro
de uma pgina HTML. Como todo objeto (elemento) criado no HTML tem atributos, podemos imaginar uma
grande estrutura (ou hierarquia) constituda de diversos graus ou nveis.
Exemplo:-
Neste exemplo, temos um documento (pgina) HTML que contm os seguintes objetos:-
Uma imagem cujo id ImgRosto
Um elemento span de nome Triste
Um elemento span de nome Normal
Um elemento span de nome Feliz
Se considerarmos a imagem, perceberemos um de seus atributos (ou propriedades) que o src, que define
qual o arquivo imagem foi carregado para ser exibido por este objeto.

Atravs do uso de Javascript, conseguimos uma maneira de acessar qualquer elemento do DOM, podendo
inclusive alterar diversos atributos de seus elementos.
Acessando atributos via Javascriipt

Uma das formas de se acessar atributos de um elemento, atravs do uso da funo getElementById do
objeto document.
Esta funo nos permite acessar um determinado atributo de um objeto contido dentro da pgina HTML
(documento).
A sintaxe desta funo :-

document. getElementById(<NomeDoObjeto>).<Atributo>
onde
<NomeDoObjeto> deve ser substitudo pelo nome do objeto a ser acessado
<Atributo> deve ser substitudo pelo nome do atributo a ser acessado
No exemplo abaixo, iremos utilizar a funo alert (do Javascript) para mostrar na tela o nome do arquivo
(imagem) carregado do objeto imagem de nome ImgRost, que est localizado no atributo src:-
alert( document.getElementById(imgRosto).src )
Exemplo: Carinhas que mudam ao passar por cima de um link:-

O objetivo deste exemplo exibir uma imagem de uma carinha (conforme desenhos abaixo) que mude na
medida em que o usurio passe com o mouse sobre um determinado trecho de texto.
Resultado Final

Para fazer isto, precisaremos criar trs imagens contendo os tipos de carinhas.
Imagem Arquivo
CarinhaNormal.JPG
CarinhaContente.JPG
CarinhaTriste.JPG
Tabela de Carinhas
No cdigo HTML, iremos inserir a imagem de carinha normal e os textos relacionados a cada carinha.
<body>
<img src="CarinhaNormal.JPG" name="imgRosto" /> <br />
Carinha Triste<br />
Carinha Normal<br />
Carinha Feliz
</body>
Em seguida, marcamos no HTML os trechos de textos, que sero utilizados para identificar cada uma das
carinhas. Para isto utilizaremos o comando <SPAN> que permite ao HTML identificar um trecho de texto.
<span id="Triste">Carinha Triste</span> <br />

<span id="Normal">Carinha Normal</span> <br />
<span id="Feliz">Carinha Feliz</span>
Para fazer com que seja exibida uma imagem diferente, devemos associar cada trecho de texto (marcas
span) a uma funo no Javascript, que quando carregada ir, atravs de acesso ao DOM, modificar a
imagem que est sendo mostrada.
Trecho de Texto Executar Funo

Triste Triste()
Normal Normal()
Feliz Feliz()
Iremos agora utilizar o evento onmouseover de cada elemento span criado, para fazer uma chamada a
funo desejada:-
<span id="Triste" onMouseOver="javascript:Triste()">Carinha Triste</span> <br />

<span id="Normal" onMouseOver="javascript:Normal()">Carinha Normal</span> <br />
<span id="Feliz" onMouseOver="javascript:Feliz()">Carinha Feliz</span>
Agora devemos criar as funes desejadas no Javascript.

Como o objetivo da funo acessar o atributo src da imagem ImgRosto,iremos utilizar o DOM atravs
do Javascript, para acessar o objeto imgRosto atravs de seu id, de dentro do documento HTML, e iremos
alterar o seu src para carregar a imagem desejada.
function Triste()
{
document.getElementById("imgRosto").src="CarinhaTriste.JPG"
return
}
No exemplo acima, criamos uma funo Javascript de nome Triste().
Esta funo acessa o documento HTML (document) e atravs da funo

getElementById acessa o objeto cujo id ImgRosto. Em seguida, alteramos seu
atributo src para "CarinhaTriste.JPG"
O mesmo deve ser feito para as demais funes.
Cdigo completo XHTML
<html>
<head>
<title>Carinhas</title>
<script language="JavaScript">

</script>

</head>
<body>
<img src="CarinhaNormal.JPG" id="imgRosto" /> <br />
<span id="Triste" onMouseOver="javascript:Triste()">Carinha Triste</span> <br />
<span id="Normal" onMouseOver="javascript:Normal()">Carinha Normal</span> <br />
<span id="Feliz" onMouseOver="javascript:Feliz()">Carinha Feliz</span>
</body>
</html>
Consistindo Campos de Formulrios

Algo muito comum em pginas HTML o uso de formulrios para envio de informaes que acabam sendo
registradas em banco de dados.
Um dos problemas que podem ocorrer no momento de gravao dos dados em banco de dados est
relacionado ao no preenchimento de certos campos.
Imagine uma ficha cadastral de novo cliente na Internet, onde o usurio esquece de colocar o seu nome ou
seus dados para contato, como por exemplo, o e-mail.
Em outros casos, devemos consistir a faixa de valores que um determinado campo pode ter. Imagine um
campo importante, onde se solicita a informao de nmero de filhos, e o usurio indevidamente preench-
lo com o valor -20 (menos vinte).
Pior ainda ocorre quando um determinado campo na tabela do banco de dados est configurado para
receber certo nmero de caracteres, e o usurio digita mais do que o campo est preparado para gravar, o
que acaba gerando um erro. Para que tais situaes no ocorram, devemos consistir os campos importantes
de nosso formulrio.
Consistindo campos de texto vazios

A maneira pela qual podemos consistir campos vazios de texto via Javascript comparando seu atributo que
armazena o contedo com aspas duplas.
No caso de campos do tipo texto (<input type="text">), o comando seria assim:-

var nomeBranco=document.getElementById('nome').value==""
if (nomeBranco)
alert("O campo nome no pode ficar em branco!!")
else
if (document.getElementById('nome').value.length<3)
alert("Tamanho Mnimo deve ser de 3 caracteres")
Consistindo campos do tipo <textarea>
if (document.getElementById('observacoes').value=="")
alert("O campo observacoes no pode ficar em branco!!")
Consistindo caixas de checagem

if (document.getElementById('emails').checked)

alert("Envie e-mails")
Colocando o foco num determinado campo

Quando verificamos que um determinado campo no est com o valor apropriado, como no exemplo acima,
onde se verifica que o campo nome est vazio, para agilizarmos o processo de entrada de dados
conveniente que aps a mensagem, o campo que esteja com problemas receba automaticamente o foco.
Para desviarmos o foco para um determinado campo, utilizamos a funo focus(). Exemplo:-
document.getElementById('nome').focus()
Exemplo de Consistncia de Campos de Formulrio

No exemplo abaixo, temos um formulrio contendo os campos nome, telefone e email e um boto para
submeter o formulrio. Ao clicar no boto, o fluxo est sendo desviado para uma funo de nome
Verificar(), que checa se existe algum objeto em branco. Em caso de existncia, uma varivel de nome msg
vai armazenando o nome dos campos que esto vazios. Aps checar todos os campos, a varivel exibida,
caso no esteja vazia. A funo retorna um valor verdadeiro ou falso para o atriburt submit do formulrio,
que envia ou no o formulrio, conforme este valor retornado pela funo.
<html>
<head>
<title>Documento sem título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/javascript">


</script>
</head>
<body>
<form name="form1" onsubmit="return Verificar();">
Nome <input type="text" name="nome" id="nome" /> <br />
Telefone <input type="text" name="telefone" id="telefone" /> <br />
e-Mail <input type="text" name="email" id="email" /> <br />
</form>
</body>
</html>
Exemplo 2 Diversos tipos de consistncias

Neste segundo exemplo, foi criado um formulrio com os seguintes objetos: nome, email, empresa, assunto
e um boto do tipo submit. Neste exemplo, o boto foi configurado para que, quando clicado , desviasse o
fluxo da pgina para a rotina Validar(cadastro). O formulrio, de nome cadastro, est sendo enviado como
um parmetro da funo. A funo, ao receber o formulrio, checa diversos atributos de seus elementos,
dentre eles o tamanho do contedo de alguns elementos, e a existncia do sinal de arroba (@) do elemento
email. Caso encontre algum problema, a rotina avisa o usurio e coloca o foco de volta no elemento que ela
detectou a inconsistncia.
<html>
<head>
<title>Validar Formulario 2</title>
<script language="JavaScript">

</script>
</head>
<body>
<form name="cadastro" method="post" action="mailto:usuario@email.com.br">
Nome: <input name="nome" id="nome" type="text" size="30" maxlength="50" /><br />

e-Mail: <input name="email" id="email" type="text" size="30" maxlength="50">

<br />
Empresa:<input name="empresa" id="empresa" type="text" size="30"> <br />
Assunto:<textarea name="assunto" id="assunto"></textarea> <br />
<input name="submit" type="Submit" onClick='return Validar(cadastro)'
value="Enviar" />
</form>
</body>
</html>
Criando Mscaras para edio de dados

Muitas vezes precisamos mascarar a entrada de dados, isto , fazer com que o campo que est recebendo a
entrada de dados exiba caracteres especiais, automaticamente.
Isto ocorre nos seguintes casos:-

Digitao de Datas
Digitao de CEP
Digitao de Telefone
Nos exemplos abaixo, mostrarei como formatar dados usando as seguintes mscaras:-
Data: Formato 99/99/9999 (As barras sero inseridas automaticamente pelo navegador)
Telefone: (99)9999-9999 (O sinal de parnteses e o trao sero inseridos automaticamente pelo

navegador)
CEP: 99999-999 (O trao ser exibido automaticamente pelo navegador).
Identificando o objeto que iremos manipular

Vamos imaginar o campo data que queremos preencher. Este campo dever mostrar uma barra separadora,
de forma automtica, logo aps a digitao do segundo e quarto caractere da data. O comando para criao
de uma caixa de texto pode ser assim:-
<input type="text">
Apesar do comando para se criar uma caixa de texto ser simples, importante informarmos os atributos
name (que pode ser utilizado pelo PHP) e o atributo id (que pode ser usado pelo Javascript). Temos ento,
o comando atualizado da seguinte forma:-
<input type="text" name="nascimento" id="nascimento">
importante tambm restringir o nmero de caracteres para o equivalente a uma data. Vamos presumir a
digitao de uma data com duas posies para o dia, duas para o ms e quatro para o ano. Isto d um total
de 10 caracteres. Exemplo:-
<input type="text" name="nascimento" id="nascimento" maxlength="10">

Para podermos inserir o caractere /, no seu devido local, separando o dia do ms e o ms do ano,
devemos preparar este objeto para chamar uma funofuno toda vez que o usurio teclar algo. Vamos chamar a
funo Javascript com o nome de AjustaData.
AjustaData. Esta funo, que ser chamada toda vez que o usurio
digitar algo, dentro desta caixa de texto, enviar para o Javascript o evento chamador (no caso, o evento
onkeyup)) e o prprio objeto caixa de texto que chamamos de nascimento.
<input type="text" onkeyup="AjustaData(event, this)" maxlength="10" />
Dvidas?
cmajer@uol.com.br
Carlos Majer.

Introducao Ao Desenvolvimento WEB PDF

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Introducao Ao Desenvolvimento WEB PDF

Caricato da

Copyright:

Formati disponibili

2009

1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Professor Carlos Majer

Este material pertence a Carlos A. Majer, Professor Universitrio de Tecnologia da

Para maiores informaes envie um e-mail para

Prof. Carlos Majer Pgina 2

Prof. Carlos Majer Pgina 3

Frame de Navegao ...................................................................................................................... 49

Prof. Carlos Majer Pgina 4

Prof. Carlos Majer Pgina 5

Neste processo de criao e aprimoramento da ARPANET diversas tecnologias de telecomunicaes foram

Prof. Carlos Majer Pgina 6

Conectando-se na Grande Rede

IPs fixos e IPs dinmicos

Nmeros IPs e Resoluo de Nomes

Resposta de 200.212.140.185: bytes=32 tempo=38ms TTL=248

Estatsticas do Ping para 200.212.140.185:

Prof. Carlos Majer Pgina 7

Que tal tentar?

URL Uniform Resource Locator

A Estrutura da URL definida da seguinte forma:-

Para formatamos um URI adicionamos o nome do recurso na URL. Exemplo:-

Vamos ver estes itens em detalhe:-

Prof. Carlos Majer Pgina 8

Os protocolos mais comuns so:-

Prof. Carlos Majer Pgina 9

Inicialmente temos o protocolo http://

Em seguida temos a informao de host e do domnio de destino

Em seguida temos a porta 8080

Em seguida temos o nome da Pasta dentro do domnio.

E finalmente o recurso desejado, que o arquivo:-

Prof. Carlos Majer Pgina 10

Elementos de uma pgina web

Extenso HTML ou HTM ?

Prof. Carlos Majer Pgina 11

Estrutura HTML (Marcas)

E em seguida a sua apresentao num navegador:-

Prof. Carlos Majer Pgina 12

Sobre as marcas HTML

O ciclo de vida das marcas HTML basicamente o seguinte:-

Prof. Carlos Majer Pgina 13

<h1>Cabealho do tipo h1</h1>

Uma linha antes e aps o cabealho sempre inserido pelo HTML.

Prof. Carlos Majer Pgina 14

Uma linha antes e aps o cabealho sempre criada na utilizao do pargrafo.

Podemos dizer que atualmente, no

Pode ser um computador, Palmtop ou SmartPhone.

Prof. Carlos Majer Pgina 15

Trabalhando com texto

O HTML disponibiliza ao desenvolvedor um conjunto de marcas que possibilitam estilizar determinados

Prof. Carlos Majer Pgina 16

Marcas de estilizao de texto mais utilizadas

Prof. Carlos Majer Pgina 17

Entidades : Caracteres Especiais

.... caso x < 5, ento.....

Tabela de Entidades mais comuns

Estilizando cores, fontes e tamanhos

A palavra <font color="blue">cu</font> est em cor azul.

Prof. Carlos Majer Pgina 18

Prof. Carlos Majer Pgina 19

Tabela de Cores RGB

Prof. Carlos Majer Pgina 20

<td bgcolor="#FF0000" width="20">&nbsp;</td>

<td bgcolor="#FF0000" width="20"> </td>