Desenho de Paginas Web

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 WebServiç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 WebHistoria 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 dumDocumento 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 peloBrowser.

� As etiquetas consistem dum caracter “<”, seguida do nome da etiqueta, e terminam pelocaracter “>”.


� 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.


� 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 dumDocumento HTMLExemplo 1 - Exemplo de código fonte HTML

Eiqueta de Abertura

Etiqueta de Fecho

<html><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>


Barra de

Título

URL

Corpo

Nota: As etiquetas HTML não são “Case Sensitive”, ou seja <HTML> é equivalente à <html> ou <HtMl>.

Fig. 1 - Versão formatada do Exemplo 1

2-2. Sintaxe da LinguagemHTML

� 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.


� 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).


� 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).


� 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><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>





</body></html>

Exemplo 2 - Os seis níveis de cabeçalhos


� Parágrafos

Os parágrafos em HTML são indicados com a

etiqueta <p>


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

Exemplo 3 - Exemplos de parágrafos



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_tributo1atributo1=”nome_do_tributo2>.


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

Exemplo 4 - Uso da etiqueta <p> com atributos


� 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><head><TITLE>Listas Enumeradas (ordenadas)</TITLE></head><body><OL>

<LI> Jose

<LI> Antonio

<LI> Ana

</OL>

</body></html>

Exemplo 5 - Listas Enumeradas (ordenadas)


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><head><TITLE>Listas Anumeradas</TITLE></head><body><UL>

<LI> Jose

<LI> Antonio

<LI> Ana

</UL>

</body></html>

Exemplo 6 - Listas não numeradas


c) Listas Integradas

As listas podem ser integradas.

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

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

Exemplo 7 – Integração de listas


(*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>


� 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><head><TITLE>Exemplo de Texto Pre-formatado</TITLE></head><body><PRE>

JoaoAv.Julius Nyerere 257, Maputo, Mozambique

TakuyaShibuya-ku, Tokyo, Japan</PRE></body>

</html>

Exemplo 8 – Exemplo de Texto Pre-formatado


� 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><head><TITLE>Mudança de Linha</TITLE></head><body>Rua Frei Nicolau, n. 19<br>

Maputo<br>

cell: 082-887373772

</body></html>

Exemplo 9 – Mudança de Linha


� 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><head><TITLE>Linhas Horizontais</TITLE></head><body><HR SIZE=4 WIDTH="50%">

</body></html>

Exemplo 10 – Linhas Horizontais


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

Exemplo 10-2 – Linhas Horizontais-2


� 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.


� 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 passwdpara 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)


� 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á nahabilidade de ligar uma parte do texto ouimagem a outro documento ou secção de um documento.

� Os Browsers normalmente destacam o referidotexto 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

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

Início da âncora

Ficheiro alvo

Texto de Hiper-link

Fim da âncora

Exemplo 11 – Veja o seguinte exemplo:

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órioarquivos.

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:[email protected]">Departamento de Vendas</a>

2-4. Imagens

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

� Existem entre outros dois tipos de imagens usadas naWeb, nomeadamente imagens de tipo vectorial (vector graphics) e imagens de tipo Bitmap.

� O primeiro tipo tem a vantagem de se lhes poder alteraro 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><td>Outra célula</td></tr><tr><td>Uma célula em quebra de coluna</td><td>Uma última tabela</td></tr>

</table>

border=“1”Para exibir a linha de tabelas

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

� widthwidth 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



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

<tr>

<td>Tabela de uma célula</td>

</tr>

</table>



<table width="70%" border=“1”>

<tr>

<td>Table de uma célula</td>

</tr>

</table>

Listing 17 - width

Comentário HTML

2-5. Tabelas

Fig. 17 - width

width="250“

width=“70%“

width="250“

width=“70%“

2-5. Tabelas

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

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

<tr>

<td>Uma célula</td>

</tr>

</table>

Listing 18 - height

2-5. Tabelas

Fig. 18 - height

2-5. Tabelas

� border, bgcolor e bdcolorborder define a espessura da borda da tabela;

bgcolor define a cor de fundo da tabela;

bdcolor define a cor da borda da tabela;

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

<tr>

<td>Uma mistura de cores berrante!</td>

</tr>

</table>

Listing 19 - border, bgcolor e bdcolor

2-5. Tabelas

Fig. 19 - border, bgcolor e bdcolor

2-5. Tabelas

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

<table cellpadding="5" border="1">

<tr>

<td>Padding 5</td>

</tr>

</table>

<table cellpadding="20" border="1">

<tr>

<td>Padding 20</td>

</tr>

</table>

Listing 20- Cellpadding

2-5. Tabelas

Fig. 20- Cellpadding

2-5. Tabelas

� CellspacingAumenta o espaço entre células.

<table cellspacing="5" border="1">

<tr>

<td>CellSpacing é 5</td>

</tr>

</table>

<table cellspacing=“20" border="1">

<tr>

<td>CellSpacing é 20</td>

</tr>

</table>

Listing 21- Cellspacing

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 do valor

Valor máximada letra

Valor

homen

jose

Database

2-6. Formulários

� textarea (Campo de Texto com Linhas)

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

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

Númeloda linha

Nome do valor

Valor

Númeloda lagura

2-6. Formulários

� checkbox (Caixa de verificação)

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

Nome do valor

