Introdução Ao Desenvolvimento WEB

2009
Introdução ao
Desenvolvimento WEB
Versão 3.1
Este documento aborda tópicos técnicos utilizados na criação da Interface Web:
HTML , CSS e Javascript básico. 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

Introdução ao Desenvolvimento WEB © 2004 ~2009
Última revisão em 02/01/2009
INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1
Este material pertence a Carlos A. Majer, Professor Universitário de Tecnologia da

Informação e encontra-se disponível em HTTP://www.carlosmajer.com.br
Licença de Uso
Este trabalho está licenciado sob uma Licença Creative Commons Atribuição-Permitida a Criação de Obras
Derivadas 2.5 Brasil. Para ver uma cópia desta licença, 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 restrições:-
Você deverá sempre fazer referência ao autor (Ou seja, Eu)
Você não poderá utilizar este trabalho para fins ilegais, imorais ou de forma a denegrir ou prejudicar
outras pessoas ou instituições.
Para maiores informações 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 público. Caso note algum erro ou tenha alguma sugestão,
sinta-se à vontade para me contatar.
Prof. Carlos Majer Página 2

Conteúdo
Introdução à Internet .............................................................................................................................. 6
Funcionamento da WEB ....................................................................................................................... 6
Conectando-se na Grande Rede ............................................................................................................ 7
IPs fixos e IPs dinâmicos ...................................................................................................................... 7
Números IPs e Resolução de Nomes ..................................................................................................... 7
URL – Uniform Resource Locator .......................................................................................................... 8
Protocolo ......................................................................................................................................... 8
Host do domínio ............................................................................................................................... 9
Nome do domínio. ............................................................................................................................ 9
:Número da Porta ............................................................................................................................. 9
A página HTML ..................................................................................................................................... 11
Introdução ........................................................................................................................................ 11
Elementos de uma página web ........................................................................................................... 11
Extensão HTML ou HTM ? .................................................................................................................. 11
Estrutura HTML (Marcas).................................................................................................................... 12
Sobre as marcas HTML ................................................................................................................... 13
As marcas básicas .............................................................................................................................. 14
Cabeçalho ...................................................................................................................................... 14
Parágrafos ..................................................................................................................................... 15
Quebras de Linha ........................................................................................................................... 15
Comentários ................................................................................................................................... 15
Trabalhando com texto ...................................................................................................................... 16
A marca PRE .................................................................................................................................. 16
Marcas de estilização 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 página .......................................................................................................... 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 página .................................................................................................... 31
Tabelas ............................................................................................................................................. 31
Tamanho das células numa tabela ................................................................................................... 32
Bordas ........................................................................................................................................... 33
Inserindo título / legenda numa tabela ............................................................................................ 34
Cabeçalhos na tabela ...................................................................................................................... 34
Cores nas Tabelas.............................................................................................................................. 35
Trabalhando o Layout das tabelas....................................................................................................... 37
Distanciamento das bordas ............................................................................................................. 37
Distanciamento entre as células ...................................................................................................... 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 Não Ordenadas ......................................................................................................... 44
Listas de Definição ......................................................................................................................... 46
Frameset (Conjunto de Quadros) ........................................................................................................ 47
Criando Frames .............................................................................................................................. 48

Frame de Navegação ...................................................................................................................... 49

Quadros Inseridos (In-Line Frames) .................................................................................................... 50
Vantagens e desvantagens no uso de frameset ................................................................................ 51
Formulários ....................................................................................................................................... 52
Criando formulários ........................................................................................................................ 52
Métodos de Envio de Objetos de Formulários ................................................................................... 52
Objetos de Formulários ................................................................................................................... 53
Elemento Caixa de Texto ................................................................................................................ 53
Elemento Senha ............................................................................................................................. 54
Elemento Botões de Rádio .............................................................................................................. 55
Elemento Caixa de Verificação ......................................................................................................... 56
Elemento Lista de Seleção............................................................................................................... 57
Elemento Área de Texto.................................................................................................................. 59
Elemento Conjunto de Campos........................................................................................................ 59
Elemento Botão .............................................................................................................................. 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
Definições e Conceitos ....................................................................................................................... 65
Criando estilos ................................................................................................................................... 66
Estrutura do estilo .......................................................................................................................... 66
Especificando diversos atributos ...................................................................................................... 66
Atributo baseado em texto .............................................................................................................. 67
Agrupando definições de estilo ........................................................................................................ 67
Aplicando CSS ................................................................................................................................... 67
Folha Externa ................................................................................................................................. 68
Estilo Interno (na página HTML) ...................................................................................................... 68
Estilo Em Linha (in-line) .................................................................................................................. 68
Prioridade de Aplicação ................................................................................................................... 69
Criando Classes ................................................................................................................................. 70
Delimitando o escopo de uma classe ............................................................................................... 72
Blocos e Estrutura em Árvore ............................................................................................................. 72
Elementos de Bloco............................................................................................................................ 73
Elementos em nível 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
Espaçamento ..................................................................................................................................... 79
Margens ............................................................................................................................................ 81
Posicionamento ................................................................................................................................. 83
Posicionamento Estático (static) ...................................................................................................... 83
Posicionamento Relativo (relative) ................................................................................................... 83
Posicionamento Absoluto (absoluto) ................................................................................................ 83

Aplicações ...................................................................................................................................... 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 página WEB............................................................................... 92
Inserindo Comandos Javascript num evento de elemento de página WEB ............................................. 93
Eventos de uma página WEB .............................................................................................................. 93
Trabalhando com textos e expressões do tipo caractere ....................................................................... 95
Utilização de variáveis no Javascript .................................................................................................... 95
Expressões Matemáticas..................................................................................................................... 95
Operadores Matemáticos ................................................................................................................ 95
Operadores de Comparação ............................................................................................................ 96
Operadores de Associação .............................................................................................................. 97
Operadores Lógicos ........................................................................................................................ 97
Criando Funções / Procedimentos em Javascript ............................................................................... 98
DOM - Document Object Model .......................................................................................................... 99
Introdução ..................................................................................................................................... 99
Acessando atributos via Javascriipt ................................................................................................ 100
Consistindo Campos de Formulários............................................................................................... 103
Colocando o foco num determinado campo .................................................................................... 104
Criando Máscaras para edição de dados ............................................................................................ 107
Identificando o objeto que iremos manipular .................................................................................. 107

Introdução à Internet
Funcionamento da WEB
A Internet foi criada com base na ARPANET, uma rede descentralizada de comunicações do Departamento
de Defesa (DoD) dos Estados Unidos. Durante a guerra fria, contra a União Soviética, o DoD estava muito
preocupado com a reação que poderia advir de um ataque dos soviéticos, que destruísse um dos elos (nós)
de sua rede, e em função disto desabilitar as comunicações entre os quartéis generais de defesa. Em função
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 informações (dados) utilizaram outras rotas para chegar a seus
destinos.
Neste processo de criação e aprimoramento da ARPANET diversas tecnologias de telecomunicações foram

criadas ou adaptadas. Protocolos, números de identificação, métodos de recuperação 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 também no meio
acadêmico, para depois de certo tempo ser aberta para o público 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 através de um grande cabo imaginário conhecido como backbone,
através do qual as pessoas se comunicam, trocando informações e dados em
velocidades cada vez maiores.
No momento da conexão de um computador com a rede, este recebe um número IP (Internet Protocol).

Este número IP serve como identificação única, para este computador. Isto quer dizer que num determinado
momento, cada dispositivo conectado na tem sua identificação que é única, e que possibilita à ele ser
localizado e identificado por outros dispositivos.
Conectando-se na Grande Rede

Quando um usuário se conecta num provedor de acesso, como por exemplo, no IG ® , um de
@ seus servidores gera um número IP para este computador. Neste momento, este computador faz
parte da rede de computadores do IG, passando a ter acesso à Internet. O processo é análogo
em qualquer outro provedor, como por exemplo, do Virtua ®.
Sendo um dispositivo interligado na Net, e tendo um número IP de identificação, ele pode efetuar consultas
e solicitações por serviços na Internet. Da mesma forma, ele também passa a ser passível de varreduras,
podendo ser sondado, receber solicitações de acesso, de serviços e até ser invadido (ao menos enquanto
estiver conectado na rede).
IPs fixos e IPs dinâmicos

A diferença entre uma conexão que utiliza um IP fixo e uma que utiliza um IP dinâmico é a de o IP fixo
nunca muda. Exemplos típicos de IPs fixos são os das servidores que hospedam páginas web. Exemplos
típicos de IPs dinâmicos são aqueles utilizados por usuários de diversos tipos de provedores, especialmente
os de conexão via linha discada, que ao conectar num provedor de acesso recebem um número IP que
esteja disponível, que provavelmente não será (mas em alguns casos pode ser) igual ao da última vez que
acessou.
Números IPs e Resolução de Nomes

Cada byte, sendo composto de 8 bits pode conter até 256 combinações diferentes (de 0 até 255). Um
número IP é um conjunto de 4 bytes separados por um ponto, utilizando este formato de endereçamento 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

Estatísticas do Ping para 200.212.140.185:

Pacotes: Enviados = 4, Recebidos = 4, Perdidos = 0 (0% de perda),
Aproximar um número redondo de vezes em milissegundos:
Mínimo = 24ms, Máximo = 45ms, Média = 35ms
Este número IP pode ser mudado pelo administrador da rede da UNICID. Atualmente (Fev/2009),
verifiquei que o código em uso é o 200.212.140.183
Como é mais simples de se lembrar de um nome do que de um número IP, foi criada uma maneira para se
utilizar nomes do que números. O serviço DNS (Domain Name Server) efetua a resolução de nomes,

associando os números 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 serviços podem ser encontrados na Internet. Os mais comuns são:-
Servidor WEB (Internet)
Servidor FTP
Servidor de e-Mails
Servidor de Notícias
Servidor de Banco de Dados
Estes serviços podem ser encontrados em diversos computadores na Internet. Os computadores que provêm
(servem) algum destes serviços são conhecidos como servidores.
Em geral, este computador tem um software que disponibiliza o serviço (veja lista acima).
URL significa Uniform Resource Locator, ou seja, Localizador de Recursos Uniformes e é a forma pela qual
formatamos o endereçamento para acesso a um determinado recurso da Internet.
A Estrutura da URL é definida da seguinte forma:-

