Escolar Documentos
Profissional Documentos
Cultura Documentos
Apostila de HTML
Apostila de HTML
Cadernos de Informatica
Cadernos de Informatica
CURSO DE
CONSTRUO DE
WEB SITES
Glayston Pereira Batista
Coordenador
Carlos Eduardo Hermeto de S Motta
Cadernos de Informtica
APRESENTAO
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 extraturno.
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 capacitados pela SEE. Esses professores iro atuar como multiplicadores, ministrando-os a
outros servidores da escola e aos alunos.
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 professores 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 programas 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
Cadernos de Informtica
CURSO
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 prpria 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 oferecido 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 disponvel.
Neste curso o participante aprender a funo de cada um dos componentes do
microcomputador. Aprender como montar um computador e como configur-lo, instalando o sistema operacional, particionando e formatando discos rgidos, instalando placas de fax/modem, rede, vdeo, som e outros dispositivos. Conhecer, ainda, as tcnicas
de avaliao do funcionamento e configurao de microcomputadores que esteja precisando 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.
Cadernos de Informtica
1. CURSO
SOBRE O
a comunicao entre programas via rede e estender o ambiente atravs de novos programas. 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. Explorando o computador (processos em execuo, conexes abertas). Descrio dos conceitos
de arquivo e diretrio. Operaes simples sobre arquivos e diretrios. Sistema de permisses 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 utilizado 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 execuo 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. Programao da interface grfica. Arrays. Nmeros aleatrios.
DE
INTRODUO
AO
BANCOS
DE
DADOS
Cadernos de Informtica
3. CURSO
4. CURSO
DE
CONSTRUO
DE
WEB SITES
Este curso mostrar aos participantes como construir pginas HTML que forma a estrutura 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 mercado.
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
Cadernos de Informtica
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 interesses 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 produzir 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.
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 principal 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
Cadernos de Informtica
4. CURSO
de sada. Animao bsica. Movimentao de cmera e objetos. Renderizao da animao. Formatos de sada.
5. CURSO
DE
6. CURSO
DE
MULTIMDIA
NA
EDUCAO
O curso est dividido em trs partes: a) utilizao da multimdia no contexto educacional; 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.
Cadernos de Informtica
Apresenta os elementos que compem os sistemas de multimdia, as comunidades virtuais 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.
10
Ementa: Introduo Multimdia e seus componentes. Multimdia na Educao. Comunidades Virtuais de Aprendizagem. Webquest: Desafios Investigativos baseados na
Internet (Web).
Preparao de uma apresentao multimdia.
SUMRIO
Cadernos de Informtica
11
Cadernos de Informtica
12
Cadernos de Informtica
13
Cadernos de Informtica
14
MODULO 1: INTRODUO
1.1 - INTRODUO
AO
AO
WEBDESIGN
HTML
TENTAR?
Primeiro vamos abrir nosso editor de texto. No KDE, v ao menu, e em seguida nas
opes Editors (ou Editores), e em Kwrite.
Cadernos de Informtica
1.2 - VAMOS
15
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>
Cadernos de Informtica
16
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--oque-voc-leva (WYSIWYG - what you see is what you get), sem precisar ao menos ler o
cdigo dos arquivos HTML.
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 podendo 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 arquivo 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.
Cadernos de Informtica
17
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.
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 documento HTML.
Cadernos de Informtica
1.5 - ATRIBUTOS
18
DAS
TAGS
Tags pode possuir atributos. Atributos podem dar informaes adicionais sobre os elementos 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
Cadernos de Informtica
19
MDULO 2: FORMATAO
DE TEXTOS
Cadernos de Informtica
20
2.2 - TENTE
VOC MESMO
EXEMPLOS
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>
um
um
um
um
um
Subttulo</h2>
Subttulo</h3>
Subttulo</h4>
Subttulo</h5>
Subttulo</h6>
Cadernos de Informtica
<h2>Isto
<h3>Isto
<h4>Isto
<h5>Isto
<h6>Isto
21
2.4 - PARGRAFOS
Pargrafos so definidos pela tag <p>.
<p>Isto um pargrafo</p>
<p>Este outro pargrafo</p>
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
Cadernos de Informtica
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.)
22
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 elementos, 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.
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
<sub>subescrito</sub>
<br>
O prximo texto est
<sup>sobrescrito</sup>
</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>).
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 (<sup> e </sup>) e subscrito
(<sub> e </sub>).
Cadernos de Informtica
23
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>
Cadernos de Informtica
<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>
24
</body>
</html>
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>
Cadernos de Informtica
Subttulos:
25
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 alinhado 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>
Cadernos de Informtica
Comentrios ocultos:
26
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>
Cadernos de Informtica
Tag
<html>
<body>
<h1> a <h6>
<p>
<br>
<hr>
<!-->
27
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
Cadernos de Informtica
Uma lista no-numerada uma lista de itens. Os itens da lista so marcados com bullets
(normalmente pequenos circulos).
28
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
o rdered l ist). Cada item da lista
comea com a tag <li> (de list item).
<ol>
<li>Caf</li>
<li>Leite</li>
</ol>
Listas de Definio
Uma lista de definio no uma lista de itens. uma lista de termos e as explicaes
deles.
d efinition l ist). Cada termo da lista
Uma lista de definio comea com a tag <dl> (de d
d
de definio comea com a tag <dt> (de definition tterm). Cada destrio de um termo
da lista comea com a tag <dd>.
<dt>Caf</dt>
<dd>Bebida quente e negra</dd>
<dt>Leite</dt>
<dd>Bebida fria e branca</dd>
</dl>
Cadernos de Informtica
<dl>
29
Cadernos de Informtica
30
<html>
<body>
<h4>Lista Numerada:</h4>
<ol>
<li>Maa</li>
<li>Bananas</li>
<li>Limes</li>
<li>Laranjas</li>
</ol>
<h4>Lista enumaradas por
<ol type="A">
<li>Maa</li>
<li>Bananas</li>
<li>Limes</li>
<li>Laranjas</li>
</ol>
<h4>Lista enumaradas por
<ol type="a">
<li>Maa</li>
<li>Bananas</li>
<li>Limes</li>
<li>Laranjas</li>
</ol>
<h4>Lista enumaradas por
<ol type="I">
<li>Maa</li>
<li>Bananas</li>
<li>Limes</li>
<li>Laranjas</li>
</ol>
<h4>Lista enumaradas por
<ol type="i">
<li>Maa</li>
<li>Bananas</li>
<li>Limes</li>
<li>Laranjas</li>
</ol>
</body>
</html>
letras (maiusculas):</h4>
letras (minusculas):</h4>
Cadernos de Informtica
<html>
<body>
31
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.
Cadernos de Informtica
<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>
32
3.3 - REFERNCIAS
EM
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.
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>
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).
Cadernos de Informtica
33
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>
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>
Cadernos de Informtica
34
<a href="http://www.meusite.com.br/html_tutorial.html#dicas">
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>
<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>
Cadernos de Informtica
<p>
<a href="#C4">Veja tambm o Captulo 4.</a>
</p>
35
3.4 - AS IMAGENS
NO
HTML
Cadernos de Informtica
36
EXEMPLOS
Inserir imagens
Este exemplo demonstra como inserir imagens em sua pgina.
<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>
Cadernos de Informtica
<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>
37
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 alternativo 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>
Cadernos de Informtica
<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>
38
Alinhando Imagens
Este exemplo demonstra como alinhar imagens dentro do texto.
<html>
<body>
<p>
Uma imagem
<img src="hackanm.gif"
<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"
Cadernos de Informtica
39
Cadernos de Informtica
Este exemplo demonstra como exibir um texto alternativo para uma imagem.
40
<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>
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>
<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>
Cadernos de Informtica
Este exemplo demonstra como usar a tag <noframes> para exibir uma pgina diferente
em browsers que no suportam frames.
41
</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:
A Tag Frameset
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 documento "frame_b.htm" ser colocado na segunda coluna:
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
Cadernos de Informtica
Notas Bsicas
42
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 misturar eles em linhas e colunas.
<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 dentro desta, por exemplo.
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.
Cadernos de Informtica
<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>
43
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
Cadernos de Informtica
44
<html>
<body>
<h4>Borda normal:</h4>
<table border="1">
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr>
Cadernos de Informtica
</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>
45
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>
linha 1, celula 2
linha 2, celula 1
linha 2, celula 2
Cadernos de Informtica
46
<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>
Outro Cabealho
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 clula
vazia que quer fazer as bordas visveis, como no exemplo:
Mais Exemplos
Tabela sem borda
Este exemplo demonstra uma tabela sem bordas.
Cadernos de Informtica
<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>
47
<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>
Cadernos de Informtica
<h4>
Esta tabela possui um ttulo
e uma borda grossa:
</h4>
48
<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>
<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>
Cadernos de Informtica
49
<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
Cadernos de Informtica
Este exemplo demonstra como usar o cellpadding para criar uma margem dentro da
tabela entre o contedo das celulas e a sua borda.
50
<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>
Cadernos de Informtica
<html>
<body>
51
Cadernos de Informtica
Este exemplo demonstra como usar o atributo "align" para alinhar os contedos das
celulas, para criar uma tabela mais agradvel.
52
<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>
<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="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>
Cadernos de Informtica
<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>
53
<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>
Cadernos de Informtica
<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>
54
<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>
<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>
Cadernos de Informtica
</body>
</html>
55
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
As tags HTML foram originalmente planejadas para definir o contedo de um documento. 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 responsvel 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
Cadernos de Informtica
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.
56
6.3 SINTAXE
DO
CSS
Syntax
A sintaxe do CSS feita de trs partes: um seletor, uma propriedade e um valor:
seletor {propriedade: valor}
O seletor normalmente o elemento/tag do HTML a definir, j a propriedade o atributo 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}
Nota: Se deseja especificar mais de uma propriedade, separe-as utilizando o ponto-evrgula. 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
}
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 documento: um justificado a direita e outro centralizado. Eis como podemos fazer estes
estilos:
p.direita {text-align: right}
p.centro {text-align: center}
Cadernos de Informtica
O seletor de classe
57
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:
<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}
Cadernos de Informtica
A regra de estilo abaixo ser aplicada a qualquer elemento cujo atributo id seja "verde":
58
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
}
6.4 ASSOCIANDO
UM
CSS
HTML
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 diversas 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:
Cadernos de Informtica
59
<head>
<link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
Cadernos de Informtica
60
<head>
<style type="text/css">
<!-hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
</head>
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>
Cadernos de Informtica
Veja no Apendice A as diversas propriedades e valores que podem ser usados no CSS.
61
ENTRADAS
DE
DADOS (INPUT)
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>
7.3 - ENTRADA
DE
DADOS (INPUT)
7.6 - O
ATRIBUTO
ACTION
E O BOTO
SUBMIT
DE UM FORMULRIO
Cadernos de Informtica
64
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.
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>
<html>
<body>
<form>
<select
<option
<option
<option
name="carros">
value="volvo">Volvo
value="bmw">BMW
value="fiat">Fiat
Cadernos de Informtica
Este exemplo demonstra como criar uma caixa drop-down em uma pgina HTML. Uma
caixa drop-down uma lista de seleo (select).
65
<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>
Cadernos de Informtica
Boto
66
Este exemplo demonstra como criar um boto. Em um boto podemos definir nosso
prprio texto.
<html>
<body>
<form>
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.
<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>
Cadernos de Informtica
<html>
<body>
67
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>
Cadernos de Informtica
Tags de Formulrio
68
TAG
<form>
DESCRIO
Define um formulrio para insero de dados
<input>
<textarea>
<label>
<fieldset>
Define um rtulo
Define um bloco de campos
<legend>
<select>
<optgroup>
<option>
<button>
MODULO 8: INTRODUO
AO
JAVASCRIPT
QUE O
JAVASCRIPT?
JavaScript pode reagir a eventos - O JavaScript pode ser preparado para executar
quanto alguma coisa acontece, como quando a pgina carregada ou quando o usurio 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
Cadernos de Informtica
8.1 - O
69
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>
Cadernos de Informtica
</body>
</html>
70
8.3 - ENTENDENDO
EXEMPLO
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 necessrios se voc quer adicionar mais de um comando por linha.
Cadernos de Informtica
71
COLOCAR...
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()">
Cadernos de Informtica
</body>
</html>
72
Body section
Executa um script que foi colocado na seo body.
<html>
<head>
</head>
<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>
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 geralmente contedo da pgina.
Cadernos de Informtica
<html>
<head>
<script type="text/javascript">
....
</script>
</head>
73
<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>
Cadernos de Informtica
<html>
<head>
<script src="xxx.js"></script>
</head>
<body>
</body>
</html>
74
Nota: Lembre de colocar o script exatamente onde voc normalmente colocaria o script
caso no fosse usar o arquivo externo!
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:
Cadernos de Informtica
75
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 quando a pgina fechada.
Comando If...Else (Se...senao)
Comandos condicionais no JavaScript so usados para executar operaes diferentes baseadas em condies diferentes.
8.7 - EXEMPLOS
Comando if (Se...)
Cadernos de Informtica
76
<html>
<body>
<script type="text/javascript">
var data = new Date()
var hora = data.getHours()
if (hora < 12)
{
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>
Se a hora do seu browser menor que 12,
voc receber a mensagem "Bom Dia".
Seno receber a mensagem "Boa Tarde".
</p>
</body>
</html>
Cadernos de Informtica
<p>
Este exemplo demonstra o comando If...Else.
</p>
77
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
Cadernos de Informtica
78
<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>
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>
<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>
Cadernos de Informtica
Exemplo 2
79
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 operao 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>
Cadernos de Informtica
Sintaxe
80
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
}
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:
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 baseando-se no dia da semana atual. Note que Domingo=0, Segundafeira=1, Tera-feira=2, etc.</p>
</body>
</html>
Cadernos de Informtica
<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:
81
QUANDO USAR
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.
Cadernos de Informtica
Exemplo
82
<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>
EM
JAVASCRIPT
OPERADORES ARITIMTICOS
OPERADOR
DESCRIO
+
ADIO
-
SUBTRAO
MULTIPLICAO
DIVISO
MODULO
(RESTO DA DIVISO)
++
INCREMENTAR
(EM 1)
DECREMENTAR
(EM 1)X--
--
OPERADORES DE ATRIBUIO
OPERADOR
EXEMPLO
=
X=Y
+=
X+=Y
-=
X-=Y
*=
X*=Y
/=
X/=Y
%=
X%=Y
OPERADORES DE COMPARAO
OPERADOR
DESCRIO
==
IGUAL A
===
IGUAL A
!=
>
<
>=
<=
DIFERENTE
MAIOR QUE
MENOR QUE
MAIOR OU IGUAL A
MENOR OU IGUAL A
EXEMPLO
X=2
Y=2
X=5
Y=2
X- Y
X=5
Y=4
X*Y
15/5
5/2
5%2
10%8
10%2
X=5
X++
X=5
O MESMO
X=Y
X=X+Y
X=X- Y
X=X*Y
X=X/Y
X=X%Y
RESULTADO
4
3
20
3
2.5
1
2
0
X=6
X=4
DE...
EXEMPLO
5==8 RETORNA FALSO
(CHECA VALOR E TIPO)
X=5
Y="5"
X==Y RETORNA VERDADEIRO
X===Y RETORNA FALSO
5!=8 RETORNA VERDADEIRO
5>8 RETORNA FALSO
5<8 RETORNA VERDADEIRO
5>=8 RETORNA FALSO
5<=8 RETORNA VERDADEIRO
Cadernos de Informtica
8.9 - OPERADORES
83
OPERADORES LOGICOS
OPERADOR
DESCRIO
&&
E
||
OU
NO
EXEMPLO
X=6
Y=3
(X < 10 && Y > 1) RETORNA VERDADEIRO
X=6
Y=3
(X==5 || Y==5) RETORNA FALSO
X=6
Y=3
!(X==Y) RETORNA VERDADEIRO
Cadernos de Informtica
Exemplos
84
Alert box
<html>
<head>
<script type="text/javascript">
function disp_alert()
{
alert("Esta uma caixa de alerta!!")
}
</script>
</head>
<body>
<form>
<input type="button" onclick="disp_alert()" value="Mostra uma
caixa de alerta">
</form>
</body>
</html>
<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>
Cadernos de Informtica
Confirm box
85
<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
xe:
Sintaxe:
Cadernos de Informtica
alert("texto")
86
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.
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")
Cadernos de Informtica
<form>
<input type="button"
onclick="minhafuncao()"
value="Chamar funcao">
</form>
87
<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 mostrar a o parmetro.</p>
</body>
</html>
Cadernos de Informtica
<input type="button"
onclick="minhafuncao('Boa Tarde!')"
value="De tarde">
</form>
88
<p>
Dependendo do botao que clicar, uma mensagem diferente aparecera,
executando a mesma funcao.
</p>
</body>
</html>
</html>
Para evitar que o browser execute um script quando a pgina carrega, voc deve escrever 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-
Cadernos de Informtica
<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>
89
Se a linha: alert("Este texto foi escrito pelo JavaScript!!"), no exemplo acima, no fosse 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
}
Cadernos de Informtica
Nota: Uma funo sem parmetros devem incluir os parenteses () depois do nome da
funo:
90
function nome()
{
cdigo a ser executado
}
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
Cadernos de Informtica
<p>Explicacao:</p>
91
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 qualquer 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>
Cadernos de Informtica
Resultado
92
O
O
O
O
O
O
O
O
O
O
O
numero
numero
numero
numero
numero
numero
numero
numero
numero
numero
numero
e
e
e
e
e
e
e
e
e
e
e
0
1
2
3
4
5
6
7
8
9
10
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>
<html>
<body>
<script type="text/javascript">
senha=prompt("Senha","")
while (senha!="senha")
{
senha=prompt("Senha","")
}
Cadernos de Informtica
93
</script>
</body>
</html>
O lao while
O lao while usado quando queremos que um bloco de cdigo continue sendo executado 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 repetindo 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>
Cadernos de Informtica
Resultado
94
O
O
O
O
O
O
O
O
O
O
O
numero
numero
numero
numero
numero
numero
numero
numero
numero
numero
numero
e
e
e
e
e
e
e
e
e
e
e
0
1
2
3
4
5
6
7
8
9
10
8.13 - EVENTOS
EM
JAVASCRIPT
Um clique do mouse
Cadernos de Informtica
95
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, seno 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 quando o mouse est acima do link:
<a href="http://www.google.com"
Cadernos de Informtica
96
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 possibilidades ao webdesigner.
9.1 - O
QUE
PHP?
PHP suporta varios bancos de dados (MySQL, Informix, Oracle, Sybase, Solid,
PostgreSQL, Generic ODBC, etc.)
Porqu PHP?
PHP
9.2 - INSTALANDO
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 nenhum download por parte do usurio.
PHP (NO
SERVIDOR)
Do que precisamos?
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
Cadernos de Informtica
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.
97
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-evrgula 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.
Cadernos de Informtica
Abaixo, o script PHP atribui a string "Isto um texto PHP" variavelb chamada $txt:
98
<html>
<body>
<?php
$txt="Isto um texto PHP";
echo $txt;
?>
</body>
</html>
9.5 - COMENTRIOS
EM
PHP
9.6 - OPERADORES
DO
PHP
OPERADORES ARITIMTICOS
DESCRIO
ADIO
SUBTRAO
MULTIPLICAO
DIVISO
MODULO (RESTO
++
INCREMENTO (EM 1)
--
DECREMENTO (EM 1)
DA DIVISO)
EXEMPLO
X=2
X+2
X=2
5-X
X=4
X*5
15/5
5/2
5%2
10%8
10%2
X=5
X++
X=5
X--
RESULTADO
4
3
20
3
2.5
1
2
0
X=6
X=4
Cadernos de Informtica
OPERADOR
+
99
OPERADORES DE ATRIBUIO
OPERADOR
EXEMPLO
=
+=
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
O MESMO DE...
COMPARAO
OPERADOR
==
DESCRIO
IGUAL
EXEMPLO
5==8 RETORNA FALSO
!=
>
<
DIFERENTE DE
MAIOR QUE
MENOR QUE
>=
<=
MAIOR OU IGUAL A
MENOR OU IGUAL A
5>=8
5<=8
RETORNA
RETORNA
FALSO
VERDADEIRO
OPERADORES LGICOS
OPERATOR
&&
||
DESCRIPTION
E
EXAMPLE
X=6
Y=3
OU
(X < 10 &&
X=6
Y=3
NO
(X==5 || Y==5)
X=6
Y=3
Cadernos de Informtica
!(X==Y)
100
9.7 - COMANDOS
CONDICIONAIS EM
> 1)
RETORNA
RETORNA
RETORNA
VERDADEIRO
FALSO
VERDADEIRO
PHP
O comando If
Se queremos que algum cdigo seja executado somente quando uma condio verdadeira 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 }:
O comando Switch
Se voc deseja selecionar um bloco de cdigo entre vrios, deve usar o comando Switch.
Sintaxe
Cadernos de Informtica
<html>
<body>
<?php
$x=10;
if ($x==10)
{
echo "Ola<br>";
echo "Bom dia<br>";
}
?>
</body>
</html>
101
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
Cadernos de Informtica
102
O comando While
O comando while ir executar um bloco de cdigo enquanto uma condio for verdadeira.
Sintaxe
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
<html>
<body>
<?php
for ($i=1; $i<=5; $i++)
{
echo "Isto um texto PHP!<br>";
}
?>
</body>
</html>
Cadernos de Informtica
103
9.9 - FORMULARIOS
PHP
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>
Cadernos de Informtica
104
Nota: Se o atributo method do formulrio GET, ento os dados do formulrio estaro na varivel $_GET e no na variavel $_POST.
QUE
SEU SITE
FTP?
http://www.meusite.com.br
ftp://ftp.meusite.com.br
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 difceis, ou muitas vezes impossvel, e os downloads no so protegidos (no recomendado para upload ou download de arquivos grandes).
Cadernos de Informtica
10.2 - O
105
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 exibidos 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 sincronizao. 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, mantm as duas pastas sempre atualizadas e idnticas, automaticamente.
10.4 - SERVIDORES
PARA
HOSPEDAGEM
DE
WEB SITES
Cadernos de Informtica
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 contrrio esses pontos devem ser observados:
106
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;
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 propaganda seja inserido no site, ou outra forma de pagamento semelhante; outros servidores possuem formas de pagamento mensais, que devem ser compatveis ao oramento do site.
APNDICE A: REFERNCIA
PROPRIEDADE BACKGROUND
DE
DO
CSS
CSS
DESCRIO
VALORES
background
background-color
background-image
background-repeat
background-attachment
background-position
Indica se a imagem de fundo
fixa ou ela pode se movimentar
com o resto da pgina (scroll).
scroll
fixed
background-color
color-rgb
color-hex
color-name
transparent
background-image
url
none
background-position
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
background-repeat
repeat
repeat-x
repeat-y
no-repeat
DE
TEXTO CSS
Cadernos de Informtica
PROPRIEDADES
background-attachment
107
PROPERTY
color
direction
letter-spacing
VALUES
color
ltr
rtl
normal
length
left
right
center
justify
none
underline
overline
line-through
blink
length
%
none
capitalize
uppercase
lowercase
normal
pre
nowrap
normal
length
text-align
text-decoration
text-indent
text-transform
PROPRIEDADES
DESCRIPTION
white-space
word-spacing
DE
FONTE CSS
Cadernos de Informtica
108
PROPRIEDADE
font
DESCRIO
Propriedade para modificar varias
propriedades do texto
font-family
font-size
VALORES
font-style
font-variant
font-weight
font-size/line-height
font-family
caption
icon
menu
message-box
small-caption
status-bar
family-name
generic-family
xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%
PROPRIEDADE
font-size-adjust
DE
font-style
font-variant
font-weight
VALORES
none
number
normal
wider
narrower
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded
normal
italic
oblique
normal
small-caps
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
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
border
DESCRIPTION
Propriedade bsica de borda
border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
border-color
VALUES
border-width
border-style
border-color
border-bottom-width
border-style
border-color
border-color
border-style
thin
medium
thick
length
color
Cadernos de Informtica
PROPRIEDADE
font-stretch
DESCRIO
Especifica um valor de aspectopara um elemento
que ir preservar o x-height da fonte
Condensa ou espande a fonte atual
109
Cadernos de Informtica
110
PROPERTY
DESCRIPTION
VALUES
border-left
border-left-width
border-style
border-color
border-left-color
border-color
border-left-style
border-style
border-left-width
thin
medium
thick
length
border-right
border-right-width
border-style
border-color
border-right-color
border-color
border-right-style
border-style
border-right-width
thin
medium
thick
length
border-style
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
border-top
border-top-width
border-style
border-color
border-top-color
border-color
border-top-style
border-style
border-top-width
thin
medium
thick
length
border-width
thin
medium
thick
length
APNDICE B: REFERNCIA
DE
EVENTOS JAVASCRIPT
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 elemento HTML. Abaixo est uma lista de atributos que podem ser inseridos em tags HTML para
definir as aes dos eventos.
ATRIBUTO
onabort
onblur
onchange
onclick
ondblclick
onerror
onfocus
onkeydown
onkeypress
onkeyup
onload
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup
onreset
onresize
onselect
O texto selecionado
onsubmit
onunload
Cadernos de Informtica
MANIPULAO
111
APENDICE C: CARACTERES
ESPECIAIS NO
JAVASCRIPT
Em JavaScript voc pode adicionar caracteres especiais uma string de texto usando a
barra inversa.
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)
Cadernos de Informtica
A tabela abaixo lista outros caracteres especiais que podem ser adicionados uma
string de texto com a barra inversa:
112
CDIGO
SADAS
\'
Aspas simples
\"
Aspas
\&
e comercial (&)
\\
\n
Quebra de linha
\r
Retorno de linha
\t
Tabulao
\b
Backspace
\f
Alimentao do formulario
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: a Bblia
Autor.....: DANNY GOODMAN
Editora...: Campus
Ano?Edio: 2001 / 1
Cadernos de Informtica
Ano/Edio: 2004 / 2
113
Cadernos de Informtica
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.
114
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 portugus 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, garantindo 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 comportamento 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;
<div><p>Aqui um texto</p></div>
Cadernos de Informtica
115
Cadernos de Informtica
<hr>
116
<td rowspan=3">
Valores de atributos
Os valores de atributos devem estar entre aspas;
Errado: <td rowspan=3>
Certo:
<td rowspan=3">
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
Cadernos de Informtica
117
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 excludo nas verses futuras de XHTML.
Errado: <img src=imagem.gif name=minha_imagem />
Certo:
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
Cadernos de Informtica
118
</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 declarao 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>
<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.
Cadernos de Informtica
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.
119