O documento apresenta conceitos básicos sobre a web, incluindo:
1) A internet utiliza protocolos como o HTTP para viabilizar a comunicação entre dispositivos;
2) O HTTP permite a comunicação entre cliente e servidor através de requisições e respostas;
3) A capacidade de interligar documentos HTML através de links levou à criação da World Wide Web.
2. Introdução
Como qualquer rede, a internet utiliza protocolos para
viabilizar a comunicação entre os micros que participam
da mesma;
O protocolo utilizado para acessar páginas web é o
HTTP (HyperText Transfer Protocol);
Capacidade de interligar vários documentos HTML a
partir do uso de links levou a criação da World Wide
Web.
2/57
3. Protocolo HTTP
Protocolo que permite a comunicação entre um
cliente e um servidor funcionando no modelo
requisição/resposta:
Cliente:
máquina que faz uma requisição pelo
protocolo HTTP a um servidor web utilizando um
navegador web, um spider ou outro software.
Servidor: armazena ou cria recursos como páginas
html, imagens e outros arquivos com a finalidade de
atender as requisições do cliente
3/57
4. Comunicação utilizando HTTP
Troca de informações entre o cliente e o servidor são realizadas
através do protocolo TCP usando normalmente a porta 80;
Servidor HTTP aguarda pedidos do cliente em uma porta
específica. Ao receber uma solicitação do cliente, o servidor envia
uma resposta tal como "HTTP/1.1 200 OK" bem como uma
mensagem que pode conter o arquivo solicitado, uma mensagem
de erro ou um outro tipo de informação;
Recursos acessados via HTTP são identificados usando URLs
(Uniform Resource Locators) que são iniciadas com http:// ou https.
4/57
5. Formato da mensagem de requisição
A estrutura básica de uma requisição consiste
de:
Informação
da requisição realizada (ex: GET
/images/logo.gif HTTP/1.1), que solicita o arquivo
logo.gif armazenado no diretório /images;
Cabeçalhos (ex: Accept-Language: en) (são
opcionais);
Uma linha vazia;
Corpo da mensagem (opcional).
5/57
7. Exemplo de resposta usando HTTP
HTTP/1.1 200 OK Server: Microsoft-IIS/4.0 Date: Mon, 3 Jan
1998 13:13:33 GMT Content-Type: text/html Last-Modified:
Mon, 11 Jan 1998 13:23:42 GMT Content-Length: 112
<HTML>
<HEAD> <TITLE>HTTP exemplo de resposta </TITLE>
</HEAD>
<BODY>
Bem vindo a minha pagina
</BODY>
</HTML>
7/57
8. Métodos de requisição
O protocolo HTTP disponibiliza 8 métodos que podem
ser usados para realizar uma determinada ação em um
dado recurso:
HEAD;
GET;
POST;
PUT;
DELETE;
TRACE;
OPTION;
CONNECT.
8/57
9. Métodos de requisição
HEAD:
GET:
Obtém a mesma resposta que é obtida com o método GET, mas
sem o corpo da mensagem. É útil para obter metadados escritos
no cabeçalho da resposta, mas sem fazer o download da
mensagem inteira;
Solicita um determinado recurso ao servidor. É o mais utilizado
método na web atualmente;
POST:
Submete dados para serem processados no servidor.
9/57
10. Métodos de requisição
PUT:
DELETE:
Faz o upload de um recurso para o servidor. Por questões de
segurança, essa opção costuma ser desabilitada no servidor;
Remove um recurso do servidor. Por questões de segurança,
essa opção costuma ser desabilitada no servidor;
TRACE:
Retorna o pedido submetido ao servidor, permitindo ao cliente
saber o que servidores intermediários podem estar adicionando
ao pedido original.
10/57
11. Métodos de requisição
OPTION:
Retorna a lista de métodos que o servidor suporta.
CONNECT:
Converte a conexão para, entre outras coisas, viabilizar
comunicação criptografada via SSL (HTTPS).
11/57
12. Linguagem HTML
Linguagem script que “marca” a página com comandos
de formatação, que serão interpretados pelo browser
para exibição da página;
Comandos definidos na linguagem html, conhecidos
como tags, permitem a exibição das páginas em um
grande número de dispositivos diferentes, como PCs,
celulares, palms, etc;
Máquina cliente tem liberdade para escolher a melhor
forma de exibir a página de acordo com a sua
capacidade, mantendo entretanto a estrutura básica da
página intacta.
12/57
13. Tags HTML
Comando que indica como uma parte da página deve
ser exibida;
O padrão HTML define várias tags, cada uma com um
propósito específico;
Uma tag de início começa com < e termina com > . Uma
tag de fim começa com </ e termina com >. Ex: <html> e
</html> .
13/57
14. Principais tags HTML
Tag
Descrição
<html>
Tag que identifica um arquivo html
<head>
Tag na qual deve ser colocada informações sobre a
página inteira, Como o título
<title>
Identifica o título de uma página.
<body>
Tag dentro da qual é definido o conteúdo da
página, bem como informações sobre o aspecto
visual da mesma.
14/57
17. Exercício
Vamos criar uma página web. Essa página
deverá conter:
Um
título (“Minha primeira página”) que deverá ser
exibido na janela do navegador;
O texto exibido no slide seguinte, com os parágrafos
definidos conforme o exemplo.
17/57
18. Exercício
Bem vindo a minha página!
Opa, esta é a minha primeira página. Aqui você encontrará informações
sobre mim, meus interesses e os esportes que pratico.
Mais sobre mim
Meus principais interesses são na área de computação, principalmente
programação em Java na web.
Gosto de jogar basquete nas horas vagas e assistir filmes.
Bom, acho que é isso. Até.
18/57
19. Tentativa inicial
<html>
<head>
<title>
Minha primeira página
</title>
</head>
<body>
Bem vindo a minha página!
Opa, esta é a minha primeira página. Aqui você encontrará informações
sobre mim, meus interesses e os esportes que pratico.
19/57
20. Tentativa inicial
Mais sobre mim
Meus principais interesses são na área de computação, principalmente
programação em Java na web.
Gosto de jogar basquete nas horas vagas e assistir filmes.
Bom, acho que é isso. Até.
</body>
</html>
20/57
22. Análise do resultado obtido
O que saiu errado?
Formatação
de texto deve ser feita com comandos
html, não usando espaços ou recursos de formatação
do editor utilizado;
A tabela a seguir mostra alguns comandos de
formatação que podem ser usados para atingir um
resultado melhor.
22/57
23. Comandos básicos de formatação
tag
efeito
<p>
Cria um parágrafo, pulando uma linha.
<br>
Pula uma linha.
<h*>
Define um cabeçalho, onde o * é um número.
Permite definir títulos de seção de acordo com
a sua importância.
23/57
26. Solução
<h3>Mais sobre mim</h3>
Meus principais interesses são na área de computação, principalmente
programação em Java na web.
<p>
Gosto de jogar basquete nas horas vagas e assistir filmes.
<p>
Bom, acho que é isso. Até.
</body>
</html>
26/57
27. Criando links
Links para arquivos, outras páginas ou um correio
eletrônico podem ser adicionados a uma página usando
a tag <a href>.
Ex: <a href= “http://www.endereço.com.br”> Meu endereço </a>.
Para uso com e-mail, deve ser usado mailto: antes do
endereço:
Ex: <a href="mailto:meunome@meuemail.com.br"> meu e-mail
</a>
27/57
28. Exercício
Crie uma página com um pequeno
resumo sobre você (seus hobbies,
profissão, time que torce,
faculdade onde estuda, etc).
Para cada assunto que você
mencionar, colocar um link para
um site (ex: site da faculdade, do
time, da wikipedia sobre o
assunto, etc).
Para finalizar, crie um link que
permita ao usuário enviar um email para você.
28/57
29. Comandos adicionais de formatação
Para obter uma página com recursos adicionais de
formatação (itálico, negrito, sublinhado, etc) basta fazer
uso de tags que adicionem esses efeitos;
É possível usar tags em conjunto, de forma a combinar
efeitos (ex: ter um texto em itálico e negrito)
A seguir listamos alguns comandos de formatação de
texto:
29/57
30. Comandos adicionais de formatação
tag
efeito
<b>
O texto colocado entre as tags de abertura e
fechamento fica em negrito.
<i>
O texto colocado entre as tags de abertura e
fechamento fica em itálico.
<u>
O texto colocado entre as tags de abertura e
fechamento fica sublinhado.
<s>
O texto colocado entre as tags de abertura e
fechamento fica riscado.
30/57
31. Comandos adicionais de formatação
Tag
<Font >
efeito
O texto colocado entre as tags de abertura e fechamento
utilizará a fonte, cor e tamanho especificados nessa tag.
Ex: <font size=7 color="blue" face="arial, verdana">texto
azul grande</font>
<center> Centraliza aquilo que estiver dentro dessa tag.
Ex: <center> Texto centralizado </center>
<hr>
Permite a criação de linhas horizontais. Não contém tag
de fechamento. É possível definir cor e espessura.
Ex: <hr color="green" width=20%>
31/57
33. Solução
<html>
<head>
<title> exercício</title>
</head>
<body>
<h1>estilos de formatação de texto</h1>
<b>este texto está em negrito.</b> <br>
<i>este texto está em itálico.</i> <br>
<u>este texto está sublinhado.</u> <br>
<i><b>este texto está em negrito e itálico.</b></i> <br>
<u><i><b>este texto está em negrito,sublinhado e itálico.</b></i></u>
<br>
<s><b>este texto está em negrito e riscado.</b></s> <br>
</body>
</html>
33/57
34. Adicionando figuras
Figuras podem ser adicionadas a uma página usando a
tag <img>.
Ex: <img src=“minhaimagem.jpg">.
Parâmetros que podem ser utilizados com o <img>:
Alt = nome que será exibido se a página não puder exibir
imagens.
Align = indica como o texto vai ser alinhado em relação a
imagem.
<img alt="ROSTO" src=“msx.gif" align="middle">.
34/57
35. Criando tabelas
tag
<table>
efeito
Cria uma tabela. Pode utilizar o parâmetro
border para especificar a espessura da borda.
Ex: <table border = 1>
<th>
Cria um titulo de coluna.
<tr>
Cria uma linha dentro da tabela.
<td>
Especifica o conteúdo de uma coluna dentro de
uma linha na tabela
35/57
39. Solução
<html><head>
<title> SuperNintendo home page </title>
</head>
<center>
<h1>Super Nintendo </h1>
<HR>
<img src="supernes.gif">
</center>
<center>
Lançado no início dos anos 90, o SNES é um videogame de 16 bits
baseado no processador 65816 da Motorola.
<h3> Emuladores disponíveis: </h3>
</center>
<center>
<table border=2 cellspacing=1 Width=70%>
39/57
41. Formulários
Mecanismo essencial do padrão html para comunicação
entre o cliente e o servidor;
Permitem ao usuário realizar entrada de dados em uma
página web;
Dados preenchidos pelo usuário são passados para o
servidor, que poderá então fornecer uma resposta
personalizada utilizando as informações passadas pelo
usuário.
41/57
42. Funcionamento do formulário
Formulário possui um botão do tipo submit, que ao ser
pressionado dispara o processo de comunicação entre o
cliente e o servidor para a passagem dos dados;
Dados são enviados para um endereço especificado no
formulário que irá definir uma aplicação capaz de
receber e processar esses dados.
42/57
43. Algumas tags de formulários
Tag
efeito
<form>
Cria uma formulário. Aceita 3 parâmetros,
Name, Method e Action.
Name
Parâmetro da tag form. Especifica o nome do
formulário.
Method
Forma de envio dos dados. Os valores utilizados
para este parâmetro são GET e POST.
GET: Submete os valores como parte do header
da url.
POST: Envia os dados como um documento.
43/57
44. Algumas tags de formulários
Tag
Action
efeito
Especifica o endereço do programa ou script que
vai receber a informação entrada pelo usuário.
Ex: <form name="Form1“ action=“aplicação.jsp"
method="get">.
<input> Cria um componente. Pode receber parâmetros
para definir propriedades do componente.
Ex: <input type="checkbox">
text
Especifica um componente do tipo caixa de texto.
Ex: <input type="text" name="texto" size = 20 >.
44/57
45. Alguns tipos de entrada em formulários
Tag efeito
hidden Cria um dado que não é exibido na tela. Pode ser
usado para passar dados para o servidor.
Ex: <input type = "hidden" name = "acao" value = “1">
reset
Especifica um botão que ao ser clicado limpa as
informações fornecidas pelo usuário.
Ex: <input type="reset" value="limpar">.
submit Especifica um botão que ao ser clicado envia as
informações fornecidas pelo usuário.
Ex: <input type="submit" value="enviar">
45/57
46. Alguns tipos de entrada em formulários
Tag
efeito
radio
Especifica um componente do tipo radiobutton.
Ex: <input type="radio" name = “opcao"
value="v" Checked> opção default <br>.
select
Especifica um componente do tipo lista.
Ex: <select name ="valor"><option> opção
1</select>
checkbox Especifica um componente do tipo checkbox
Ex: <input type="checkbox“>
46/57
54. Solução
<html><head><title>Deixe-me rico! </title></head>
<h2>Deixe-me rico!</h2>
<form method=post action="Aplicacao.jsp"><br>
Escolha o valor de sua doação: <p> <select name ="valor" size=4>
<option selected> R$ 1.000.000
<option> R$ 100.000
<option> R$ 10.000
<option> R$ 1.000
</select>
<p>
Selecione o seu cartão:<br>
54/57
55. Solução
<input type="radio" name = "pagamento" value="v" CHECKED> Visa
<br>
<input type="radio" name = "pagamento" value="m" > Mastercard
<br>
<input type="radio" name = "pagamento" value="h" > Hipercard
<p>
<table>
<tr><td> Expira em : <td><input type=“text" name = “data” size = 8>
</table>
<input type="reset" value="limpar">
<input type="submit" value="enviar">
</form></html>
55/57
56. Exercício
Crie uma tela para realizar cadastro de cliente para um
site de comércio eletrônico. Essa tela deverá:
Usar formulário;
Cadastrar os campos nome, Logradouro, Cidade, CEP, unidade
federativa, sexo, RG e CPF. Deverá também perguntar se o
usuário deseja receber e-mail com promoções;
Usar campos do tipo lista para unidade federativa;
Usar campo do tipo botão de rádio para a pergunta sobre
promoções e sobre o sexo;
Usar campos do tipo texto para as outras informações.
56/57