1) Protocolo
2) Domínio
3) Porta de Acesso
4) Pasta
URI significa Uniform Resource Identifier, ou seja, Identificador de Recurso Uniform e é a formatação para
se acessar um recurso específico, como por exemplo, uma página web.
Para formatamos um URI adicionamos o nome do recurso na URL. Exemplo:-

1) Protocolo
2) Domínio
3) Porta de Acesso
4) Pasta
5) Arquivo
Vamos ver estes itens em detalhe:-
Protocolo
O protocolo é como se fosse o nome da língua pela qual as partes deverão se comunicar.
Este protocolo define o que o programa que está solicitando o serviço deseja e como o servidor deve se
comportar.
Um exemplo bem prático disto é o do navegador solicitando uma página a um servidor. O usuário em seu
navegador (cliente), tenta acessar uma página.

Assim que o usuário teclar ENTER, o navegador, por padrão, insere o protocolo HTTP (Hyper Text Transfer
Protocol), na frente do nome de página:-
O navegador faz isto para que o servidor (computador que irá receber a solicitação, localizado no endereço
fornecido acima) ao receber a solicitação de abertura de página consiga passar esta responsabilidade
(localizar e disponibilizar a página) para o software correto (software servidor web, muitas vezes o IIS –
Internet Information Services ou Apache).
Sem o uso do protocolo, o servidor (computador) não saberia qual software executar para atender a
demanda.
Com base neste protocolo, o servidor web (software que está rodando no computador servidor) identifica a
solicitação web (http), localiza a página desejada e devolve ao cliente (navegador).
Os protocolos mais comuns são:-
Protocolo Utilização
http:// Localiza um recurso (página www, imagem, etc) num servidor Web
ftp:// Localiza um arquivo num servidor FTP
news:// Localiza um servidor de notícias na Web
file:// Localiza um arquivo num computador ou rede local
Host do domínio
Quando não informado, o host é assumido como www.
Nome do domínio.
É o nome pelo qual seu domínio foi registrado na entidade de registro de domínios de seu país. No Exemplo
abaixo estará sendo utilizado o domínio da UOL (uol.com.br)
:Número da Porta
Como um dispositivo (computador) pode ter diversos serviços disponíveis (veja lista acima) , e considerando
que o endereço do dispositivo é único, a maneira pela qual ele disponibiliza seus serviços é através do uso
de portas. As portas são identificações específicas de certos serviços, e muitas vezes sua utilização se dá de
forma transparente, sem que o usuário note sua utilização.
Como um exemplo disto, podemos afirmar que os navegadores (Internet Explorer, Mozila Firefox, etc) estão
configurados para acessar um dispositivo (computador) na Internet e fazer uma solicitação na porta 80, que
é a porta padrão da Internet.
Alguns exemplos de portas:-
Porta Uso
20 e 21 Serviço 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 serviço de página
109 e 110 POP – Post Office Protocol – Para Recebimento de e-Mails
119 NNTP – Network News Transfer Protocol – Para recebimento de Notícias
Exemplo de endereçamento de um recurso:-

http://www.cidadesp.edu.br:8080/pastavirtual/majer/historia.html
Inicialmente temos o protocolo http://
Em seguida temos a informação de host e do domínio de destino
www.cidadesp.edu.br
Em seguida temos a porta 8080
Em seguida temos o nome da Pasta dentro do domínio.

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

historia.html

A página HTML
Introdução
HTML significa Hyper Text Markup Language, que traduzida para o português significa Linguagem de
Marcação de Hipertexto. Esta linguagem permite a utilização de um conjunto de comandos para exibição
de conteúdo e formatação de layout de páginas para Internet.
Os arquivos do tipo HTML são arquivos textos, que podem ser abertos e editados pelo Bloco de Notas ou
qualquer programa editor de textos simples.
Ao examinarmos o conteúdo de um arquivo HTML, notamos a existência de comandos (as marcas), que
determinam a maneira pela qual a página web será interpretada por um navegador (Internet Explorer,
Mozilla Firefox, Safári, Opera, etc.).
As marcas podem utilizar atributos, que são informações específicas de como o comando (marca) deverá ser
executado.
Em função de seu formato aberto e não proprietário, este tipo de arquivo pode ser visualizado em diversas
plataformas dentre elas Windows, Linux, Unix, Macintosh, etc.
Elementos de uma página web

Uma página web pode conter diversos tipos de elementos:-
• Textos: É o tipo de informação mais comum em páginas da INTERNET. Costumam ser dispostos
em diversos tamanhos e cores, despertando o interesse do usuário.
• Imagens: Diversos tipos de imagens são utilizados para enriquecer a experiência do usuário na
rede. Dentre elas podemos destacar as imagens estáticas, geralmente nos padrões JPEG e PNG, as
imagens animadas no formato GIF e principalmente as animações feitas em FLASH.
• Elementos de Formulário: Os formulários representam uma interface entre o site e o usuário,
solicitando informações do usuário com diversos intuitos dentre eles o de se cadastrar o usuário no
site para receber informações, inserir pedidos de informações específicas, 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 usuário e chamar a atenção sobre determinado site.
• Arquivos de Vídeo: Atualmente muito em uso, os arquivos de vídeo inseridos em páginas web
permitem uma maior facilidade na transmissão da informação, além do que também serve como
ferramenta de marketing e propaganda.
• Jogos e aplicações Java: Diversos tipos de aplicações estão sendo construídos para Internet
através da utilização da linguagem Java, dentre elas Acesso a Bancos, Interfaces com dispositivos
diversos, Jogos e muito mais.
• Links: Os links são 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 usuário para um outro texto,
localizado em qualquer local do documento (página).
Extensão HTML ou HTM ?

Pode ser utilizada tanto uma quanto a outra. Em função de restrições de alguns sistemas operacionais
antigos (DOS), os arquivos só podiam utilizar três letras em sua extensão. Hoje não importa qual a extensão
utilizada, pois ambas são válidas.

Estrutura HTML (Marcas)

Uma página html é delimitada pelas marcas:-
<html>
</html>
Dentro dela temos uma área de cabeçalho, onde podemos inserir alguns comandos de configuração, como
por exemplo, o título da página. Esta área é criada através das marcas:-
<head>
</head>
Em seguida existe uma segunda área, que é a área do corpo da página, que irá abrigar o conteúdo a ser
exibido na tela do navegador. Esta área é criada através 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 código HTML de uma página web:-
E em seguida a sua apresentação num navegador:-

Para verificar como está ficando sua página, salve-a numa pasta (diretório) e em seguida abra-a
através de seu navegador. Clicando duplamente no arquivo gerado irá automaticamente acionar seu
navegador padrão (Firefox, Microsoft Internet Explorer) para a abertura da página web.
O conteúdo de uma página web fica em cachê, que é uma memória temporária que o seu
navegador utiliza para agilizar o carregamento de uma página.
Muitas vezes, ao tentar abrir-se uma página, o conteúdo que aparece é o que está neste cachê (e
não a página que acabou de ser alterada e salva). Quando isto ocorrer, utilize o botão de recarga de
página (geralmente F5) do Navegador para atualizar seu cache com o conteúdo atualizado da
página.
Sobre as marcas HTML

Ciclo de vida
Através da continua evolução da tecnologia, certas marcas HTML vão se tornando obsoletas (depreciadas),
ou seja, deixando de ser utilizadas. Outras são trocadas por marcas ou tecnologias mais novas. Isto é uma
evolução natural. A própria criação 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
utilização, no lugar de algumas marcas, para efeitos de apresentação do conteúdo das páginas HTML.
O ciclo de vida das marcas HTML é basicamente o seguinte:-

Concepção Proposta Especificação Depreciação Obsoletismo
Fase Descrição
Concepção Quando a marca é concebida para uso em determinadas circunstâncias.
Proposta A marca (ou tecnologia) é enviada para o W3C que irá verificar vantagens e viabilidade de
implementação
Especificação Ocorre quando uma marca (ou tecnologia) é aceita pelo W3C e faz parte da especificação de
uma versão do HTML.
Depreciação Quando uma marca (ou tecnologia) é trocada por outra melhor, mas deve ainda ser
suportada pelos navegadores por questões de compatibilidade com versões de páginas
anteriores.
Obsoleta Quando uma marca (ou tecnologia) é considerada obsoleta de forma que não 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 definições sobre padrões Internet são efetuadas pelo W3C – World Wide Web Consortium.
As marcas básicas
Cabeçalho
Os cabeçalhos são definidos através das marcas <h1> representando a fonte maior, até <h6> para se
definir a fonte menor.
Exemplo:-
<h1>Cabeçalho do tipo h1</h1>

</h1>
</h2>
</h3>
</h4>
</h5>
</h6>
Uma linha antes e após o cabeçalho é sempre inserido pelo HTML.

Parágrafos
Os parágrafos são definidos através
és da marca <p>.
Exemplo:-
<p>Eu sou um parágrafo</p>
<p>Eu sou outro parágrafo</p>
</p>
Uma linha antes e após o cabeçalho é sempre criada na utilização do parágrafo.

O navegador ignora o número de espaços repetidos ou pulos de linha manual de seu texto (ENTER)
trocando estas ocorrências por um único espaço, ou seja, se numa posição do seu texto você tiver
10 espaços no texto, ou tenha teclado cinco vezes a tecla <ENTER>, somente será exibido um
espaço no lugar
Quebras de Linha
Quebras de linha são definidas através de uma marca <br>.
Ela deve ser utilizada quando se deseja inserir uma nova linha, levando o conteúdo para a próxima linha,
sem iniciar um novo parágrafo.
Exemplo:-
<p>O conteúdo desta linha foi <br>quebrado para a linha <br>de baixo</p>
Podemos dizer que atualmente, não

