Академический Документы
Профессиональный Документы
Культура Документы
Web
1.Introdução a Internet e
a World Wide Web
1.Introdução a Internet e
a World Wide Web
A Internet é um conglomerado de redes na escala
mundial de milhões de computadores interligados
que permite o acesso a informações e todo tipo de
transferência de dados.
1.Introdução a Internet e
a World Wide Web
Serviços disponíveis na internet
Web ou WWW
o acesso remoto a outras máquinas (Telnet e SSH)
transferência de arquivos (FTP)
correio electrónico (e-mail normalmente através dos
protocolos POP3 e SMTP)
boletins electrônicos (news ou grupos de notícias)
bate-papo online (chat), mensagens instantâneas
(ICQ, YIM, Jabber, MSN Messenger, Blogs),
Skype,Orkut, etc.
1.Introdução a Internet e
a World Wide Web
Historia da internet
O que hoje forma a Internet, começou em 1969 com a
ARPANET, uma subdivisão do Departamento de
Defesa dos EUA.
Ela foi criada para a guerra, pois com essa rede
promissora, os dados valiosos do governo americano
estariam espalhados em vários lugares, ao invés de
centralizados em apenas um servidor. Isso evitaria a
perda desses dados no caso de, por exemplo, uma
bomba explodisse no campus.
Em seguida, ela foi usada inicialmente pelas
universidades, onde os estudantes, poderiam trocar
de forma ágil para a época, os resultados de seus
estudos e pesquisas.
1.Introdução a Internet e
a World Wide Web
"a Web" ou "WWW“
("rede do tamanho do mundo", traduzindo
literalmente) é uma rede de computadores
na Internet que fornece informação sob
forma de hipermídia, como vídeos, sons,
hipertextos e figuras.
Para ver a informação, pode-se usar um
software chamado navegador (browser)
para descarregar/download informações
(chamadas "documentos" ou "páginas") de
servidores de internet (ou "sites") e mostrá-
los na ecran do usuário.
1.Introdução a Internet e
a World Wide Web
"a Web" ou "WWW“
O usuário pode então seguir os links na página para outros
documentos. O acto de seguir links é normalmente
chamado de "navegar" ou "surfar" na Web.
A Web foi criada em um projeto no CERN em 1990, onde
Tim Berners-Lee construiu o sistema protótipo que se
tornou um modelo do que hoje é a World Wide Web. O
objectivo inicial do sistema foi de tornar mais fácil a
compartilha de documentos de pesquisas entre colegas.
A funcionalidade da Web é baseada em três padrões:
a URL, que especifica como cada página de informação
recebe um "endereço" único onde pode ser encontrada;
HTTP, que especifica como o navegador e servidor enviam
informação um ao outro (protocolo); e
HTML, um método de codificar a informação de modo que
possa ser exibida numa grande quantidade de dispositivos.
Programação HTML
(básica)
2-1. O mínimo dum
Documento HTML
Para denotar os vários elementos do
documento HTML por ex. tabelas, parágrafos,
listas, linhas horizontais, etc., devem ser
usadas etiquetas que serão reconhecidas pelo
Browser.
As etiquetas consistem dum caracter “<”,
seguida do nome da etiqueta, e terminam pelo
caracter “>”.
2-1. O mínimo dum
Documento HTML
As Etiquetas são normalmente usadas aos
pares, como por exemplo: <b> e </b>, para
iniciar e terminar a instrução. A etiqueta de
fecho é igual à de abertura, excepto o caracter
“/” que procede o nome da etiqueta, veja o
exemplo 1.
Algumas etiquetas de abertura podem conter
atributos, com informação adicional incluída.
Por exemplo, pode-se especificar o tamanho da
fonte a usar, a posição de uma imagem, etc.
2-1. O mínimo dum
Documento HTML
Qualquer documento HTML, deverá conter no
mínimo as etiquetas <html>, <head>, <title> e
<body> e as suas correspondentes etiquetas
de fecho.
2-1. O mínimo dum
Documento HTML
Exemplo 1 - Exemplo de código fonte HTML
URL
Corpo
HEAD
O elemento Head identifica a primeira parte do
documento HTML que contém o título.
2-2. Sintaxe da Linguagem
HTML
TITLE
O elemento Title contém o título do documento.
O título é mostrado na Barra de Título no topo do
Browser. (Veja a figura 1.)
O título é muito importante para a identificação da
página em máquinas de busca (como por
exemplo o GOOGLE).
2-2. Sintaxe da Linguagem
HTML
BODY
A segunda e a maior secção de um documento
HTML é o corpo, o qual contém o conteúdo do
documento.
Todas as etiquetas explicadas em baixo,
encontram-se dentro do corpo (veja a figura 1).
2-2. Sintaxe da Linguagem
HTML
Cabeçalhos
A linguagem HTML possui 6 níveis de cabeçalhos,
numerados de 1 à 6, sendo 1 o maior.
A sintaxe do elemento Cabeçalho é
<hy>Texto_do_Cabeçalho</hy>, onde y é um
número de 1 à 6.
2-2. Sintaxe da Linguagem
HTML
Exemplo 2 - Os seis níveis de cabeçalhos
<html>
<head>
<TITLE>Níveis de Cabeçalhos</TITLE>
</head>
<body>
<p><h1>Cabeçalho de nível 1</h1></p>
<p><h2>Cabeçalho de nível 2</h2></p>
<p><h3>Cabeçalho de nível 3</h3></p>
<p><h4>Cabeçalho de nível 4</h4></p>
<p><h5>Cabeçalho de nível 5</h5></p>
<p><h6>Cabeçalho de nível 6</h6></p>
</body>
</html>
2-2. Sintaxe da Linguagem
HTML
Fig. 2 - Versão formatada do Exemplo 2
2-2. Sintaxe da Linguagem
HTML
Parágrafos
Os parágrafos em HTML são indicados com a
etiqueta <p>
2-2. Sintaxe da Linguagem
HTML
Exemplo 3 - Exemplos de parágrafos
<html>
<head>
<TITLE>Níveis de Cabeçalhos</TITLE>
</head>
<body>
<p>Primeiro parágrafo</p>
<p>Segundo
parágrafo</p>
<p>Terceiro parágrafo</p>
</body>
</html>
2-2. Sintaxe da Linguagem
HTML
Fig. 3 - Versão formatada do Exemplo 3
<html>
<head>
<TITLE>Listas Integradas</TITLE>
</head>
Há “ficheiro1.html”
dentro do directório
arquivos.
2-3. Links
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
c) Mailto
A sintaxe é a seguinte:
<img src=Nome_da_Imagem>
<a href="hotlist.html">
<img src="BarHotlist.gif" alt="[HOTLIST]"></a>
<a href="hotlist.html">
<img src="BarHotlist.gif" border=0 alt="[HOTLIST]"></a>
<body background="filename.gif">
2-4. Imagens
Tabelas simples
Para se iniciar uma tabela dentro do documento html
usa-se a tag <table>, porém são necessárias as tags <td>
e <tr> para construí-la.
Listing 16 - Tabelas simples
<table border=“1”>
<tr>
<td>Uma célula</td> border=“1”
<td>Outra célula</td> Para exibir a linha de tabelas
</tr>
<tr>
<td>Uma célula em quebra de coluna</td>
<td>Uma última tabela</td>
</tr>
</table>
2-5. Tabelas
Fig. 16 – Tabelas simples
2-5. Tabelas
<td>
No corpo da tabela existem várias tags que representam a
forma como os dados são visualizados: assim são
controladores da organização do espaço. <td> representa o
conteúdo dentro de uma tabela.
“td” quer dizer table data.
<table>
<tr>
<td>Conteúdo</td>
</tr>
</table>
2-5. Tabelas
<tr>
<tr> controla e incrementa uma nova linha na tabela.
“tr” quer dizer table row.
<table>
<tr> <!-- Linha de começo é sempre necessária -->
<td>Conteúdo</td>
</tr>
<tr> <!-- Nova linha -->
<td>Conteúdo</td>
</tr>
</table>
2-5. Tabelas
Fig. 18 - height
2-5. Tabelas
Parâmentros de Table
Para se manipular o aspecto gráfico e a disposição de uma
tabela usam-se vários parâmetros
width
width dá o comprimento da tabela na página.
Um comprimento width pode ter o seu valor em pixels ou em
percentagem de espaço. 100% representa a ocupação máxima
do espaço disponível para a tabela.
2-5. Tabelas
Listing 17 - width
<!-- A tabela tem de comprimento 250 pixels -->
<table width="250“ border=“1”>
<!-- -->
<tr> Comentário HTML
<td>Tabela de uma célula</td>
</tr>
</table>
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
Cellpadding
Cellpadding aumenta ou diminui a borda interior em cada célula.
Cellspacing
Aumenta o espaço entre células.
Database
homen
jose
2-6. Formulários
textarea (Campo de Texto com Linhas)
Númelo Nome do Númelo
da linha valor da lagura
Valor
2-6. Formulários
Nome Valor
do valor
Database
homen trocar
jose off
2-6. Formulários
Nome
radio (Botão de Opção) do valor Valor
Database
Database
idade
25
2-6. Formulários
submit (Botão de Comando)
Blowser envia o
valor quando clica a
botão de comando.
Database
Sites de referência
O que é CSS ?
Cascading Style Sheet
O código de CSS
Eu escrevo CSS como segue.
p{
font-size : 12pt;
color : red
}
1. No atributo de “style”
<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>
<style type="text/css">
<!--
A:link { color: blue; } O tempo normal
A:visited { color: black; } Em momento clicado
A:active { color: red; } Depois de acesso
A:hover { color: yellow; } Quando põe um cursor em cima
-->
</style>
</head>
<A href=“xxxxxx.html”>Link</A>
3-3. Definir CSS num
ficheiro externo
Pode ler a definição de CSS dum
ficheiro externo.
E podemos compartilhar CSS em
documentos de plural.
<head>
<title>Style Sheet Test</title>
<link rel="stylesheet" type="text/css" href="xxx.css">
</head>
4-1. JavaScript
Introdução
Javascript é uma linguagem de manuscrito objeto-
orientado.
Podemos fazer uma página da Web dinâmico por
movimento de Mouse e a contribuição para uma forma.
Além disso, podemos fazer o jogo que é usando
Javascript.
Alguns browsers não puderam funcionar por esses dias
quando Javascript foi desenvolvido, mas muitos dos
problemas foram cancelados recentemente.
4-1. JavaScript
“Java” e “Javascript”
JAVA e Javascript totalmente são outros linguagens.
Gramática de Javascript tem muitas partes que se
assemelham à JAVA, mas tem uma característica como
"linguagem de manuscrito" como Perl, PHP etc.
4-2. JavaScript básico
Hello, World.
Se não é um programador sênior, o método mais satisfatório para
estudar programação é escrever algum programa realmente.
<html>
<head>
<title>Hello,JavaScript World!</title>
</head>
<body>
<script type="text/javascript">
<!-- document.write("Hello,JavaScript World!"); //-->
</script>
</body>
</html>
4-2. JavaScript básico
Listing 1- Hello, World.
<html>
<head>
<title>Hello,JavaScript World!</title>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello,JavaScript World!");
//-->
</script>
</body>
</html>
4-2. JavaScript básico
Fig. 1 - Hello, World.
<html>
<head>
<title>Hello,JavaScript World!</title>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello,JavaScript World!");
//-->
</script>
</body>
</html>
Código de Javascript
4-2. JavaScript básico
<script type="text/javascript"> </script>
<script type="text/javascript"> =
Uma tag para escrever o comando de Javascript
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">
<!--
alo
Hello,JavaScript World!
document.write( alo );
Hello,JavaScript World!
Hello,JavaScript World!
alo
4-3. Variável
var Nome do variável = “conteudo(letra) “;
var Nome do variável = conteudo(Númelo);
document.write( 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.
frutas
[0] [1] [2] [3]
laranja banana pera ananas
frutas
[0] [1] [2] [3] [4] [5] [6]
laranja banana pera 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
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!" );
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.
<html>
<head>
<title>Exemplo2</title>
<script type="text/javascript">
<!--
function bomdia(){
document.f1.t1.value="Bom dia!";
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF">
<form name="f1">
<input type="button" value="Aperte" onClick="bomdia()">
<input type="text" name="t1">
</form>
</body>
4-7. Programação através
funções de Javascript
Fig. 4 - Aparece letras
4-7. Programação através
funções de Javascript
function bomdia(){
document. f1. t1. value="Bom dia!";
}
Document
<body bgcolor="#FFFFFF">
<form name=" f1 ">
<input type="button" value="Aperte" onClick="bomdia()">
<input type="text" name=" t1 ">
</form>
</body>
4-7. Programação através
funções de Javascript
Exemplo 3
Muda letras para outro quadro.
4-7. Programação através
funções de Javascript
Listing 5- Muda letras
<html>
<head>
<title>Exemplo3</title>
<script type="text/javascript">
<!--
function copy(){
document.f1.t2.value=document.f1.t1.value;
document.f1.t1.value="";
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF">
<form name="f1">
<input type="text" name="t1">
<input type="button" value="Para direita!" onClick="copy()">
<input type="text" name="t2">
4-7. Programação através
funções de Javascript
Fig. 5 - Muda letras
4-7. Programação através
funções de Javascript
Exemplo 4
Vamos fazer um calculador.
Listing 6- Calculador
<html>
<head>
<title>Exemplo3</title>
<script type="text/javascript">
<!--
function conta(){
document.f1.t3.value = document.f1.t1.value + document.f1.t2.value;
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF">
<form name="f1">
<input type="text" size="4" name="t1"> +
<input type="text" size="4" name="t2"> =
<input type="text" size="4" name="t3">
<br><br>
<input type="button" value="Conta" onClick="conta()">
<input type="reset" value="Apaga">
</form>
</body>
</html>
4-7. Programação através
funções de Javascript
Fig. 6- Calculador
?
As letras preenchedo é conhecido como “letra”.
É precisa para contar, tem que conhecer como “númelo”.
4-7. Programação através
funções de Javascript
parseInt
“parseInt” é um variável de Javascript
para trocar uma letra para um númelo.
function conta(){
document.f1.t3.value = document.f1.t1.value +
document.f1.t2.value;
}
function conta(){
document.f1.t3.value = parseInt(document.f1.t1.value) +
parseInt(document.f1.t2.value);
}
4-7. Programação através
funções de Javascript
Exemplo 5
Aparece uma janela de “Alert”.
Listing 7- Alert
<html>
<head>
<title>Exemplo5</title>
<script type="text/javascript">
<!--
function welcome(){
var yourname=document.f1.t1.value;
if(yourname == ""){
alert('Pode escrever seu nome.');
}else{
alert('Welcome! ' + yourname + '.');
}
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF">
<form name="f1">
Pode apertar a botao START.<br>
<input type="text" name="t1">
<input type="button" value="START" onClick="welcome()">
</form>
4-7. Programação através
funções de Javascript
Fig. 7 - Alert
4-7. Programação através
funções de Javascript
alert
“alert” é um variável de Javascript para aparecer uma janela.
A janela de Alert tem uma botão [OK] somente.
confirm
“confirm” também é um variável de Javascript para aparecer
uma janela.
A janela de confirm tem a botão [OK] e botão [Cancel].
Cancel
4-7. Programação através
funções de Javascript
Responde “true”.
Cancel
Responde “true”.
Responde “false”.
4-7. Programação através
funções de Javascript
Exemplo 6
Uma frase “for”.
Listing 8- for
<html>
<head>
<title>Exemplo6</title>
<script type="text/javascript">
<!--
function loopTest(){
for(i=0;i<5;i++){
alert('”i” esta ' + i + ' agora.');
}
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF">
<form name="f1">
<h1>Loop test!</h1>
<input type="button" value=“start" onClick="loopTest()">
</form>
</body>
</html>
4-7. Programação através
funções de Javascript
Listing 8- for
4-7. Programação através
funções de Javascript
for
for( i=0; i<Número de loop; i++ ){
comando;
}
function loopTest(){
Número de loop
for(i=0;i<5;i++){