Você está na página 1de 147

Desenho de paginas

Web
1.Introdução a Internet e
a World Wide Web
1.Introdução a Internet e
a World Wide Web
 A Internet é um conglomerado de redes na escala
mundial de milhões de computadores interligados
que permite o acesso a informações e todo tipo de
transferência de dados.
1.Introdução a Internet e
a World Wide Web
Serviços disponíveis na internet
 Web ou WWW
 o acesso remoto a outras máquinas (Telnet e SSH)
 transferência de arquivos (FTP)
 correio electrónico (e-mail normalmente através dos
protocolos POP3 e SMTP)
 boletins electrônicos (news ou grupos de notícias)
 bate-papo online (chat), mensagens instantâneas
(ICQ, YIM, Jabber, MSN Messenger, Blogs),
Skype,Orkut, etc.
1.Introdução a Internet e
a World Wide Web
Historia da internet
 O que hoje forma a Internet, começou em 1969 com a
ARPANET, uma subdivisão do Departamento de
Defesa dos EUA.
 Ela foi criada para a guerra, pois com essa rede
promissora, os dados valiosos do governo americano
estariam espalhados em vários lugares, ao invés de
centralizados em apenas um servidor. Isso evitaria a
perda desses dados no caso de, por exemplo, uma
bomba explodisse no campus.
 Em seguida, ela foi usada inicialmente pelas
universidades, onde os estudantes, poderiam trocar
de forma ágil para a época, os resultados de seus
estudos e pesquisas.
1.Introdução a Internet e
a World Wide Web
"a Web" ou "WWW“
 ("rede do tamanho do mundo", traduzindo
literalmente) é uma rede de computadores
na Internet que fornece informação sob
forma de hipermídia, como vídeos, sons,
hipertextos e figuras.
 Para ver a informação, pode-se usar um
software chamado navegador (browser)
para descarregar/download informações
(chamadas "documentos" ou "páginas") de
servidores de internet (ou "sites") e mostrá-
los na ecran do usuário.
1.Introdução a Internet e
a World Wide Web
"a Web" ou "WWW“
 O usuário pode então seguir os links na página para outros
documentos. O acto de seguir links é normalmente
chamado de "navegar" ou "surfar" na Web.
 A Web foi criada em um projeto no CERN em 1990, onde
Tim Berners-Lee construiu o sistema protótipo que se
tornou um modelo do que hoje é a World Wide Web. O
objectivo inicial do sistema foi de tornar mais fácil a
compartilha de documentos de pesquisas entre colegas.
 A funcionalidade da Web é baseada em três padrões:
 a URL, que especifica como cada página de informação
recebe um "endereço" único onde pode ser encontrada;
 HTTP, que especifica como o navegador e servidor enviam
informação um ao outro (protocolo); e
 HTML, um método de codificar a informação de modo que
possa ser exibida numa grande quantidade de dispositivos.
Programação HTML
(básica)
2-1. O mínimo dum
Documento HTML
 Para denotar os vários elementos do
documento HTML por ex. tabelas, parágrafos,
listas, linhas horizontais, etc., devem ser
usadas etiquetas que serão reconhecidas pelo
Browser.
 As etiquetas consistem dum caracter “<”,
seguida do nome da etiqueta, e terminam pelo
caracter “>”.
2-1. O mínimo dum
Documento HTML
 As Etiquetas são normalmente usadas aos
pares, como por exemplo: <b> e </b>, para
iniciar e terminar a instrução. A etiqueta de
fecho é igual à de abertura, excepto o caracter
“/” que procede o nome da etiqueta, veja o
exemplo 1.
 Algumas etiquetas de abertura podem conter
atributos, com informação adicional incluída.
Por exemplo, pode-se especificar o tamanho da
fonte a usar, a posição de uma imagem, etc.
2-1. O mínimo dum
Documento HTML
 Qualquer documento HTML, deverá conter no
mínimo as etiquetas <html>, <head>, <title> e
<body> e as suas correspondentes etiquetas
de fecho.
2-1. O mínimo dum
Documento HTML
Exemplo 1 - Exemplo de código fonte HTML

<html> Eiqueta de Abertura


<head>
<TITLE>A Minha Primeira Página</TITLE>
</head>
<body>
<H1>Bem-Vindo ao Maravilhoso Mundo </H1>
<br><b>WWW</b>.
<P>Este é o meu primeiro parágrafo</P>
<P>E, este é o segundo.</P>
</body>
</html> Etiqueta de Fecho
2-1. O mínimo dum
Documento HTML
Fig. 1 - Versão formatada do Exemplo 1
Barra de
Título

URL

Corpo

Nota: As etiquetas HTML não são “Case Sensitive”,


ou seja <HTML> é equivalente à <html> ou <HtMl>.
2-2. Sintaxe da Linguagem
HTML
 HTML
Este elemento indica ao Browser que o ficheiro
contém informação codificada em HTML.

 HEAD
O elemento Head identifica a primeira parte do
documento HTML que contém o título.
2-2. Sintaxe da Linguagem
HTML
 TITLE
O elemento Title contém o título do documento.
O título é mostrado na Barra de Título no topo do
Browser. (Veja a figura 1.)
O título é muito importante para a identificação da
página em máquinas de busca (como por
exemplo o GOOGLE).
2-2. Sintaxe da Linguagem
HTML
 BODY