ão sabemos
sabe em que dispositivo um site pode ser aberto.
Pode ser um computador, Palmtop ou SmartPhone.
Querer forçar um layout através do uso de parágrafos, espaços e quebra de linhas pode não
n gerar o
resultado esperado.
É o navegador quem verifica o tamanho da resolução de vídeo e adapta o conteúdo a ser exibido,
exibido ajustando
o texto e demais elementos conforme o tamanho da janela.
A configuração dos navegadores e a configuração do vídeo do usuário fazem com que seja muito
difícil um site ser exibido exatamente igual em dois navegadores diferentes.
Comentários
Comentários podem ser inseridos no HTML através
atrav do uso das marcas 
Exemplo:-
>

Trabalhando com texto

Utilizar texto dentro de uma página HTML é bem simples. É digitar o texto abaixo da marca body e o
mesmo aparece no navegador, quando a página é carregada.
Verificamos também que podemos inserir um trecho de texto dentro de um parágrafo (marca <p>), como
um cabeçalho (marcas <h1> a <h6>) e até forçar a quebra de linha (marca <br>).
O ideal é que o desenvolvedor, ao criar uma página HTML estruture seu conteúdo, identificando os
cabeçalhos, parágrafos, tabelas e outros tipos de informação, objetivando acomodar de maneira adequada o
conteúdo 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 formatação de um trecho de texto.
Exemplo:-
<body>
<p> A função abaixo foi desenvolvida em Javascript. Ela solicita um nome ao
usuário 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 Obrigatório!!')
lRet=false
}
}
return lRet
}
</pre>
</body>
Resultado:-

Marcas de estilização de texto mais utilizadas

Marca Descrição
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 versão de um
documento
del Utilizado para marcar um trecho de texto que foi eliminado de uma versão 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 versão de documento</ins>,<del>Texto
documento Texto eliminado na
nova versão do documento</del>
</del>
</body>
Resultado:-

Acostume-se a digitar as marcas em letra minúscula, que é uma das regras do padrão XHTML,
explicado adiante
Entidades : Caracteres Especiais

Muitas vezes queremos inserir um caractere específico na página HTML. Como por exemplo, o caractere de
sinal de menor. Ocorre que certos caracteres (como neste caso) têm significado e uso específico (reservado)
pelo HTML. No caso do sinal de menor (“<”), este caractere é utilizado para definir o início 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, então.....
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
Espaço
Menor que < < < Ã Ã
Maior que > > > õ õ
E comercial & & & Õ Õ
Aspas duplas " “ ç ç
Aspas simples ´ ' Ç Ç
Centavo ¢ ¢ á á
Libra £ £ Á Á
Yen ¥ ¥ é é
Parágrafo de documento § § É É
Copyright © © í í
Marca Registrada ® ® Í Í
Multiplicação × × ó ó
Divisão ÷ ÷ Ó Ó
Mais e Menos ± ± ú ú
Graus ° ° Ú Ú
Ã ã À À
Pode até ocorrer de algum navegador exibir o caractere especial inserido na página, mas isto não é
garantia de que esta página será exibida em todos os navegadores de forma correta.
Estilizando cores, fontes e tamanhos

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

O desenvolvedor pode selecionar uma cor pelo seu nome em inglês 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 variações 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 - código #0000FF</td>
<td bgcolor="#0000FF"> </td>
</tr>
</tr>
<tr>
<td>Azul - código #112D77</td>
<td bgcolor="#112D77"> </td>
</tr>
<tr>
<td>Azul - código #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 disposição 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 famílias de fontes são disponibilizadas. Quando uma página tenta utilizar uma da lista, e o
navegador não 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 "> Família Arial, Helvetica, Sans-serif </font> <br>
<font face =" Times New Roman, Times, serif"> Família Times New Roman, Times, serif </font> <br>
<font face =" Courier New, Courier, mono"> Família Courier New, Courier, mono </font> <br>
<font face =" Georgia, Times New Roman, Times, serif"> Família Georgia, Times New Roman, Times, serif
</font> <br>
<font face =" Verdana, Arial, Helvetica, sans-serif"> Família Verdana, Arial, Helvetica, sans-serif</font>
<br>
<font face =" Geneva, Arial, Helvetica, sans-serif"> Família 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 extensão:-
JPG – Joint Photograph Experts Group

É um dos padrões de imagem mais utilizados atualmente na Internet.
Este formato que tem seu tamanho real reduzido (número de bytes) em função de uso de um algoritmo de
compressão de dados que pode alterar a qualidade da imagem. Isto quer dizer que o usuário pode escolher
o nível de compressão deseja aplicar. Quanto mais comprimido, menos qualidade se tem.
GIF – Graphics Interchange Format

Padrão de imagem com menor qualidade (limite de 256 cores) que implementa algoritmo de compressão de
dados e entrelaçamento (permite a carga parcial para rápida visualização da imagem). Uma de suas
interessantes características é o fato de se poder armazenar num único arquivo diversas imagens que ao
serem trocadas seqüencialmente criam a sensação de uma animação.
PNG – Portable Network Graphics

Padrão de imagem que trabalha com 24 bits permitindo grande número de cores. Este tipo de imagem
trabalha com transparência. Isto quer dizer que uma imagem não precisa ser exatamente quadrada de
forma que ao aplicarmos sobre um fundo digamos escuro, não aparece o fundo (Exemplo:quadrado branco
ao redor da imagem) que em geral surge quando utilizado certos tipos de imagem.
Inserindo imagens na página

A inserção da imagem numa página HTML nada mais é do que uma marca que informa onde a imagem
pode ser encontrada. Uma imagem pode estar:-
Na mesma pasta (diretório) da página que está tentando exibi-la
Numa pasta diferente da página que está tentando exibi-la
Num outro endereço/servidor web
Para exemplificar estas situações iremos utilizar as duas imagens abaixo:-
Simbolo2000.jpg
Alce.jpg
Imagem existente na mesma pasta da página web
Vamos agora imaginar que temos os seguintes arquivos numa mesma pasta:-
Disney.htm: Página que você está desenvolvendo.
Simbolo2000.jpg: Imagem do símbolo das festas do ano 2000, que você quer exibir na página
Disney.htm.
Você poderá carregar a imagem Simbolo2000.jpg, na página Disney.htm através do uso da marca
<img> da seguinte forma:-
<img src =" Simbolo2000.jpg">

Isto é o suficiente para exibir esta imagem na página, considerando que ambos os arquivos (da imagem e
da página) estão na mesma pasta.
Lembre-se de que o Firefox se importa com a caixa (letras maiúsculas e minúsculas) dos nomes de
arquivos. Isto quer dizer que se o arquivo foi salvo com tudo em maiúsculo (Exemplo:
SIMBOLO2000.JPG), e inserido na página como no exemplo acima, o Firefox não conseguirá
localizar este arquivo. Para que ele funcione, você terá que informar na página o nome do arquivo
exatamente como foi gravado no diretório, letra por letra.
Imagem existente em subpasta (dentro da pasta do projeto)
Vamos imaginar agora outra situação:

Na medida em que você vai criando novas páginas 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 páginas 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 páginas web (HTML). Dentro desta última foi
criada outra pasta de nome imagens, que é onde serão inseridas todas as imagens do Projeto Disney.
Para que isto funcione, precisaremos então ajustar a marca que carrega a imagem, para considerar a
mudança 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 diretório anterior ao do projeto

