A87c5f081429cf

Conceitos básicos webConceitos básicos web

Prof. Maurício Braga

2/57

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.

3/57

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

4/57

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.

5/57

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

6/57

Exemplo de requisição usando HTTP

GET /servlet/default.jsp HTTP/1.1 Accept: text/plain; text/html Accept-Language: en-gb Connection: Keep-Alive Host: localhost Referer: http://localhost/ch8/SendDetails.htm User-Agent: Mozilla/4.0 (compatible; MSIE 4.01; Windows 98) Content-Length: 33 Content-Type: application/x-www-form-urlencoded Accept-Encoding: gzip, deflate LastName=Franks&FirstName=Michael

7/57

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>

8/57

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.

9/57


HEAD: 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;

GET: Solicita um determinado recurso ao servidor. É o mais utilizado

método na web atualmente;

POST: Submete dados para serem processados no servidor.

10/57


PUT: Faz o upload de um recurso para o servidor. Por questões de

segurança, essa opção costuma ser desabilitada no servidor;

DELETE: 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.

11/57


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

12/57

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.

13/57

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

14/57

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.

15/57

Exemplo Hello World em HTML

<html><body>

Olá mundo!

</body></html>

16/57

Exemplo Hello World em HTML

17/57

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.

18/57

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

19/57

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.

20/57

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>

21/57

Resultado

22/57

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.

23/57

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.

24/57

Exercício Modifique a página do exercício anterior, para que a

mesma fique da seguinte forma:

25/57

Solução

<html><head> <title>

Minha primeira página </title></head><body>

<h2>Bem vindo a minha página!</h2>

Opa, esta é a minha primeira página. Aqui você encontrará informações sobre mim, meus interesses e os esportes que pratico.

26/57

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>

27/57

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:[email protected]"> meu e-mail </a>

28/57

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 e-mail para você.

29/57

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:

30/57


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.

31/57


Tag efeito

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

32/57

Exercício Construa uma página que exiba este resultado:

33/57

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>

34/57

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

35/57

Criando tabelas

tag efeito

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

36/57


37/57

Solução

<html><body><table border = 1>

<tr> <th>Nome <th>Telefone <th>Codigo<tr> <td>Augusto <td>3301-0000<td> 81<tr> <td>Ricardo <td>4404-0001<td> 81<tr> <td>Valério <td>5505-0005<td> 81

</table></body></html>

38/57

Exercício: Monte a seguinte página:

39/57

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

40/57

Solução<TR>

<TD> <b> Emulador </TD><TD> <center> <b> Versão </center></TD>

<TD> <b> Descrição </TD></TR><TR>

<TD> <p> <a href="snes9x.zip"> Snes9x </a> </TD><TD> <center> 1.28 </center> </TD>

<TD> Excelente Emulador, capaz de rodar muitos jogos. </TD></TR><TR>

<TD> <a href="Zsnes.zip"> ZSNES </a></TD><TD> <center> 2.5 </center> </TD>

<TD> Excelente Emulador, capaz de rodar muitos jogos. </TD></TR></table></center></html>

41/57

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.

42/57

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.

43/57

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.

44/57

Algumas tags de formulários

Tag efeitoAction 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 >.

45/57

Alguns tipos de entrada em formulários

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

46/57

Alguns tipos de entrada em formulários

Tag efeitoradio 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 checkboxEx: <input type="checkbox“>

47/57

Exemplo

<html><form method=post action=""> <input type="text" name="texto"> <input type="reset" value="limpar"> <input type="submit" value="enviar"></form></html>

48/57

Resultado

49/57


Dica: use as tags vistas anteriormente para ajustar a formatação.

50/57

Solução

<html><head><title>Deixe-me rico! </title></head><h2>Deixe-me rico!</h2><form method=post action="Aplicacao.jsp"><br><table><tr><td> Entre seu cartão de crédito aqui: <td> <input type="text"

name=“cartao” size = 20><tr><td> Valor que deseja doar para mim : <td><input type=“text"

name = “valor” size = 6><tr><td> Expira em : <td><input type=“text" name = “data” size = 6></table><input type="reset" value="limpar"><input type="submit" value="enviar"></form></html>

51/57


52/57

Solução

<html><head><title>Deixe-me rico! </title></head><h2>Deixe-me rico!</h2><form method=post action="Aplicacao.jsp"><br>Selecione o seu cartão:<br> <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 <br><table><tr><td> Valor que deseja doar para mim : <td><input type=“text" name =

“valor” size = 8><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>

53/57

Exercício

Construa uma página que exiba este resultado:

54/57

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>

55/57

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>

56/57

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.

Conceitos básicos WebConceitos básicos Web

Prof. Maurício Braga

Automotive

A87c5f081429cf