A segunda e a maior secção de um documento
HTML é o corpo, o qual contém o conteúdo do
documento.
Todas as etiquetas explicadas em baixo,
encontram-se dentro do corpo (veja a figura 1).
2-2. Sintaxe da Linguagem
HTML
 Cabeçalhos
A linguagem HTML possui 6 níveis de cabeçalhos,
numerados de 1 à 6, sendo 1 o maior.
A sintaxe do elemento Cabeçalho é
<hy>Texto_do_Cabeçalho</hy>, onde y é um
número de 1 à 6.
2-2. Sintaxe da Linguagem
HTML
Exemplo 2 - Os seis níveis de cabeçalhos
<html>
<head>
<TITLE>Níveis de Cabeçalhos</TITLE>
</head>
<body>
<p><h1>Cabeçalho de nível 1</h1></p>
<p><h2>Cabeçalho de nível 2</h2></p>
<p><h3>Cabeçalho de nível 3</h3></p>
<p><h4>Cabeçalho de nível 4</h4></p>
<p><h5>Cabeçalho de nível 5</h5></p>
<p><h6>Cabeçalho de nível 6</h6></p>
</body>
</html>
2-2. Sintaxe da Linguagem
HTML
Fig. 2 - Versão formatada do Exemplo 2
2-2. Sintaxe da Linguagem
HTML
 Parágrafos
Os parágrafos em HTML são indicados com a
etiqueta <p>
2-2. Sintaxe da Linguagem
HTML
Exemplo 3 - Exemplos de parágrafos
<html>
<head>
<TITLE>Níveis de Cabeçalhos</TITLE>
</head>
<body>
<p>Primeiro parágrafo</p>
<p>Segundo
parágrafo</p>
<p>Terceiro parágrafo</p>
</body>
</html>
2-2. Sintaxe da Linguagem
HTML
Fig. 3 - Versão formatada do Exemplo 3

NOTA: A etiqueta de fecho </p> pode ser omitida.


Contudo ela é útil quando se pretende usar atributos como por exemplo,
para centralizar horizontalmente um parágrafo no meio da janela do Browser.
A sintaxe dos atributos é:
<etiqueta_de_abertura atributo2=”nome_do_tributo1
atributo1=”nome_do_tributo2>.
2-2. Sintaxe da Linguagem
HTML
Exemplo 4 - Uso da etiqueta <p> com atributos
<html>
<head>
<TITLE>Níveis de Cabeçalhos/TITLE>
</head>
<body>
<p>Primeiro parágrafo</p>
<p>Segundo parágrafo</p>
<p>Terceiro parágrafo</p>
<p align="center">Este parágrafo aparece centrado</p>
</body>
</html>
2-2. Sintaxe da Linguagem
HTML
Fig. 4 - Versão formatada do Exemplo 4
2-2. Sintaxe da Linguagem
HTML
 Listas
O HTML suporta principalmente listas
enumeradas. As listas também podem ser
integradas.

a) Listas Enumeradas (ordenadas)


As listas enumeradas, também chamadas listas ordenadas,
usam a etiqueta <OL>, sendo os seus ítems referenciados
pela etiqueta <LI>.
2-2. Sintaxe da Linguagem
HTML
Exemplo 5 - Listas Enumeradas (ordenadas)
<html>
<head>
<TITLE>Listas Enumeradas (ordenadas)</TITLE>
</head>
<body>
<OL>
<LI> Jose
<LI> Antonio
<LI> Ana
</OL>
</body>
</html>
2-2. Sintaxe da Linguagem
HTML
Fig. 5 - Versão formatada do Exemplo 5
2-2. Sintaxe da Linguagem
HTML
b) Listas Não numeradas
As listas não numeradas, são idênticas às ordenadas,
exceptuando-se o facto de usarem a etiqueta <UL>
sendo os seus ítems referenciados pela etiqueta <LI>.
2-2. Sintaxe da Linguagem
HTML
Exemplo 6 - Listas não numeradas
<html>
<head>
<TITLE>Listas Anumeradas</TITLE>
</head>
<body>
<UL>
<LI> Jose
<LI> Antonio
<LI> Ana
</UL>
</body>
</html>
2-2. Sintaxe da Linguagem
HTML
Fig. 6 - Versão formatada do Exemplo 6
2-2. Sintaxe da Linguagem
HTML
c) Listas Integradas
As listas podem ser integradas.

Exemplo 7 – Integração de listas

<html>
<head>
<TITLE>Listas Integradas</TITLE>
</head>

(Continua para *1 na proxima página.)


2-2. Sintaxe da Linguagem
HTML
(*1)
<body>
<UL>
<LI> Algumas Províncias de Moçambique:
<UL>
<LI> Nampula
<LI> Tete
<LI> Manica
</UL>
<LI> Duas Cidades de Moçambique:
<OL>
<LI> Maputo
<LI> Beira
</OL>
</UL>
</body>
</html>
2-2. Sintaxe da Linguagem
HTML
Fig. 7 - Versão formatada do Exemplo 7
2-2. Sintaxe da Linguagem
HTML
 Texto Pré-formatado