Vamos imaginar uma situação onde as imagens precisam estar disponíveis para diversos projetos. Podemos
viabilizar esta situação criando uma pasta imagens no mesmo nível das pastas dos projetos. Exemplo:-
No exemplo acima podemos verificar a existência de dois projetos (Canadá e Disney). Ao criarmos a pasta
imagens no mesmo nível 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 acessíveis por qualquer página (de
qualquer projeto). Vamos ajustar nossa página Disney.htm para ver como fica?
<img src =" ../imagens/Simbolo2000.jpg">
Antes de começar a explicar, para quem não conhece o funcionamento do sistema de pastas e diretórios,
utilizamos barras para separar a informação 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 explicação, podemos verificar que o caminho a ser percorrido para encontrar a imagem
desejada é:-
" ../imagens/Simbolo2000.jpg"
Utilizamos dois pontos (..) para voltar ao diretório anterior, e em seguida entramos na pasta imagens para
em seguida poder acessar o arquivo desejado.
Utilizando este mesmo exemplo para criação de uma página Canadá, que precise carregar a imagem
Alce.jpg, podemos ter a seguinte página:-
" ../imagens/Alce.jpg"
Note a semelhança 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 página, mas não 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 página):-
<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/endereço web
Você precisa informar a URL completa. (Não sabe o que é isto? Volte ao começo 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 (ligações) ou âncoras são elementos (trechos de texto, imagens, etc) utilizados para
ligação/conexão com outros elementos que podem estar na mesma página ou em outras páginas (de outros
sites). Estes elementos podem ser de diversos tipos (página web, imagens, vídeos, etc) na Internet.
Hipertexto denota um link baseado em texto enquanto que Hiperlink significa qualquer tipo de link.
Hipermídia significa qualquer tipo de mídia (áudio, vídeo, texto, gráficos, etc) que tenha um link
ativado.
Um link é executado ao ser clicado. Percebe-se a existência de um link quando ao posicionar-se sobre o link,
o desenho do cursor muda para uma mão. 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 criação de um link é:-
<a href =" url "> Conteúdo a ser mostrado na página </a>
Onde a letra a significa âncora, que serve como um aviso de referência para algum local (interno ou
externo), e em seguida temos o código href que é um atributo que identifica a URL destino a ser
referenciada. Onde se lê url, no comando acima, troque pelo endereço completo da página a ser
referenciada. Isto quer dizer que basicamente encapsulamos o conteúdo a ser exibido dentro das marcas
<a href...> e </a>.
Exemplo de criação de um link:-
Clique <a href =" http://www.cidadesp.edu.br /"> aqui </a> para entrar no Site da Unicid.
Sempre insira o conteúdo de um atributo dentro de aspas duplas. Como será verificada
posteriormente, esta é uma das regras do padrão 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 informação existente na mesma página. Vamos
imaginar que temos um livro, em formato HTML (em páginas web). Numa destas páginas temos uma
referência a uma informação que se encontra detalhada no final da página. Podemos inserir um link nesta
referência de modo que ao ser clicado, a parte da página que descreve esta referencia é exibida.
No exemplo abaixo, temos um link no trecho de texto “4 – Descrição de Caso de Uso”:-

O link “4 – Descrição de Caso de Uso”,

Uso ao ser clicado, desce a página até localizar e exibir a informação
linkada.
Criando links / âncoras para elementos dentro do mesmo documento.

Um link para um elemento dentro da mesma página é 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 usuário 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 região 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 página.

Exemplo:-
Consulte os <a href ="#dados_cliente"> Dados do Cliente </a> para saber mais a respeito.
Âncoras identificadas são geralmente utilizadas para se criar um Índice no início ou final de um
documento.
Exemplo de utilização 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 página.
Criando Links Externos

A criação 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 página
í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 página
(brubovnik.jpg) e criar um link, nesta imagem, para o site da cidade de
Dubrovnik (http://www.dubrovnik-online.com/)
Exibir uma imagem na página 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 nível da página web
editada.
O próximo 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 conteúdo 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 endereço web
(URL). Isto nós já vimos como se faz, mas vamos fazer uma recapitulação.
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 página de blog), mas devido a restrições deste site de
blogs, a única coisa que você consegue fazer nele é inserir textos. Como já visto anteriormente, você pode
fazer uma referência (exibir na sua página) a uma imagem existente em outros sites. Neste caso, o
comando HTML da sua página (de blog) para exibir esta imagem seria:-
<img src =" http://www.site.com.br/imagens/familia.png">
E pronto! A imagem aparece na sua página, como se ela estivesse no seu site.
Só que você gostaria que, caso o usuário 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 página uma referência à imagem que existe em outro site e a mesma é um
link para o site desejado.
Abrindo o link numa outra página

Quando o usuário clica no link existente na página, este link será aberto na própria página. Ocorre que as
vezes queremos que este link seja aberto numa nova página.
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 são:-

_self: Abre o link na mesma página (padrão)
_parent: Abre o link na página pai (veja frameset)
_top: Abre o link na página inicial (veja frameset)
Tabelas
O HTML possibilita a utilização de tabelas, internamente divididas em linhas e células. Tabelas são criadas
através das marcas <table>..</table>, sendo dividida em linhas através da marca <tr>..</tr>.
As linhas são divididas internamente em células de dados através da marca <td>..</td> ou células de
cabeçalho, através da marca <th>..</th>.
Dentro da célula inserimos o conteúdo desejado (textos, imagens , listas, formulários, etc.).
Quando não for especificado, o atributo border da tabela é assumido com o valor zero (0), ou seja, a
tabela não conterá bordas.
Exemplo de uma tabela sem borda:-
<table>
<tr>
<td>Linha 1, Célula 1</td>
</tr>
<tr>
</tr>
</table>

Note que ao não utilizar-se borda numa tabela (exemplo acima), não se percebe a separação entre o
conteúdo das diversas células.
Tamanho das células numa tabela

Usualmente, utilizamos uma única célula para inserção de conteúdo. Entretanto, existem alguns casos onde
o conteúdo de uma célula pode ocupar mais do que uma linha ou coluna. Para estes casos, o HTML
disponibiliza os seguintes atributos:-
Rowspan:
Possibilita informar à tabela qual o número de linhas que uma célula irá ocupar. No exemplo, definimos que
a primeira célula irá ocupar três 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 número de colunas que uma célula irá ocupar.
Observe que no exemplo abaixo, informamos que as células de cabeçalho irão 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 criação 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 título / 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 após abrir a marca <table>. Exemplo:-
<caption> Legenda/titulo da Tabela </caption>
A legenda será posicionada sobre a tabela, isto é, antes da tabela ser exibida.
Cabeçalhos na tabela
Células de cabeçalho na tabela são definidas através da marca <th>
<table border="1">
<tr>
<th> Cabeçalho </th>
<th> Cabeçalho 2</th>
</tr>
<tr>
<td> Linha 1, Célula 1</td>
</tr>
<tr>
</tr>
</table>

Os cabeçalhos são centralizados na célula e em negrito.
Cores nas Tabelas

Tabelas podem ter suas linhas (e consequentemente suas células) configuradas para a utilização 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 Início de Cabeçalho</td>
</tr>
<tr bgcolor="cyan">
<td><p></td>
<td> Marca de início de parágrafo </td>
</tr>
<tr>
<td> <table> </td>
<td> Marcas de Início 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 aplicação 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 célula (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>
Além dos nomes de algumas cores, o navegador está preparado para reconhecer um código 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 números, onde cada dois números 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 conteúdo da célula fica encostado às suas bordas.
O atributo cellpadding da tabela, nos permite determinar uma distäncia a ser aplicada, entre o conteúdo e
as bordas das células.
<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 código acima, informamos um espaço entre o conteúdo e as bordas de vinte pixels.
Distanciamento entre as células

De forma similar, podemos distanciar uma célula da outra através da utilização do atributo cellspacing, na
tabela. Alterando a linha de criação 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 célula e outra.
Caso juntemos ambas as opções temos o seguinte resultado:-

<table border="1" cellspacing ="15" cellpadding="20">
Alinhamento
O conteúdo das células de uma tabela pode ser alinhado. As opções existentes são 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 opções são:-

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 Cabeçalhos: Todas centralizadas e em Negrito (padrão da marca <th>)
Nome: Alinhada naturalmente à esquerda
Salário: Alinhada à direita
Cargo: Centralizada
Descrição: Centralizado
Exemplo de tabela com os quarto alinhamentos:-

Código 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"> Responsável pelo Departamento Pessoal,
Plano de Cargos e Salários, Treinamento e Qualificação Pessoal.</td>
</tr>
<tr>
<td> Marcos </td>
<td align ="center"> Gerente Comercial </td>
<td width ="310" align ="justify"> Responsável 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"> Responsável pelo controle e planejamento
financeiro da empresa dentre eles: Caixa, Tesouraria, Previsão Orçamentária e Controle
Bancário.</td>
</tr>
</table>

Alinhamento Vertical
Este tipo de alinhamento pode feito com base no topo (alto), no meio (padrão), no fundo (embaixo) ou na
linha base da célula. Como dificilmente se utiliza a linha base, não irei explicar este atributo.
O atributo que define o alinhamento é o align e as opções são:-

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 Cabeçalhos: Todas centralizadas e em Negrito (padrão da marca <th>)
Top: Alinhada no topo
middle: Alinhada no meio
Bottom: Alinha no fundo
Note também que para se visualizar o alinhamento vertical, defini a altura (height) da célula com 50 pixels.
Código 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 estruturação de uma tabela.
Elas possibilitam definir o cabeçalho, rodapé e corpo de dados das tabelas.
No exemplo abaixo definimos os itens de cabeçalho e rodapé antes do grupo de dados (tbody) da tabela.
No momento da exibição da tabela no navegador, a mesma será exibida conforme sua estrutura de
cabeçalho, 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 Máxima</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 criação de listas ordenadas e não ordenadas. Listas ordenadas caracteriza-se por uma
relação de elementos, geralmente de mesmo tipo ou natureza, que são dispostos numa determinada ordem
e numerados (quando o caso) automaticamente pelo navegador.
Criando Listas Ordenadas

A criação de listas ordenadas se dá pela marca de abertura de listas ordenadas <ol> e em seguida pela
criação 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 criação
Para inserir itens encadeados, isto é, como se fossem subitens da lista, deve-se criar uma nova lista, que
pode ser ordenada ou não.
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 configuração de uma lista numerada é ser marcada por números. O Atributo TYPE permite definir o estilo
numérico de seus itens. Os atributos possíveis são:-

Atributo Estilo
A Letras do Alfabeto em Maiúsculo
A Letras do Alfabeto em Minúsculo
I Números Romanos em Maiúsculo
i Números Romanos em Minúsculo
1 Lista em ordem numérica (padrão)
Também é possível 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 Não Ordenadas

A criação de listas ordenadas se dá pela marca de abertura de listas ordenadas <ul> e em seguida pela
criação dos itens de lista pela marca <li>. Cada Item de lista deve ter sua marca fechada </li> . No final,
a lista também 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 Não Numeradas

Listas não numeradas são marcadas por um determinado desenho. O Atributo TYPE permite definir o estilo
numérico de seus itens. Os atributos existentes são:-
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 não ordenada variam conforme o navegador
Listas de Definição
Diferentemente de listas de itens, as listas de definição disponibilizam uma forma de se explicar o que
significam certos termos. Os itens contidos nas listas de definição não têm marcação (de números ou
desenhos).
A criação de listas ordenadas se dá pela marca de abertura de listas de definição <dl> e em seguida pela
criação dos termos da lista pela marca <dt>, e em seguida a criação da área de explicação do termo,
pela marca de descrição da definição <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
política de vendas implementada pela IBM no começo dos anos 80.
</dd>
<dt> AT</dt>
<dd><strong> Advanced Technology </strong>. Este termo foi muito utilizado para
designar os computadores da IBM, lançados após 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, Safári, etc)
como um local separado por partes (áreas) independentes. Cada área pode também ser dividida em
subáreas através da criação de novos framesets.
Por final, dentro das áreas criadas temos o quadro (frame) que é quem contem de fato o conteúdo.
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 três 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 célula 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 conteúdo de cada quadro separadamente,
ou seja, o conteúdo de cada quadro (frame) advém de um arquivo .HTML, que é carregado e é manipulado
de forma independente dos demais quadros.
Criando Frames
O primeiro passo na criação de quadros é o estabelecimento do conjunto de quadros, através da marca
<frameset>.
Esta estrutura define como os quadros internos serão criados. O desenvolvedor deverá informar se ele
deseja separar o layout da página em linhas (rows) ou colunas (cols).
Quando se utiliza a marca <frameset>, não é permitido a utilização da marca <body>, exceto quando
ela for inserida dentro na marca <noframe>, que é utilizada para navegadores que não entendem
quadros.
Exemplo de quadros utilizando linhas:-

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

Exemplo de quadros utilizando colunas:-

<html>
<frameset cols="10%, 10%, *">
</frameset>
</html>
Resultado do Layout da Página HTML:-
Na criação de quadros, deve-se prever o uso de navegadores que não 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 estão incorretas:-
<html>
<body>
<frameset cols="10%, 10%, *">
</frameset>
</body>
</html>
Frame de Navegação
É muito comum o desenvolvedor criar uma área para navegação do site.
O primeiro exemplo montará uma página 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 conteúdo.html

Analisando o código HTML

O primeiro arquivo será o que contém 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 conteúdo virá do arquivo menu.html.
Segunda Coluna
A segunda coluna ocupará o restante da área visível da tela do navegador e se chamará conteúdo. Seu
conteúdo 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"> Opção 1 - Clique aqui</a> <br>
<a href="parte2.html" target="conteudo"> Opção 2 - Clique aqui</a> <br>
</body>
</html>
Quadros Inseridos (In-Line Frames)

É possível inserir quadros que ocupam um espaço específico dentro de uma página (ou de um quadro html)
atuando como se fosse uma página independente do resto da página onde o mesmo está inserido.
Isto permite ao desenvolvedor tratar uma determinada área como se fosse uma página a parte, contendo
um código específico.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 são:-
Conseguir voltar à página anterior (Uso do botão VOLTAR)
Conseguir imprimir a tela (como um todo)
O desenvolvedor deve gerenciar cada um dos arquivos de cada frame
Não é tão fácil identificar o endereço que o frame aponta
Por outro lado, o uso de quadros permite as seguintes vantagens:-

Certas partes da tela sempre permanecem visíveis 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 navegação pode ser simplificada, e deixada apenas num dos quadros, sem ter a
necessidade de existir nos diversos arquivos .html

Formulários
Basicamente, um formulário permite uma interação específica entre o usuário (cliente) e o site, muitas vezes
levando a uma troca de informações entre as partes.
Eles são basicamente utilizados para envio de objetos para uma determinada URL. As aplicações mais
comuns são encontradas no preenchimento de informações pessoais e/ou comerciais para envio de páginas
dinâmicas que armazenam tais informações em banco de dados.
Estas páginas dinâmicas, desenvolvidas em linguagens de programação para web (CGI – Common Gateway
Interface, Perl, PHP, ASP, ASP.NET, etc) recebem as informações enviadas pela página onde foi criado o
formulário, abrindo o banco de dados destino e gravando as informações em suas tabelas.
Outra possibilidade é o envio de informações através do uso do software de correio eletrônico.
Criando formulários
Um formulário é criado através da tag FORM. Exemplo:-
<form name=”frmCadastro” method=”post”

action=”http://www.meusite.com.br/CadCliente.ASP”>
...
... Conteúdo a ser exibido
... E elementos (de formulário) a serem preenchidos pelo usuário
...
</form>
A marca <form> tem como atributos os elementos:-

name: Define o nome do objeto de formulário. No exemplo acima, o nome do formulário é frmCadastro.
method: Define a maneira pela qual os objetos (e seus conteúdos) serão enviados para a página destino.
No exemplo acima o método a ser utilizado é o POST (explicado abaixo)
action: Define qual é a página destino dos dados. No exemplo acima, a página que irá tratar estes objetos
é a ”http://www.meusite.com.br/CadCliente.ASP”
Métodos de Envio de Objetos de Formulários

Existem dois métodos para envio dos objetos de formulários:-
GET: Caracteriza-se por enviar os dados (objetos e seus conteúdos) para a página destino utilizando a barra
de endereços. Suas restrições consistem no número limitado de caracteres que a linha de endereços permite
(geralmente 128 caracteres) e a menor segurança percebida por expor claramente o nome das variáveis e
seus conteúdos, possibilitando que usuários com menor conhecimento consigam reproduzir o envio de dados
de uma página informando manualmente os conteúdos dos objetos.
O primeiro objeto deve ser inserido no final da barra de endereços utilizando o ponto de interrogação, seu
nome (do objeto), e o sinal de igual para envio do conteúdo. Os demais objetos devem ser separados por
um sinal de E comercial (&), seu nome, o sinal de igual e seu conteúdo. 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 conteúdo “ody”
q=unicid : Objeto de nome “q” com o conteúdo “unicid”
kgs=1 : Objeto de nome “kgs” com o conteúdo “1”
kls=0 : Objeto de nome kls com o conteúdo “0”
A maneira pela qual os objetos serão utilizados serão tratados conforme a programação da URL destino.
POST:Caracteriza-se por enviar os dados junto com a página, de forma transparente e não visual. O usuário
não consegue enxergar quais são os dados que estão sendo enviados. Apenas o endereço de destino é
visualizado na tela. Permite o envio de grande quantidade de objetos.
Objetos de Formulários
Diversos objetos podem ser criados dentro de um formulário. Eles podem ser digitados pelo usuário,
selecionados através de uma lista ou clicados numa área específica.
Elemento Caixa de Texto

Este tipo de elemento caracteriza-se por uma área onde o usuário poderá digitar ou visualizar uma
determinada informação textual e ocupa uma determinada área numa única linha.
Sintaxe Básica:-
<input type="text" name="NomeDoobjeto" />
Atributos
Para este tipo de elemento, os atributos possíveis são:-
Atributo Descrição
disabled="disabled" Desabilita a entrada do objeto de forma que o usuário não
consegue alterar seu conteúdo. Visualmente falando, o
usuário 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 não informar um nome
que já está sendo utilizado por um outro objeto na página, ou numa função
Javascript.
maxlength="n" Determina n como sendo o número máximo de caracteres que pode ser
inserido neste objeto
readonly= "readonly" Desabilita a entrada de dados, não permitindo sua edição pelo usuário.
size="n" Determina como n o tamanho do elemento
value="texto" Determina um texto inicial já carregado no objeto.
Exemplos:-
1) Criação de uma de caixa de texto identificada como endereco:-
Digite seu endereço <input type="text" name="endereco" />

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

