Upload
blacknino
View
386
Download
3
Embed Size (px)
DESCRIPTION
This is it
Citation preview
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 “>”.
2-1. O mínimo dumDocumento 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 dumDocumento 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 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>
2-1. O mínimo dumDocumento 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.
2-2. Sintaxe da LinguagemHTML
� 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 LinguagemHTML
� 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 LinguagemHTML
� 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 LinguagemHTML
<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>
Exemplo 2 - Os seis níveis de cabeçalhos
2-2. Sintaxe da LinguagemHTML
Fig. 2 - Versão formatada do Exemplo 2
2-2. Sintaxe da LinguagemHTML
� Parágrafos
Os parágrafos em HTML são indicados com a
etiqueta <p>
2-2. Sintaxe da LinguagemHTML
<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
2-2. Sintaxe da LinguagemHTML
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_tributo1atributo1=”nome_do_tributo2>.
2-2. Sintaxe da LinguagemHTML
<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
2-2. Sintaxe da LinguagemHTML
Fig. 4 - Versão formatada do Exemplo 4
2-2. Sintaxe da LinguagemHTML
� 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 LinguagemHTML
<html><head><TITLE>Listas Enumeradas (ordenadas)</TITLE></head><body><OL>
<LI> Jose
<LI> Antonio
<LI> Ana
</OL>
</body></html>
Exemplo 5 - Listas Enumeradas (ordenadas)
2-2. Sintaxe da LinguagemHTML
Fig. 5 - Versão formatada do Exemplo 5
2-2. Sintaxe da LinguagemHTML
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 LinguagemHTML
<html><head><TITLE>Listas Anumeradas</TITLE></head><body><UL>
<LI> Jose
<LI> Antonio
<LI> Ana
</UL>
</body></html>
Exemplo 6 - Listas não numeradas
2-2. Sintaxe da LinguagemHTML
Fig. 6 - Versão formatada do Exemplo 6
2-2. Sintaxe da LinguagemHTML
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
2-2. Sintaxe da LinguagemHTML
(*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 LinguagemHTML
Fig. 7 - Versão formatada do Exemplo 7
2-2. Sintaxe da LinguagemHTML
� 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 LinguagemHTML
<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
2-2. Sintaxe da LinguagemHTML
Fig. 8 - Versão formatada do Exemplo 8
2-2. Sintaxe da LinguagemHTML
� 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 LinguagemHTML
<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
2-2. Sintaxe da LinguagemHTML
Fig. 9 - Versão formatada do Exemplo 9
2-2. Sintaxe da LinguagemHTML
� 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 LinguagemHTML
<html><head><TITLE>Linhas Horizontais</TITLE></head><body><HR SIZE=4 WIDTH="50%">
</body></html>
Exemplo 10 – Linhas Horizontais
2-2. Sintaxe da LinguagemHTML
Fig. 10 - Versão formatada do Exemplo 10
2-2. Sintaxe da LinguagemHTML
<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
2-2. Sintaxe da LinguagemHTML
Fig. 10 - Versão formatada do Exemplo 10
2-2. Sintaxe da LinguagemHTML
� 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 LinguagemHTML
� 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)
2-2. Sintaxe da LinguagemHTML
� 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> <!-- 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
� 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
<!-- A tabela tem de comprimento 250 pixels -->
<table width="250“ border=“1”>
<tr>
<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>
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.
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; }
A:visited { color: black; }
A:active { color: red; }
A:hover { color: yellow; }
--></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">
<!-- 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
<html><head>
<title>Hello,JavaScript World!</title></head><body><script type="text/javascript">
<!--document.write("Hello,JavaScript World!");//-->
</script></body></html>
Fig. 1 - Hello, World.
Código de Javascript
4-2. JavaScript básico
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"><!--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!“;
document.write( alo );
//--></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.
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
<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.
4-7. Programação através funções de Javascript
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
4-7. Programação através funções de Javascript
� Exemplo 2Aparece 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
<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
4-7. Programação através funções de Javascript
� Exemplo 3Muda 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 4Vamos 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 5Aparece 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 apareceruma 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
Cancel
Responde “true”.
Responde “true”.
Responde “false”.
4-7. Programação através funções de Javascript
� Exemplo 6Uma 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
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