A etiqueta <pre> gera um texto numa fonte fixa
em largura. Esta etiqueta serve também para criar
espaços, novas linhas e tabs. De uma forma
resumida, pode dizer-se que o texto é visualizado
no Browser exactamente como é escrito no
código fonte.
2-2. Sintaxe da Linguagem
HTML
Exemplo 8 – Exemplo de Texto Pre-formatado
<html>
<head>
<TITLE>Exemplo de Texto Pre-formatado</TITLE>
</head>
<body>
<PRE>
Joao
Av.Julius Nyerere 257, Maputo, Mozambique
Takuya
Shibuya-ku, Tokyo, Japan
</PRE>
</body>
</html>
2-2. Sintaxe da Linguagem
HTML
Fig. 8 - Versão formatada do Exemplo 8
2-2. Sintaxe da Linguagem
HTML
 Mudança Forçada de Linha
A etiqueta <br> força uma mudança de linha,
sem no entanto deixar um espaço em branco
entre as linhas.
2-2. Sintaxe da Linguagem
HTML
Exemplo 9 – Mudança de Linha
<html>
<head>
<TITLE>Mudança de Linha</TITLE>
</head>
<body>
Rua Frei Nicolau, n. 19<br>
Maputo<br>
cell: 082-887373772
</body>
</html>
2-2. Sintaxe da Linguagem
HTML
Fig. 9 - Versão formatada do Exemplo 9
2-2. Sintaxe da Linguagem
HTML
 Linhas Horizontais
A etiqueta <HR> produz uma linha horizontal na
janela do Browser. É possível variar a espessura
da linha, bem como a sua largura com os
atributos size e width.
2-2. Sintaxe da Linguagem
HTML
Exemplo 10 – Linhas Horizontais
<html>
<head>
<TITLE>Linhas Horizontais</TITLE>
</head>
<body>
<HR SIZE=4 WIDTH="50%">
</body>
</html>
2-2. Sintaxe da Linguagem
HTML
Fig. 10 - Versão formatada do Exemplo 10
2-2. Sintaxe da Linguagem
HTML
Exemplo 10-2 – Linhas Horizontais-2
<html>
<head>
<TITLE>Linhas Horizontais</TITLE>
</head>
<body>
<hr>
<hr width=200 align=left>
<hr width="50%" align=center>
<hr width=200 align=right>
<hr width=200 size=10>
<hr width=300 size=5 noshade>
<hr width=100 size=25 color=red>
</body>
</html>
2-2. Sintaxe da Linguagem
HTML
Fig. 10 - Versão formatada do Exemplo 10
2-2. Sintaxe da Linguagem
HTML
 Formatação de Caracteres
O HTML possui dois tipos de estilos para palavras
individuais ou frases, nomeadamente Estilos
Lógicos e Físicos. Os estilos Lógicos são usados
de acordo com o seu sentido, enquanto que os
estilos Físicos indicam a aparência de uma
secção específica.
2-2. Sintaxe da Linguagem
HTML
 Estilos Lógicos
 <DFN> - para uma palavra sendo definida. Geralmente
representado em itálico (Netscape é um Browser)
 <EM> - para dar ênfase. Geralmente representado em itálico
( esta área só pode ser preenchida por pessoas autorizadas)
 <CITE> - para títulos de filmes, livros, etc. Geralmente
representado em itálico (Os Bravos do Pelotão)
 <CODE> - para códico de Computador (O ficheiro <stdio.h>)
 <KBD> - para algo relacionado com o teclado (Insira passwd
para mudar a sua senha)
 <STRONG> - para uma forte ênfase, geralmente representado
em bold ( NOTA: Deve sempre preencher o formulário).
 <VAR> - para variáveis (rm ficheiro apaga o ficheiro)
2-2. Sintaxe da Linguagem
HTML
 Estilos Físicos
 <B> texto em bold
 <I> texto em itálico

 Algumas Sequências de Escape


 &lt; - sequência de escape para “<“
 &gt; - sequência de escape para “>“
 &amp; - sequência de escape para “&”
2-3. Links

 A grande vantagem do HTML está na


habilidade de ligar uma parte do texto ou
imagem a outro documento ou secção de um
documento.
 Os Browsers normalmente destacam o referido
texto ou imagem com cores e/ou sublinhados,
indicando deste modo tratar-se de um link de
hiper-texto (frequentemente chamado hiper-link
ou simplesmente link ou ainda âncora).
2-3. Links

Exemplo 11 – Veja o seguinte exemplo:

<a href=”ficheirox.html”> Link para o Ficheiro X </a>

Início da âncora Texto de Hiper-link

Ficheiro alvo Fim da âncora


2-3. Links
Fig. 11 - Versão formatada do exemplo anterior

Ao clicar-se no link, navegar-se-á ao ficheiro ficheirox.html


que se encontra no mesmo directório do ficheiro actual.
2-3. Links

2.3.1 Endereços Relativos


Vs Endereços Absolutos

Os endereços relativos são mais usados durante à ligação à


ficheiros que se encontram num local relativo ao ficheiro actual,
enquanto que os endereços absolutos, são usados quando se
pretende fazer uma ligação à um ficheiro que não esteja
directamente relacionado ao ficheiro actual.
Por exemplo, quando se pretende fazer um link à página
http://www.mozambique.mz/index.htm, a partir da nossa, será
obrigatório usar o endereço absoluto, ou seja,
http://www.mozambique.mz/index.htm.
2-3. Links

Fig. 12 – Exemplos de links relativos e absolutos