/>
3) Criação de uma caixa de texto o atributo readonly, o que não permite alteração de seu conteúdo
Senha Anterior: <input type="text" name="nome" readonly="readonly" value="smart"

/>
4) Criação de uma caixa de texto o atributo disabled, o que não permite alteração de seu conteúdo e serve
como indicação visual ao usuário de que o campo está desabilitado para alterações
Senha Anterior: <input type="text" name="nome" disabled="disabled" value="smart"

/>
Elemento Senha
Basicamente uma caixa de texto que mostra asteriscos quando o usuário digita
alguma coisa. Uma de suas particularidades é a de que quando o usuário clica no
botão de VOLTAR, do navegador, este campo perde seu valor anterior (é limpo).
Sintaxe Básica:-
<input type="password" name=" NomeDoobjeto" />
Atributos
São os mesmos do campo tipo texto.
Exemplo:-
1) Criação de uma de caixa de senha identificada como senha:-
Digite sua senha: <input type="password" name="senha" />

Obs: Exemplo capturado quando o usuário estava digitando a senha
Elemento Botões de Rádio

Os botões de rádio permitem ao usuário selecionar uma única opção, dentre
diversas outras.
Neste tipo de objeto, o desenvolvedor deve criar os diversos botões com o

atributo name igual para todos. Assim, ele caracteriza um mesmo grupo de opções.
Sintaxe Básica:-
<input type="radio" name=" NomeDoobjeto " value="ValorDoObjeto" /> Primeira Opção

a ser exibida
<input type="radio" name=" NomeDoobjeto " value="ValorDoObjeto" /> Segunda Opção

a ser exibida
Atributos
checked="checked" Determina um objeto pré-selecionado
disabled="disabled" Desabilita a entrada do objeto de forma que o usuário não consegue alterar seu
conteúdo. Visualmente falando, o usuário 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 página destino (action) do
formulário ao submetê-lo.
Exemplos:-
1)Uma seleção de botões 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 seleção de botões com a opção VW selecionada e a opção 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 usuário clicar no botão ENVIAR (botão submit do formulário), a página

destino irá receber o objeto de nome marca e o valor deste objeto será uma das
seguintes opções: “A” ou “V”, já que a opção Fiat (valor “F”) está desabilitada.
O nome botão de rádio é uma analogia aos antigos rádios de carros, onde o ouvinte tinha que
apertar um botão para escolher uma rádio pré-selecionada, e quando assim o fizesse, um outro
botão anteriormente travado (pressionado) seria solto.
Elemento Caixa de Verificação

As caixas de verificação permitem ao usuário selecionar uma determinada opção do
tipo Sim/Não (checado / não checado).
É comum encontrar formulários com diversas opções, onde o usuário seleciona

diversas opções de uma só vez. É um modo simples e rápido que facilita a
comunicação com o usuário.
Sintaxe Básica:-
<input type="checkbox" name="NomeDoobjeto" value="ValorDoObjeto" /> Texto a ser
exibido
Atributos
checked="checked" Determina que o objeto já está selecionado
disabled="disabled" Desabilita a entrada do objeto de forma que o usuário não consegue alterar seu
conteúdo. Visualmente falando, o usuário 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 página destino (action) do
formulário ao submetê-lo.
Exemplos:-
1) Pergunta ao usuário se ele deseja receber e-mails:-
<input name="emails" type="checkbox" value="1" />Desejo receber e-mails
Neste exemplo, o programa que receber o formulário (definido em ACTION), ao avaliar o conteúdo da
variável de nome emails, poderá receber o valor em branco (""), caso o objeto não 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 formulário), que irá tomar uma determinada ação em função de seu valor. O valor deste tipo
de objeto está definido em seu atributo value.
2) Lista de aparelhos do escritório. Alguns deles estão previamente selecionados

e o aparelho Telex está desabilitado:-
Marque tudo que tiver em seu escritório<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 Seleção

As listas de seleção permitem ao usuário a escolha de uma dentre diversas opções. O atributo selected é
utilizado para selecionar um item default da lista , ou seja, irá mostrar um determinado quando da exibição
da lista. O atributo value de cada elemento/opção da lista é o que será enviado para o ACTION do
formulário, quando de sua submissão.
<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 opções, de forma a
facilitar o entendimento das opções pelo usuário:-
<select name="cargo">
<option value ="nada" selected="selected">Escolha aqui</option>
<optgroup label="Direção">
<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">responsável</option>
<option value ="operador">operador</option>
</optgroup>
</select>

