C

a
d
e
r
n
o
s
d
e
I
n
f
o
r
m
a
t
i
c
a
CURSO DE CAPACITAO EM INFORMTICA INSTRUMENTAL
CURSO DE MONTAGEM E MANUTENO DE COMPUTADORES
CURSO SOBRE O SISTEMA OPERACIONAL LINUX
CURSO DE PROGRAMAO EM JAVA
CURSO DE INTRODUO A BANCOS DE DADOS
CURSO DE CONSTRUO DE WEB SITES
CURSO DE EDITORAO ELETRNICA
CURSO DE ILUSTRAO DIGITAL
CURSO DE PRODUO FONOGRFICA
CURSO DE COMPUTAO GRFICA 3D
CURSO DE PROJETO AUXILIADO POR COMPUTADOR
CURSO DE MULTIMDIA NA EDUCAO
PROJETO ESCOLAS - REFERNCIA
Compromisso com a Excelncia na Escola Pblica
C
a
d
e
r
n
o
s
d
e
I
n
f
o
r
m
a
t
i
c
a
Glayston Pereira Batista
Carlos Eduardo Hermeto de S Motta
Coordenador
CURSO DE
CONSTRUO DE
WEB SITES
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
4
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
5
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
Os computadores que esto sendo instalados pela SEE nas escolas estaduais devero ser
utilizados para propsitos administrativos e pedaggicos. Para isso, desenvolveu-se
um conjunto de cursos destinados a potencializar a utilizao desses equipamentos.
So doze cursos que esto sendo disponibilizados para as escolas para enriquecimento
do seu plano curricular. Esses cursos no so profissionalizantes. So cursos
introdutrios, de formao inicial para o trabalho, cujo objetivo ampliar o horizonte
de conhecimentodos alunos para facilitar a futura escolha de uma profisso.
Todos os cursos foram elaborados para serem realizados em 40 mdulos-aula, cada um
deles podendo ser desenvolvidos em um semestre (com 2 mdulos-aula semanais) ou
em 10 semanas (com 4 mdulos-aula semanais). Em 2006, esses cursos devero ser
oferecidos para os alunos que desejarem curs-los, em carter opcional e horrio extra-
turno.
Em 2007, eles cursos devero ser includos na matriz curricular da escola, na srie ou
sries por ela definida, integrando a Parte Diversificada do currculo.
Esses cursos foram concebidos para dar aos professores, alunos e funcionrios uma
dimenso do modo como o computador influencia, hoje, o nosso modo de vida e os
meios de produo. Para cada curso selecionado pela escola devero ser indicados pelo
menos dois ou, no mximo, trs professores (efetivos, de preferncia) para serem capa-
citados pela SEE. Esses professores iro atuar como multiplicadores, ministrando-os a
outros servidores da escola e aos alunos.
CURSO DE CAPACITAO EM INFORMTICA INSTRUMENTAL
Este curso ser implantado obrigatoriamente em todas as escolas estaduais em que for
instalado laboratrio de informtica. Iniciando pelas Escolas-Referncia, todos os pro-
fessores e demais servidores sero capacitados para que possam fazer uso adequado e
proveitoso desses equipamentos tanto na administrao da escola como nas atividades
didticas.
um curso voltado para a desmistificao da tecnologia que est sendo implantada. O
uso do computador ainda algo difcil para muitas pessoas que ainda no esto muito
familiarizadas com essas novas tecnologias que esto ocupando um espao cada vez
maior na escola e na vida de todos. Este curso vai motivar os participantes para uma
aproximao com essas tecnologias, favorecendo a transformao dos recursos de
informtica em instrumentos de produo e integrao entre gestores, professores e
demais servidores. As caractersticas dos equipamentos e as funcionalidades dos pro-
gramas sero apresentadas de maneira gradual e num contexto prtico. Essas.situaes
prticas sero apresentadas de maneira que o participante perceba o seu objetivo e o
valor de incorpor-las ao seu trabalho cotidiano. Os participantes sero preparados
APRESENTAO
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
6
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
para navegar e pesquisar na internet; enviar, receber e administrar correspondncia
eletrnica, alm de criar e editar documentos (textos, planilhas e apresentaes) de
interesse acadmico e profissional. Esse um curso fundamental, base e pr-requisito
para todos os demais.
CURSO DE MONTAGEM E MANUTENO DE COMPUTADORES
Este curso ser implantado em, pelo menos, uma escola do municpio sede de cada
Superintendncia Regional de Ensino. A indicao da escola dever ser feita pela pr-
pria S.R.E, levando-se em conta as condies de infra-estrutura nas Escolas-Referncia
existentes no municpio. Nas escolas escolhidas ser montado um laboratrio de
informtica especialmente para a oferta desse curso.
O objetivo deste curso capacitar tecnicamente os alunos de ensino mdio que queiram
aprender a montar, fazer a manuteno e configurar microcomputadores. Pode ser ofe-
recido para alunos de outras escolas, para professores e demais servidores da escola e
para a comunidade, aos finais de semana ou horrios em que o laboratrio esteja dis-
ponvel.
Neste curso o participante aprender a funo de cada um dos componentes do
microcomputador. Aprender como montar um computador e como configur-lo, insta-
lando o sistema operacional, particionando e formatando discos rgidos, instalando pla-
cas de fax/modem, rede, vdeo, som e outros dispositivos. Conhecer, ainda, as tcnicas
de avaliao do funcionamento e configurao de microcomputadores que esteja preci-
sando de manuteno preventiva ou corretiva, alm de procedimentos para especificao
de um computador para atender as necessidades requeridas por um cliente.
Dos cursos que se seguem, as Escolas-Referncia devero escolher pelo menos dois para
implantar em 2006.
No perodo de 13 a 25 de maro/2006, estar disponvel no stio da SEE
(www.educacao.mg.gov.br) um formulrio eletrnico para que cada diretor das Escolas-
Referncia possa informar quais os cursos escolhidos pela sua escola e quais os profes-
sores que devero ser capacitados. Durante o perodo de capacitao, os professores
sero substitudos por professores-designados para que as atividades didticas da es-
cola no sejam prejudicadas.
1. CURSO SOBRE O SISTEMA OPERACIONAL LINUX
destinado queles que desejam conhecer ferramentas padro do ambiente Unix. um
curso voltado para a explorao e organizao de contedo. So ferramentas tipica-
mente usadas por usurios avanados do sistema operacional. Tem por finalidade apre-
sentar alguns dos programas mais simples e comuns do ambiente; mostrar que, mesmo
com um conjunto pequeno de programas, possvel resolver problemas reais; explicar
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
7
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
a comunicao entre programas via rede e estender o ambiente atravs de novos pro-
gramas. O texto didtico deste curso apresenta os recursos a serem estudados e prope
exerccios. um curso para aqueles que gostam de enfrentar desafios.
Ementa: Histrico e desenvolvimento do Unix e Linux. Login no computador. Exploran-
do o computador (processos em execuo, conexes abertas). Descrio dos conceitos
de arquivo e diretrio. Operaes simples sobre arquivos e diretrios. Sistema de per-
misses e quotas.
Procurando arquivos e fazendo backups. Executando e controlando programas.
Processamnto de texto. Expresses regulares. Estendendo o ambiente. Trabalho em
rede. Um sistema de chat. Comunicao segura no chat (criptografia). Ainda criptografia.
Sistema de arquivos como um Banco de Dados. Um programa grfico. Programando
para rede.
2. CURSO DE PROGRAMAO EM JAVA
um curso de programao introdutrio que utiliza a linguagem Java. Essa linguagem
se torna, a cada dia, mais popular entre os programadores profissionais. O curso foi
desenvolvido em forma de tutorial. O participante vai construir na prtica um aplicativo
completo (um jogo de batalha naval) que utiliza o sistema grfico e que pode ser utili-
zado em qualquer sistema operacional. Os elementos de programao so apresentados
em atividades prticas medida em que se fazem necessrios. Aqueles que desejam
conhecer os mtodos de produo de programas de computadores tero, nesse curso,
uma boa viso do processo.
Ementa: Conceitos de linguagem de programao, edio, compilao, depurao e exe-
cuo de programas. Conceitos fundamentais de linguagens de programao orientada
a objetos.
Tipos primitivos da linguagem Java, comandos de atribuio e comandos de repetio.
Conceito de herana e programao dirigida por eventos. Tratamento de eventos. Pro-
gramao da interface grfica. Arrays. Nmeros aleatrios.
3. CURSO DE INTRODUO AO BANCOS DE DADOS
Este curso mostrar aos participantes os conceitos fundamentais do armazenamento,
gerenciamento e pesquisa de dados em computadores. Um banco de dados um
repositrio de informaes que modelam entidades do mundo real. O Sistema Gerenciador
do Banco de Dados permite introduzir, modificar, remover, selecionar e organizar as
informaes armazenadas. O curso mostra como os bancos de dados so criados e
estruturados atravs de exemplos prticos. Ao final, apresenta os elementos da lingua-
gem SQL (Structured Query Language Linguagem Estruturada de Pesquisa) que uma
linguagem universal para gerenciamento de informaes de bancos de dados e os ele-
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
8
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
mentos bsicos da administrao desses repositrios de informao..Apesar de ser de
nvel introdutrio, o curso apresenta todos os tpicos de interesse relacionados rea.
um curso voltado para aqueles que desejam conhecer os sistemas que gerenciam volu-
mes grandes e variados de informaes, largamente utilizados no mundo empresarial.
Ementa: Modelagem de dados. Normalizao. Linguagem SQL. Mecanismos de consulta.
Criao e alterao de tabelas. Manipulao e formatao de dados. Organizao de
resultados de pesquisa. Acesso ao servidor de bancos de dados. Contas de usurios.
Segurana. Administrao de bancos de dados. Manuteno. Integridade.
4. CURSO DE CONSTRUO DE WEB SITES
Este curso mostrar aos participantes como construir pginas HTML que forma a estru-
tura de um site na internet. A primeira parte do curso voltada para a construo de
pginas; a segunda parte, para a estruturao do conjunto de pginas que formao o
site, incluindo elementos de programao. Explicar os conceitos elementares da web
e mostrar como que se implementa o conjunto de pginas que forma o site num
servidor.
Ementa: Linguagem HTML. Apresentao dos principais navegadors disponveis no mer-
cado.
Construo de uma pgina HTML simples respeitando os padres W3C. Recursos de
formatao de texto. Recursos de listas, multimdia e navegao. Tabelas e Frames.
Folha de Estilo. Elementos de Formulrio. Linguagem Javascript. Interao do Javascript
com os elementos HTML. Linguagem PHP. Conceitos de Transmisso de Site e critrios
para avaliao de servidores.
1. CURSO DE EDITORAO ELETRNICA
Voltado para a produo de documentos fsicos (livros, jornais, revistas) e eletrnicos.
Apresenta as ferramentas de produo de texto e as ferramentas de montagem de ele-
mentos grficos numa pgina. O texto tratado como elemento de composio grfica,
juntamente com a pintura digital, o desenho digital e outros elementos grficos utiliza-
dos para promover a integrao dos elementos grficos.
O curso explora de maneira extensiva os conceitos relacionados aparncia do texto
relativos aos tipos de impresso (fontes). Mostra diversos mecanismos de produo
dos mais variados tipos de material impresso, de texto comum s frmulas matemti-
cas. Finalmente, discute a metodologia de gerenciamento de documentos.
Ementa: Editor de textos. Formatadores de texto. Tipos e Fontes. Gerenciamento de
projetos.
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
9
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
Publicaes. Programas para editorao. Programas acessrios. Impresso. Desenvolvi-
mento de um projeto.
2. CURSO DE ILUSTRAO DIGITAL
Desenvolvido sobre um nico aplicativo de tratamento de imagens e pintura digital, o
GIMP (GNU Image Manipulation Program Programa de Manipulao de Imagens GNU).
Este curso ensina, passo a passo, como utilizar ferramentas do programa para produzir
ilustraes de qualidade que podem ser utilizadas para qualquer finalidade. A pintura
digital diferente do desenho digital. O desenho se aplica a diagramas e grficos, por
exemplo. A pintura tem um escopo muito mais abrangente e uma forma de criao
mais livre, do ponto de vista formal. basicamente a diferena que h entre o desenho
artstico e o desenho tcnico. , portanto, um curso voltado para aqueles que tm inte-
resses e vocaes artsticas.
Ementa: A imagem digital. Espaos de cores. Digitalizao de imagens. Fotomontagem e
colagem digital. Ferramentas de desenho. Ferramentas de pintura. Finalizao e sada.
3. CURSO DE PRODUO FONOGRFICA
Curso voltado para aqueles que tm interesse na produo musical. Explica, atravs de
programas, como que se capturam, modificam e agrupam os sons musicais para pro-
duzir arranjos musicais. um curso introdutrio com uma boa viso da totalidade dos
procedimentos que levam produo de um disco.
Ementa: O Fenmeno Sonoro. O Ambiente Sonoro. A Linguagem Musical. Pr-Produo.
O Padro MIDI. A Gravao. A Edio. Ps-processamento. Mixagem. Finalizao.
4. CURSO DE COMPUTAO GRFICA
Curso introdutrio de modelagem, renderizao e animao de objetos tridimensionais.
Esse curso a base para utilizao de animaes tridimensionais em filmes. Conduzido
como um tutorial do programa BLENDER, apresenta a interface do programa e suas
operaes elementares. Destinado queles que tm ambies de produzir animaes de
alta qualidade para a educao ou para a mdia.
Ementa: Introduo Computao Grfica. Conceitos bsicos 2D e 3D. Interface princi-
pal do programa Blender. Espao de trabalho. Navegao em 3D. Modelagem em 3D.
Primitivas bsicas. Movimentao de objetos. Edio de objetos. Composio de cenas.
Materiais e texturas. Aplicao de materiais. UV Mapping. Luzes e Cmeras. Iluminao
de cena. Posicionamento e manipulao de cmera. Renderizao still frame. Formatos
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
10
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
de sada. Animao bsica. Movimentao de cmera e objetos. Renderizao da anima-
o. Formatos de sada.
5. CURSO DE PROJETO AUXILIADO POR COMPUTADOR
Os programas de CAD (Computer Aided Design Projeto Auxiliado por Computador) so
utilizados para composio de desenhos tcnicos. Diferentemente dos programas de
pintura eletrnica (como o GIMP), fornecem ao usurio ferramentas para desenhar com
preciso e anotar os desenhos de acordo com as normas tcnicas. Alm de ensinar ao
usurio a utilizar um programa de CAD (QCad), o curso apresenta elementos bsicos de
desenho tcnico e construes geomtricas diversas visando preparar o participante
para um aprimoramento em reas tpicas das engenharias e da arquitetura..Ementa:
Informtica aplicada ao desenho tcnico. Conceitos bsicos: construes geomtricas,
escalas, dimensionamento, projees ortogrficas e perspectivas. Sistemas de coorde-
nadas cartesiano e polar. Novas entidades geomtricas bsicas: polgonos e crculos.
Operaes geomtricas bsicas. Tipos de unidades de medida. Criao de um padro de
formato. Organizao de um desenho por nveis. Construes geomtricas diversas. A
teoria dos conjuntos aplicada ao desenho. Propriedades dos objetos. Edio do dese-
nho.
Movimento, rotao, escalamento e deformao de objetos. Agrupamento de objetos
em blocos.
6. CURSO DE MULTIMDIA NA EDUCAO
O curso est dividido em trs partes: a) utilizao da multimdia no contexto educa-
cional; b) autoria de apresentaes multimdia; c) projetos de aprendizagem mediada
por tecnologia. Este curso o fundamento para a criao dos cursos de educao a
distncia.
Apresenta os elementos que compem os sistemas de multimdia, as comunidades vir-
tuais de aprendizagem, o planejamento e a preparao de uma apresentao e de uma
lio de curso e, finalmente, a tecnologia de objetos de aprendizado multimdia.
Ementa: Introduo Multimdia e seus componentes. Multimdia na Educao. Comu-
nidades Virtuais de Aprendizagem. Webquest: Desafios Investigativos baseados na
Internet (Web).
Preparao de uma apresentao multimdia.
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
11
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
SUMRIO
Mdulo 1: Introduo ao WebDesign .................................................... 15
1.1 - Introduo ao HTML ..................................................................... 15
1.2 - Vamos tentar? .............................................................................. 15
1.3 - Tags HTML ................................................................................... 17
1.4 - Elementos HTML ........................................................................... 18
1.5 - Atributos das Tags ........................................................................ 18
Mdulo 2: Formatao de textos .......................................................... 20
2.1 - Tags HTML Bsicas ........................................................................ 20
2.2 - Tente voc mesmo - Exemplos ........................................................ 21
2.3 - Subttulos (Headings) ................................................................... 21
2.4 - Pargrafos ................................................................................... 22
2.5 - Quebra de linha ............................................................................ 22
2.6 - Comentrios em HTML ................................................................... 22
2.7 - Notas bsicas - Dicas teis ............................................................. 22
2.8 - Formatao do texto ..................................................................... 23
2.9 - Modificando a fonte do texto......................................................... 24
2.10 - Exerccios .................................................................................. 24
2.11 - Reviso: Tags HTML Bsica ........................................................... 27
Mdulo 3: Tags HTML Avanadas ........................................................... 28
3.1 - Exemplos ..................................................................................... 28
3.2 - Listas .......................................................................................... 28
3.3 - Referncias em HTML (Links e Hyperlinks) ....................................... 32
3.4 - Imagens no HTML......................................................................... 36
Mdulo 4: Frames ................................................................................ 41
4.1 - Frames HTML ................................................................................ 41
4.2 - Exemplos ..................................................................................... 44
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
12
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
Mdulo 5: Tabelas ............................................................................... 46
Mdulo 6: Folhas de Estilo ................................................................... 56
6.1 - Estilos como separao entre contedo e layout .............................. 56
6.2 - Como os estilos economizam trabalho? ........................................... 56
6.3 - Sintaxe do CSS ............................................................................. 56
6.4 - Associando um CSS aos seus documentos HTML ............................... 59
Mdulo 7: Formulrios HTML (Forms) e Entradas de dados (Input) ........ 62
7.1 - Exemplos ..................................................................................... 62
7.2 - Formulrios (Forms) ..................................................................... 63
7.3 - Entrada de Dados (Input) .............................................................. 63
7.4 - Botes Rdio ............................................................................. 63
7.5 - Caixas Checkbox ........................................................................... 64
7.6 - O atributo Action e o boto Submit de um formulrio ................. 64
7.7 - Mais exemplos.............................................................................. 65
Mdulo 8: Introduo ao JavaScript ...................................................... 69
8.1 - O que o JavaScript? .................................................................... 69
8.2 - Exemplos ..................................................................................... 70
8.3 - Entendendo o exemplo ................................................................. 71
8.4 - JavaScript, onde colocar... ............................................................. 72
8.5 - Exemplos ..................................................................................... 72
8.6 - Variveis JavaScript ...................................................................... 75
8.7 - Exemplos ..................................................................................... 76
8.8 - Comandos condicionais ................................................................. 79
8.9 - Operadores em JavaScript .............................................................. 83
8.10 - Caixa Popup ............................................................................... 84
8.11 - Funes JavaScript ..................................................................... 87
8.12 - Laos ou Repeties .................................................................... 91
8.13 - Eventos em JavaScript ................................................................. 95
Mdulo 9: Introduo ao PHP ............................................................... 97
9.1 - O que PHP? ................................................................................ 97
9.2 - Instalando o PHP (no servidor) ..................................................... 97
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
13
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
9.3 - Sintaxe do PHP ............................................................................ 98
9.4 - Variveis in PHP ........................................................................... 98
9.5 - Comentrios em PHP ..................................................................... 99
9.6 - Operadores do PHP ....................................................................... 99
9.7 - Comandos condicionais em PHP ................................................... 100
9.8 - Laos em PHP ............................................................................ 102
9.9 - Formulrios e PHP ...................................................................... 104
Mdulo 10: Enviando seu site ............................................................ 105
10.1 - O que FTP .............................................................................. 105
10.2 - O que um FTP Server? .............................................................. 105
10.3 - O que um FTP Client? .............................................................. 106
10.4 - Servidores para hospedagem de web sites ................................... 106
Apndice A: Referncia de CSS .......................................................... 107
Apndice B: Referncia de Eventos JavaScript .................................... 111
Apndice C: Caracteres Especiais no JavaScript ................................... 112
Bibliografia ...................................................................................... 113
Apndice: Editores WYSIWYG............................................................. 114
Apndice: XHTML .............................................................................. 115
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
14
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
15
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
MODULO 1: INTRODUO AO WEBDESIGN
1.1 - INTRODUO AO HTML
O que um arquivo HTML?
HTML significa Hyper Text Markup Language (Linguagem de marcao de texto).
Um arquivo HTML um arquivo texto contendo pequenas marcaes que sero interpre-
tadas por um browser (como o mozilla firefox por exemplo). Estas marcaes so cha-
madas de TAGs (ou etiquetas). As tags mostram ao browser como exibir a pgina.
Um arquivo HTML deve ter a extenso htm ou html e pode ser criado usando um editor
de texto comum.
1.2 - VAMOS TENTAR?
Primeiro vamos abrir nosso editor de texto. No KDE, v ao menu, e em seguida nas
opes Editors (ou Editores), e em Kwrite.
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
16
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
Qualquer outro editor de texto pode ser usado, como o Kate, etc, e e forma de executar
o editor pode variar dependendo do programa e da sua distribuio do Linux.
Digite o seguinte texto:
<html>
<head>
<title>ttulo da pagina</title>
</head>
<body>
Esta minha primeira homepage.
</body>
</html>
Salve o arquivo como minhapagina.htm.
Agora vamos visualizar nosso site. Inicie o browser (Mozilla Firefox) e selecione Open
(ou Abrir) no menu File (ou Arquivo). Uma caixa de dialogo ir aparecer. Selecio-
ne Browse (ou Escolher arquivo) e localize o arquivo que acabou de criar -
minhapagina.htm - selecione-o e clique em Open (ou Abrir). Agora voc deve
poder ver o caminho do arquivo na caixa de dialogo. Clique em OK, e o browser ir exibir
a pgina.
Explicao do exemplo:
A primeira tag em seu documento HTML <html>. Note que todas as tags esto delimi-
tadas por < e >. Esta tag indica ao seu browser que o comeo do documento HTML.
A ultima tag </html>. Esta tag indica que o fim do documento HTML.
Os textos entre a tag <head> e a tag </head> so chamados de informaes de cabea-
lho. As informaes de cabealho no so exibidas na janela do browser.
O texto entre as tags <title> e </title> o ttulo do seu documento. O ttulo exibido
na Barra de ttulo do browser.
entre a tag <body> e </body> que estar todo o texto a ser exibido na janela do
browser. E nesta seo que utilizaremos todos os artifcios de formatao de texto,
tabelas e formulrios. Veremos mais sobre estes assuntos mais tarde.
Extenso HTM ou HTML?
Quando se salva um documento HTML, voc pode usar tanto a extenso htm quanto
html. Ns usamos htm nos nossos exemplos. Este um habito gerado por softwares
antigos que s aceitavam extenses com 3 letras.
Com softwares novos perfeitamente seguro utilizar a extenso html.
Nota sobre os Editores de HTML:
Voc pode facilmente editar arquivos HTML com programas do tipo o-que-voc-v--o-
que-voc-leva (WYSIWYG - what you see is what you get), sem precisar ao menos ler o
cdigo dos arquivos HTML.
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
17
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
Mas se voc quer ser um Desenvolvedor Web habilidoso, recomendvel que comece
fazendo voc mesmo o arquivo HTML para aprender a dinmica do HTML. Em tempo
poder utilizar tais editores, sabendo exatamente o que eles esto fazendo e at po-
dendo fazer suas prprias melhorias e otimizaes nos arquivos gerados por eles. Para
maiores informaes a respeito de editor WYSIWYG veja Apndice
Elementos HTML
Documentos HTML so arquivos texto feitos de elementos HTML.
Elementos HTML sao definidos usando tags HTML.
Perguntas efetuadas frequentemente (FAQ)
P: Depois que editei o arquivo HTML, eu no pude ver o resultado no meu browser.
Porque?
R: Certifique-se que salvou o arquivo com a extenso correta e que est abrindo o arqui-
vo com o mesmo nome no seu browser.
P: Eu tentei editar um arquivo HTML mas as mudanas no aparecem no browser. Porque?
A: O browser mantem uma copia da pgina para que ele no tenha que abrir a mesma
pgina 2 vezes. Quando voc altera o arquivo, seu browser no sabe que fez isso. Use o
boto de refresh/reload (Atualizar) do browser para forar ele a ler a pgina que editou.
P: Que browser eu devo usar?
A: YouVoc pode fazer todo seu treino em todos os browsers comuns, como Mozilla,
Netscape, ou Konkeror. No entanto, alguns exemplos mais avanados de HTML podem
exigir browsers em verses mais atualizadas.
1.3 - TAGS HTML
As tags HTML so usadas para marcar elementos HTML;
As tags so delimitadas por dois caracteres: < e >;
As tags normally vm em pares como <b> e </b>;
A primeira tag do par a tag inicial, e a segunda tag final;
O texto entre a tag inicial e final chamado de contedo do elemento;
Tags HTML no so case sensitive, ou seja, <b> o mesmo de <B>.
Porqu usamos as tags em minsculo?
Sabemos que as tags HTML no so case-sensitive: <B> o mesmo de <b>.
Quando navegar na web, notar que a maioria dos tutoriais utiliza as tags em maisculo
em seus exemplos. Ns sempre usamos as tags em minsculo. Porque?
Se voc quer se preparar para as prximas geraes de HTML, voc deve comear a usar
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
18
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
tags em minsculo. Algumas linguagens que surgiram do HTML (como a XHTML ver
apndice sobre XHTML) exigem as tags em minsculo, portanto, devemos seguir esta
tendncia se desejamos nos tornar profissionais desta rea.
1.4 - ELEMENTOS HTML
Lembre o exemplo da seo 1.2, e adicionamos mais um elemento como a seguir:
<html>
<head>
<title>Ttulo da Pgina</title>
</head>
<body>
Esta minha segunda homepage. <b>Este texto est em negrito.</
b>
</body>
</html>
Este um elemento HTML:
<b>Este texto est em negrito</b>
O elemento HTML comea com a tag inicial: <b>
O contedo do elemento : este texto est em negrito
O elemento HTML termina com a tag final: </b>
O propsito da tag <b> definir um elemento HTML que deve ser em negrito.
Este tambm um elemento HTML:
<body>
Esta minha segunda homepage e <b>Este texto est em negrito.</b>
</body>
Este elemento comea com a tag <body>, e termina com a tag </body>.
O propsito da tag <body> definir o elemento HTML que contm o corpo do documen-
to HTML.
1.5 - ATRIBUTOS DAS TAGS
Tags pode possuir atributos. Atributos podem dar informaes adicionais sobre os ele-
mentos da sua pgina.
Esta tag define o elemento body (corpo) do seu documento: <body>. Com a adio do
atributo bgcolor, voc pode mostrar ao browser que a cor de fundo (background color)
da sua pgina deve ser vermelha, deste modo: <body bgcolor="red">.
Esta tag define uma tabela: <table>. Com a adio do atributo border, voc pode dizer
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
19
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
ao browser que a tabela no deve possuir bordas: <table border="0">
Atributos sempre vm em pares nome/valor da seguinte forma: name="value".
Atributos so sempre adicionados na tag inicial do elemento html.
Estilo das aspas, "red" ou 'red'?
Valores dos atributos devem vir sempre entre aspas. Aspas dupas so mais comuns, mas
aspas simples tambm so permitidas.
Em algumas situaes, como quando o prprio valor do atributo contm aspas, neces-
srio usar aspas simples:
name='Joo "Webdesigner" da Silva'
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
20
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
MDULO 2: FORMATAO DE TEXTOS
2.1 - TAGS HTML BSICAS
As tags bsicas de HTML de presena obrigatrias nas pginas so:
<HTML> - marcao de entrada do documento
</HTML> - marcao de sada do documento
<HEAD> - marcao de entrada do cabealho
</HEAD> - marcao de sada do cabealho
<BODY> - marcao de entrada do corpo
</BODY> - marcao de sada do corpo
Apenas o que est escrito entre as marcaes body aparecer na tela maior do seu browser.
Todas as pginas em HTML so identificadas pela tag <HTML>, que ter obrigatoriamente
que estar no incio do cdigo. Obviamente, qualquer pgina ir terminar com </HTML>.
2.1.1 - Cabealho
Dentro do cabealho (tag <head>) podemos encontrar:
<title>: Define o ttulo da pgina, que exibido na barra de ttulo dos browsers.
<style>: Define formatao em CSS
<script>: Define programao de certas funes em pgina com scripts, e pode colo-
car funes de JavaScript.
<meta>: Define propriedades da pgina, como codificao de caracteres, descrio da
pgina, autor, etc.
2.1.2 - Corpo
Dentro do corpo (tag <body>) podemos encontrar outras vrias tags, como por exem-
plo:
<h1>, <h2>,... <h6>: cabealhos e ttulos no documento em diversos tamanhos.
<p>: novo pargrafo.
<br>: quebra de linha.
<font>: forma um texto (fonte, cor e tamanho) de um trecho do texto.
<b>, <i>, <u> e <s>: negrito, itlico, sublinhado e riscado, respectivamente.
<img>: imagem.
<a>: hiperlink para uma pgina, ou para um endereo de E-mail.
O melhor modo de aprender html trabalhando. Temos exemplos da utilizao de algu-
mas destas tags acima. As demais sero vistas ao decorrer do curso.
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
21
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
2.2 - TENTE VOC MESMO EXEMPLOS
Exemplo 1) Este exemplo um documento muito simples contendo o mnimo de tags
necessrias para se fazer um documento HTML. Ele demonstra como o texto dentro da
tag body exibido no browser.
Cdigo:
<html>
<body>
O contedo do elemento body exibido no seu browser.
</body>
</html>
Exemplo 2) Este exemplo demonstra como o texto dentro dos elemetos de pargrafo
so exibidos no seu browser.
Cdigo:
<html>
<body>
<p>Isto um pargrafo.</p>
<p>Isto um pargrafo.</p>
<p>Isto um pargrafo.</p>
<p>Elementos de pargrafo so definidos pela tag p.</p>
</body>
</html>
(Voc encontrar mais exemplos no final deste mdulo.)
2.3 - SUBTTULOS (HEADINGS)
Subttulos ou headings so definidos com as tags de <h1> <h6>. <h1> define o maior
Subttulo e <h6> define o menor Subttulo.
<h1>Isto um Subttulo</h1>
<h2>Isto um Subttulo</h2>
<h3>Isto um Subttulo</h3>
<h4>Isto um Subttulo</h4>
<h5>Isto um Subttulo</h5>
<h6>Isto um Subttulo</h6>
HTML adiciona automaticamente uma linha em branco imediatamente antes do ttulo.
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
22
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
2.4 - PARGRAFOS
Pargrafos so definidos pela tag <p>.
<p>Isto um pargrafo</p>
<p>Este outro pargrafo</p>
HTML automaticamente adiciona uma linha em branco antes e depois de um pargrafo.
2.5 - QUEBRA DE LINHA
A tag <br> usada quando voc quer terminar uma linha mas no quer comear um
novo pargrafo. Esta tag fora uma quebra de linha onde voc a colocar.
<p>Este <br> um para-<br>grafo com<br>quebra de<br>linha.</p>
A tag <br> uma tag vazia, ou seja, no tem tag final ou de fechamento.
2.6 - COMENTRIOS EM HTML
A tag de comentrio usada para inserir um comentrio no cdigo fonte do HTML. Um
comentrio ser ignorado pelo browser. Voc pode usar comentrio para explicar seu
cdigo, o que pode ajudar quando voc editar o cdigo no futuro.
<!-- Isto um comentrio -->
Note que voc precisa da exclamao na abertura mas no no fechamento da tag.
2.7 - NOTAS BSICAS DICAS TEIS
Quando escrever um texto em HTML, voc nunca ter certeza de como o texto ser exibido
em outro browser. Algumas pessoas possuem telas grandes e outras pequenas. O texto
ser reformatado toda vez que o usurio alterar o tamanho da sua janela. Nunca tente
formatar o texto em um editor adicionando linhas vazias e espaos ao texto.
HTML ir apagar os espaos extras no seu texto. Qualquer nmero de espaos contam
como um. No HTML uma linha nova conta como um espao.
Usando Pargrafos vazios para inserir linhas vazia um hbito ruim. Use a tag <br>. (Mas
no use <br> para criar listas. Espere at voc aprender a usar listas em HTML.)
Voc j deve ter achado que Pargrafos podem ser escritos sem usar a tag de fechamento
</p>. No confie nisso. A prxima verso do HTML no permite que voc pule nenhuma
tag de fechamento, e alguns browsers j notificam como erro ao usurio.
O HTML automaticamente adiciona linhas em branco antes e/ou depois de alguns elemen-
tos, como antes e depois do pargrafo e antes do Subttulo.
Podemos usar a tag chamada de rgua horizontal(tag <hr>), para separar sees em
nossa pgina.
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
23
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
2.8 - FORMATAO DO TEXTO:
Agora que sabemos fazer Subttulos, pargrafos e quebras de linha, podemos comear a
ver como se formata um texto.
Vamos tentar?
Abra novamente o editor e digite o texto a seguir:
<html>
<body>
<b>Este texto est em negrito</b>
<br>
<strong>Este texto usa a tag strong</strong>
<br>
<i>Este texto est em itlico</i>
<br>
<em>Este texto est enfatizado</em>
<br>
<u>Este texto est em sublinhado</u>
<br>
<big>Este texto um pouco maior</big>
<br>
<small>Este texto um pouco menor</small>
<br>
O prximo texto est
_subescrito
<br>
O prximo texto est
^sobrescrito
</body>
</html>
Explicao do exemplo:
Como voc j deve ter notado o texto pode ser colocado em negrito com as tags <b> e
</b>. Do mesmo modo temos uma formatao semelhante chamada strong (tags
<strong> e </strong>).
As tags big (<big> e </big>) e small (<small> e </small>) aumentam ou diminuem o
tamanho do texto em uma pequena frao.
Para fazer um texto em itlico podemos usar as tags <i> e </i>, ou tags semelhante
como <em> e </em>. Para faz-lo ficar sublinhado usamos <u> e </u>.
Por fim temos as tags para deixar o texto sobrescrito (^e) e subscrito
(_e).
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
24
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
2.9 - MODIFICANDO A FONTE DO TEXTO:
A fonte tambm pode ser alterada, claro. Para isso usamos a tag <font> e alguns
atributos.
Os atributos principais desta tag so:
size: define o tamanho da fonte;
color: define a cor da fonte;
face: define a fonte a ser usada; (ex: face=Times)
2.10 - EXERCCIOS:
Copie os textos dos exemplos a seguir e visualize em um browser.
Pargrafos:
Este exemplo demonstra alguns dos comportamentos dos elementos de pargrafo.
<html>
<body>
<p>
Este pargrafo
contm muitas linhas
no cdigo fonte,
mas o browser
as ignora.
</p>
<p>
J este
contm muitos espaos
no cdigo fonte,
mas o browser
tambm os ignora.
</p>
<p>
O nmero de linhas em um pargrafo depende do tamanho da sua
janela do browser. Se voc modificar o tamanho da janela do
browser, o nmero de linhas neste pargrafo ir mudar..
</p>
</body>
</html>
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
25
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
Quebras de linha:
Este exemplo demonstra o uso da quebra de linha em um documento HTML.
<html>
<body>
<p>
Para fazer<br>quebras<br>de linha<br>em um<br>pargrafo,<br>use
a tag br.
</p>
</body>
</html>
Formatao de texto:
Este exemplo demonstra alguns problemas com a formatao do HTML.
<html>
<body>
<p>
Cai cai balo,
Cai cai balo,
Na rua do sabo,
No cai no,
No cai no,
No cai no,
Cai aqui na minha mo.
</p>
<p>Note que seu browser simplesmente ignora sua formatao!</p>
</body>
</html>
Subttulos:
Este exemplo demonstra as tags que mostram ttulos em um documento HTML.
<html>
<body>
<h1>Este um subttulo 1</h1>
<h2>Este um subttulo 2</h2>
<h3>Este um subttulo 3</h3>
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
26
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
<h4>Este um subttulo 4</h4>
<h5>Este um subttulo 5</h5>
<h6>Este um subttulo 6</h6>
<p>Use tags de Subttulos somente para Subttulos. No use elas
para fazer alguma coisa maior. Use outras tags pra isso.</p>
</body>
</html>
Ttulo centralizado:
Este exemplo demonstra um ttulo com alinhamento central.
<html>
<body>
<h1 align="center">This is heading 1</h1>
<p>O Subttulo acima alinhado ao centro da pgina.O Subttulo
acima alinhado ao centro da pgina. O Subttulo acima ali-
nhado ao centro da pgina. O Subttulo acima alinhado ao
centro da pgina. </p>
</body>
</html>
Rgua horizontal:
Este exemplo demonstra como inserir uma rgua horizontal.
<html>
<body>
<p>A tag hr define uma rgua ou linha horizontal:</p>
<hr>
<p>Isto um pargrafo</p>
<hr>
<p>Isto um pargrafo</p>
<hr>
<p>Isto um pargrafo</p>
</body>
</html>
Comentrios ocultos:
Este exemplo demonstra como inserir um comentrio no documento.
<html>
<body>
<!--Este comentrio no exibido-->
<p>Este um pargrafo comum</p>
</body>
</html>
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
27
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
Cor de fundo:
Este exemplo demonstra como inserir uma cor de fundo no documento.
<html>
<body bgcolor="yellow">
<h2>Olha: Fundo Colorido!</h2>
</body>
</html>
2.11 - REVISO: TAGS HTML BSICAS
Tag Descrio
<html> Define um documento HTML
<body> Define o corpo do documento
<h1> a <h6> Define ttulo nos tamanhos 1 a 6
<p> Define um pargrafo
<br> Insere uma nica quebra de linha
<hr> Define uma linha horizontal
<!--> Define um comentrio
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
28
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
MDULO 3: TAGS HTML AVANADAS
3.1 - EXEMPLOS
Listas no-numeradas
Este exemplo demonstra uma lista no-numerada.
<html>
<body>
<h4>Uma lista no-numerada:</h4>
<ul>
<li>Caf</li>
<li>Ch</li>
<li>Leite</li>
</ul>
</body>
</html>
Lista Numerada
Este exemplo demonstra como construir uma lista numerada.
<html>
<body>
<h4>Uma lista numerada:</h4>
<ol>
<li>Caf</li>
<li>Ch</li>
<li>Leite</li>
</ol>
</body>
</html>
3.2 - LISTAS
Listas no-numeradas
Uma lista no-numerada uma lista de itens. Os itens da lista so marcados com bullets
(normalmente pequenos circulos).
Uma lista no-numerada comea com a tag <ul> (de u uu uunordered l ll llist). Cada item da
lista comea com a tag <li> (de list item).
<ul>
<li>Caf</li>
<li>Leite</li>
</ul>
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
29
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
Abaixo mostramos como aparecer no browser:
Caf
Leite
Dentro de um item da lista voc pode colocar Pargrafos, quebras de linha, imagens,
links, outras listas, etc.
Listas Numeradas
Uma lista numerada tambm uma lista de itens. Os itens da lista so marcados com
nmeros ou letras.
Uma lista numerada comea com a tag <ol> (de o oo oordered l ll llist). Cada item da lista
comea com a tag <li> (de list item).
<ol>
<li>Caf</li>
<li>Leite</li>
</ol>
Abaixo mostramos como aparecer no browser:
1. Caf
2. Leite
Dentro de um item da lista, podemos colocar Pargrafos, quebras de linha, imagens,
links, outras listas, etc.
Listas de Definio
Uma lista de definio no uma lista de itens. uma lista de termos e as explicaes
deles.
Uma lista de definio comea com a tag <dl> (de d dd ddefinition l ll llist). Cada termo da lista
de definio comea com a tag <dt> (de d dd ddefinition t tt tterm). Cada destrio de um termo
da lista comea com a tag <dd>.
<dl>
<dt>Caf</dt>
<dd>Bebida quente e negra</dd>
<dt>Leite</dt>
<dd>Bebida fria e branca</dd>
</dl>
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
30
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
Abaixo mostramos como aparecer no browser:
Caf
Bebida quente e negra
Leite
Bebida fria e branca
Dentro de uma descrio de um termo da lista (tag <dd>) voc pode colocar pargrafos,
quebra de linha, imagens, links, outras listas, etc.
Mais Exemplos
Tipos diferentes de listas numeradas
Este exemplo demonstra tipos diferentes de listas numeradas.
<html>
<body>
<h4>Lista Numerada:</h4>
<ol>
<li>Maa</li>
<li>Bananas</li>
<li>Limes</li>
<li>Laranjas</li>
</ol>
<h4>Lista enumaradas por letras (maiusculas):</h4>
<ol type="A">
<li>Maa</li>
<li>Bananas</li>
<li>Limes</li>
<li>Laranjas</li>
</ol>
<h4>Lista enumaradas por letras (minusculas):</h4>
<ol type="a">
<li>Maa</li>
<li>Bananas</li>
<li>Limes</li>
<li>Laranjas</li>
</ol>
<h4>Lista enumaradas por nmeros romanos (maiusculas):</h4>
<ol type="I">
<li>Maa</li>
<li>Bananas</li>
<li>Limes</li>
<li>Laranjas</li>
</ol>
<h4>Lista enumaradas por nmeros romanos (minusculas):</h4>
<ol type="i">
<li>Maa</li>
<li>Bananas</li>
<li>Limes</li>
<li>Laranjas</li>
</ol>
</body>
</html>
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
31
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
Tipos diferentes de listas no-numeradas
Este exemplo demonstra tipos diferentes de listas no-numeradas.
<html>
<body>
<h4>Lista marcada por discos:</h4>
<ul type="disc">
<li>Maa</li>
<li>Bananas</li>
<li>Limes</li>
<li>Laranjas</li>
</ul>
<h4>Lista marcada por circulos:</h4>
<ul type="circle">
<li>Maa</li>
<li>Bananas</li>
<li>Limes</li>
<li>Laranjas</li>
</ul>
<h4>Lista marcada por quadrados:</h4>
<ul type="square">
<li>Maa</li>
<li>Bananas</li>
<li>Limes</li>
<li>Laranjas</li>
</ul>
</body>
</html>
Listas aninhadas (listas dentro de listas)
Este exemplo demonstra como criar listas aninhadas.
<html>
<body>
<h4>Uma lista aninhada:</h4>
<ul>
<li>Caf</li>
<li>Ch
<ul>
<li>Ch preto</li>
<li>Ch verde</li>
</ul>
</li>
<li>Leite</li>
</ul>
</body>
</html>
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
32
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
Listas Aninhadas
Este exemplo demonstra listas aninhadas um pouco mais complexas.
<html>
<body>
<h4>Uma lista aninhada:</h4>
<ul>
<li>Caf</li>
<li>Ch
<ul>
<li>Ch preto</li>
<li>Ch verde
<ul>
<li>Chins</li>
<li>Africano</li>
</ul>
</li>
</ul>
</li>
<li>Leite</li>
</ul>
</body>
</html>
Lista de definies
Este exemplo demonstra uma lista de definies.
<html>
<body>
<h4>Uma Lista de Definio:</h4>
<dl>
<dt>Caf</dt>
<dd>Bebida quente e negra</dd>
<dt>Leite</dt>
<dd>Bebida fria e branca</dd>
</dl>
</body>
</html>
3.3 - REFERNCIAS EM HTML (LINKS E HYPERLINKS)
O HTML usa um hyperlink para referenciar outro documento na web. Por conveno
chamamos de link, uma referncia a um documento no mesmo site, e de hyperlink, um
documento de outro site.
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
33
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
Exemplos
Criando hyperlinks
Este exemplo demonstra como criar referncias (links) em um documento HTML.
<html>
<body>
<p>
<a href=paginaAnterior.htm>Este Texto</a> e um link para uma
pagina no meu Web Site.
</p>
<p>
<a href=http://www.google.com.br>Este Texto</a> e um link para
uma pagina na Internet.
</p>
</body>
</html>
Uma imagem como um link
Este exemplo demonstra como usar uma imagem como um link.
<html>
<body>
<p>
Voc tambm pode usar uma imagem como um link:
<a href="proximapagina.htm">
<img border="0" src="botao.gif" width="65" height="38">
</a>
</p>
</body>
</html>
A tag de ncora e o atributo Href
O HTML usa a tag <a> (ncora) para criar um link para outro documento.
A ncora pode apontar para qualquer recurso na web:: uma pgina HTML, uma ima-
gem, um arquivo de som, um filme, etc.
A sintaxe para se criar uma ncora a seguinte:
<a href="url">Texto a ser exibido</a>
A tag <a> usada para criar uma ncora para refernciar um documento, que por sua
vez indicado (ou endereado) pelo atributo Href. As palavras entre as tags de <a> e
</a> sero exibidas como um link (ou hyperlink).
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
34
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
Esta ncora define um link para meusite:
<a href="http://www.meusite.com.br/">Visite o meu site!</a>
A linha acima ser exibida no browser da seguinte forma:
Visite o meu site!
O ATRIBUTO TARGET
Com o atributo target, voc pode indicar onde o documento ser aberto.
A linha a seguir ir abrir o link em uma nova janela do browser, e o procedimento
padro para se abrir pginas de outro site (hyperlink), pois evita que o usurio deixe o
seu site para navegar em outro:
<a href="http://www.outrosite.com.br/"
target="_blank">Visite o meu outro site!</a>
A tag de ncora e o atributo Name
O atributo name usado para criar uma ncora nomeada. Quando usamos este tipo de
ncora, criamos links que nos transferem diretamente para uma seo especfica da
pgina, evitando que o usurio use a barra de rolagem para encontrar o que procura.
Abaixo est a sintaxe de uma ncora nomeada:
<a name="label">Texto a ser exibido</a>
O atributo name usado para criar uma ncora nomeada. O nome da ncora pode ser
qualquer texto que decidir usar.
A linha abaixo define uma ncora nomeada:
<a name="dicas">Seo de Dicas Uteis</a>
Voc ir perceber que a ncora nomeada no exibida de forma especial.
Para referenciar diretamente para a ncora, adicione um # e o nome da ncora como
no exemplo abaixo:
<a href="http://www.meusite.com.br/html_tutorial.html#dicas">
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
35
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
Notas Bsicas
Sempre adicione uma barra (/) para referncias de sub-pastas. Se seu link : href="http:/
/www.meusite.com.br/html", voc ir gerar duas requisies de HTTP para o servidor,
porque o servidor ir adicionar a barra ao endereo e criar um requerimento como este:
href="http://www.meusite.com.br/html/".
ncoras nomeadas so frequentemente usadas para criar indices no inicio de grandes
documentos. A cada captudo do documento dado uma ncora nomeada, e links para
cada uma delas so colocados no inicio do documento.
Se um browser no encontrar uma ncora especificada por um link, ele direciona ao
inicio do documento, e nenhum erro gerado.
Mais Exemplos
Abrir um link em uma nova janela do browser
Este exemplo demonstra como abrir um link em uma nova janela do browser, para que
o visitante no tenha que sair do seu site.
<html>
<body>
<a href="proximapagina.htm" target="_blank">Prxima Pagina</a>
<p>
Se voc colocar o atributo de um link como "_blank",
o link abrir em uma nova janela do browser.
</p>
</body>
</html>
Referenciar um local na mesma pgina
Este exemplo demonstra referenciar um local em outra parte do documento.
<html>
<body>
<p>
<a href="#C4">Veja tambm o Captulo 4.</a>
</p>
<h2>Captulo 1</h2>
<p>Este o capitulo 1</p>
<h2>Captulo 2</h2>
<p>Este o capitulo 2</p>
<h2>Captulo 3</h2>
<p>Este o capitulo 3</p>
<a name="C4"><h2>Captulo 4</h2></a>
<p>Este o capitulo 4</p>
<h2>Captulo 5</h2>
<p>Este o capitulo 5</p>
</body>
</html>
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
36
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
Criando um link para um e-mail (mailto)
Este exemplo demonstra como criar um link para um e-mail (s funcionar se tem um
email configurado).
<html>
<body>
<p>
Este um link para um email:
<a href="mailto:fulano@meusite.com.br?subject=Ol%20denovo">
Enviar e-mail</a>
</p>
<p>
<b>Nota:</b> Espaos entre as palavras devem ser substituidos
por %20 para <b>garantir</b> que o browser exiba o texto corre-
tamente.
</p>
</body>
</html>
Criando um link para um e-mail 2
Este exemplo demonstra como criar um link para um e-mail um
pouco mais complicado.
<html>
<body>
<p>
This is another mailto link:
<a
href="mailto:fulano@meusite.com.br?cc=ciclano@meusite.com.br&bcc=
beltrano@meusite.com.br&subject=Curso%20de%20criacao%de%websites&body=
Voc%20esta%20convidado!">Enviar e-mail</a>
</p>
<p>
<b>Nota:</b> Espaos entre as palavras devem ser substituidos
por %20 para <b>garantir</b> que o browser exiba o texto corre-
tamente.
</p>
</body>
</html>
3.4 - AS IMAGENS NO HTML
Com o HTML voc pode exibir imagens em um documento.
EXEMPLOS
Inserir imagens
Este exemplo demonstra como inserir imagens em sua pgina.
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
37
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
<html>
<body>
<p>
Uma imagem:
<img src="constr4.gif"
width="144" height="50">
</p>
<p>
Uma imagem animada:
<img src="hackanm.gif"
width="48" height="48">
</p>
<p>
Note que a sintaxe de insero da imagem animada igual a da
imagem esttica. A animao depende apenas da imagem inserida.
</p>
</body>
</html>
Inserir imagens de locais diferentes
Este exemplo demonstra como inserir imagens de outras pastar ou outros servidores
em sua pgina.
<html>
<body>
<p>
Imagem de outra pasta (link):
<img src="/imagens/netscape.gif"
width="33" height="32">
</p>
<p>
Uma imagem de outro site (hyperlink):
<img src="http://www.outrosite.com.br/imagens/mozilla.gif"
width="73" height="68">
</p>
</body>
</html>
A tag img e o atributo Src
Em HTML, imagens so definidas com a tag <img>.
A tag <img> vazia, o que significa que ela contm somente atributos e no possui uma
tag de fechamento.
Para exibir uma imagem na pgina, voc precisa usar o atributo src. Src significa "source"
ou origem. O valor do atributo src o URL (endereo) da imagem que voc deseja
mostrar em sua pgina.
A sintaxe para definir uma imagem :
<img src="url">
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
38
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
O URL indica a localizao onde a imagem armazenada. Uma imagem nomeada "boat.gif"
localizada na pasta imagens em www.meusite.com.br tem o URL: http://
www.meusite.com.br/imagens/boat.gif.
O browser coloca as imagens onde a tag aparece no documento. Se voc coloca a tag
entre dois pargrafos, o browser mostra o primeiro pargrafo, depois a imagem, e em
seguida o segundo pargrafo.
O Atributo Alt
O atributo alt usado para definir um texto alternativo para a imagem. Este valor
pode ser qualquer texto definido pelo autor da pgina:
<img src="boat.gif" alt="Barco">
O atributo alt conta ao leitor o que ele ou ela est perdendo quando o browser no
exibe imagens (ou no pde carrega-las). O browser ir ento mostrar o texto alterna-
tivo no lugar da imagem. uma boa prtica incluir o atributo alt para cada imagem na
pgina, para melhorar a exibio e utilidade da pgina para pessoas usando browsers
que s exibem textos (como os de alguns telefones celulares).
Notas Bsicas
Se um arquivo HTML contm dez imagens onze arquivos so necessrios para mostrar
as pginas corretamente. Carregando imagens leva tempo, portanto, o melhor conselho
evitar usar muitas imagens diferentes na mesma pgina.
Mais Exemplos
Background image Imagem de Fundo
Este exemplo demonstra como adicionar uma imagem de fundo em uma pgina HTML.
<html>
<body background="fundo.jpg">
<h3>Olha: Uma imagem de fundo!</h3>
<p>Ambos os arquivos gif e jpg podem ser usados como imagens de
fundo no HTML.</p>
<p>Se a imagem de fundo menor que a pgina, ela se repetir.</
p>
</body>
</html>
Alinhando Imagens
Este exemplo demonstra como alinhar imagens dentro do texto.
<html>
<body>
<p>
Uma imagem
<img src="hackanm.gif"
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
39
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
align="bottom" width="48" height="48">
dentro do texto!
</p>
<p>
Uma imagem
<img src ="hackanm.gif"
align="middle" width="48" height="48">
dentro do texto!
</p>
<p>
Uma imagem
<img src ="hackanm.gif"
align="top" width="48" height="48">
dentro do texto!
</p>
<p>Note que o alinhamento bottom o alinhamento padro.</p>
<p>
Uma imagem
<img src ="hackanm.gif"
width="48" height="48">
dentro do texto!
</p>
<p>
<img src ="hackanm.gif"
width="48" height="48">
Uma imagem depois do texto!
</p>
<p>
Uma imagem antes do texto!
<img src ="hackanm.gif"
width="48" height="48">
</p>
</body>
</html>
Posicionando a imagem no pargrafo
Este exemplo demonstra como deixar a imagem posicionada esquerda e direita do
pargrafo.
<html>
<body>
<p>
<img src ="hackanm.gif"
align ="left" width="48" height="48">
Um pargrafo com uma imagem. O atributo de alinhamento (align)
est como "left". A imagem ir se posicionar esquerda do
texto.
</p>
<p>
<img src ="hackanm.gif"
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
40
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
align ="right" width="48" height="48">
Um pargrafo com uma imagem. O atributo de alinhamento (align)
est como "right". A imagem ir se posicionar direita do
texto.
</p>
</body>
</html>
Ajustando a imagem para tamanhos diferentes
Este exemplo demonstra como mudar o tamanho das imagens.
<html>
<body>
<p>
<img src="hackanm.gif"
width="20" height="20">
</p>
<p>
<img src="hackanm.gif"
width="45" height="45">
</p>
<p>
<img src="hackanm.gif"
width="70" height="70">
</p>
<p>
Voc pode fazer a imagem maior ou menor mudando os valores em
"height" (altura) e em "width" (largura) na tag img.
</p>
</body>
</html>
Exibindo um texto alternativo para uma imagem
Este exemplo demonstra como exibir um texto alternativo para uma imagem.
<html>
<body>
<img src="paraesquerda.gif" alt="V para a esquerda!" width="32"
height="32">
<p>
Browsers que no exibem imagens no podem exibir imagens e iro
somente mostrar o texto alternativo. Aqui, o texto alternativo
"V para a esquerda!".</p>
<p>
Note que se mantiver o ponteiro do mouse acima da imagem, a
maioria dos browsers ir exibir o texto alternativo.
</p>
</body>
</html>
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
41
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
MODULO 4: FRAMES
4.1 - FRAMES HTML
A palavra frame, significa moldura e exatamente o que criamos com a utilizao
deste recurso. Dividimos a pgina em diversas molduras e cada uma destas molduras
abre uma pgina html diferente, como se fosse uma outra janela do browser.
Exemplos
Conjunto de frames verticais
Este exemplo demonstra como dividir a pgina verticalmente em trs documentos diferentes.
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</html>
Conjunto de frames horizontais
Este exemplo demonstra como dividir a pgina horizontalmente em trs documentos
diferentes.
<html>
<frameset rows="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</html>
Como usar a tag <noframes>
Este exemplo demonstra como usar a tag <noframes> para exibir uma pgina diferente
em browsers que no suportam frames.
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
<noframes>
<body>
Seu browser no suporta frames!
</body>
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
42
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
</noframes>
</frameset>
</html>
Frames
Com os frames voc pode exibir mais de um documento HTML na mesma janela do
browser. Cada documento HTML chamado de frame, e cada frame independente um
do outro.
As desvantagens de usar frames so:
O desenvolvedor Web tem que cuidar de mais documentos HTML;
dificil de imprimir uma pgina completa.
A Tag Frameset
A tag <frameset> define como dividir a janela em frames;
Cada frameset define um conjunto de linhas (rows) e colunas(columns);
Os valores de linhas/colunas indicam a quantidade de tela que cada linha/coluna ir
ocupar.
A tag Frame
A tag <frame> define que documento HTML ser exibido em cada frame.
No exemplo abaixo temos um frameset com duas colunas. A primeira coluna ir ocupar
25% da largura da janela do browser. a segunda coluna ir ocupar os outros 75% da
largura. O documento HTML "frame_a.htm" colocado na primeira coluna e o documen-
to "frame_b.htm" ser colocado na segunda coluna:
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
Notas Bsicas
Se um frame tem bordas visveis, o usurio pode mudar o tamanho do frame arrastando
a borda. Para previnir o usurio de faz-lo, voc pode adicionar o atributo
noresize="noresize" tag <frame>.
Adicione a tag <noframes> para browsers que no suportam frames.
Mais Exemplos
Frameset Misto
Este exemplo demonstra como fazer um frameset com trs documentos, e como mistu-
rar eles em linhas e colunas.
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
43
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
<html>
<frameset rows="50%,50%">
<frame src="frame_a.htm">
<frameset cols="25%,75%">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</frameset>
</html>
Frameset no redimensionvel
Este exemplo demonstra o atributo noresize. Os frames no so redimensionveis.
Mova o mouse sobre a borda entre os frames e note que voc no pode mov-la.
<html>
<frameset rows="50%,50%">
<frame noresize="noresize" src="frame_a.htm">
<frameset cols="25%,75%">
<frame noresize="noresize" src="frame_b.htm">
<frame noresize="noresize" src="frame_c.htm">
</frameset>
</frameset>
</html>
Frame inline
Este exemplo demonstra como criar um frame dentro do documento html, diretamente.
Voc pode usar em uma clula de uma tabela para que a pgina abra diretamente den-
tro desta, por exemplo.
<html>
<body>
<iframe src="index.htm"></iframe>
<p>Alguns browsers antigos no suportam iframes.</p>
<p>Se o browser no suporta iframes, o frame no ser visvel.</
p>
</body>
</html>
Nota: para abrir um link em um frame especfico, devemos dar um nome ao frame
usando o atributo name e no link (tag <a href...>) referenciamos o nome do frame de
destino no atributo target.
Em HTML, uma das mais importantes estruturas para o layout da sua pgina a tabela.
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
44
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
4.2 - EXEMPLOS
Tabelas
Este exemplo demonstra como criar uma tabela em um documento HTML.
<html>
<body>
<p>
Toda tabela comea com a tag <b>table</b>.
Toda linha da tabela comea com a tag <b>tr</b>.
Toda coluna da tabela comea com a tag <b>td</b>.
</p>
<h4>Uma linha e uma coluna:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4>Uma linha e tres colunas:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<h4>Duas linhas e trs colunas:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
Bordas
Este exemplo demonstra diferentes bordas das tabelas.
<html>
<body>
<h4>Borda normal:</h4>
<table border="1">
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
45
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr>
</table>
<h4>Borda grossa:</h4>
<table border="8">
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr>
</table>
<h4>Borda muito grossa:</h4>
<table border="15">
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr>
</table>
</body>
</html>
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
46
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
MDULO 5: TABELAS
Tabelas so definidas pela tag <table>. Uma tabela definida em linhas(com a tag
<tr>), e cada linha dividida em celulas (com a tag <td>). As letras td significam "table
data" (dado da tabela), que o contedo de uma celula de dados. Uma clula pode
conter texto, imagens, listas, Pargrafos, formularios, rguas horizontais, tabelas, etc.
<table border="1">
<tr>
<td>linha 1, celula 1</td>
<td>linha 1, celula 2</td>
</tr>
<tr>
<td>linha 2, celula 1</td>
<td>linha 2, celula 2</td>
</tr>
</table>
Este cdigo ser exibido no browser como:
Tabelas e o atributo Border (Borda)
Se voc no especificou um atributo de borda a tabela ser exibida sem qualquer borda.
Algumas vezes isto pode ser util, mas frequentemente queremos que a borda aparea.
Para exibir uma tabela com bordas, voc ir ter que usar o atributo Border:
<table border="1">
<tr>
<td>linha 1, celula 1</td>
<td>linha 1, celula 2</td>
</tr>
</table>
Cabealho em uma Tabela
Cabealhos em uma tabela so definidos com a tag <th> (table heading).
<table border="1">
<tr>
<th>Cabealho</th>
<th>Outro Cabealho</th>
</tr>
<tr>
<td>linha 1, celula 1</td>
<td>linha 1, celula 2</td>
</tr>
<tr>
<td>linha 2, celula 1</td>
<td>linha 2, celula 2</td>
</tr>
</table>
linha 1, celula 1 linha 1, celula 2
linha 2, celula 1 linha 2, celula 2
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
47
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
Como aparecer em um browser:
Cabealho Outro Cabealho
linha 1, celula 1 linha 1, celula 2
linha 2, celula 1 linha 2, celula 2
Celulas vazias em uma tabela
Celulas da tabela sem contedo no so exibidas em muitos browsers.
<table border="1">
<tr>
<td>linha 1, celula 1</td>
<td> linha 1, celula 2</td>
</tr>
<tr>
<td>linha 2, celula 1</td>
<td></td>
</tr>
</table>
Este cdigo ser exibido por um browser da seguinte forma
linha 1, celula 1 linha 1, celula 2
linha 2, celula 1
As bordas entorno da celula vazia no aparece em muitos browsers.
Para evitar isto, adicione um non-breaking space, cujo o cdigo &nbsp; clula
vazia que quer fazer as bordas visveis, como no exemplo:
<table border="1">
<tr>
<td>linha 1, celula 1</td>
<td>linha 1, celula 2</td>
</tr>
<tr>
<td>linha 2, celula 1</td>
<td>&nbsp;</td>
</tr>
</table>
Mais Exemplos
Tabela sem borda
Este exemplo demonstra uma tabela sem bordas.
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
48
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
<html>
<body>
<h4>Esta tabela no possui bordas:</h4>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<h4>Esta tambm no:</h4>
<table border="0">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
Ttulo da tabela
Este exemplo demonstra como exibir um ttulo na tabela.
<html>
<body>
<h4>
Esta tabela possui um ttulo
e uma borda grossa:
</h4>
<table border="6">
<caption>Ttulo</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
49
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
Tabelas com celulas maiores que o normal.
Este exemplo demonstra como definir celulas ocupando mais de uma linha e/ou coluna.
<html>
<body>
<h4>Celula com o tamanho de duas colunas:</h4>
<table border="1">
<tr>
<th>Nome</th>
<th colspan="2">Telefone</th>
</tr>
<tr>
<td>Joo da Silva</td>
<td>3123-9876</td>
<td>9678-9876</td>
</tr>
</table>
<h4>Celula com tamanhho de duas linhas:</h4>
<table border="1">
<tr>
<th>Nome:</th>
<td>Joo da Silva</td>
</tr>
<tr>
<th rowspan="2">Telefone:</th>
<td>3123-9876</td>
</tr>
<tr>
<td>9678-9876</td>
</tr>
</table>
</body>
</html>
Tag dentro de uma tabela
Este exemplo demonstra como mostrar elementos dentro de outros.
<html>
<body>
<table border="1">
<tr>
<td>
<p>Este um pargrafo dentro da tabela</p>
<p>Este outro pargrafo</p>
</td>
<td>Tabela dentro de outra:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
50
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Lista dentro da celula
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
Espaamento na celula
Este exemplo demonstra como usar o cellpadding para criar uma margem dentro da
tabela entre o contedo das celulas e a sua borda.
<html>
<body>
<h4>sem cellpadding:</h4>
<table border="1">
<tr>
<td>Primeira</td>
<td>linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>linha</td>
</tr>
</table>
<h4>Com cellpadding:</h4>
<table border="1" cellpadding="10">
<tr>
<td>Primeira</td>
<td>linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>linha</td>
</tr>
</table>
</body>
</html>
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
51
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
Espaamento entre celulas
Este exemplo demonstra como usar o cellspacing para aumentar o espao entre celulas.
<html>
<body>
<h4>Sem cellspacing:</h4>
<table border="1">
<tr>
<td>Primeira</td>
<td>linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>linha</td>
</tr>
</table>
<h4>Com cellspacing:</h4>
<table border="1" cellspacing="10">
<tr>
<td>Primeira</td>
<td>linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>linha</td>
</tr>
</table>
</body>
</html>
Adicionando cor e imagem de fundo da tabela
Este exemplo demonstra como adicionar uma cor/imagem de fundo tabela.
<html>
<body>
<h4>Uma cor de fundo:</h4>
<table border="1" bgcolor="red">
<tr>
<td>Primeira</td>
<td>linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>linha</td>
</tr>
</table>
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
52
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
<h4>Uma imagem de fundo:</h4>
<table border="1" background="bgdesert.jpg">
<tr>
<td>Primeira</td>
<td>linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>linha</td>
</tr>
</table>
</body>
</html>
Adicionando Cor/Imagem ao fundo de uma celula.
Este exemplo demonstra como adicionar um fundo a uma celula da tabela.
<html>
<body>
<h4>Fundo das celulas:</h4>
<table border="1">
<tr>
<td bgcolor="red">Primeira</td>
<td>linha</td>
</tr>
<tr>
<td background="bgdesert.jpg">Segunda</td>
<td>linha</td>
</tr>
</table>
</body>
</html>
Alinhando o contedo de uma Celula
Este exemplo demonstra como usar o atributo "align" para alinhar os contedos das
celulas, para criar uma tabela mais agradvel.
<html>
<body>
<table width="400" border="1">
<tr>
<th align="left">Dinheiro gasto em...</th>
<th align="right">Janeiro</th>
<th align="right">Fevereiro</th>
</tr>
<tr>
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
53
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
<td align="center">Roupas</td>
<td align="right">R$241.10</td>
<td align="right">R$50.20</td>
</tr>
<tr>
<td align="center">Comida</td>
<td align="right">$730.40</td>
<td align="right">$650.00</td>
</tr>
</table>
</body>
</html>
O ATRIBUTO FRAME
Este exemplo demonstra como usar o atributo "frame" para controlar bordas das tabelas.
<html>
<body>
<p>
Se nao ve enquadramentos ao redor das tabelas, seu browser no o
suporta.
</p>
<h4>Com Enquadramento="border":</h4>
<table frame="border">
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr>
</table>
<h4>Com Enquadramento="box":</h4>
<table frame="box">
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr>
</table>
<h4>Com Enquadramento="void":</h4>
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
54
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
<table frame="void">
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr>
</table>
<h4>Com Enquadramento="above":</h4>
<table frame="above">
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr>
</table>
<h4>Com Enquadramento="below":</h4>
<table frame="below">
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr>
</table>
<h4>Com Enquadramento="hsides":</h4>
<table frame="hsides">
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr>
</table>
<h4>Com Enquadramento="vsides":</h4>
<table frame="vsides">
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
55
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr>
</table>
<h4>Com Enquadramento="lhs":</h4>
<table frame="lhs">
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr>
</table>
<h4>Com Enquadramento="rhs":</h4>
<table frame="rhs">
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr>
</table>
</body>
</html>
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
56
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
MDULO 6 - FOLHAS DE ESTILO
CSS significa Cascading Style Sheets (Folhas de estilo em cascata). Estilos definem como
mostrar os elementos HTML e normalmente so armazenados em folhas de estilo.
Os estilos foram adicionados no HTML 4.0 para facilitar o design de pginas. Folhas de
estilo externas pgina podem economizar muito trabalho, j que se pode utilizar a
mesma programao para estilizar diversas pginas do site.
Estas folhas de estilo externas, so guardadas nos arquivos CSS.
6.1 ESTILOS COMO SEPARAO ENTRE CONTEUDO E LAYOUT
As tags HTML foram originalmente planejadas para definir o contedo de um documen-
to. Elas esto encarregadas a nos dizer isto um cabealho, isto um pargrafo ou
isto uma tabela, usando tags como <h1>, <p>, <table>, e assim por diante. O layout
do documento era pra ser uma funo do browser, sem que fossem usadas nenhuma tag
de formatao.
Como os brosers grandes como o Netscape, continuamente adicionavam novas tags e
atributos (como a tag <font> e o atributo color) a especificao do HTML original, se
tornou mais e mais dificil a criao de websites onde o conteudo do HTML estivesse
claramente separado de sua apresentao ou layout.
Para resolver este problema, o World Wide Web Consortium (W3C) consorcio respon-
svel pela padronizao do HTML - criou os estilos (STYLES) em complemento ao HTML
4.0.
Todos os browsers mais utilizados suportam o CSS.
6.2 COMO OS ESTILOS ECONOMIZAM TRABALHO?
As folhas de estilo, definem como os elementos HTML so mostrados. Os estilos so
normalmente salvos em arquivos externos (com a extenso .css). Estes arquivos permi-
tem que voc mude a aparncia e layout de todas as suas pginas apenas editando um
arquivo CSS.
CSS uma inovao no webdesign porque ele permite que desenvolvedores controlem o
estilo de diversas pginas de uma s vez. Como um desenvolvedor Web voc pode
definir um estilo para cada elemento HTML e aplicar a quantas pginas lhe convier. E
para fazer uma mudana global, mude o estilo e todos os elementos sero atualizados
automaticamente.
6.3 SINTAXE DO CSS
Syntax
A sintaxe do CSS feita de trs partes: um seletor, uma propriedade e um valor:
seletor {propriedade: valor}
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
57
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
O seletor normalmente o elemento/tag do HTML a definir, j a propriedade o atribu-
to que voc deseja modificar e cada propriedade pode ter um valor. A propriedade e
valor so separados por : e ficam ambos entre chaves:
body {color: black}
Se o valor contem multiplas palavras, so necessrias as aspas ao seu redor:
p {font-family: "sans serif"}
Nota: Se deseja especificar mais de uma propriedade, separe-as utilizando o ponto-e-
vrgula. O exemplo a seguir mostra como definir um pargrafo centralizado com o texto
em vermelho:
p {text-align:center;color:red}
Para deixar as definies de estilo mais amigaveis nossa leitura, costume descrever
cada propriedade em uma linha, como no exemplo:
P
{
text-align: center;
color: black;
font-family: arial
}
Agrupando Seletores
Voc pode agrupar seletores. Separe cada seletor com uma virgula. No exemplo abaixo,
agrupamos todos os elementos de Subttulos para que sejam exibidos em verde:
h1,h2,h3,h4,h5,h6
{
color: green
}
O seletor de classe
Com o seletor de classe voc pode definir diferentes estilos para o mesmo tipo de
elemento HTML. Digamos que voc gosta de ter dois tipos de Pargrafos em seu docu-
mento: um justificado a direita e outro centralizado. Eis como podemos fazer estes
estilos:
p.direita {text-align: right}
p.centro {text-align: center}
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
58
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
No seu documento HTML, voc deve indicar qual tipo de pargrafo deseja usar:
<p class="direita">
Este um pargrafo justificado a direita!
</p>
<p class="centro">
Este um pargrafo centralizado!
</p>
Nota: Somente um atributo de classe pode ser definido por elemento. O exemplo a
seguir est incorreto incorreto incorreto incorreto incorreto:
<p class="direita" class="centro">
Isto um pargrafo!
</p>
Voc pode omitir o nome da tag no seletor para definir um estilo que ir ser usado por
todos os elementos que usarem a classe especificada. No exemplo, todos os elementos
com class="centro" sero centralizados:
.centro {text-align: center}
No cdigo abaixo, tanto o elemento h1 como o elemento p possuem class="centro".
Isto significa que ambos utilizaro as regras no seletor ".centro":
<h1 class="centro">
Este um Subttulo centralizado!
</h1>
<p class="centro">
Este um pargrafo centralizado!
</p>
NO inicie o nome de uma classe com um nmero! No funcionar em browsers
como o Mozilla/Firefox.
O Seletor id
Com o seletor id podemos definir o mesmo estilo para diferentes elementos HTML.
A regra de estilo abaixo ser aplicada a qualquer elemento cujo atributo id seja "verde":
#verde {color: green}
A regra acima ser aplicada tanto ao elemento h1 como ao elemento p:
<h1 id="verde">texto</h1>
<p id="verde">texto</p>
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
59
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
A regra abaixo ser aplicada aos elementos de pargrafo P que possuam o atributo id
com o valor "para1":
p#para1
{
text-align: center;
color: red
}
A regra no ser aplicada ao elemento h1 abaixo:
<h1 id="para1">texto</h1>
NO inicie o valor de um ID com um nmero! No funcionar em browsers como o
Mozilla/Firefox.
Comentrios no CSS
Podemos inserir comentrios no CSS para explicar nosso cdigo, o que pode ajud-lo a
editar seu cdigo em uma data posterior. O comentrio ser ignorado pelo browser.
Um comentrio no CSS comea com "/*", e termina com "*/", como no exemplo:
/* Este um comentrio */
p
{
text-align: center;
/* Este outro comentrio */
color: black;
font-family: arial
}
6.4 ASSOCIANDO UM CSS AOS SEUS DOCUMENTOS HTML
Como inserir uma folha de estilos
Quando o browser l a folha de estilos, ele ir formatar o documento de acordo com ele.
Existem trs formas de inserir a folha de estilo:
1 - Folha de Estilos Externa
Uma folha de estilos externa ideal quando os mesmos estilos sero aplicados a diver-
sas pginas. Com a folha de estilos externa, voc pode trocar o visual de um website
inteiro apenas modificando um arquivo. Cada pgina precisa referenciar a pgina de
estilos usando a tag <link>. A tag <link> deve ficar na seo head:
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
60
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
<head>
<link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
O browser ir ler as definies do arquivo estilos.css, e formatar a pgina de acordo com
ele.
Uma folha de estilo externa pode ser escrita em qualquer editor de texto. O arquivo no
deve conter tags HTML. Seu arquivo deve usar a extenso .css. Abaixo um exemplo de
um arquivo de estilos:
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
NO deixe espaos entre o valor da propriedade e as unidades!
Se usar "margin-left: 20 px" no lugar de "margin-left: 20px" no sero aplicadas as
regras em browsers como Mozilla/Firefox ou Netscape.
2 - Folha de Estilos Interna
Uma folha de estilo interna deve ser usada quando um documento tem um estilo nico.
Podemos definir estilos internos na seo head usando a tag <style>, da seguinte forma:
<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>
Nota: Os browsers normalmente ignoram tags desconhecidas. Isto significa que um
browser antigo que no suporta estilos ir ignorar a tag <style>, mas o conteudo da tag
ser exibido na pgina. possivel prevenir que um browser antigo eiba o conteudo
escondendo-o dentro de um comentrio HTML:
<head>
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
</head>
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
61
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
3 - Estilos Inline
Um estilo inline perde muitas das vantagens de se usar estilos, pelo fato de misturar o
contedo com o layout. Use este mtodo com cuidado, em casos em que um estilo
somente aparece em uma nica ocorrencia em um documento.
Para usar estilos inline usamos o atributo style na tag relevante. O atributo do estilo
pode conter qualquer propriedade CSS:
<p style="color: sienna; margin-left: 20px">
Isto um pargrafo!
</p>
Veja no Apendice A as diversas propriedades e valores que podem ser usados no CSS.
MODULO 7: FORMULRIOS HTML (FORMS) E ENTRADAS DE DADOS (INPUT)
Formulrios HTML so usados para selecionar diferentes formas de entradas de dados
pelo usurio.
7.1 - EXEMPLOS
Campos de Texto
Este exemplo demonstra como criar campos de texto em uma pgina HTML. O usurio
pode escrever textos em um campo de texto.
<html>
<body>
<form>
Nome:
<input type="text" name="nome">
<br>
Sobrenome:
<input type="text" name="sobrenome">
</form>
</body>
</html>
Campos de Senha (password)
Este exemplo demonstra como criar um campo de senha em uma pgina HTML.
<html>
<body>
<form>
Login:
<input type="text" name="login">
<br>
senha:
<input type="password" name="senha">
</form>
<p>
Note que quando voc digita os caracteres em um campo de senha,
o browser mostra asteriscos ('*') no lugar dos caracteres.
</p>
</body>
</html>
(Veja mais exemplos no final deste mdulo.)
7.2 - FORMULRIOS (FORMS)
Um formulrio uma aread que pode conter elementos de formulrio.
Elementos de formulrio so elementos que permitem ao usurio entrar informaes
(como campos de texto, caixas de seleo drop-down, botes radio, caixas
checkboxes, etc.) em um formulrio.
Um formulrio definido com a tag <form>.
<form>
<input>
<input>
</form>
7.3 - ENTRADA DE DADOS (INPUT)
A tag mais usada em um formulrio a tag <input>. O tipo de entrada especificada
pelo atributo type. Os tipos de entrada mais comuns sero explicados abaixo.
Campos de Texto (ou Text Fields)
Campos de texto so usados quanto queremos que o usurio entre com letras ou numeros,
etc. em um formulrio.
<form>
Nome:
<input type="text" name="nome">
<br>
Sobrenome:
<input type="text" name="sobrenome">
</form>
Este cdigo ser exibido por um browser da seguinte forma:
Nome:
Sobrenome:
Note que o formulrio em si no exibido. Note tambm que na maioria dos browsers,
a largura do campo de texto de 20 caracteres por padro.
7.4 - BOTES RADIO
Botes radio so usados quando se deseja que o usurio faa uma seleo em uma lista
limitada de opes.
<form>
<input type="radio" name="genero" value="M"> Masculino
<br>
<input type="radio" name="genero" value="F"> Feminino
</form>
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
64
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
Este cdigo ser exibido por um browser da seguinte forma:
Masculino
Feminino
Note que apenas uma opo pode ser selecionada.
7.5 - CAIXAS CHECKBOX
As Checkbox so usadas quando se deseja que o usurio selecione uma ou mais opes
em uma lista limitada de opes.
<form>
<input type="checkbox" name="bicicleta">
Eu tenho uma bicicleta
<br>
<input type="checkbox" name="carro">
Eu tenho um carro
</form>
Este cdigo ser exibido por um browser da seguinte forma:
Eu tenho uma bicicleta
Eu tenho um carro
7.6 - O ATRIBUTO ACTION E O BOTO SUBMIT DE UM FORMULRIO
Quando ousurio clica no boto submit, o contedo do formulrio enviado para
outro arquivo. O atributo action define o nome do arquivo para o qual os dados sero
enviados. O arquivo especificado no atributo action geralmente faz alguma operao
com os dados recebidos.
<form name="input" action="html_form_action.php"
method="get">
Login:
<input type="text" name="login">
<input type="submit" value="Submit">
</form>
Este cdigo ser exibido por um browser da seguinte forma:
Login: Submit
Os dados digitados na caixa de texto sero enviados para a pgina indicada no atributo action.
Estes dados sero inicializados s variaveis cujo nome so indicados pelo atributo name
das respectivas tags Input. Veremos como acessar estas variveis, atravz do Javascript,
no prximo captulo. Da mesma forma estes dados podem ser acessados com o PHP,
ASP etc. Veremos uma introduo ao PHP mais adiante no nosso curso.
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
65
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
7.7 - MAIS EXEMPLOS
Caixas Checkbox
Este exemplo demonstra como criar check-boxes em uma pgina HTML. A user can select
or unselect a checkbox.
<html>
<body>
<form>
<input type="checkbox" name="bicicleta">Eu tenho uma bicicleta
<br>
<input type="checkbox" name="carro">Eu tenho um carro
</form>
</body>
</html>
Boto radio
Este exemplo demonstra como criar radio-buttons em uma pgina HTML.
<html>
<body>
<form>
<input type="radio" name="genero" checked="checked" value="M">
Masculino
<br>
<input type="radio" name="genero" value="F"> Feminino
</form>
<p>
Quando o usurio clica em um boto radio, o boto marcado,
e todos os outros desmarcados.
</p>
</body>
</html>
Caixa dropdown simples
Este exemplo demonstra como criar uma caixa drop-down em uma pgina HTML. Uma
caixa drop-down uma lista de seleo (select).
<html>
<body>
<form>
<select name="carros">
<option value="volvo">Volvo
<option value="bmw">BMW
<option value="fiat">Fiat
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
66
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
<option value="audi">Audi
</select>
</form>
</body>
</html>
Outra Caixa drop-down
Este exemplo demonstra como criar uma caixa drop-down box com um valor pr-seleci-
onado.
<html>
<body>
<form>
<select name="cars">
<option value="volvo">Volvo
<option value="bmw">BMW
<option value="fiat" selected="selected">Fiat
<option value="audi">Audi
</select>
</form>
</body>
</html>
Area de Texto
Este exemplo demonstra como criar uma area de texto (um campo de texto com multiplas
linhas). Um usurio pode escrever textos mais longos em uma rea de texto.
<html>
<body>
<form>
<textarea rows="10" cols="30">
O gato brincava no jardim.
</textarea>
</form>
</body>
</html>
Boto
Este exemplo demonstra como criar um boto. Em um boto podemos definir nosso
prprio texto.
<html>
<body>
<form>
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
67
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
<input type="button" value="Meu primeiro Botao">
</form>
</body>
</html>
Borda no formulrio
Este exemplo demonstra como desenhar uma borda com um ttulo ao redor dos seus
dados.
<html>
<body>
<fieldset>
<legend>
Dados de Saude:
</legend>
<form>
Largura <input type="text" size="3">
Altura <input type="text" size="3">
</form>
</fieldset>
<p>
Se no foi exibida uma borda ao redor do formulrio, seu browser
muito antigo.
</p>
</body>
</html>
Exemplo de Formulrio
Este exemplo demonstra como adicionar um formulrio uma pgina. Este formulrio
contm diversas formas de entrada de dados.
<html>
<body>
<fieldset>
<legend>
Novo Usuario:
</legend>
<form name="input" action="cadastrar.php" method="get">
Nome: <input type="text" name="nome"><br>
Sobrenome: <input type="text" name="sobrenome"><br>
Nome de usuario: <input type="text" name="login"><br>
e-mail: <input type="text" name="email"><br>
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
68
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
Genero:<br>
<input type="radio" name="genero" value="M"> Masculino<br>
<input type="radio" name="genero" value="F"> Feminino<br>
<input type="checkbox" name="newsletter">Gostaria de receber
emails do administrador<br>
Pequena descrio pessoal:
<textarea name="desc" rows="10" cols="30">
Insira a descrio aqui.
</textarea><br>
<input type="submit" value="Enviar">
</form>
</fieldset>
</body>
</html>
Tags de Formulrio
TAG DESCRIO
<form> Define um formulrio para insero de dados
<input> Define um campo de insero de dados
<textarea> Define uma area de texto
<label> Define um rtulo
<fieldset> Define um bloco de campos
<legend> Define um ttulo ou legenda para um bloco de campos
<select> Define uma lista de seleo (caixa dropdown)
<optgroup> Define um grupo de opes
<option> Define uma opo em uma caixa dropdown
<button> Define um boto
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
69
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
MODULO 8: INTRODUO AO JAVASCRIPT
JavaScript uma linguagem usada em milhes de pginas da web para melhorar o
design, validar formulrios, detectar browser, criar cookies e muito mais.
O JavaScript a mais popular linguagem de script na internet, e funciona em todos os
maiores browsers, como Mozilla, Firefox, Netscape e Opera.
8.1 - O QUE O JAVASCRIPT?
JavaScript foi criado para adicionar interatividade s pginas HTML;
JavaScript uma linguagem de script (uma linguagem de script uma linguagem de
programao leve que interpretada por programas como os browsers);
O JavaScript consiste em linhas de cdigo executveis pelo computador;
O JavaScript normalmente inserido diretamente no cdigo da pgina HTML;
JavaScript uma linguagem interpretada (scripts sem um compilao prvia, ou seja,
sem traduo para linguagem de maquina);
Todos podem usar o JavaScript sem comprar uma licensa;
Java e JavaScript so a mesma coisa?
NO!
Java and JavaScript so duas linguagems muito diferentes tanto em conceito como
design!
Java (desenvolvido pela Sun Microsystems) uma poderosa e muito mais complexa
linguagem de programao na mesma categoria das linguagens C e C++.
O que um JavaScript pode fazer?
JavaScript d aos webdesigners uma ferramenta de programao Autores HTML
no so normalmente programadores, mas o JavaScript uma linguagem com a
sintaxe muito simples! Quase todos podem colocar pequenos pedaos de cdigo
("snippets") em suas pginas HTML;
JavaScript pode colocar texto dinmico em uma pgina HTML Um comando
JavaScript como este: document.write("<h1>" + nome + "</h1>") pode escrever um
texto variavel em uma pgina HTML;
JavaScript pode reagir a eventos - O JavaScript pode ser preparado para executar
quanto alguma coisa acontece, como quando a pgina carregada ou quando o usu-
rio clica em um elemento HTML;
JavaScript pode ler e escrever elementos HTML - O JavaScript pode ler e mudar o
conteudo de um elemento HTML;
JavaScript pode ser usado para validar dados - O JavaScript pode ser usado para
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
70
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
validar um formulrio antes que este seja enviado ao servidor, economizando
processamento para o servidor;
JavaScript pode detectar o browser do visitante - O JavaScript pode ser usado para
detectar o browser do usurio, e -dependendo do browser carregar uma pgina
especficamente feita para o browser do usurio;
JavaScript pode criar cookies - O JavaScript pode ser usado para guardar dados e
recuperar informaes do computador do usurio.
A tag HTML <script> usada para inserir um cdigo JavaScript em um documento HTML.
8.2 - EXEMPLOS
Como escrever na pgina:
<html>
<body>
<script type="text/javascript">
document.write("Este texto foi escrito pelo JavaScript!")
</script>
</body>
</html>
Como formatar o texto com tags HTML usando o Javascript:
<html>
<body>
<script type="text/javascript">
document.write("<h1>Este texto foi escrito e formatado pelo
<B>JavaScript</B>!</h1>")
</script>
</body>
</html>
Como colocar um cdigo JavaScript em uma pgina HTML
<html>
<body>
<script type="text/javascript">
document.write("Este texto foi escrito pelo JavaScript!")
</script>
</body>
</html>
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
71
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
O cdigo acima ir produzir esta saida no browser:
Este texto foi escrito pelo JavaScript!
8.3 - ENTENDENDO O EXEMPLO
Para inserir o cdigo JavaScript em um documento, usamos a tag <script> (tambm
usamos o atributo type para definir a linguagem do script).
Ento, as tags <script type="text/javascript"> e </script> contam ao browser onde co-
mea e termina o cdigo JavaScript:
<html>
<body>
<script type="text/javascript">
...
</script>
</body>
</html>
O comando document.write o comando padro de saida de texto para a pgina.
Inserindo o comando document.write entre as tags <script type="text/javascript"> e
</script>, far com que o broswer o reconhea como um comando JavaScript e executa-
r o comando. Neste caso o browser ir escrever a frase Este texto foi escrito pelo
JavaScript! na pgina:
<html>
<body>
<script type="text/javascript">
document.write("Este texto foi escrito pelo JavaScript!")
</script>
</body>
</html>
Nota: Se no colocarmos a tag <script>, o browser ir tratar o comando document.write
como texto puro, e assim ir escrever a linha inteira pgina.
Terminar linhas com ;?
Pela tradio das linguagens de programao, como C++ e Java, cada comando deve ser
seguido de ponto-e-vrgula.
Muitos programadores continuam com este hbito quando programando em JavaScript,
mas em geral, o ponto-e-vrgula opcional! No entanto, ponto-e-vrgula so necess-
rios se voc quer adicionar mais de um comando por linha.
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
72
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
Como fazer com os Browsers antigos?
Browsers que no suportam o JavaScript mostraro o script como contedo da pgina.
Para evitar que isso acontea, podemos usar a tag de comentrio HTML:
<script type="text/javascript">
<!--
document.write("Este texto foi escrito pelo JavaScript!")
//-->
</script>
As duas barras antes do fechamento da tag de comentrio (//) representam o simbolo
de comentrio do JavaScript. Isto evita que o JavaScript analise a linha.
8.4 - JAVASCRIPT, ONDE COLOCAR...
JavaScripts na seo body iro ser executados ENQUANTO a pgina carrega.
JavaScripts na seo head iro ser executados quando chamados.
8.5 - EXEMPLOS
Cabealho
Scripts que contem funes podem ser colocados no cabealho do documento. Assim
podemos garantir que o script carregado antes da funo ser chamada.
<html>
<head>
<script type="text/javascript">
function message()
{
alert("Esta caixa de alerta foi chamada pelo evento onload")
}
</script>
</head>
<body onload="message()">
</body>
</html>
Body section
Executa um script que foi colocado na seo body.
<html>
<head>
</head>
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
73
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
<body>
<script type="text/javascript">
document.write("Esta mensagem ser escrita quando a pgina for
carregada")
</script>
</body>
</html>
External script
Como acessar um script externo a pgina HTML.
<html>
<head>
</head>
<body>
<script src="xxx.js"></script>
<p>
Os scripts esto dentro do arquivo chamado "xxx.js".
</p>
</body>
</html>
Onde colocar o JavaScript
JavaScripts em uma pgina ser executado imediatamente enquanto a pgina carrega
no browser. Isto no o que queremos sempre. Algumas vezes queremos executar o
script quando a pgina carrega, outras vezes quando acontece o que chamamo de even-
to.
Scripts na seo head: Scripts para serem executados quando so chamados, ou quan-
do um evento acionado, so colocados na seo head. Quando colocamos um script
na seo head, garantimos que estes so carregados antes que qualquer um os utilize.
<html>
<head>
<script type="text/javascript">
....
</script>
</head>
Scripts na seo body: Scripts para serem executados quando a pgina carregada,
so colocados na seo body. Quando se coloca um script na seo body ele geral-
mente contedo da pgina.
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
74
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
<html>
<head>
</head>
<body>
<script type="text/javascript">
....
</script>
</body>
Scripts tanto na seo body quanto na seo head: Voc pode colocar um nmero
ilimitado de scripts em seu documento, ento voc pode ter scripts nas duas sees.
<html>
<head>
<script type="text/javascript">
....
</script>
</head>
<body>
<script type="text/javascript">
....
</script>
</body>
Usando um JavaScript Externo
Algumas vezes voc pode querer executar um script em diversas pginas, sem ter que
escrever o mesmo script em cada uma delas.
Para simplificar isto, voc pode escrever JavaScript em um arquivo externo. Salve o
arquivo JavaScript externo com a extenso .js.
Nota: O script externo no pode conter a tag <script>!
Para usar o script externo, indique o arquivo .js com o atributo "src" da tag <script>:
<html>
<head>
<script src="xxx.js"></script>
</head>
<body>
</body>
</html>
Nota: Lembre de colocar o script exatamente onde voc normalmente colocaria o script
caso no fosse usar o arquivo externo!
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
75
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
8.6 - VARIAVEIS JAVASCRIPT
Uma variavel um "local de armazenamento" para a informao.
Exemplos
Variaveis
Variaveis so usadas para armazenar dados. Este exemplo mostra como.
<html>
<body>
<script type="text/javascript">
var name = "Joao"
document.write(name)
document.write("<h1>"+name+"</h1>")
</script>
<p>Este exemplo declara uma variavel, guarda um valor nesta, e
entao,
mostra o valor da variavel.</p>
<p>Entao, a variavel mostrada novamente, mas como Subttulo.</
p>
</body>
</html>
VARIVEIS
Uma varivel contm a informao que voc deseja guardar. O valor da variavel pode
mudar durante a execuo do script. Voc pode se referir a uma varivel pelo nome para
ver seu valor ou para mudar seu valor.
Regras para os nomes das variveis:
Nomes de Variveis SO case-sensitive;
Eles devem comear com uma letra ou com o caracter underscore _.
IMPORTANTE! JavaScript case-sensitive! Uma varivel nomeada nome no a
mesma que uma nomeada NOME!
Declarando uma Varivel
Voc pode criar uma variavel com o comando var:
var nome = algum valor
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
76
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
Voc tambm pode criar uma varivel sem o comando var:
nome = algum valor
Atribuindo um Valor para uma Varivel
Voc pode atribuir um valor para uma varivel desta forma:
var nome = "joao"
Ou assim:
nome = "joao"
A varivel nome est ao lado esquerdo da expresso e o valor que voc quer atribuir
ao lado direito. Agora a varivel nome tem o valor joao.
Tempo de vida das Variveis
Quando voc declara uma variavel dentro de uma funo, a variavel pode apenas ser
acessada dentro da funo. Quando voc sai da funco, esta variavel destruida. Estas
variaveis so chamadas variaveis locais. Voc pode ter variaveis locais com o mesmo
nome em funes diferentes, porque cada uma reconhecida apenas no escopo da
funo a ser executada no momento.
Se voc declara uma varivel fora da funo, todas as funes na sua pgina podem
acess-la. O tempo de vida desta varivel inicia quando ela declarada e termina quan-
do a pgina fechada.
Comando If...Else (Se...senao)
Comandos condicionais no JavaScript so usados para executar operaes diferen-
tes baseadas em condies diferentes.
8.7 - EXEMPLOS
Comando if (Se...)
Como escrever um comando if.
<html>
<body>
<script type="text/javascript">
var data = new Date()
var hora = data.getHours()
if (hora < 12)
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
77
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
{
document.write("<b>Bom Dia</b>")
}
</script>
<p>
Este exemplo demonstra o comando If.
</p>
<p>
Se a hora do seu browser menor que 12,
voc receber a mensagem Bom Dia.
</p>
</body>
</html>
If...else statement
Como escrever um comando if...else (Se...Senao).
<html>
<body>
<script type="text/javascript">
var data = new Date()
var hora = data.getHours()
if (hora < 12)
{
document.write("<b>Bom Dia</b>")
}
else
{
document.write("<b>Boa Tarde</b>")
}
</script>
<p>
Este exemplo demonstra o comando If...Else.
</p>
<p>
Se a hora do seu browser menor que 12,
voc receber a mensagem "Bom Dia".
Seno receber a mensagem "Boa Tarde".
</p>
</body>
</html>
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
78
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
Comando If..elseif...else
Como escrever um comando if..else if...else (Se...Seno Se...Seno).
<html>
<body>
<script type="text/javascript">
var data= new Date()
var hora = data.getHours()
if (hora<12)
{
document.write("<b>Bom Dia</b>")
}
else if (hora>=12 && hora<=18)
{
document.write("<b>Boa Tarde</b>")
}
else
{
document.write("<b>Boa Noite</b>")
}
</script>
<p>
Este exemplo demonstra o comando if..else if...else.
</p>
</body>
</html>
Link Aleatrio
Este exemplo demonstra um link, que te levar ao site www.google.com ou ao site
www.cade.com.br aleatoriamente com 50% de chance para cada um deles.
<html>
<body>
<script type="text/javascript">
var r=Math.random()
if (r>0.5)
{
document.write("<a href='http://www.google.com'>Ferramenta de
Busca</a>")
}
else
{
document.write("<a href='http://www.cade.com.br'>Ferramenta de
Busca</a>")
}
</script>
</body>
</html>
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
79
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
8.8 - COMANDOS CONDICIONAIS
Frequentemente quando escrevemos um cdigo JavaScripts, queremos executar diferen-
tes aes para desises diferentes. Voc pode os comandos condicionais para fazer isto.
No JavaScript podemos ter os seguintes comandos condicionais:
if - Use este comando se deseja executar alguma operao somente se uma condio
for verdadeira;
if...else - Use estes comandos se deseja executar uma operao se uma condio for
verdadeira ou outra operao se esta condio for falsa;
if...else if....else - Use estes comandos se deseja selecionar um bloco entre varios,
dependendo das condies indicadas;
witch - Use este comando se voc quer selecionar uma opo entre varias dentro de
um conjunto conhecido de opes, para indicar as operaes a serem executadas.
O comando If
Voc deve usar o comando if se deseja que uma ou mais operaes sejam executadas
somente se uma opo for verdadeira.
Sintaxe
if (condio)
{
codigo a ser executado se a condio for verdadeira
}
Note que if escrito em letras minsculas. Usando letras maisculas (IF) resultar em
um erro de JavaScript!
Exemplo 1
<script type="text/javascript">
//Escreve uma mensagem "Bom Dia" se
//a hora menor que 12
var d=new Date()
var hora=d.getHours()
if (hora<12)
{
document.write("<b>Bom Dia</b>")
}
</script>
Exemplo 2
<script type="text/javascript">
//Escreve "Hora do almoo!" se a hora igual a 11
var d=new Date()
var hora=d.getHours()
if (hora==11)
{
document.write("<b>Hora do almoo!</b>")
}
</script>
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
80
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
Nota: Nota: Nota: Nota: Nota: Quando comparando variaveis, devemos usar dois sinais de igualdade (==)!
Perceba tambm que no existe else nesta sintaxe. Voc apenas indica o cdigo a
executar somente se a condio for verdadeira.
Os Comandos If...else
Se voc deseja executar uma operao se uma condio for verdadeira e ou outra ope-
rao caso esta condio seja falsa, use o comando If...else
Sintaxe
if (condio)
{
cdigo a ser executado se a condio for verdadeira
}
else
{
cdigo a ser executado se a condio for falsa
}
Exemplo
<script type="text/javascript">
//Se a hora menor que 12 exibe Bom Dia,
//Seno exibe Boa Tarde.
var d = new Date()
var hora = d.getHours()
if (hora < 10)
{
document.write("Bom Dia!")
}
else
{
document.write("Boa Tarde!")
}
</script>
Os comandos If...else if...else
Voc deve usar os comando if....else if...else se voc tem mais de duas opes de
operaes a serem executadas de acordo com as condies dadas.
Sintaxe
if (condio1)
{
cdigo a ser executado se a condio1 for verdadeira
}
else if (condio2)
{
cdigo a ser executado se a condio2 for verdadeira
}
else
{
cdigo a ser executado se a condio1 e a condio2 forem falsas
}
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
81
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
Exemplo
<script type="text/javascript">
var d = new Date()
var time = d.getHours()
if (time<12)
{
document.write("<b>Bom Dia</b>")
}
else if (time>11 && time<19)
{
document.write("<b>Boa Tarde</b>")
}
else
{
document.write("<b>Boa Noite</b>")
}
</script>
COMANDO SWITCH
O comando switch, funciona como uma chave que comuta entre diversas operaes a
serem executadas de acordo com uma opo. Ele foi feito para diminuir o uso dos
comandos if...else if...else e para simplificar o cdigo.
Exemplos
Comando Switch
Como escrever o comando switch:
<html>
<body>
<script type="text/javascript">
var d = new Date()
Dia=d.getDay()
switch (Dia)
{
case 5:
document.write("<b>Sexta-feira</b>")
break
case 6:
document.write("<b>Sabado</b>")
break
case 0:
document.write("<b>Domingo</b>")
break
default:
document.write("<b>Quando ser o final de semana?</b>")
}
</script>
<p>Este cdigo JavaScript ir gerar mensagens diferentes basean-
do-se no dia da semana atual. Note que Domingo=0, Segunda-
feira=1, Tera-feira=2, etc.</p>
</body>
</html>
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
82
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
QUANDO USAR O COMANDO SWITCH DO JAVASCRIPT
Voc deve usar o comando switch quando existem muitas opes de cdigo para serem
escolhidas.
Sintaxe
switch(n)
{
case 1:
executa bloco de cdigo 1
break
case 2:
executa bloco de cdigo 2
break
case 3:
executa bloco de cdigo 3
break
case 4:
executa bloco de cdigo 4
break
...
default:
codigo a ser executado se nenhuma das opes acima forem
executadas
}
assim que funciona: Primeiro temos uma unica expresso n (frequentemente apenas uma
variavel), esta avaliada apenas uma vez. O resultado desta expresso comparado com cada
caso dentro do bloco do switch. Em caso um caso ser igual expresso, entao este bloco ser
executado. Use o break para evitar que o cdigo continue executando para o prximo caso
automaticamente. Se nenhum caso for igual expresso, o caso default executado.
Exemplo
<script type="text/javascript">
//Voce receber diferentes mensagens
//dependendo do dia da semana atual.
//Domingo=0, Segunda=1, Tera=2, etc.
var d=new Date()
Dia=d.getDay()
switch (Dia)
{
case 5:
document.write("Sexta-feira")
break
case 6:
document.write("Sabado")
break
case 0:
document.write("Domingo")
break
default:
document.write("Quando chegar o final de semana?")
}
</script>
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
83
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
8.9 - OPERADORES EM JAVASCRIPT
OPERADORES ARITIMTICOS
OPERADOR DESCRIO EXEMPLO RESULTADO
+ ADIO X=2 4
Y=2
- SUBTRAO X=5 3
Y=2
X-Y
* MULTIPLICAO X=5 20
Y=4
X*Y
/ DIVISO 15/5 3
5/2 2.5
% MODULO 5%2 1
(RESTO DA DIVISO) 10%8 2
10%2 0
++ INCREMENTAR X=5 X=6
(EM 1) X++
-- DECREMENTAR X=5 X=4
(EM 1)X--
OPERADORES DE ATRIBUIO
OPERADOR EXEMPLO O MESMO DE...
= X=Y X=Y
+= X+=Y X=X+Y
-= X-=Y X=X-Y
*= X*=Y X=X*Y
/= X/=Y X=X/Y
%= X%=Y X=X%Y
OPERADORES DE COMPARAO
OPERADOR DESCRIO EXEMPLO
== IGUAL A 5==8 RETORNA FALSO
=== IGUAL A (CHECA VALOR E TIPO)
X=5
Y="5"
X==Y RETORNA VERDADEIRO
X===Y RETORNA FALSO
!= DIFERENTE 5!=8 RETORNA VERDADEIRO
> MAIOR QUE 5>8 RETORNA FALSO
< MENOR QUE 5<8 RETORNA VERDADEIRO
>= MAIOR OU IGUAL A 5>=8 RETORNA FALSO
<= MENOR OU IGUAL A 5<=8 RETORNA VERDADEIRO
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
84
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
OPERADORES LOGICOS
OPERADOR DESCRIO EXEMPLO
&& E X=6
Y=3
(X < 10 && Y > 1) RETORNA VERDADEIRO
|| OU X=6
Y=3
(X==5 || Y==5) RETORNA FALSO
! NO X=6
Y=3
!(X==Y) RETORNA VERDADEIRO
Operador de String (cadeia de texto)
Uma string geralmente texto, por exemplo "Texto do JavaScript!". Para concatenar
uma ou mais strings em uma usamos o operador +.
txt1="Mais que"
txt2="otimo dia!"
txt3=txt1+txt2
A variavel txt3 agora contm "Mais queotimo dia!".
Para adicionar um espao entre duas strings, insira o espao na expresso ou em uma
das strings.
txt1="Mais que"
txt2="otimo dia!"
txt3=txt1+" "+txt2
ou
txt1="Mais que "
txt2="otimo dia!"
txt3=txt1+txt2
A variavel txt3 agora contm "Mais que otimo dia!".
8.10 - CAIXA POPUP
Em JavaScript podemos criar trs tipos de caixa popup: Alert box, Confirm box, e Prompt box.
Exemplos
Alert box
<html>
<head>
<script type="text/javascript">
function disp_alert()
{
alert("Esta uma caixa de alerta!!")
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
85
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
}
</script>
</head>
<body>
<form>
<input type="button" onclick="disp_alert()" value="Mostra uma
caixa de alerta">
</form>
</body>
</html>
Alert box com quebra de linha
<html>
<head>
<script type="text/javascript">
function disp_alert()
{
alert("Ol denovo! assim que adicionamos uma" + '\n' + "quebra
de linha em uma caixa de alerta!")
}
</script>
</head>
<body>
<form>
<input type="button" onclick="disp_alert()" value="Display alert box">
</form>
</body>
</html>
Confirm box
<html>
<head>
<script type="text/javascript">
function disp_confirm()
{
var name=confirm("Aperte um botao")
if (name==true)
{
document.write("Voc apertou OK!")
}
else
{
document.write("Voc cancelou a janela!")
}
}
</script>
</head>
<body>
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
86
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
<form>
<input type="button" onclick="disp_confirm()" value="Mostra uma
caixa de confirmacao">
</form>
</body>
</html>
Prompt box
<html>
<head>
<script type="text/javascript">
function disp_prompt()
{
var nome=prompt("Qual o seu nome?","")
if (nome!=null && nome!="")
{
document.write("Ol " + nome + "! Como vai?")
}
}
</script>
</head>
<body>
<form>
<input type="button" onclick="disp_prompt()" value="Mostra uma
caixa de pergunta">
</form>
</body>
</html>
Alert Box
Uma alert box usada se voc deseja ter certeza que uma informao lida pelo
usurio.
Quando uma alert box aparece, o usurio ter que precionar "OK" para continuar.
Sinta Sinta Sinta Sinta Sintaxe: xe: xe: xe: xe:
alert("texto")
Confirm Box
Uma confirm box usada para confirmar ou aceitar alguma coisa.
Quando uma confirm box aparece, o usurio ter que clicar em "OK" ou "Cancel" para
continuar.
Se o usurio clica em "OK", a caixa retorna verdadeiro, se ele clicar em "Cancel" (ou
Cancelar, dependendo do browser), a caixa retorna falso.
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
87
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
Sintaxe:
confirm("texto")
Prompt Box
Uma prompt box usada quando precisamos de um valor antes de entrar na pgina.
Quando a caixa aparece, o usurio precisar precionar "OK" ou "Cancel" para continuar
depois de entrar com o valor.
Se o usurio clicar em "OK" a caixa retorna o valor inserido. Se ele clicar em "Cancel" a
caixa retorna null.
Sintaxe:
prompt("texto","valor padrao")
8.11 - FUNES JAVASCRIPT
Uma funo um bloco de cdigo reutilizvel que ser executado em um evento ou
quando chamada.
Exemplos
Function
Como chamar uma funo:
<html>
<head>
<script type="text/javascript">
function minhafuncao()
{
alert("Oi")
}
</script>
</head>
<body>
<form>
<input type="button"
onclick="minhafuncao()"
value="Chamar funcao">
</form>
<p>Apertando o botao, a funcao ser chamada. A funcao ira mos-
trar a mensagem.</p>
</body>
</html>
Funo com parmetros
Como passar uma variavel como parmetro para uma funo:
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
88
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
<html>
<head>
<script type="text/javascript">
function minhafuncao(txt)
{
alert(txt)
}
</script>
</head>
<body>
<form>
<input type="button"
onclick="minhafuncao('Oi')"
value="Chamar funcao">
</form>
<p>Apertando o botao, a funcao ser chamada. A funcao ira mos-
trar a o parmetro.</p>
</body>
</html>
Funo com parmetro (varias chamadas)
A funo pode ser chamada com diferentes parmetros a cada chamada.
<html>
<head>
<script type="text/javascript">
function minhafuncao(txt)
{
alert(txt)
}
</script>
</head>
<body>
<form>
<input type="button"
onclick="minhafuncao('Bom Dia!')"
value="De manha">
<input type="button"
onclick="minhafuncao('Boa Tarde!')"
value="De tarde">
</form>
<p>
Dependendo do botao que clicar, uma mensagem diferente aparecera,
executando a mesma funcao.
</p>
</body>
</html>
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
89
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
Funo que retorna um valor
Como fazer a funo retornar um valor:
<html>
<head>
<script type="text/javascript">
function minhafuncao()
{
return ("Oi, tenha um bom dia!")
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(minhafuncao())
</script>
<p>O script na seo body chama a funo.</p>
<p>A funo retorna o texto.</p>
</body>
</html>
Uma funo com parametros que retorna um valor
Como fazer uma funo que retorna o produto de dois valores:
<html>
<head>
<script type="text/javascript">
function produto(a,b)
{
return a*b
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(produto(4,3))
</script>
<p>O script na seo body chama a funo
com os parametros (4 e 3).</p>
<p>A funo retorna o produto destes dois parametros.</p>
</body>
</html>
Para evitar que o browser execute um script quando a pgina carrega, voc deve escre-
ver este cdigo como uma funo.
Uma function contm algum cdigo que ser executado somente por um evento ou por
uma chamada funo.
Voc pode chamar uma funo de qualquer lugar da sua pgina (ou at de outras pgi-
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
90
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
nas se a funo est em um arquivo .js externo).
Funes so definidas no inicio da pgina, na seo <head>.
Exemplo
<html>
<head>
<script type="text/javascript">
functionmostramensagem ()
{
alert("Este texto foi escrito pelo JavaScript!")
}
</script>
</head>
<body>
<form>
<input type="button" value="Clique aqui!"
onclick="mostramensagem()" >
</form>
</body>
</html>
Se a linha: alert("Este texto foi escrito pelo JavaScript!!"), no exemplo acima, no fos-
se escrita na funo esta seria executada assim que a pgina carregasse. Agora, o script
no ser executado antes que o usurio aperte o boto. Adicionamos um evento onClick
ao boto que executar a funo mostramensagem() quando o boto for clicado.
Como definir uma Funo
A sintaxe para criar uma funo :
function nome(var1,var2,...,varX)
{
cdigo a ser executado
}
var1, var2, etc. So variaveis ou valores passados para funo (parmetros). O { e o
} definem o inicio e o fim da funo.
Nota: Uma funo sem parmetros devem incluir os parenteses () depois do nome da
funo:
function nome()
{
cdigo a ser executado
}
Nota: No esquea da importancia das letras maisculas e minsculas do JavaScript! A
palavra function precisa ser escrita em letras minsculas, ou ocorrer um erro JavaScript!
Tambm lembre que voc precisa chamar a funo com o nome exato que foi declarado
como nome da funo (incluindo letras maisculas e minsculas).
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
91
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
O COMANDO RETURN
O comando return usado para especificar o fvalor que retornado pela funo.
Ento, funes que iro retornar algum valor dever usar o comando return.
Exemplo
A funo abaixo deve retornar o produto de dois nmeros (a e b):
function produto(a,b)
{
x=a*b
return x
}
Quando voc chama a funo acima, voc deve passar tambm os dois parmetros:
resultado=produto(2,3)
O valor retornado da funo produto() 6, e ir ser guardado na variavel chamada de
resultado.
8.12 - LAOS OU REPETIES
Laos (ou repeties) em JavaScript so usados para executar o mesmo bloco de
programao um nmero de vezes ou enquanto uma condio verdadeira.
Exemplos
O lao For
Como escrever um lao. Use um lao For para executar o mesmo bloco de programa-
o varias vezes.
<html>
<body>
<script type="text/javascript">
for (i = 0; i <= 5; i++)
{
document.write("O numero e " + i)
document.write("<br>")
}
</script>
<p>Explicacao:</p>
<p>Este laco comea com i=0 (i vem de indice).</p>
<p>Enquanto <b>i</b> menor, ou igual a 5, o lao continuar a
executar.</p>
<p><b>i</b> ser incrementado em 1 a cada volta do lao.</p>
</body>
</html>
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
92
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
Frequentemente quando escrevemos um cdigo, queremos que o mesmo bloco execute
varias vezes seguidas. Para no termos que adicionar o mesmo cdigo dezenas ou as
vezes centenas de vezes podemos usar o lao para fazer estas operaes.
Em JavaScript existem dois tipos de laos diferentes:
for repete um bloco um numero especfico de vezes;
while repete um bloco enquanto uma condio atendida (verdadeira)
O lao For
O lao for usado quando se sabe o nmero de vezes em que um script ser executado.
Sintaxe
for
(variavel=valorinicial;variavel<=valorfinal;variavel=variavel+incremento)
{
codigo a ser executado
}
Exemplo
Explicao: O exemplo abaixo define um lao que inicia com i=0. O lao ir continuar a
executar enquanto i for menor ou igual a 10. i ser incrementado em 1 cada volta.
Nota: O parmetro incremento pode tambm ser negativo e a condio pode ser qual-
quer outra operao lgica.
<html>
<body>
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++)
{
document.write("O numero e " + i)
document.write("<br />")
}
</script>
</body>
</html>
Resultado
O numero e 0
O numero e 1
O numero e 2
O numero e 3
O numero e 4
O numero e 5
O numero e 6
O numero e 7
O numero e 8
O numero e 9
O numero e 10
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
93
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
O lao While
Laos em JavaScript tambm podem ser usados para executar o mesmo bloco de cdigo
mesmo se no sabemos quantas vezes este bloco ser executado. Esta a principal
funo do While.
Exemplos
Lao While
Como fazer o lao while executar a mesma operao que o lao for.
<html>
<body>
<script type="text/javascript">
i = 0
while (i <= 5)
{
document.write("O numero e " + i)
document.write("<br>")
i++
}
</script>
<p>Explicacao:</p>
<p>Este laco comea com i=0 (i vem de indice).</p>
<p>Enquanto <b>i</b> menor, ou igual a 5, o lao continuar a
executar.</p>
<p><b>i</b> ser incrementado em 1 a cada volta do lao.</p>
</body>
</html>
O lao While para verificao de senhas
Pedindo uma senha usando o lao while. O resto da pgina no ser mostrado enquanto
a senha no for digitada.
<html>
<body>
<script type="text/javascript">
senha=prompt("Senha","")
while (senha!="senha")
{
senha=prompt("Senha","")
}
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
94
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
</script>
</body>
</html>
O lao while
O lao while usado quando queremos que um bloco de cdigo continue sendo execu-
tado enquanto uma certa condio atendida (verdadeira).
while (condicao)
{
codigo a ser executado
}
Exemplo
Explicao: O exemplo abaixo define um lao que inicia com i=0. O lao continua repe-
tindo ENQUANTO i for menor ou igual a 10. i ser incrementado em um a cada volta.
<html>
<body>
<script type="text/javascript">
var i=0
while (i<=10)
{
document.write("O numero e " + i)
document.write("<br />")
i=i+1
}
</script>
</body>
</html>
Resultado
O numero e 0
O numero e 1
O numero e 2
O numero e 3
O numero e 4
O numero e 5
O numero e 6
O numero e 7
O numero e 8
O numero e 9
O numero e 10
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
95
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
8.13 - EVENTOS EM JAVASCRIPT
Eventos so aes que podem ser detectadas pelo JavaScript.
Eventos
Usando o JavaScript, temos a habilidade de criar pginas dinmicas.
Cada elemento da pgina web tem certos eventos que podem ser acionados pelas fun-
es JavaScript. Por exemplo, podemos usar o evento onClick de um botao para indi-
car que uma funo ser executada quando um usurio clicar no boto. Definimos os
eventos em tags HTML.
Exemplos de eventos:
Um clique do mouse
Uma imagem ou pgina sendo carregada
Mouse movendo sobre certas partes da pgina
Selecionando uma caixa de entrada de dados de um formulrio
Enviando um formulario HTML
Apertando uma tecla
No apendice B temos uma tabela com eventos do JavaScript
Nota: Eventos so normalmente associados a funes. E funes no so executadas
antes de um evento ocorrer.
onload e onUnload
Os eventos onload e onUnload so acionados quando o usurio entra ou sai da pgina.
O evento onload geralmente usado para checar o browser (e verso do browser) do
visitante, para que sejam carregados os elementos corretos da pgina.
Tanto o evento onload e o onUnload so usados, tambm, para manipular cookies que
devem ser acionados quando o usurio entra ou sai da pgina. Por exemplo, voc pode-
ria ter um popup perguntando pelo nome do usurio mas apenas na primeira vez que
ele visita a pgina. O nome armazenado em um cookie. Da prxima vez que o usurio
visita a pgina, voc ter outro popup dizendo "Benvindo Fulano de Tal!", por exemplo.
onFocus, onBlur and onChange
Os eventos onFocus, onBlur and onChange so geralmente usados em combinao com
funes de validao de formulrio.
Abaixo est um exemplo de como usar o evento onChanget. A funo checaEmail() ir
ser chamada sempre que o usurio modifica o contedo do campo:
<input type="text" size="30"
id="email" onchange="checaEmail()">;
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
96
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
onSubmit
O evento onSubmit usado para validar TODOS os campos do formulrio antes de envi-los.
Abaixo est um exemplo de como usar o evento onSubmit. A funo checaForm() ser
chamada quando o usurio clicar no boto de envio (submit) no formulrio. Se os
valores dos campos no so aceitveis, o envio cancelado. A funao checaForm()
retorna verdadeiro ou falso. Se ela retornar verdadeiro o formulrio ser enviado, se-
no o envio ser cancelado:
<form method="post" action="xxx.htm"
onsubmit="return checkForm()">
onMouseOver e onMouseOut
onMouseOver e onMouseOut so geralmente usados em botes "animados".
Veja um exemplo de um evento onMouseOver abaixo. Uma alert box aparece quan-
do o mouse est acima do link:
<a href="http://www.google.com"
onmouseover="alert('An onMouseOver event');return false">
<img src="w3schools.gif" width="100" height="30">
</a>
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
97
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
MODULO 9: INTRODUO AO PHP
Um arquivo PHP pode conter text, tags HTML e scripts. Scripts em um arquivo PHP so
executados no servidor. Isto diferencia o PHP do Javascript, d algumas novas possibi-
lidades ao webdesigner.
9.1 - O QUE PHP?
PHP significa PHP: Hypertext Preprocessor;
PHP uma linguagem de script server-side (que executa no servidor);
PHP suporta varios bancos de dados (MySQL, Informix, Oracle, Sybase, Solid,
PostgreSQL, Generic ODBC, etc.)
PHP um software open source (OSS);
PHP gratis para fazer o download e usar.
O que um arquivo PHP?
Arquivos PHP podem conter texto, tags HTML e scripts;
Arquivos PHP so retornados aos browsers como HTML puro;
Arquivos PHP tm a extenso ".php", ".php3", ou ".phtml".
Porqu PHP?
PHP roda em diferentes plataformas (Windows, Linux, Unix, etc.);
PHP compatvel com quase todos os servidores usados atualmente (Apache, etc.)
PHP GRATIS, e o download pode ser feito do site oficial PHP: www.php.net;
PHP fcil de aprender e roda eficientemente no servidor, no exigindo ne-
nhum download por parte do usurio.
9.2 - INSTALANDO O PHP (NO SERVIDOR)
Do que precisamos?
Se seu servidor suporta o PHP voc no precisa fazer nada! No necessrio compilar
nada ou instalar ferramentas extras apenas crie alguns arquivos .php na sua pasta
web (ou envie para seu servidor) e o servidor far todo o trabalho para voc. A
maioria dos servidores da web oferecem suporte ao PHP.
No entanto, se seu servidor no suporta PHP, voc precisa instal-lo. Abaixo est um
link para um bom tutorial de como instalar o PHP 4:
http://hotwired.lycos.com/webmonkey/00/44/index4a.html?tw=programming
Download do PHP
Download do PHP (gratis): http://www.php.net/downloads.php
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
98
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
9.3 - SINTAXE DO PHP
Voc no pode ver o cdigo do PHP selecionando a opo View source ou Exibir
Cdigo Fonte em seu browser voc apenas ver o arquivo HTML resultante do PHP.
Isto acontece porque os scripts so executados no servidor e enviados como arquivos
HTML ao seu browser.
Neste captulo, veremos que a sintaxe do PHP bastante semelhante do JavaScript.
Sintaxe bsica do PHP
Um arquivo PHP normalmente contm tags HTML, do mesmo modo que um arquivo
HTML, e alguns cdigos de script PHP.
Abaixo, temos um exemplo de um simples script PHP, que envia uma mensagem Isto
um texto PHP ao browser:
<html>
<body>
<?php echo "Isto um texto PHP"; ?>
</body>
</html>
Os blocos de script PHP sempre comeam com <?php e terminam com ?>. Um script
PHP pode ser colocado em qualquer lugar no documento.
Cada linha de cdigo em PHP precisa do ponto-e-vrgula (;) no final. O ponto-e-
vrgula um separador e usado para distinguir um conjunto de instrues de outro.
Existem dois comandos bsicos de exibio no PHP: echo e print. No exemplo acima
usamos o comando echo para exibir o texto.
9.4 - VARIAVEIS IN PHP
Uma das principais diferenas entre o PHP e o JavaScript que em PHP todas as variaveis
comeam com o simbolo $. Assim como no JavaScript as variaveis podem conter strings,
nmeros, etc.
Abaixo, o script PHP atribui a string "Isto um texto PHP" variavelb chamada $txt:
<html>
<body>
<?php
$txt="Isto um texto PHP";
echo $txt;
?>
</body>
</html>
Para concatenar duas ou mais strings usamos o operador ponto (.):
<html>
<body>
<?php
$txt1="Isto um texto";
$txt2="PHP";
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
99
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
echo $txt1 . " " . $txt2 ;
?>
</body>
</html>
A sada do script acima ser: "Isto um texto PHP".
9.5 - COMENTRIOS EM PHP
Em PHP, usamos o // para fazer comentrios em uma linha (como no JavaScript) ou
/* e */ para fazer grandes blocos de comentrios (mais de uma linha).
<html>
<body>
<?php
// Isto um comentrio
/*
Este
um bloco
de comentario
*/
?>
</body>
</html>
9.6 - OPERADORES DO PHP
Esta seo lista os diferentes operadores do PHP.
OPERADORES ARITIMTICOS
OPERADOR DESCRIO EXEMPLO RESULTADO
+ ADIO X=2 4
X+2
- SUBTRAO X=2 3
5-X
* MULTIPLICAO X=4 20
X*5
/ DIVISO 15/5 3
5/2 2.5
% MODULO (RESTO DA DIVISO) 5%2 1
10%8 2
10%2 0
++ INCREMENTO (EM 1) X=5 X=6
X++
-- DECREMENTO (EM 1) X=5 X=4
X--
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
100
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
OPERADORES DE ATRIBUIO
OPERADOR EXEMPLO O MESMO DE...
= X=Y X=Y
+= X+=Y X=X+Y
-= X-=Y X=X-Y
*= X*=Y X=X*Y
/= X/=Y X=X/Y
%= X%=Y X=X%Y
OPERADORES DE COMPARAO
OPERADOR DESCRIO EXEMPLO
== IGUAL 5==8 RETORNA FALSO
!= DIFERENTE DE 5!=8 RETORNA VERDADEIRO
> MAIOR QUE 5>8 RETORNA FALSO
< MENOR QUE 5<8 RETORNA VERDADEIRO
>= MAIOR OU IGUAL A 5>=8 RETORNA FALSO
<= MENOR OU IGUAL A 5<=8 RETORNA VERDADEIRO
OPERADORES LGICOS
OPERATOR DESCRIPTION EXAMPLE
&& E X=6
Y=3
(X < 10 && Y > 1) RETORNA VERDADEIRO
|| OU X=6
Y=3
(X==5 || Y==5) RETORNA FALSO
! NO X=6
Y=3
!(X==Y) RETORNA VERDADEIRO
9.7 - COMANDOS CONDICIONAIS EM PHP
Assim como no JavaScript, temos os mesmos comandos condicionais no PHP.
No PHP os seguintes comandos condicionais:
if (...else) usamos este comando quando queremos executar um conjunto de
cdigo quando uma condio verdadeira (e outra quando a condio falsa);
switch usamos este comando quando queremos selecionar um bloco de co-
mandos dentre varios dependendo de uma opo.
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
101
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
O comando If
Se queremos que algum cdigo seja executado somente quando uma condio verda-
deira ou falsa, usamos o comando if....else.
Sintaxe
if (condio)
codigo a ser executado se a condio verdadeira;
else
codigo a ser executado se a condio falsa;
Exemplo
O exemplo ir exibir "Tenha um bom final de semana!" se o dia sexta feira, seno ir
exibir "Tenha um bom dia!":
<html>
<body>
<?php
$d=date("D");
if ($d=="Fri")
echo "Have a nice weekend!";
else
echo "Have a nice day!";
?>
</body>
</html>
Assim como no JavaScript, se mais de uma linha deve ser executada quando a condio
verdadeira (ou falsa), estas linhas devem estar dentro das chaves { e }:
<html>
<body>
<?php
$x=10;
if ($x==10)
{
echo "Ola<br>";
echo "Bom dia<br>";
}
?>
</body>
</html>
O comando Switch
Se voc deseja selecionar um bloco de cdigo entre vrios, deve usar o comando Switch.
Sintaxe
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
102
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
switch (expresso)
{
case rotulo1:
codigo a ser executado se a expresso = label1;
break;
case rotulo2:
codigo a ser executado se a expresso = label2;
break;
default:
codigo a ser executado se
a expresso diferente
tanto de label1, quanto de label2;
}
Exemplo
<html>
<body>
<?php
switch ($x)
{
case 1:
echo "Number 1";
break;
case 2:
echo "Number 2";
break;
case 3:
echo "Number 3";
break;
default:
echo "No number between 1 and 3";
}
?>
</body>
</html>
9.8 - LAOS EM PHP
Em PHP temos os seguintes laos:
while repete um bloco de texto enquanto uma condio verdadeira;
for repete um bloco de texto um nmero especfico de vezes;
O comando While
O comando while ir executar um bloco de cdigo enquanto uma condio for verdadei-
ra.
Sintaxe
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
103
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
while (condio)
cdigo a ser executado;
Exemplo
O seguinte exemplo demonstra um loop que ir continuar a executar enquanto a variavel
i menor ou igual a 5. i ser incrementado em um a cada volta:
<html>
<body>
<?php
$i=1;
while($i<=5)
{
echo "O numero e " . $i . "<br>";
$i++;
}
?>
</body>
</html>
O comando For
O comando For usado quando voc sabe quantas vezes voc quer executar um bloco
de comandos.
Sintaxe
for (initializao; condio; incremento)
{
cdigo a ser executado;
}
Exemplo
O exemplo seguinte exibe o texto "Isto um texto PHP!" cinco vezes:
<html>
<body>
<?php
for ($i=1; $i<=5; $i++)
{
echo "Isto um texto PHP!<br>";
}
?>
</body>
</html>
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
104
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
9.9 - FORMULARIOS E PHP
Uma grande utilidade do PHP como ele manipula os formulrios HTML.
Manipulando formulrios com PHP
O a coisa mais importante quando manipulamos formulrios com o PHP, que qualquer
elemento do formulrio estar automaticamente disponvel no nosso script PHP.
Veja este exemplo de formulrio HTML:
<html>
<body>
<form action="benvindo.php" method="POST">
Digite seu nome: <input type="text" name="nome" /><br>
Digite sua idade: <input type="text" name="idade" /><br>
<input type="submit" />
</form>
</body>
</html>
O exemplo acima contm duas caixas de texto e um boto de envio. Quando o usurio
clica no boto, o arquivo welcome.php chamado.
Vejamos agora como o arquivo welcome.php manipula o formulrio:
<html>
<body>
Benvindo <?php echo $_POST["nome"]; ?>.<br />
Voce tem <?php echo $_POST["idade"]; ?> anos!
</body>
</html>
A sada deste script ser:
Benvindo Joao.
Voce tem 28 anos!
As variaveis $_POST["name"] e $_POST["age"] so automticamente atribuidas para
voc pelo PHP. A variavel $_POST contm TODOS os dados do formulrio.
Nota: Se o atributo method do formulrio GET, ento os dados do formulrio esta-
ro na varivel $_GET e no na variavel $_POST.
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
105
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
MODULO 10: ENVIANDO SEU SITE
10.1 - O QUE FTP?
FTP (File Transfer Protocol ou protocolo de transmisso de arquivos) o mais simples e
seguro modo para transmitir e receber arquivos na internet. Sabendo ou no, voc
provavelmente usa o ftp frequentemente.
O uso mais comum do FTP para baixar arquivos (download) na internet. Por isso, FTP
vital para a maioria dos leiles online, jogos e etc. Alm disso, a habilidade de trans-
ferir arquivos (enviar e receber) torna o FTP essencial para qualquer um criando um Web
site, tanto amadores como profissionais.
Quando se faz o download de um arquivo da Internet voc est transferindo um arquivo
para o seu computador de outro computador na Internet. Voc pode ou no saber onde
est o computador com o arquivo, mas voc sabe o seu URL (ou endereo).
Um endereo FTP parece com um endereo HTTP (Protocolo de transmisso de
Hypertexto), ou endereo do, exceto que ele usa o prefixo ftp:// ao invz de http://.
Exemplo de endereo de Website: http://www.meusite.com.br
Exemplo de endereo FTP: ftp://ftp.meusite.com.br
Frequentemente, um computador com um endereo FTP dedicado em receber uma
coneco FTP. Assim como um computador dedicado a hospedar sites chamado de
Web Server, um computador dedicado a receber uma coneco FTP chamado de FTP
server.
10.2 - O QUE UM FTP SERVER?
Um FTP server como um grande armrio de arquivos. Ele armazena os arquivos, com
opes de organizao e rtulos. Os arquivos podem ser definidos como pblicos ou
privados e um usurio pode ter acesso a arquivos que outro no possui.
Para acessar um servidor FTP precisamos de um Login e uma Senha. Se o criador do FTP
server deseja liberar o acesso ao pblico, ento, o login 'anonymous' e a senha seu
endereo de email. Se o FTP server no pblico, existir um login nico (e senha) para
cada usurio.
Quando conectando a um FTP server que permite login annimo, no ser exigido um
login e uma senha. Portanto, quando fazendo um download da Internet, voc poder
estar usando um FTP annimo e nem se dar conta disso.
Para fazer uma conexo FTP voc pode usar um Web browser comum (Mozilla, Firefox,
Netscape, etc.) ou uma aplicao FTP dedicada, que chamamos de FTP Client.
Quando usando um Web browser para uma conexo FTP, uploads (envio) FTP so dif-
ceis, ou muitas vezes impossvel, e os downloads no so protegidos (no recomen-
dado para upload ou download de arquivos grandes).
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
106
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
Quando usamos um FTP Client, uploads e downloads no podem ser mais fceis, e voc
ainda ganha em segurana e outras ferramentas. Por exemplo, voc pode pausar um
download, ou continuar um que no foi totalmente recebido, que uma opo muito
util para pessoas usando conexes discadas ou instveis (que frequentemente caem,
interrompendo o download).
10.3 - O QUE UM FTP CLIENT?
Um FTP Client uma aplicao (ou programa) que foi projetada para transferir arquivos
usando o protocolo FTP. Ele precisa ser instalado no computador e s pode ser usado
com uma conexo ativa internet.
O design padro para um FTP Client consiste em dois paineis, sendo o da esquerda para
o computador local e o da direita para o computador remoto. Nesses paineis, so exibi-
dos os arquivos de cada um dos computadores (local e remoto). Os arquivos podem ser
facilmente transferidos usando botes nomeados Upload (ou >>) e botes de Download
(ou <<). Alguns FTP clients usam o sistema de drag-and-drop para arrastar arquivos
de um painel para o outro.
Outro recurso til, principalmente para os desenvolvedores Web, o recurso de sincro-
nizao. Este recurso permite que se mantenha sempre as duas pastas (a pasta do seu
site localmente e o seu site no computador remoto) sincronizadas. Este recurso, man-
tm as duas pastas sempre atualizadas e idnticas, automaticamente.
10.4 - SERVIDORES PARA HOSPEDAGEM DE WEB SITES
Existem centenas de servios de hospedagem na web. importante ento saber o que
diferencia os servidores, e o que esperar do servio.
O primeiro ponto que se deve olhar em um servidor, se ele compatvel com seu site.
Se eu site um pequeno site, sem um banco de dados ou uma linguagem de script como
o PHP, ento provavelmente qualquer servidor poder hospedar seu site. Caso contr-
rio esses pontos devem ser observados:
Tamanho do espao disponvel para o site: seu site deve ocupar um espao
menor ou igual ao oferecido pelo servio. Isso incluindo todos os arquivos, e
considerando o crescimento do site a longo prazo;
Linguagens de script (server-side): se seu site usa uma linguagem como o
PHP, este servidor precisa oferecer este servio, para que sua pgina funcione
corretamente. (Note que JavaScript, no server-side, portanto no depende
do servidor);
Banco de Dados: se seu site possui algum tipo de banco de dados, o servidor
deve oferecer este servio, assim como a linguagem de script para manipular o
banco;
Preo: alguns servidores so gratitos, porm, exigem que algum tipo de pro-
paganda seja inserido no site, ou outra forma de pagamento semelhante; ou-
tros servidores possuem formas de pagamento mensais, que devem ser compa-
tveis ao oramento do site.
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
107
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
APNDICE A: REFERNCIA DE CSS
PROPRIEDADE BACKGROUND DO CSS
A propriedade background permite a voc controlar a cor do fundo de um elemento,
usar uma imagem como fundo, repetir uma imagem verticalmente ou horizontalmente,
e posicionar uma imagem na pgina.
PROPRIEDADE DESCRIO VALORES
background Uma propriedade para se setar background-color
todas as propriedades de fundo background-image
em uma declarao background-repeat
background-attachment
background-position
background-attachment Indica se a imagem de fundo scroll
fixa ou ela pode se movimentar fixed
com o resto da pgina (scroll).
background-color Modifica a cor de fundo de um color-rgb
elemento color-hex
color-name
transparent
background-image Seta a imagem de fundo url
none
background-position Indica a posio inicial da top left
imagem de fundo top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
background-repeat Indica se (ou como) a imagem repeat
de fundo ir se repetir repeat-x
repeat-y
no-repeat
PROPRIEDADES DE TEXTO CSS
A propriedade de texto CSS permite a voc controlar a aparncia do texto. possvel
mudar a cor do texto, aumentar ou diminuir o espao entre caracteres, alinhar, decorar,
indentar a primeira linha, etc.
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
108
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
PROPERTY DESCRIPTION VALUES
color Modifica a cor do texto color
direction Modifica a direo do texto ltr
rtl
letter-spacing Aumenta ou diminui o espaamento normal
entre caracteres length
text-align Alinha o texto de um elemento left
right
center
justify
text-decoration Adiciona uma decorao no texto none
underline
overline
line-through
blink
text-indent Indenta a primeira linha de um texto length
em um elemento %
text-transform Transforma as letras em um elemento none
capitalize
uppercase
lowercase
white-space Modifica a forma como o espao normal
tratado em um elemento pre
nowrap
word-spacing Aumenta ou diminui o espao normal
entre palavras length
PROPRIEDADES DE FONTE CSS
A propriedade de fonte permite a voc mudar a familia da fonte, e outros estilos do
texto.
PROPRIEDADE DESCRIO VALORES
font Propriedade para modificar varias font-style
propriedades do texto font-variant
font-weight
font-size/line-height
font-family
caption
icon
menu
message-box
small-caption
status-bar
font-family Lista de fontes em uma familia family-name
generic-family
font-size Modifica o tamanho da fonte xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
109
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
PROPRIEDADE DESCRIO VALORES
font-size-adjust Especifica um valor de aspectopara um elemento none
que ir preservar o x-height da fonte number
font-stretch Condensa ou espande a fonte atual normal
wider
narrower
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded
font-style Muda o estilo da fonte normal
italic
oblique
font-variant Mostra o texto em small-caps ou no normal
small-caps
font-weight Muda a largura da fonte normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
PROPRIEDADE DE BORDA
As propriedades de borda no CSS permitem que voc especifique o estilo e cor da borda
de um elemento. Em HTML usamos tabelas para criar bordas ao redor do texto, mas com
as propriedades de borda do CSS podemos criar bordas com efeitos, e elas podem ser
aplicadas a qualquer elemento.
PROPERTY DESCRIPTION VALUES
border Propriedade bsica de borda border-width
border-style
border-color
border-bottom Propriedade para a borda inferior border-bottom-width
border-style
border-color
border-bottom-color Propriedade para a cor da borda inferior border-color
border-bottom-style Propriedade para o estilo da borda inferior border-style
border-bottom-width Largura da borda inferior thin
medium
thick
length
border-color Cor de todas as bordas color
(superior, inferior e laterais)
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
110
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
PROPERTY DESCRIPTION VALUES
border-left Propriedade para a borda esquerda border-left-width
border-style
border-color
border-left-color Cor da borda esquerda border-color
border-left-style Estilo da borda esquerda border-style
border-left-width Largura da borda esquerda thin
medium
thick
length
border-right Propriedade para a borda direita border-right-width
border-style
border-color
border-right-color Cor da borda direita border-color
border-right-style Estilo da borda direita border-style
border-right-width Largura da borda direita thin
medium
thick
length
border-style Estilos para todas as bordas none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
border-top Propriedade para a borda superior border-top-width
border-style
border-color
border-top-color Cor da borda superior border-color
border-top-style Estilo da borda superior border-style
border-top-width Largura da borda superior thin
medium
thick
length
border-width Largura de todas as bordas thin
medium
thick
length
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
111
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
APNDICE B: REFERNCIA DE EVENTOS JAVASCRIPT
Eventos so normalmente usados em combinao com funes, e as funes no sero
executadas antes que um evento ocorra!
MANIPULAO DE EVENTOS
Uma novidade do HTML 4.0 foi a habilidade de deixar eventos HTML acionarem aes
no browser, como acionar uma funo Javascript quando o usurio clica em um elemen-
to HTML. Abaixo est uma lista de atributos que podem ser inseridos em tags HTML para
definir as aes dos eventos.
ATRIBUTO O EVENTO OCORRE QUANDO...
onabort O carregamento da imagem cancelado
onblur Um elemento perde o foco
onchange O contedo de um campo muda
onclick Usurio clica em um objeto com o mouse
ondblclick Usurio d um duplo-click em um object com o mouse
onerror Um erro ocorre quando carregando um documento ou imagem
onfocus Um elemento ganha o foco
onkeydown Uma tecla apertada (ocorre antes de soltar a tecla)
onkeypress Uma tecla apertada e solta
onkeyup Uma tecla solta (ocorre depois de soltar a tecla)
onload Uma pgina ou imagem carregada
onmousedown O boto do mouse precionado
onmousemove O mouse movido (sobre o objeto)
onmouseout O mouse movido para fora de um objeto
onmouseover O mouse movido para dentro de um objeto
onmouseup O boto do mouse solto
onreset O boto reset precionado
onresize A janela ou frame redimensionado
onselect O texto selecionado
onsubmit O boto de envio (submit) precionado
onunload O usurio sai da pgina
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
112
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
APENDICE C: CARACTERES ESPECIAIS NO JAVASCRIPT
Em JavaScript voc pode adicionar caracteres especiais uma string de texto usando a
barra inversa.
INSERINDO CARACTERES ESPECIAIS
A barra inversa (\) usada para inserir apostrofes, quebras de linha, aspas, e outros
caracteres especiais para uma string de texto.
Olhe o seguinte cdigo JavaScript:
var txt="Somos os "Vikings" vindos do norte."
document.write(txt)
No JavaScript, uma string iniciada e terminada com aspas simples ou duplas. Isto
significa que a string acima ser cortada em Somos os .
Para resolver isso, voc precisa usar a barra inversa (\) antes de cada aspa na palavra
"Vikings". Isto transforma cada aspa em uma string literal:
var txt="Somos os \"Vikings\" vindos do norte."
document.write(txt)
JavasScript ir agora exibir a string corretamente: Somos os "Vikings" vindos do norte.
Aqui est outro exemplo:
document.write ("Voce \& eu estamos cantando!")
O exemplo acima ir produzir a seguinte sada:
Voce & eu estamos cantando!
A tabela abaixo lista outros caracteres especiais que podem ser adicionados uma
string de texto com a barra inversa:
CDIGO SADAS
\' Aspas simples
\" Aspas
\& e comercial (&)
\\ Barra inversa (\)
\n Quebra de linha
\r Retorno de linha
\t Tabulao
\b Backspace
\f Alimentao do formulario
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
113
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
BIBLIOGRAFIA
INTERNET:
http://linux.about.com/
http://www.php.net/
http://www.google.com/
http://www.nvu.com
http://pt.wikipedia.org/
LIVROS:
HTML 4: Guia de Consulta Rpida
Autores...: RUBENS PRATES e MARCELO SILVEIRA
Editora...: Novatec
Ano/Edio: 2001 / 1
JavaScript: Guia de Consulta Rpida
Autor.....: EDGARD B. DAMIANI
Editora...: Novatec
Ano/Edio: 2001 / 1
HTML 4: Guia de Consulta Rpida
Autores...: RUBENS PRATES e MARCELO SILVEIRA
Editora...: Novatec
Ano/Edio: 2001 / 1
Desenvolvendo Websites com PHP
Autor.....: JULIANO NIEDERAUER
Editora...: Novatec
Ano/Edio: 2004 / 2
JavaScript: a Bblia
Autor.....: DANNY GOODMAN
Editora...: Campus
Ano?Edio: 2001 / 1
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
114
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
APNDICE: EDITORES WYSIWYG
WYSIWYG o acrnimo da expresso em ingls What You See Is What You Get, que
pode ser traduzido para O que voc v o que voc recebe (OQVVEOQVR). Trata-se de
um mtodo de edio no qual o usurio v o resultado no momento da edio na tela
do computador j com a aparncia do produto final. Um exemplo clssico de editor
WYSIWYG o Microsoft Word, no qual o documento mostrado na tela da mesma forma
que ser impresso.
Dirigido a criao de Web Sites, o mais conhecido atualmente para Windows o
Macromedia Dreamweaver, no qual qualquer pessoa, com o mnimo de conhecimento em
HTML pode fazer muito rapidamente uma pgina ou at um site inteiro para internet.
Porem o alto custo da licena o torna acessvel apenas as grandes empresas de desen-
volvimento.
O Nvu (pronuncia-se Nview) um editor HTML, estilo WYSIWYG, de cdigo livre produ-
zido pela Linspire. Disponvel para Linux, MacOS e Windows, tem como objetivo criar
uma alternativa livre diante dos softwares proprietrios como Macromedia Dreamweaver
e Microsoft FrontPage. Ele baseado no Composer, um editor HTML integrante do Mozilla
e Netscape.
A Cobra Tecnologia produziu uma apostila em portugus do Nvu que ser distribuda
junto com o software no programa do Governo Federal Computador Para Todos. A
apostila tem 21 pginas e destina-se a desenvolvedores e web designers que ainda no
tiveram contato com a ferramenta.
A apostila licenciada pela Creative Commons e pode ser copiada, alterada, ampliada e
redistribuida livremente, desde que mantido o crdito da autoria. Uma copia pode ser
obtida facilmente fazendo uma busca atravs no google (www.google.com.br) ou ainda
pelo endereo: www.nvu.com/guide/apostila_nvu_cobra1-1.0.pdf.
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
115
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
APNDICE: XHTML
De onde veio XHTML?
As tags e atributos do XHTML foram criadas com base nas tags e atributos do HTML.
Logo o XHTML uma linguagem de marcao que estende o HTML e a transformao de
um documento existente de HTML para XHTML uma tarefa bem simples.
Qual a finalidade do XHTML ?
XHTML a sigla em ingls para EXtensible HyperText Markup Language que em portugu-
s resulta em Linguagem Extensvel para Marcao de Hipertexto, escrita para substituir
o HTML e nada mais do que um HTML puro, claro e limpo.
Vantagens de se usar XHTML
A compatibilidade da linguagem XHTML com as futuras aplicaes de usurios, garan-
tindo que as criaes XHTML conservaro se estveis por longos anos.
A edio de um cdigo XHTML existente uma tarefa bem simples por se tratar de uma
escrita limpa.
O tempo de carregamento de uma pgina XHTML mais rpido pois os browsers tem a
interpretar uma pgina limpa sem ter que interpretar e decidir sobre renderizao de
erros de cdigo.
Uma pgina XHTML compatvel com os principais browsers evitando assim um com-
portamento no previsto ao se trocar de browser.
As diferenas entre XHTML e HTML
As principais diferenas so:
todas as tags devem ser escritas em letras minsculas;
os elementos (tags) devem estar convenientemente aninhados;
os documentos devem ser bem formados;
o uso de tags de fechamento obrigatrio;
elementos vazios devem ser fechados;
diferenas para os atributos.
Todas as tags devem ser escritas em letras minsculas
A XHTML case-sensitive (sensvel ao tamanho da letra).
Errado: <DIV><P>Aqui um texto</P></DIV>
Certo: <div><p>Aqui um texto</p></div>
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
116
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
Os elementos (tags) devem estar convenientemente aninhados
Errado: <div><em><p>Aqui um texto negrito</em></p></div>
Certo: <div><em><p>Aqui um texto negrito</p></em></div>
Os documentos devem ser bem formados
Um documento bem formado quando todos os elementos XHTML devem esto correta-
mente aninhados dentro do elemento raiz <html>.
A estrutura bsica do documento deve ser conforme abaixo:
<html>
<head>
...
</head>
<body>
...
</body>
</html>
O uso de tags de fechamento obrigatrio
Em HTML permitido para determinados elementos, omitir-se a tag de fechamento. O
XHTML no permite omisso de qualquer tag de fechamento.
Errado: <p>Um pargrafo.<p>Outro pargrafo.
Certo: <p>Um pargrafo.</p><p>Outro pargrafo.</p>
Elementos vazios devem ser fechados
Elementos vazios devem ter uma tag de fechamento ou a tag de abertura deve terminar
com />. Como exemplo, <br /> ou <hr></hr>.
Errado: Elementos vazios sem terminao
<br>
<hr>
<img src=imagem.gif alt=minha imagem >
Certo: Elementos vazios com terminao
<br />
<hr />
<img src=imagem.gif alt=minhaimagem />
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
117
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
Diferenas para os atributos
Nomes de atributos
Assim como as tags, os atributos tambm so case-sensitive ento deve-se escrever
nomes de atributos em minsculas;
Errado: <td ROWSPAN=3">
Certo: <td rowspan=3">
Valores de atributos
Os valores de atributos devem estar entre aspas;
Errado: <td rowspan=3>
Certo: <td rowspan=3">
Sintaxe dos atributos
A sintaxe para atributos deve ser escrita por completo;
Errado: <input checked />
Certo: <input checked=checked />
Abaixo uma relao dos atributos que se enquadram nesta recomendao
Errado: Certo:
compact compact=compact
checked checked=checked
declare declare=declare
readonly readonly=readonly
disabled disabled=disabled
selected selected=selected
defer defer=defer
ismap ismap=ismap
nohref nohref=nohref
noshade noshade=noshade
nowrap nowrap=nowrap
multiple multiple=multiple
noresize noresize=noresize
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
118
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
Os atributos id e name:
O HTML 4 define o atributo name para os elementos a, applet, form, frame, iframe, img,
e map. HTML 4 tambm introduziu o atribute id. Ambos estes atributos foram projetados
para serem usados como identificadores.
Em XHTML, os identificadores so do tipo ID, e poder existir somente um atributo do
tipo ID por elemento. Documentos XHTML DEVEM usar o atributo id ao definir
identificadores para os elementos listados acima.
Em XHTML o atributo name destes elementos est formalmente em desuso e ser exclu-
do nas verses futuras de XHTML.
Errado: <img src=imagem.gif name=minha_imagem />
Certo: <img src=imagem.gif id=minha_imagem />
Nota: Por razes de compatibilidade com browsers antigos voc pode usar ambos os
atributos como abaixo:
<img src=imagem.gif id=minha_imagem name=minha_imagem />
Pontos de ncoras
Em HTML para criar um ponto de ncora, associamos um nome ao elemento <a>:
<p><a name=topo >Incio</a > do pargrafo..bla...</p>
Em XHTML adicione o atributo id:
<p><a id=topo name=topo >Incio</a > do pargrafo..bla...</p>
O atributo alt para imagens
Em XHTML o uso do atributo alt para imagens obrigatrio
<img src=imagem.gif alt =minha_imagem />
Se tratar-se de uma imagem decorativa pode-se usar o atributo alt vazio:
<img src=imagem.gif alt = />
Elementos obrigatrios em um documento XHTML
obrigatrio a declarao do DOCTYPE assim como a existncias dos elementos <html>
<head> <title> e <body>
Um modelo mnimo de documento XHTML conforme abaixo:
<!DOCTYPE bla..bla..bla>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<title>Ttulo do odcumento</title>
C
a
d
e
r
n
o
s

d
e

I
n
f
o
r
m

t
i
c
a
119
CURSO DE INTRODUO AO WEBSITE
Secretaria de Estado de Educao MG
</head>
<body>
Contedo do documento
</body>
</html>
A declarao DOCTYPE no faz parte da marcao XHTML e como tal no tambm um
elemento, razo pela qual no h necessidade de tag de fechamento.
Para que serve o DOCTYPE ?
A Definio do tipo de documento especifica qual a sintaxe usada no documento. ELA
usada para validar o documento XHTML. O DOCTYPE deve ser sempre a primeira decla-
rao em um documento web.
Os tipos de DOCTYPE
So trs os tipos de DOCTYPE para XHTML:
STRICT
TRANSITIONAL
FRAMESET
<XHTML; 1.0 Strict <!DOCTYPE html PUBLIC -//W3C//DTD XHTML; 1.0 Strict//EN http:/
/www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
Esta a mais rgida das declaraes. Os documentos XHTML no modo Strict no admitem
qualquer item de formatao dentro dos elementos e nem elementos em desuso
deprecated segundo as recomendaes do W3C. So indicados para uso com folhas
de estilo
<XHTML; 1.0 Transitional <!DOCTYPE html PUBLIC -//W3C//DTD XHTML; 1.0 Transitional/
/EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
Esta declarao permite uma maior flexibilidade e indicada para documentos que
ainda utilizem elementos em desuso (deprecated), regras de apresentao embutidas
em tags e tambm para documentos destinados a exibio em browsers sem suporte
para CSS. No admite qualquer tipo de marcao para frames.
<XHTML; 1.0 Frameset <!DOCTYPE html PUBLIC -//W3C//DTD XHTML; 1.0 Frameset//
EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd>
Esta declarao permite tudo da declarao transational e mais os elementos especifico
para frames.