Há “ficheiro1.html”
dentro do directório
arquivos.
2-3. Links

 Ligação ao ficheiro ficheiro2.html a partir de index.html:


<a href=”ficheiro2.html”> Link para o Ficheiro2.html </a>
 Ligação ao ficheiro ficheiro1.html a partir de index.html:
< a href=”arquivos/ficheiro1.html”> Link para o Ficheiro1.html </a>
 Ligação ao ficheiro index.html a partir de ficheiro1.html:
< a href=”../index.html”> Link para o Ficheiro index.html </a>
 Ligação ao ficheiro http://www.mozambique.mz/index.htm
a partir de index.html:
< a href=”http://www.mozambique.mz/index.htm”>
Link para o Ficheiro www.mozambique.mz/index.htm </a>

Nos exemplos acima, pode-se ver que os primeiros três são links
relativos, enquanto que o último é um link absoluto.
2-3. Links

2-3-2. Links à Locais Específicos

a) Links entre secções de documentos diferentes

As âncoras podem também ser usadas para mover o leitor


a uma secção particular num documento
(tanto o mesmo como outro qualquer).
2-3. Links
Suponha que pretenda fazer uma ligação a partir do documento
(documentoA.html) à uma secção específica de outro documento
documentoB.html):

Introduza o seguinte código no documentoA.html:


Não se esqueça de visitar a <a href="documentoB.html#downloads">
secção de downloads do nosso site </a>.

Em seguida, introduza o seguinte código no


documentoB.html:
<h2><a name="downloads">Secção de Downloads</a></h2>

Assim, o leitor poderá navegar à secção de downloads do


documentoB.html a partir do documentoA.html.
2-3. Links

b) Links entre secções de um mesmo documento

Aqui a técnica é a mesma, excepto a omissão do nome do


documento.

Introduza o seguinte código no documento corrente:


<h2><a name="downloads">Secção de Downloads</a></h2>

Em seguida, introduza o seguinte código:


Não se esqueça de visitar a <a href="#downloads"> secção de
downloads do nosso site</a>.
2-3. Links

c) Mailto

O “mailto” é usado no envio de E-mail.


Veja o exemplo:

< a href="mailto:ana@mangal.org.mz">Departamento de Vendas</a>


2-4. Imagens

2-4-1. Formatos de Ficheiros Gráficos


 Existem entre outros dois tipos de imagens usadas na
Web, nomeadamente imagens de tipo vectorial (vector
graphics) e imagens de tipo Bitmap.
 O primeiro tipo tem a vantagem de se lhes poder alterar
o tamanho sem perderem qualidade. São exemplos,
gráficos construídos em programas como o Flash,
Freehand, Illustrator, etc.
 O segundo tipo não possui a vantagem do grupo anterior,
uma vez que os seus gráficos são constituídos de pixels,
são exemplos os formatos GIF, JPEG, PNG.
2-4. Imagens

Para incluir uma imagem numa página,


é usada a etiqueta <img>.

A sintaxe é a seguinte:

<img src=Nome_da_Imagem>

onde Nome_da_Imagem é a URL da Imagem.


2-4. Imagens

2-4-2. Atributos de Imagens

height=n onde n é a altura da imagem


width=n onde n é a largura da imagem
border=n onde n é o tamanho da borda da
imagem
align=(top, bottom, center),
alinha o texto circundante por cima,
por baixo ou no centro da imagem.
alt – Texto alternativo à imagens
2-4. Imagens
Fig. 13 - Exemplos:
2-4. Imagens

2-4-3. Imagens como Hiper-links


As imagens podem ser usadas como hiper-links.
O seguinte código:

<a href="hotlist.html">
<img src="BarHotlist.gif" alt="[HOTLIST]"></a>

Fig. 14 - Produz o seguinte resultado:


2-4. Imagens
Para se retirar a borda azul, deverá usar o atributo border.
O seguinte código:

<a href="hotlist.html">
<img src="BarHotlist.gif" border=0 alt="[HOTLIST]"></a>

Fig. 15 - Que produzirá o seguinte resultado:


2-4. Imagens

2-4-4. Gráficos de Background


É possível inserir imagens de fundo numa página,
para isso basta usar o atributo de <body> background.
O código seguinte:

<body background="filename.gif">
2-4. Imagens

2-4-5. Cores de Background


É também possível em HTML inserir cores de
background usando o atributo de <body> bgcolor.
O código seguinte:

<body bgcolor="#000000" text="#ffffff" link="#9690cc">

Que criará uma janela de cor preta (bgcolor),


com um texto branco (text) e hiper-links de cor prateada (link).
2-4. Imagens

2-4-6. Imagens Externas e Animações


É possível abrir uma imagem como um documento separado
quando um usuário clicar num hiper-link.
O seguinte código:

<A HREF="MinhaImagem.gif">Abrir Imagem</A>

O mesmo pode ser feito para animações em Flash, vídeos, sons,


etc., mudando apenas a extensão e o nome do ficheiro.
2-5. Tabelas

As tabelas são um elemento fundamental no Web


design. Com elas pode-se criar menus, separar
diferentes conteúdos, estruturar formulários, etc.
Veja a estrutura básica de uma tabela:
2-5. Tabelas

 Tabelas simples