Elemento Área de Texto

As áreas de texto permitem ao usuário digitar informações 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 número de linhas que o controle irá utilizar, enquanto que o controle cols define o
número de colunas (caracteres). Caso deseje, o desenvolvedor pode deixar o controle com um conteúdo
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 conteúdo 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 Botão
Em geral, botões são utilizados dentro de formulários para:-

• Submeter um formulário.

• Carregar/Limpar (reset) os campos de um formulário, isto é, os valores dos

objetos do formulário com suas informações iniciais.
• Executar uma ação específica, estando o botão geralmente associado à uma
rotina desenvolvida numa linguagem de programação.
No exemplo abaixo, dois objetos de caixa de texto são criados. Caso o usuário
preencha alguma informação e clique no botão LIMPAR, estes objetos terão seu
conteúdo (texto digitado) zedrado. Caso o usuário clique no botão Enviar, estes
objetos serão enviados para o endereço definido no atributo ACTION do
formulários:-
<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 botão 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 formulário.
<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
formulário. Exemplo:-
<form action="recebe.asp" method="post" name="form1" id="form1">

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

Convém notar que a página 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 criações na WEB foi o XML (Extensible Markup Language – Linguagem de Marcação
Estendível). Esta nova linguagem permite a criação de marcas diferentes dentro do corpo de uma página
WEB facilitando a criação e o transporte de informações relacionadas. Com base nisto, um novo padrão de
páginas para Internet foi criado: o XHTML. Ele se baseia no HTML, mas aplica certas regras rígidas na
criação de uma página web, de maneira a assegurar sua qualidade em desenvolvimento, possibilitando uma
forma de se efetuar a verificação de erros em sua criação. Suas regras básicas são:-
1) Todas as marcas devem ter um par finalizador ou senão for possível, deverão 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> estão sem a barra finalizadora da marca
<br>
Site Atual
<hr>
No exemplo abaixo, a marca <title> não foi finalizada

<head>
<title>Site de Brinquedos
</head>
Insira um espaço 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 através de seu atributo name
Exemplo:-
<input type="checkbox" name="chkMaior18Anos" />
Incorreto:-
<input type="checkbox" />
3) Todas as marcas e seus atributos devem ser criados através da utilização de caixa baixa
(letras minúsculas)
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 questão 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 existência dentro da marca, já se
presumam sua utilização. No XHTML, eles devem ser informados.
Exemplos de utilização
<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 são em geral minimizados em sua digitação:-

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 criação de páginas para a Internet, cujo objetivo é
o de facilitar o desenvolvimento destas páginas, ao separar o conteúdo (a ser exibido) da forma (como
exibir).
Este tipo de separação permite o tratamento (visão e manipulação) destes elementos (conteúdo e formato)
em locais separados, facilitando o processo de manutenção de páginas na Internet.
Conteúdo e Formato juntos:-

<body>
<h3>
<font color=”blue”> O Patinho Feio</font>
</h3>
...
Formato (style) e conteúdo (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 apresentação da página e que pode ser manipulada sem
precisar preocupar-se com o conteúdo, o desenvolvedor consegue:-
Flexibilização: O conteúdo independe de seu formato.
Redução de erros: O desenvolvedor alterar apenas o conteúdo ou a apresentação, conforme a
necessidade.
Padronização: Ao permitir ao desenvolvedor a utilização de um determinado estilo para um
conjunto de objetos HTML.
Rapidez: O número de caracteres de uma página é reduzido.
Facilidade de manutenção: O desenvolvedor sabe exatamente o que precisa atualizar e onde.

Porque Surgiu?
A partir do ano de 1993, acirrou-se a discussão entre os desenvolvedores de páginas web que achavem que
deveria haver uma forma do desenvolvedor poder alterar as formas de apresentação de uma página,
fugindo das limitações impostas pelos navegadores. Desta forma, cores, tamanho de fontes e diversos
outros atributos que determinam o formato de uma página começaram a ser solicitados. Diversas questões
surgiram. Uma delas dizia respeito de como uma página deveria ser exibida.
Uma página deve ser exibida conforme a vontade de seu autor ou a do usuário?
Quando surgiu?
Diversos padrões que antecederam o CSS foram lançados, cada qual com suas especificações e
determinações, mas só após a constituição e operação da entidade W3C - World Wide Web Consortium, é
que se deu a definição e largo uso do padrão CSS. Isto ocorreu em função da importância dada ao órgão,
visto que diversas organizações aderiram e participaram das chamadas dos fóruns sobre esta questão, em
particular a Microsoft e a Netscape. No final de 1996 foi lançada a primeira recomendação CSS Nivel 1.
A especificação atual da CSS é a 2.1 (Nível 2, revisão 1), de 06 de Novembro de 2.006, e pode ser acessada
na língua inglesa no seguinte endereço:-
http://www.w3.org/TR/CSS21/
Definições e Conceitos
O termo estilo é utilizado para referenciar determinadas características de apresentação de um conteúdo, ou
seja, não do conteúdo em si, mas sim da forma como este conteúdo 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
conteúdo. A proposta do CSS é trabalhar estes elementos de formatação, através da manipulação de:-
• Cores (frente e fundo)
• Tamanhos (de fontes, tabelas, elementos em geral)
• Estilos (Negrito, Itálico, etc.)
• Famílias de Fontes (Arial, Verdana, Courier, etc)
• Efeitos (opacidade, visibilidade, etc.)
• Posicionamentos, espacejamentos, etc.
• Imagens, Fotos, etc.

Criando estilos
Estrutura do estilo
A estrutura para criação e utilização de um estilo de CSS, se divide
seletor
basicamente em três 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 característica do elemento a ser alterado ou definido. Estas propriedades devem ser as
definidas para utilização do CSS, de forma que os nomes de atributos do HTML (Exemplo: bgcolor) são
inválidos.
O valor é a definição do conteúdo desta propriedade e deve seguir as regras pelas quais o CSS foi criado.
Na definição 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 parágrafo criado na página HTML.
2) Seus estilos (atributo/propriedade) estão delimitados por um par de chaves “{...}”.
3) A cor do texto (color – cor de frente) deste elemento (parágrafos) será amarela.
Especificando diversos atributos

Para especificar diversos atributos, deve ser utilizado o ponto e vírgula (;) 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 nível de cabeçalho 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 parágrafo terá uma borda de tamanho de 2 pixels, no estilo sólido (linha contínua) na cor
verde.
Ao desenvolvermos o código 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 definições de estilo

Definições de estilo para diversos seletores podem ser agrupadas, desde que sejam separadas por vírgula.
No exemplo abaixo, todos os elementos de cabeçalho 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 formatação desejada, salvando-o com a extensão CSS. Na
página HTML deve ser inserido um comando que fará uma referência ao arquivo de estilo criado. Isto fará
com que todos os estilos existentes no arquivo de estilo fiquem disponíveis 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 ligação da página HTML com o arquivo Folha de Estilos “estilo.css”.
Neste arquivo, foi criado um estilo para o seletor p (parágrafo) 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 página HTML. Para que isto funcione, o comando
<style type="text/css"> deve ser o primeiro após 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 não sabe interpretar este tipo de comando.
O bom em se utilizar folhas de estilo externas é que as mesmas podem

ser utilizadas em diversas páginas.
Estilo Interno (na página HTML)

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

Neste tipo de aplicação de estilo, o elemento recebe o estilo no próprio (marca) de criação.
Exemplo:-

<p style="color=red">
Como informado anteriormente, pode-se manipular diversas propriedades através da utilização do ponto e
virgula (“;”).
<p style="color=red;background-color:yellow">
Neste caso, o estilo definido para este parágrafo terá a propriedade color definida como vermelha (red),
enquanto o fundo do texto (propriedade background-color) será amarelo (yellow).
Prioridade de Aplicação
O nível de prioridade a ser obedecido, isto
Arquivo HTML (Página web) é, caso haja uma formatação 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 página HTML,
<style type="text/css"> seção <head>, caso existir)
p 3) Finalmente irá aplicar o estilo
{ definido na linha de criação 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
parágrafo obedeceu à cor definida na área <head> da página HTML (cor vermelha). Caso o desenvolvedor
elimine a definição de estilo desta área, este primeiro parágrafo seria renderizado na cor verde. Quanto ao
segundo parágrafo, verifica-se que sua formatação obedece ao estilo em linha, definido na marca (in-line).
Os possíveis conjuntos de pares {propriedade:valor} de um seletor, que está definido entre suas chaves,
podem ser arranjados de qualquer maneira. Os exemplos abaixo são todos válidos:-
p p{color: red} P
{ p{ {
color: red color: red} color:
} red}

Quando se define um estilo para uma marca, todas as referências para esta marca utilizarão este
estilo.
Criando Classes
Uma vez que o desenvolvedor web estilizar uma marca, seu estilo será utilizado sempre que a mesma for
criada na página web. Isto quer dizer que se o desenvolvedor definir que a cor da marca p (parágrafo) será
azul, todos os parágrafos da página serão 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 são nomes dados a derivações de
conjuntos propriedade:valor que podem ser aplicadas a determinados seletores.
A definição/criação de uma classe no CSS se dá através da utilização de um ponto (.) e em seguida o nome
da classe.
No exemplo abaixo será criada a classe titulo cujos atributos (estilos) são 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">Parágrafo estilizado com classe</p>
<p>Parágrafo estilizado sem classe</p>
</body>
Resultado:-

Outros exemplos de classes:-

.destaque { color:blue}
.aviso {color:red}
Uma vez criada, uma classe genérica 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">Rodízio de Veículos</h1>
<p>As carros com placas de final <span class="aviso">1 e 2</span> não podem trafegar no centro
estendido, de 2ª. A 6ª. Feira, no horário 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, estão sendo criadas duas classes que só serão aplicadas em
elementos que as utilizem, desde que tenham sido criados dentro de parágrafos. 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
Título
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: página
HTML) passível da aplicação das especificações da CSS Nível 2, têm um elemento pai, com exceção do
elemento raíz (root) que é o elemento (inicial) que contém todos os demais elementos.

Isto quer dizer que um objeto está contido

