Desenho de Paginas Web

Desenho de paginas
Web
1.Introdução a Internet e
a World Wide Web
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.
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.
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.
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.
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.
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).
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).
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.
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>
</body>
</html>
HTML
HTML
Parágrafos
Os parágrafos em HTML são indicados com a
etiqueta <p>
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>
HTML
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>.
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>
HTML
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>.
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>
HTML
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>.
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>
HTML
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.)

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>
HTML
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.
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>
HTML
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.
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>
HTML
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.
HTML
Exemplo 10 – Linhas Horizontais
<html>
<head>
<TITLE>Linhas Horizontais</TITLE>
</head>
<body>
<HR SIZE=4 WIDTH="50%">
</body>
</html>
HTML
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>
HTML
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.
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)
HTML
Estilos Físicos
<B> texto em bold
<I> texto em itálico
Algumas Sequências de Escape

< - sequência de escape para “<“
> - sequência de escape para “>“
& - 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> 
<td>Conteúdo</td>
</tr>
<tr> 
<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

<table width="250“ border=“1”>

<tr> Comentário HTML
<td>Tabela de uma célula</td>
</tr>
</table>


<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.
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.
Onde é que escreve?
1. No atributo de “style”
<p style="font-size : 10pt">abcdefg</p>
Desta parte vai ser 10pt.

2. Em tag de <head>
<html>
<head>
<title>CSS</title>
<style type="text/css">

</style>
</head>
<body>
<p>Um tamanho desta parte vai ser 10pt.</p>
</body>
</html>
Desígnios plurais
id (Usando “#”)
<html>
<head>
<title>CSS</title>

</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>
Desígnios plurais
class (Usando “.”)
<html>
<head>
<title>CSS</title>

</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>
</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">

</script>
</body>
</html>
Listing 1- Hello, World.
<html>
<head>
</head>
<body>

</script>
</body>
</html>
Fig. 1 - Hello, World.
<html>
<head>
</head>
<body>

</script>
</body>
</html>
Código de Javascript
<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>

</script>
4-3. Variável
Fig. 2 - Variável

</script>
4-3. Variável
alo
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.
Listing 3- Muda o cor de pano
<html>
<head>
<title>Exemplo 1</title>
<script type="text/javascript"></script>
</head>
<body>
<button onclick="bg_red()">Muda para vermelho</button>
<button onclick="bg_blue()">Muda para azul</button>
</body>
</html>
Fig. 3 - Muda o cor de pano
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.
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
Exemplo 2
Aparece letras quando apertou a botão.
Listing 4- Aparece letras
<html>
<head>
<title>Exemplo2</title>

</script>
</head>
<body bgcolor="#FFFFFF">
<form name="f1">
<input type="button" value="Aperte" onClick="bomdia()">
<input type="text" name="t1">
</form>
</body>
Fig. 4 - Aparece letras
function bomdia(){
document. f1. t1. value="Bom dia!";
}
Document
<form name=" f1 ">
<input type="button" value="Aperte" onClick="bomdia()">
<input type="text" name=" t1 ">
</form>
</body>
Exemplo 3
Muda letras para outro quadro.
Listing 5- Muda letras
<html>
<head>

</script>
</head>
<form name="f1">
<input type="button" value="Para direita!" onClick="copy()">
Fig. 5 - Muda letras
Exemplo 4
Vamos fazer um calculador.
Listing 6- Calculador
<html>
<head>

</script>
</head>
<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>
Fig. 6- Calculador
?
As letras preenchedo é conhecido como “letra”.
É precisa para contar, tem que conhecer como “númelo”.
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);
}
Exemplo 5
Aparece uma janela de “Alert”.
Listing 7- Alert
<html>
<head>

</script>
</head>
<form name="f1">
Pode apertar a botao START.<br>
<input type="button" value="START" onClick="welcome()">
</form>
Fig. 7 - Alert
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
Responde “true”.
Cancel
Responde “true”.
Responde “false”.
Exemplo 6
Uma frase “for”.
Listing 8- for
<html>
<head>

</script>
</head>
<form name="f1">
<h1>Loop test!</h1>
<input type="button" value=“start" onClick="loopTest()">
</form>
</body>
</html>
Listing 8- for
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

Desenho de Paginas Web

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Desenho de Paginas Web

Diunggah oleh

Hak Cipta:

Format Tersedia

Desenho de paginas

<html> Eiqueta de Abertura

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

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

a) Listas Enumeradas (ordenadas)

Exemplo 7 – Integração de listas

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

Algumas Sequências de Escape

A grande vantagem do HTML está na

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

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

2.3.1 Endereços Relativos

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

Fig. 12 – Exemplos de links relativos e absolutos

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

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

Introduza o seguinte código no documentoA.html:

Em seguida, introduza o seguinte código no

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

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

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

Introduza o seguinte código no documento corrente:

Em seguida, introduza o seguinte código:

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

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

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

Para incluir uma imagem numa página,

onde Nome_da_Imagem é a URL da Imagem.

2-4-2. Atributos de Imagens

height=n onde n é a altura da imagem

2-4-3. Imagens como Hiper-links

Fig. 14 - Produz o seguinte resultado:

Fig. 15 - Que produzirá o seguinte resultado:

2-4-4. Gráficos de Background

2-4-5. Cores de Background

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

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

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

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

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

As tabelas são um elemento fundamental no Web

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

border, bgcolor e bdcolor

Listing 19 - border, bgcolor e bdcolor

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

Listing 20- Cellpadding

Listing 21- Cellspacing

Atributos das tabelas

ALIGN (LEFT, CENTER, RIGHT) –

Introdução aos Formulários

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

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

Neste momento interessa-nos apenas conhecer alguns campos

text (Campo de Texto)

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

Nome Valor Valor

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

checkbox (Caixa de verificação)