Para se iniciar uma tabela dentro do documento html
usa-se a tag <table>, porém são necessárias as tags <td>
e <tr> para construí-la.
Listing 16 - Tabelas simples
<table border=“1”>
<tr>
<td>Uma célula</td> border=“1”
<td>Outra célula</td> Para exibir a linha de tabelas
</tr>
<tr>
<td>Uma célula em quebra de coluna</td>
<td>Uma última tabela</td>
</tr>
</table>
2-5. Tabelas
Fig. 16 – Tabelas simples
2-5. Tabelas

 <td>
No corpo da tabela existem várias tags que representam a
forma como os dados são visualizados: assim são
controladores da organização do espaço. <td> representa o
conteúdo dentro de uma tabela.
“td” quer dizer table data.
<table>
<tr>
<td>Conteúdo</td>
</tr>
</table>
2-5. Tabelas

 <tr>
<tr> controla e incrementa uma nova linha na tabela.
“tr” quer dizer table row.
<table>
<tr> <!-- Linha de começo é sempre necessária -->
<td>Conteúdo</td>
</tr>
<tr> <!-- Nova linha -->
<td>Conteúdo</td>
</tr>
</table>
2-5. Tabelas
Fig. 18 - height
2-5. Tabelas

 Parâmentros de Table
Para se manipular o aspecto gráfico e a disposição de uma
tabela usam-se vários parâmetros

 width
width dá o comprimento da tabela na página.
Um comprimento width pode ter o seu valor em pixels ou em
percentagem de espaço. 100% representa a ocupação máxima
do espaço disponível para a tabela.
2-5. Tabelas
Listing 17 - width
<!-- A tabela tem de comprimento 250 pixels -->
<table width="250“ border=“1”>
<!-- -->
<tr> Comentário HTML
<td>Tabela de uma célula</td>
</tr>
</table>

<!-- A tabela ocupa 70% do espaço disponível para ela -->


<table width="70%" border=“1”>
<tr>
<td>Table de uma célula</td>
</tr>
</table>
2-5. Tabelas
Fig. 17 - width

width="250“
width=“70%“

width="250“
width=“70%“
2-5. Tabelas

 height
Assim como width o parâmetro height comporta-se da mesma
maneira, alterando a altura da tabela.

Listing 18 - height

<table height="150" border="1">


<tr>
<td>Uma célula</td>
</tr>
</table>
2-5. Tabelas
Fig. 18 - height
2-5. Tabelas

 border, bgcolor e bdcolor


border define a espessura da borda da tabela;
bgcolor define a cor de fundo da tabela;
bdcolor define a cor da borda da tabela;

Listing 19 - border, bgcolor e bdcolor

<table border="4" bdcolor="green" bgcolor="grey">


<tr>
<td>Uma mistura de cores berrante!</td>
</tr>
</table>
2-5. Tabelas
Fig. 19 - border, bgcolor e bdcolor
2-5. Tabelas

 Cellpadding
Cellpadding aumenta ou diminui a borda interior em cada célula.

Listing 20- Cellpadding


<table cellpadding="5" border="1">
<tr>
<td>Padding 5</td>
</tr>
</table>
<table cellpadding="20" border="1">
<tr>
<td>Padding 20</td>
</tr>
</table>
2-5. Tabelas
Fig. 20- Cellpadding
2-5. Tabelas

 Cellspacing
Aumenta o espaço entre células.

Listing 21- Cellspacing


<table cellspacing="5" border="1">
<tr>
<td>CellSpacing é 5</td>
</tr>
</table>
<table cellspacing=“20" border="1">
<tr>
<td>CellSpacing é 20</td>
</tr>
</table>
2-5. Tabelas
Fig. 21- Cellspacing
2-5. Tabelas

Atributos das tabelas

ALIGN (LEFT, CENTER, RIGHT) –


alinhamento horizontal do conteúdo de uma célula ou de toda a
tabela.
VALIGN (TOP, MIDDLE, BOTTOM) -
alinhamento vertical do conteúdo de uma célula.
COLSPAN=n (número de colunas que uma célula envolve)
ROWSPAN=n (número de linhas que uma célula envolve)
BGCOLOR= (Cor de fundo de uma célula ou de toda a tabela)
BORDER=n (tamanho da borda da tabela)
BORDERCOLOR (cor da borda da tabela)
2-6. Formulários

Introdução aos Formulários

 Os formulários são um instrumento fundamental na linguagem


HTML, quando se pretende oferecer a um site um componente
dinâmica.

 Todo o formulário começa e termina com a etiqueta <form>.

 Neste momento interessa-nos apenas conhecer alguns campos


de entrada mais usadas nos formulários. Voltaremos a este
assunto durante o curso de Programação Web.
2-6. Formulários

 text (Campo de Texto)

<input type="text" name="homem" size="20" value="jose">

Nome Valor Valor


do valor máxima
da letra

Database

homen
jose
2-6. Formulários
 textarea (Campo de Texto com Linhas)
Númelo Nome do Númelo
da linha valor da lagura

<textarea rows="5" name="description" cols="20">


Por favor! Preencha este espaço</textarea>

Valor
2-6. Formulários

 checkbox (Caixa de verificação)

<input type="checkbox" name="trocar" value=“off">

Nome Valor
do valor

Database

homen trocar
jose off
2-6. Formulários
Nome
 radio (Botão de Opção) do valor Valor

<input type="radio" name="cor“ value="azul" checked >azul<br>