dentro de outro (de seu pai) e que o
primeiro nível 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 especificações de CSS Nível 2, do W3C, elementos em nível de bloco são aqueles
formatadas como um bloco.
No exemplo defino a propriedade de cor de fundo para exibição de parágrafos como laranja, e defino
também 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 parágrafo na página, uma camada (div), um parágrafo dentro desta
camada, e um terceiro parágrafo, desta vez fora da camada.
Pode-se notar que o primeiro parágrafo toma como tamanho horizontal, o tamanho da janela do navegador
(verificação visual via cor de fundo). No caso do segundo parágrafo, cujo objeto pai é a camada onde ele foi
inserido, pode se verificar que seu tamanho horizontal é igual ao da camada.
Por fim, um terceiro parágrafo foi criado, fora da camada (div) de tal forma que, como o primeiro parágrafo,
pode-se perceber que ele toma toda a largura do navegador.
Código:-
<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 nível de linha

Além de elementos de bloco temos também os elementos em nível de linha (in-line). Este tipo de elemento
gera um bloco de linha seqüencial, que ocupa uma posição 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 existência de um parágrafo, que é um elemento de
bloco, e dentro deste parágrafo temos três elementos em nível de linha:-
O texto “Um”, que herda suas características do parágrafo
Um bloco de texto delimitado pela marca <strong> </strong>
Um texto finalizador da frase.

A propriedade background
Esta propriedade permite a definição 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 possíveis valores são:-
Propriedade Descrição
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 definição 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:-
Através de uma palavra chave que especifica a cor. Exemplo: blue

Através do código RGB de uma cor. O formato RGB pode ser especificado de três formas:-
Através dos 3 dígitos hexadecimais que compõem a cor, e que são transformados para 6 dígitos.
Exemplo: #abc #aabbcc
Através dos 6 dígitos hexadecimais que compõem a cor. Exemplo: #ffffff
Através da notação funcional RGB, no formato: RGB( r,g,b) podendo ser representados por
números de 0 a 255 ou por porcentagens. Exemplo: rgb(20,10,30).
Através 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 determinação da cor de fundo, quando da impossibilidade de localização ou
carga da imagem de fundo.
Caso não 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 código
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 Descrição
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 não se repete.
Medidas
As medidas no CSS são utilizadas para se determinar dimensões de altura e largura. Existem alguns casos
em que se pode utilizar um valor negativo, e desenvolvedores têm utilizado isto em algumas técnicas para
exibição parcial de imagens.
As unidades de medidas utilizadas até a versão 2 do CSS são:-
px: Significa pixel

%: Significa uma porcentagem
em: Está relacionada a uma proporção da fonte herdada do elemento pai
ex: Está relacionada a altura da letra da fonte herdada do elemento pai
pt: Significa o número de pontos na proporção de 1/72 polegadas
pc: Significa o número de pica, que equivale a 12 pontos (pt) ou 1/6 de polegada
cm: Significa o número de centímetros

in: Significa o número 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 página web. Alguns valores mais utilizados são:-
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 não crie caixa, de tal forma que o elemento criado não interfere na estrutura do
documento. Desta forma, seus objetos descendentes também não criarão caixas, sendo que mesmo que a
propriedade display dos objetos descendentes será ignorada.
Espaçamento
O CSS define algumas propriedades para especificar o espaçamento de elementos HTML:-
padding Utilizado para especificar todas as possibilidades de espaçamento do objeto, de uma só
vez. Quando utilizado, devem ser especificados os seguintes espaçamentos (nesta
ordem):- superior direito fundo esquerdo, separados por espaço. Exemplo:-
10px 30px 40px 20px Significa a aplicação de um espaçamento com 10 pixels da parte
superior, 30 pixels da direita, 40 pixels do fundo e 20 pixels da esquerda.
padding-top Determina o espaçamento do topo do objeto
padding-left Determina o espaçamento do lado esquerdo do objeto
padding-right Determina o espaçamento do lado direito do objeto
padding-bottom Determina o espaçamento do fundo do objeto
Os possíveis valores utilizados para se definir o espaçamento são:-
auto: É o valor padrão de espaçamento

valor: Um valor numérico, seguido da medida válida CSS (Exemplo: px, cm, etc)
%: Porcentagem em relação ao elemento pai na estrutura
No exemplo, iremos criar 5 ids, que serão utilizados em parágrafos diferentes:-

Topo – O texto deste parágrafo terá um espaçamento de 10 pixels, da parte superior do
parágrafo.

Esquerda – O texto deste parágrafo terá um espaçamento de 20 pixels, da esquerda do

parágrafo.
Direita - O texto deste parágrafo terá um espaçamento de 30 pixels, da esquerda do parágrafo.
Fundo - O texto deste parágrafo terá um espaçamento de 40 pixels, do fundo do parágrafo.
Todos – O texto deste parágrafo estará distante do topo do parágrafo em 10 pixels, da direita
em 30 pixels, do fundo em 40 pixels e da esquerda em 30 pixels.
Código:-
<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 distância 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 também desempenham um papel especial já que permite um distanciamento entre os objetos
numa página web.
A aplicação de margens se dá de maneira muito parecida com a de espaçamento.

Temos as seguintes propriedades:-
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 espaço. Exemplo:-
10px 30px 40px 20px Significa a aplicação de um espaçamento 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 possíveis valores utilizados para se definir a margem são:-
auto: É o valor padrão da margem

valor: Um valor numérico, seguido da medida válida CSS (Exemplo: px, cm, etc)
%: Porcentagem em relação ao elemento pai na estrutura
No exemplo abaixo temos alguns exemplos de utilização 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 sobreposição de objetos.
Posicionamento
Posicionamento Estático (static)
Este tipo de posicionamento segue o fluxo de objetos, no local onde o mesmo foi inserido, não podendo ser
reposicionado.
Posicionamento Relativo (relative)

Similar ao posicionamento estático, porém podendo ser manipuladas suas propriedades top e left, de tal
forma que seu posicionamento conforme o fluxo muda, de acordo com sua posição em relação a outros
objetos.
Posicionamento Absoluto (absoluto)

Trata o posicionamento do objeto como absoluto, ou seja, sem ligação com qualquer outro tipo de objeto,
de maneira independente. As informações de topo (top) e esquerda (left) em função à página web devem
ser informadas (informadas inicialmente com 0px).
Aplicações
Aplicando o posicionamento estático

Considere o seguinte código 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 é estático, a figura já não pode ser mudada de local, ou seja, o
objeto/elemento irá acompanhar o fluxo dos objetos/elementos inseridos na página e não pode ser mudado.
No exemplo abaixo, verificamos que o estilo de posicionamento do objeto/elemento “f” (a figura) foi
definido como estático.
<img src="gato.JPG" name="f" id="f" style="position:static" />
Alguns desenvolvedores afirmam que estático não é exatamente uma forma de se alterar o
posicionamento, visto que os elementos criados numa página web por default seguem o fluxo
normal e estático de posicionamento.
Abaixo, é criada uma classe de nome posicionamento, que terá sua posição 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 é estático, esta alteração não 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 também a definição de posicionamento da classe, para verificarmos visualmente a ocorrência
da alteração de posicionamento do objeto.
.posicionamento
{
position:absolute;
top:200px;
left:200px;
}
</style>
Agora temos a seguinte condição:-

O estilo do objeto (figura f) foi inicialmente definido como relativo. Aplicamos uma classe que define seu
posicionamento como absoluto, mas este objeto não aceitará esta mudança de propriedade. Na medida em
que mudamos as propriedades top e left, deste objeto, estas alterações 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 usuário definir,
independente da posição de outros objetos.
Isto quer dizer que utilizando este tipo de posicionamento, um objeto pode sobrepor outro objeto.
Vamos alterar um pouco nosso código exemplo, e sobrepor a imagem em cima do título.
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 através deste tipo de posicionamento é possível colocar um objeto em
qualquer local da página.