Valor

homen

jose

Database

trocar

off

2-6. Formulários

� radio (Botão de Opção)

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

Nome do valor Valor

homen

jose

Database

trocar

off

cor

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”>

idade

25

Database

2-6. Formulários

� submit (Botão de Comando)

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

Database

Blowser envia o

valor quando clica a

botão de comando.

Sites de referência

� Truques e Dicas (Portugues)

� http://www.truquesedicas.com/tutoriais/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/quicklist.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>

3-1. Conceito de CSS� Desígnios plurais

� id (Usando “#”)<html><head><title>CSS</title><style type="text/css"></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"></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"></style></head>

O tempo normal

Em momento clicado

Depois de acesso

Quando põe um cursor em cima

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




</script></body></html>

<html><head>




</script></body></html>

Fig. 1 - Hello, World.

Código de Javascript


document.write(“ conteudo ");

document.write = Um comando para Aparecer as letras

* ”;” é sempre precisa na todas linhas para siginificar o fim do comando.

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

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

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

</script>

<script type="text/javascript">

</script>

4-3. Variável

Fig. 2 - Variável

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

Comando var Nome do variável

4-3. Variável

var alo = "Hello,JavaScript World!“;

document.write( alo );

aloHello,JavaScript World!

alo

Hello,JavaScript World!

Hello,JavaScript World!

4-3. Variável

document.write( variável );

Vai aparecer o conteudo do variável.

var Nome do variável = “conteudo(letra) “;

var = Um comando para difinir o 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;

var Nome do variável = conteudo(Númelo);

4-3. Variável

� Matrizes de VariáveisA 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] );

ananasperabananalaranja

[3][2][1][0]

frutas

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

4-3. Variável

var frutas = ["laranja","banana",,"pera",,,"abacaxi"];

abacaxiperabananalaranja

[6][5][4][3][2][1][0]

frutas

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

ananasperabananalaranja

[3][2][1][0]

frutas

4-4. Operadores

� Controlando de adição

var a=10, b=20;var c = a + b;document.write( c );

= 30

• “+” = adição• “-” = subtração

• “*” = Multiplicação

• “/” = Divisão

• “%” = Porcento

� Operador

4-4. Operadores

� Operação

var d = 5;d = d + 5;

= 10

Pode escrever duma forma abreviada como a seguir;

d = d + 5;d += 5;

d += 5;d -= 5;d *= 5;d /= 5;d %= 5;

Tem o mesmo significado

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;e++;

São mesmo significado

e = e - 1;e -= 1;e--;

São mesmo significado

var i=0;i++;document.write( i );i--;document.write( i );

Ex.

= 1

= 0

4-4. Operadores

� Conexão de caráter

document.write( "Hello "+"JavaScript "+"World!" );

var homen = “Joao”;document.write( “Bom dia! "+ homen );

Hello JavaScript World!

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

� ifTalvez 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 )a=b;

elsea=c;

Se “a” seja mais grande do que “b”,vai meter “b” em “a”.Se não seja,vai meter “c” em “a”.

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

� Exemplo 1Muda 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


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

function bg_red(){document.body.style.backgroundColor="red";}

é um comando para mudar o cor de pano.

function Nome da função

é uma opção de evento.

*Apresento algumas opções de evento na proxima página.


onclick Quando se clicaondblclick Quando se faz clique duas vezesonmousedown Quando se mantém o dedo no mouseonmouseup Quando se larga o mouseonmouseover Quando se aponta com ponteiro do mouseonmousemove Quando o ponteiro do mouse passa por cimaonmouseout Quando se move para for a o ponteiro do mouseonkeypress Quando pressiona qualquer tecla

�Opções de evento


� Exemplo 2Aparece letras quando apertou a botão.

Listing 4- Aparece letras

<html><head><title>Exemplo2</title><script type="text/javascript"></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


<body bgcolor="#FFFFFF"><form name=" f1 "> <input type="button" value="Aperte" onClick="bomdia()"><input type="text" name=" t1 "></form></body>

function bomdia(){document. f1. t1. value="Bom dia!";

}

Document


� Exemplo 3Muda letras para outro quadro.

Listing 5- Muda letras

<html><head><title>Exemplo3</title><script type="text/javascript"></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">


Fig. 5 - Muda letras


� Exemplo 4Vamos fazer um calculador.

Listing 6- Calculador

<html><head><title>Exemplo3</title><script type="text/javascript"></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>


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 5Aparece uma janela de “Alert”.

Listing 7- Alert

<html><head><title>Exemplo5</title><script type="text/javascript"></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>


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 apareceruma janela.

A janela de confirm tem a botão [OK] e botão [Cancel].

Cancel


Cancel

Responde “true”.

Responde “true”.

Responde “false”.


� Exemplo 6Uma frase “for”.

Listing 8- for

<html><head><title>Exemplo6</title><script type="text/javascript"></script></head><body bgcolor="#FFFFFF"><form name="f1"><h1>Loop test!</h1><input type="button" value=“start" onClick="loopTest()"></form></body></html>


Listing 8- for


function loopTest(){

for(i=0;i<5;i++){

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

}

}

forfor( i=0; i<Número de loop; i++ ){

comando;

}

Número de loop

comando

Desenho de Paginas Web

Documents

Transcript of Desenho de Paginas Web