<input type="radio" name="cor“ value=“vermelho">vermelho<br>
<input type="radio" name="cor“ value=“amarelo">amarelo<br>

Database

homen trocar cor


jose off azul
2-6. Formulários

 option (Drop-down Menu)

<select size="1" name="planeta">


<option value=“terra“selected>Terra</option>
<option value=“marte“>Marte</option>
<option value=“jupiter">Júpiter</option>
</select>

<select size="2" name="planeta">


<option value="terra" selected>Terra</option>
<option value="marte">Marte</option>
<option value="jupiter">Júpiter</option>
</select>
2-6. Formulários
 hidden

<input type=”hidden” name="idade" value=”25”>

Database

idade
25
2-6. Formulários
 submit (Botão de Comando)

<input type="submit" value="enviar" name="enviar">

Blowser envia o
valor quando clica a
botão de comando.

Database
Sites de referência

 Truques e Dicas (Portugues)


 http://www.truquesedicas.com/tutoriai
s/html/index.htm
 Wiki Books (Portugues)
 http://pt.wikibooks.org/wiki/Curso_de_
HTML:_Lista_de_tags_HTML
 HTML Code Tutorial (English)
 http://www.htmlcodetutorial.com/quickl
ist.html
Sites de referência

 Color Chart (http://www.immigration-usa.com)


 http://www.immigration-
usa.com/html_colors.html
Programação HTML
avansado
3-1. Conceito de CSS

 O que é CSS ?
Cascading Style Sheet

Só codificando de HTML, não pode indicar um


desenho detalhado da páginas web.
Então é necessário usar CSS quando nós
quisermos um desígnio detalhado.
3-1. Conceito de CSS

 O código de CSS
 Eu escrevo CSS como segue.
p{
font-size : 12pt;
color : red
}

Quando escreveu como sobre, a parte cercada com


“<p> </p>" da página vai ser uma letra vermelha de
tamanho de 12pt.
3-1. Conceito de CSS

 Onde é que escreve?

1. No atributo de “style”

<p style="font-size : 10pt">abcdefg</p>

Desta parte vai ser 10pt.


3-1. Conceito de CSS
2. Em tag de <head>
<html>
<head>
<title>CSS</title>
<style type="text/css">
<!--
p { font-size : 10pt }
-->
</style>
</head>

<body>
<p>Um tamanho desta parte vai ser 10pt.</p>
</body>

</html>
3-1. Conceito de CSS
 Desígnios plurais
 id (Usando “#”)
<html>
<head>
<title>CSS</title>
<style type="text/css">
<!--
#aaa { font-size : 10pt }
#bbb { font-size : 12pt }
-->
</style>
</head>
<body>
<p id=“aaa”>Um tamanho desta parte vai ser 10pt.</p>
<p id=“bbb”>Um tamanho desta parte vai ser 12pt.</p>
</body>
</html>
3-1. Conceito de CSS
 Desígnios plurais
 class (Usando “.”)
<html>
<head>
<title>CSS</title>
<style type="text/css">
<!--
.aaa { font-size : 10pt }
.bbb { font-size : 12pt }
-->
</style>
</head>
<body>
<p class=“aaa”>Um tamanho desta parte vai ser 10pt.</p>
<p class=“bbb”>Um tamanho desta parte vai ser 12pt.</p>
</body>
</html>
3-2. Indicação de Tag <A>

 Tag <A> pode indicar cada cor de letra


num alguns tempos.
<head>

<style type="text/css">
<!--
A:link { color: blue; } O tempo normal
A:visited { color: black; } Em momento clicado
A:active { color: red; } Depois de acesso
A:hover { color: yellow; } Quando põe um cursor em cima
-->
</style>
</head>
<A href=“xxxxxx.html”>Link</A>
3-3. Definir CSS num
ficheiro externo
 Pode ler a definição de CSS dum
ficheiro externo.
E podemos compartilhar CSS em
documentos de plural.
<head>
<title>Style Sheet Test</title>
<link rel="stylesheet" type="text/css" href="xxx.css">
</head>
4-1. JavaScript

 Introdução
Javascript é uma linguagem de manuscrito objeto-
orientado.
Podemos fazer uma página da Web dinâmico por
movimento de Mouse e a contribuição para uma forma.
Além disso, podemos fazer o jogo que é usando
Javascript.
Alguns browsers não puderam funcionar por esses dias
quando Javascript foi desenvolvido, mas muitos dos
problemas foram cancelados recentemente.
4-1. JavaScript

 “Java” e “Javascript”
JAVA e Javascript totalmente são outros linguagens.
Gramática de Javascript tem muitas partes que se
assemelham à JAVA, mas tem uma característica como
"linguagem de manuscrito" como Perl, PHP etc.
4-2. JavaScript básico

 Hello, World.
Se não é um programador sênior, o método mais satisfatório para
estudar programação é escrever algum programa realmente.

Listing 1- Hello, World.

<html>
<head>
<title>Hello,JavaScript World!</title>
</head>
<body>
<script type="text/javascript">
<!-- document.write("Hello,JavaScript World!"); //-->
</script>
</body>
</html>
4-2. JavaScript básico
Listing 1- Hello, World.

<html>
<head>
<title>Hello,JavaScript World!</title>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello,JavaScript World!");
//-->
</script>
</body>
</html>
4-2. JavaScript básico
Fig. 1 - Hello, World.

<html>
<head>
<title>Hello,JavaScript World!</title>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello,JavaScript World!");
//-->
</script>
</body>
</html>
Código de Javascript
4-2. JavaScript básico
<script type="text/javascript"> </script>

<script type="text/javascript"> =
Uma tag para escrever o comando de Javascript

document.write(“ conteudo ");

document.write = Um comando para Aparecer as letras

* ”;” é sempre precisa na todas linhas


para siginificar o fim do comando.
4-3. Variável

 Variável
O variável parece uma caixa.
É muito conveniente quando eu puder chamar o valor que
eu usei depois uma vez.
Então usamos uma variável em Javascript(igualmente
como para outras muitos linguagens de programação).
Se escrever o exercício último "Hello, world" que usa a
variável, como segue.
4-3. Variável
Listing 2- Variável

<script type="text/javascript">
<!--
document.write("Hello,JavaScript World!”);
//-->
</script>

<script type="text/javascript">
<!--
var alo = "Hello,JavaScript World!“;
document.write( alo );
//-->
</script>
4-3. Variável
Fig. 2 - Variável

<script type="text/javascript">
<!--

var alo = "Hello,JavaScript World!“;


Comando var Nome do variável
document.write( alo );
//-->
</script>
4-3. Variável

var alo = "Hello,JavaScript World!“;

alo
Hello,JavaScript World!

document.write( alo );
Hello,JavaScript World!

Hello,JavaScript World!

alo
4-3. Variável
var Nome do variável = “conteudo(letra) “;
var Nome do variável = conteudo(Númelo);

var = Um comando para difinir o variável

document.write( variável );

Vai aparecer o conteudo do variável.

Se quiser difinir a mais de dois variáveis,


pode escrever como seguir.

var alo=“Hello”, chau=“Byebye”;


var a=100, b=500;
4-3. Variável

 Matrizes de Variáveis
A variável pode ter forma de matrizes.
Mete valores plurais na variável e pode chamar o valor necessário
quando for necessário.
Matrizes é definido como segue.

var frutas = ["laranja", "banana", "pera“ , “ananas”];


document.write( frutas[2] );

frutas
[0] [1] [2] [3]
laranja banana pera ananas

document.write( frutas[2] ); -> Vai aparecer “pera”.


4-3. Variável
var frutas = ["laranja","banana",,"pera",,,"abacaxi"];

frutas
[0] [1] [2] [3] [4] [5] [6]
laranja banana pera abacaxi

var frutas = [];


frutas[0] = "laranja";
frutas[1] = "banana";
frutas[2] = "pera";
frutas[3] = "abacaxi";

frutas
[0] [1] [2] [3]
laranja banana pera ananas
4-4. Operadores

 Controlando de adição
var a=10, b=20;
var c = a + b;
document.write( c );
= 30

 Operador
• “+” = adição
• “-” = subtração
• “*” = Multiplicação
• “/” = Divisão
• “%” = Porcento
4-4. Operadores

 Operação
var d = 5;
d = d + 5;
= 10

Pode escrever duma forma abreviada como a seguir;


d = d + 5;
Tem o mesmo significado
d += 5;

d += 5;
d -= 5;
d *= 5;
d /= 5;
d %= 5;
4-4. Operadores
No caso que quer somar (ou quer abaixar)1 para tem outro
método de descrição.

e = e + 1;
e += 1; São mesmo significado
e++;

e = e - 1;
e -= 1; São mesmo significado
e--;

Ex.
var i=0;
i++;
document.write( i ); =1
i--;
document.write( i ); =0
4-4. Operadores

 Conexão de caráter
document.write( "Hello "+"JavaScript "+"World!" );

Hello JavaScript World!

var homen = “Joao”;


document.write( “Bom dia! "+ homen );

Bom dia! Joao


4-5. Funções

 Funções
As funções são declaradas pela palavra reservada “function”
seguido pelo identificador seguido por parâmetros delimitados
por “(“ abre parêntesis e “)” fecha parêntesis, e do corpo dela
que é delimitado por “{“ abre chave e “}” fecha chave,
exemplo :

function quadrado(x) {
return x*x;
}
document.write( quadrado( 5 ) );
= 25 (= 5 * 5)
4-6. if

 if
Talvez um dos comandos mais utilizados em todas as linguagens
de programação, o 'if' é um comando utilizado para tomar a
decisão de executar o próximo comando baseado numa
espressão lógica, se esta expressão for verdadeira o próximo
comando é executado, caso contrário ele é ignorado.

Por exemplo, se for necessário dar um alerta ao usuário,


conforme a hora, podemos fazer o seguinte:

if( a>b ) Se “a” seja mais grande do que “b”,


a=b; vai meter “b” em “a”.
else Se não seja,
a=c; vai meter “c” em “a”.
4-7. Programação através
funções de Javascript
 Exemplo 1
Muda o cor de pano pela operação do usuário.
4-7. Programação através
funções de Javascript
Listing 3- Muda o cor de pano
<html>
<head>
<title>Exemplo 1</title>
<script type="text/javascript"><!--
function bg_red(){
document.body.style.backgroundColor="red";
}
function bg_blue(){
document.body.style.backgroundColor="blue";
}
--></script>
</head>
<body>
<button onclick="bg_red()">Muda para vermelho</button>
<button onclick="bg_blue()">Muda para azul</button>
</body>
</html>
4-7. Programação através
funções de Javascript
Fig. 3 - Muda o cor de pano
4-7. Programação através
funções de Javascript
function bg_red(){
document.body.style.backgroundColor="red";
}
function Nome da função

é um comando para mudar o cor de pano.

<button onclick="bg_red()">Muda para vermelho</button>

é uma opção de evento.


*Apresento algumas opções de evento na
proxima página.
4-7. Programação através
funções de Javascript
Opções de evento
onclick Quando se clica
ondblclick Quando se faz clique duas vezes
onmousedown Quando se mantém o dedo no mouse
onmouseup Quando se larga o mouse
onmouseover Quando se aponta com ponteiro do mouse
onmousemove Quando o ponteiro do mouse passa por cima
onmouseout Quando se move para for a o ponteiro do mouse
onkeypress Quando pressiona qualquer tecla
4-7. Programação através
funções de Javascript
 Exemplo 2
Aparece letras quando apertou a botão.
4-7. Programação através
funções de Javascript
Listing 4- Aparece letras

<html>
<head>
<title>Exemplo2</title>
<script type="text/javascript">
<!--
function bomdia(){
document.f1.t1.value="Bom dia!";
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF">
<form name="f1">
<input type="button" value="Aperte" onClick="bomdia()">
<input type="text" name="t1">
</form>
</body>
4-7. Programação através
funções de Javascript
Fig. 4 - Aparece letras
4-7. Programação através
funções de Javascript
function bomdia(){
document. f1. t1. value="Bom dia!";
}

Document

<body bgcolor="#FFFFFF">
<form name=" f1 ">
<input type="button" value="Aperte" onClick="bomdia()">
<input type="text" name=" t1 ">
</form>
</body>
4-7. Programação através
funções de Javascript
 Exemplo 3
Muda letras para outro quadro.
4-7. Programação através
funções de Javascript
Listing 5- Muda letras

<html>
<head>
<title>Exemplo3</title>
<script type="text/javascript">
<!--
function copy(){
document.f1.t2.value=document.f1.t1.value;
document.f1.t1.value="";
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF">
<form name="f1">
<input type="text" name="t1">
<input type="button" value="Para direita!" onClick="copy()">
<input type="text" name="t2">
4-7. Programação através
funções de Javascript
Fig. 5 - Muda letras
4-7. Programação através
funções de Javascript
 Exemplo 4
Vamos fazer um calculador.
Listing 6- Calculador

<html>
<head>
<title>Exemplo3</title>
<script type="text/javascript">
<!--
function conta(){
document.f1.t3.value = document.f1.t1.value + document.f1.t2.value;
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF">
<form name="f1">
<input type="text" size="4" name="t1"> +
<input type="text" size="4" name="t2"> =
<input type="text" size="4" name="t3">
<br><br>
<input type="button" value="Conta" onClick="conta()">
<input type="reset" value="Apaga">
</form>
</body>
</html>
4-7. Programação através
funções de Javascript
Fig. 6- Calculador

?
As letras preenchedo é conhecido como “letra”.
É precisa para contar, tem que conhecer como “númelo”.
4-7. Programação através
funções de Javascript
parseInt
“parseInt” é um variável de Javascript
para trocar uma letra para um númelo.

function conta(){
document.f1.t3.value = document.f1.t1.value +
document.f1.t2.value;
}

function conta(){
document.f1.t3.value = parseInt(document.f1.t1.value) +
parseInt(document.f1.t2.value);
}
4-7. Programação através
funções de Javascript
 Exemplo 5
Aparece uma janela de “Alert”.
Listing 7- Alert

<html>
<head>
<title>Exemplo5</title>
<script type="text/javascript">
<!--
function welcome(){
var yourname=document.f1.t1.value;
if(yourname == ""){
alert('Pode escrever seu nome.');
}else{
alert('Welcome! ' + yourname + '.');
}
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF">
<form name="f1">
Pode apertar a botao START.<br>
<input type="text" name="t1">
<input type="button" value="START" onClick="welcome()">
</form>
4-7. Programação através
funções de Javascript
Fig. 7 - Alert
4-7. Programação através
funções de Javascript
alert
“alert” é um variável de Javascript para aparecer uma janela.
A janela de Alert tem uma botão [OK] somente.

confirm
“confirm” também é um variável de Javascript para aparecer
uma janela.
A janela de confirm tem a botão [OK] e botão [Cancel].

Cancel
4-7. Programação através
funções de Javascript

Responde “true”.

Cancel

Responde “true”.

Responde “false”.
4-7. Programação através
funções de Javascript
 Exemplo 6
Uma frase “for”.
Listing 8- for

<html>
<head>
<title>Exemplo6</title>
<script type="text/javascript">
<!--
function loopTest(){
for(i=0;i<5;i++){
alert('”i” esta ' + i + ' agora.');
}
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF">
<form name="f1">
<h1>Loop test!</h1>
<input type="button" value=“start" onClick="loopTest()">
</form>
</body>
</html>
4-7. Programação através
funções de Javascript
Listing 8- for
4-7. Programação através
funções de Javascript
for
for( i=0; i<Número de loop; i++ ){
comando;
}

function loopTest(){
Número de loop
for(i=0;i<5;i++){

alert('”i” esta ' + i + ' agora.');


}
} comando