Criando Menus
Irei mostrar como desenvolver um menu com botões dispostos horizontalmente numa barra navegacional
utilizando CSS.
Estrutura do Menu
Estes menus serão baseados na marca no conjunto <ul> (unordered list - Lista não Ordenada ), <li> (list
item - Item de Lista).
Irei identificar as maneiras pela qual será possível trocar as cores de frente e do fundo, do item da lista, na
medida em que se definem estas características nos estados possíveis de um item de lista (hover, visited).
Definiremos a estrutura do menu composta inicialmente de uma camada (<div>) utilizando uma lista não
ordenada (<ul>) contendo cinco itens (<li>), onde cada item irá apontar para um endereço/link (<a>), que
neste caso está apontando para uma referência simbólica (#), que você poderá posteriormente alterar para
o endereço desejado.
Note que existem diversas vantagens na criação deste tipo de menu, como por exemplo:-
Acessibilidade: Caso o CSS não seja utilizado, um deficiente auditivo ou visual pode usufruir das
características de acessibilidade do navegador e ferramentas de auxílio, visto que acessar a
estrutura de uma lista é muito mais fácil do que tentar ler o conteúdo de uma tabela
Em termos de desenvolvimento, é muito fácil rever esta estrutura, que pode ser facilmente revista,
aumentada ou diminuída.
Iremos inserir uma div para poder manipular com mais facilidade o menu, posteriormente.
Inicialmente criamos um lista não 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 estilização deste id
iremos definir as características de diversos elementos. Dentre estes itens iremos manipular:-
As marcas (desenhos/imagens) que antecedem os itens de uma lista não ordenada
As margens e espaços que deslocam os itens dentro da lista
A disposição vertical, que será transformada para horizontal.
Configurando as propriedades da Lista

Para se remover os espaços 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 possíveis estados dos links, que são:-
Valor Descrição
up É o estado inicial do link (logo após a carga da página 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 criação de páginas para Internet, a única linguagem
existente era a Linguagem de Marcação de Hyper Text (HTML). Basicamente, ela
permitia a criação de páginas web disponibilizando uma forma de se inserir
conteúdo, apresentação, estruturação de layout e elementos de formulário.
Na medida em que o uso da Internet foi se ampliando, os grandes players do

mercado (Netscape e Microsoft) perceberam as limitações que o HTML impunha, de
tal forma que começaram 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 lançamento tornou-se a
linguagem script padrão 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 lançamento.
Iremos focar o estudo na utilização do Javascript, em função de sua alta

aderência e utilização pelos desenvolvedores web.
Basicamente, o Javascript é utilizado para se manipular os objetos de uma página

web. Como qualquer boa linguagem, o Javascript permite a utilização de comandos
lógicos aliados a diversos elementos que permitam a criação de estruturas
lógicas e algoritmos.
Um comando ou estrutura Javascript pode ser inserido dentro de uma página HTML.
Essa lógica pode ser inserida dentro de uma área do HTML, numa função Javascript
ou através de comandos injetados (inseridos) em eventos de objetos HTML.
Quando dentro de uma função (ou procedimento) Javascript, seus comandos são
executados de forma seqüencial.
Javascript é uma linguagem interpretada (executada) na medida em que a página web vai sendo
carregada.
Inserindo Comandos Javascript numa página WEB

Uma maneira simples de se inserir diversos comandos Javascript, dentro de um
documento WEB se dá através da marca <script>. Considerando que alguns
navegadores não têm suporte a Javascript, podemos inserir um bloco de
comentários, logo após 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 comentário (<!—até ) ao redor dos códigos
Javascript, o navegador também irá ignorar todos os comandos de script.
Exemplo:-
<script language="Javascript">

</script>
Embora tais comandos possam ser inseridos em qualquer local de uma página HTML,
é recomendado que os mesmos sejam inseridos no começo da página, de preferência
entre as tags <head> e </head> de um documento WEB, pois é uma das primeiras
seções a serem carregadas da página pelo navegador.
Uma forma de se inserir comentários numa linha é através da utilização de barras duplas // ou da
marca 
</script>
</head>
<body onload="BoasVindas()">
Nosso Site
</body>
</html>
Exemplo de cálculo 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

Introdução
O DOM (Modelo de objetos de documento) é uma forma pela qual se consegue acessar os elementos dentro
de uma página HTML. Como todo objeto (elemento) criado no HTML tem atributos, podemos imaginar uma
grande estrutura (ou hierarquia) constituída de diversos graus ou níveis.
Exemplo:-
Neste exemplo, temos um documento (página) HTML que contém 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.

Através 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, é através do uso da função getElementById do
objeto document.
Esta função nos permite acessar um determinado atributo de um objeto contido dentro da página HTML
(documento).
A sintaxe desta função é:-

document. getElementById(“<NomeDoObjeto>”).<Atributo>
onde
<NomeDoObjeto> deve ser substituído pelo nome do objeto a ser acessado
<Atributo> deve ser substituído pelo nome do atributo a ser acessado
No exemplo abaixo, iremos utilizar a função 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 usuário passe com o mouse sobre um determinado trecho de texto.
Resultado Final

Para fazer isto, precisaremos criar três imagens contendo os tipos de carinhas.
Imagem Arquivo
CarinhaNormal.JPG
CarinhaContente.JPG
CarinhaTriste.JPG
Tabela de Carinhas
No código 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 serão 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 função no Javascript, que quando carregada irá, através de acesso ao DOM, modificar a
imagem que está sendo mostrada.
Trecho de Texto Executar Função

Triste Triste()
Normal Normal()
Feliz Feliz()
Iremos agora utilizar o evento onmouseover de cada elemento span criado, para fazer uma chamada a
função 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 funções desejadas no Javascript.

Como o objetivo da função é acessar o atributo src da imagem ImgRosto,iremos utilizar o DOM através
do Javascript, para acessar o objeto imgRosto através 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 função Javascript de nome Triste().
Esta função acessa o documento HTML (document) e através da função

getElementById acessa o objeto cujo id é ImgRosto. Em seguida, alteramos seu
atributo src para "CarinhaTriste.JPG"
O mesmo deve ser feito para as demais funções.
Código 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 Formulários

Algo muito comum em páginas HTML é o uso de formulários para envio de informações que acabam sendo
registradas em banco de dados.
Um dos problemas que podem ocorrer no momento de gravação dos dados em banco de dados está
relacionado ao não preenchimento de certos campos.
Imagine uma ficha cadastral de novo cliente na Internet, onde o usuário 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 informação de número de filhos, e o usuário 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 número de caracteres, e o usuário digita mais do que o campo está preparado para gravar, o
que acaba gerando um erro. Para que tais situações não ocorram, devemos consistir os campos importantes
de nosso formulário.
Consistindo campos de texto vazios

A maneira pela qual podemos consistir campos vazios de texto via Javascript é comparando seu atributo que
armazena o conteúdo 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 não pode ficar em branco!!")
else
if (document.getElementById('nome').value.length<3)
alert("Tamanho Mínimo deve ser de 3 caracteres")
Consistindo campos do tipo <textarea>
if (document.getElementById('observacoes').value=="")
alert("O campo observacoes não 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 não 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 após a mensagem, o campo que esteja com problemas receba automaticamente o foco.
Para desviarmos o foco para um determinado campo, utilizamos a função focus(). Exemplo:-
document.getElementById('nome').focus()
Exemplo de Consistência de Campos de Formulário

No exemplo abaixo, temos um formulário contendo os campos nome, telefone e email e um botão para
submeter o formulário. Ao clicar no botão, o fluxo está sendo desviado para uma função de nome
Verificar(), que checa se existe algum objeto em branco. Em caso de existência, uma variável de nome msg
vai armazenando o nome dos campos que estão vazios. Após checar todos os campos, a variável é exibida,
caso não esteja vazia. A função retorna um valor verdadeiro ou falso para o atriburt submit do formulário,
que envia ou não o formulário, conforme este valor retornado pela função.
<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 consistências

Neste segundo exemplo, foi criado um formulário com os seguintes objetos: nome, email, empresa, assunto
e um botão do tipo submit. Neste exemplo, o botão foi configurado para que, quando clicado , desviasse o
fluxo da página para a rotina Validar(cadastro). O formulário, de nome cadastro, está sendo enviado como
um parâmetro da função. A função, ao receber o formulário, checa diversos atributos de seus elementos,
dentre eles o tamanho do conteúdo de alguns elementos, e a existência do sinal de arroba (@) do elemento
email. Caso encontre algum problema, a rotina avisa o usuário e coloca o foco de volta no elemento que ela
detectou a inconsistência.
<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 Máscaras para edição 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:-

Digitação de Datas
Digitação de CEP
Digitação de Telefone
Nos exemplos abaixo, mostrarei como formatar dados usando as seguintes máscaras:-
Data: Formato 99/99/9999 (As barras serão inseridas automaticamente pelo navegador)
Telefone: (99)9999-9999 (O sinal de parênteses e o traço serão inseridos automaticamente pelo

navegador)
CEP: 99999-999 (O traço 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 automática, logo após a digitação do segundo e quarto caractere da data. O comando para criação
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 então,
o comando atualizado da seguinte forma:-
<input type="text" name="nascimento" id="nascimento">
É importante também restringir o número de caracteres para o equivalente a uma data. Vamos presumir a
digitação de uma data com duas posições para o dia, duas para o mês 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 mês e o mês do ano,
devemos preparar este objeto para chamar uma funçãofunção toda vez que o usuário teclar algo. Vamos chamar a
função Javascript com o nome de AjustaData.
AjustaData. Esta função, que será chamada toda vez que o usuário
digitar algo, dentro desta caixa de texto, enviará para o Javascript o evento chamador (no caso, o evento
onkeyup)) e o próprio objeto caixa de texto que chamamos de nascimento.
<input type="text" onkeyup="AjustaData(event, this)" maxlength="10" />
Dúvidas?
cmajer@uol.com.br
Carlos Majer.

Introdução Ao Desenvolvimento WEB

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Introdução Ao Desenvolvimento WEB

Enviado por

Direitos autorais:

Formatos disponíveis

2009

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

Professor Carlos Majer

Este material pertence a Carlos A. Majer, Professor Universitário de Tecnologia da

Para maiores informações envie um e-mail para

Prof. Carlos Majer Página 2

Prof. Carlos Majer Página 3

Frame de Navegação ...................................................................................................................... 49

Prof. Carlos Majer Página 4

Prof. Carlos Majer Página 5

Neste processo de criação e aprimoramento da ARPANET diversas tecnologias de telecomunicações foram

Prof. Carlos Majer Página 6

Conectando-se na Grande Rede

IPs fixos e IPs dinâmicos

Números IPs e Resolução de Nomes

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

Estatísticas do Ping para 200.212.140.185:

Prof. Carlos Majer Página 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 Página 8

Os protocolos mais comuns são:-

Prof. Carlos Majer Página 9

Inicialmente temos o protocolo http://

Em seguida temos a informação de host e do domínio de destino

Em seguida temos a porta 8080

Em seguida temos o nome da Pasta dentro do domínio.

E finalmente o recurso desejado, que é o arquivo:-

Prof. Carlos Majer Página 10

Elementos de uma página web

Extensão HTML ou HTM ?

Prof. Carlos Majer Página 11

Estrutura HTML (Marcas)

E em seguida a sua apresentação num navegador:-

Prof. Carlos Majer Página 12

Sobre as marcas HTML

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

Prof. Carlos Majer Página 13

<h1>Cabeçalho do tipo h1</h1>

Uma linha antes e após o cabeçalho é sempre inserido pelo HTML.

Prof. Carlos Majer Página 14

Uma linha antes e após o cabeçalho é sempre criada na utilização do parágrafo.

Podemos dizer que atualmente, não

Pode ser um computador, Palmtop ou SmartPhone.

Prof. Carlos Majer Página 15

Trabalhando com texto

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

Prof. Carlos Majer Página 16

Marcas de estilização de texto mais utilizadas

Prof. Carlos Majer Página 17

Entidades : Caracteres Especiais

.... caso x < 5, então.....

Tabela de Entidades mais comuns

Estilizando cores, fontes e tamanhos

A palavra <font color="blue">céu</font> está em cor azul.

Prof. Carlos Majer Página 18

Prof. Carlos Majer Página 19

Tabela de Cores RGB

Prof. Carlos Majer Página 20

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

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