Conceitos básicos web

Prof. Maurício Braga
Introdução


Como qualquer rede, a internet utiliza protocolos para
viabilizar a comunicação entre os micros que particip...
Protocolo HTTP


Protocolo que permite a comunicação entre um
cliente e um servidor funcionando no modelo
requisição/resp...
Comunicação utilizando HTTP


Troca de informações entre o cliente e o servidor são realizadas
através do protocolo TCP u...
Formato da mensagem de requisição


A estrutura básica de uma requisição consiste
de:
 Informação

da requisição realiza...
Exemplo de requisição usando HTTP

GET /servlet/default.jsp HTTP/1.1 Accept: text/plain; text/html
Accept-Language: en-gb ...
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:...
Métodos de requisição


O protocolo HTTP disponibiliza 8 métodos que podem
ser usados para realizar uma determinada ação ...
Métodos de requisição


HEAD:




GET:




Obtém a mesma resposta que é obtida com o método GET, mas
sem o corpo da m...
Métodos de requisição


PUT:




DELETE:




Faz o upload de um recurso para o servidor. Por questões de
segurança, e...
Métodos de requisição


OPTION:




Retorna a lista de métodos que o servidor suporta.

CONNECT:


Converte a conexão ...
Linguagem HTML


Linguagem script que “marca” a página com comandos
de formatação, que serão interpretados pelo browser
p...
Tags HTML


Comando que indica como uma parte da página deve
ser exibida;



O padrão HTML define várias tags, cada uma ...
Principais tags HTML
Tag

Descrição

<html>

Tag que identifica um arquivo html

<head>

Tag na qual deve ser colocada inf...
Exemplo Hello World em HTML
<html>
<body>
Olá mundo!
</body>
</html>

15/57
Exemplo Hello World em HTML

16/57
Exercício


Vamos criar uma página web. Essa página
deverá conter:
 Um

título (“Minha primeira página”) que deverá ser
...
Exercício
Bem vindo a minha página!
Opa, esta é a minha primeira página. Aqui você encontrará informações
sobre mim, meus ...
Tentativa inicial
<html>
<head>
<title>
Minha primeira página
</title>
</head>
<body>
Bem vindo a minha página!
Opa, esta ...
Tentativa inicial
Mais sobre mim
Meus principais interesses são na área de computação, principalmente
programação em Java ...
Resultado

21/57
Análise do resultado obtido


O que saiu errado?
 Formatação

de texto deve ser feita com comandos
html, não usando espa...
Comandos básicos de formatação
tag

efeito

<p>

Cria um parágrafo, pulando uma linha.

<br>

Pula uma linha.

<h*>

Defin...
Exercício


Modifique a página do exercício anterior, para que a
mesma fique da seguinte forma:

24/57
Solução
<html>
<head>
<title>
Minha primeira página
</title>
</head>
<body>
<h2>Bem vindo a minha página!</h2>
Opa, esta é...
Solução
<h3>Mais sobre mim</h3>
Meus principais interesses são na área de computação, principalmente
programação em Java n...
Criando links


Links para arquivos, outras páginas ou um correio
eletrônico podem ser adicionados a uma página usando
a ...
Exercício


Crie uma página com um pequeno
resumo sobre você (seus hobbies,
profissão, time que torce,
faculdade onde est...
Comandos adicionais de formatação


Para obter uma página com recursos adicionais de
formatação (itálico, negrito, sublin...
Comandos adicionais de formatação
tag

efeito

<b>

O texto colocado entre as tags de abertura e
fechamento fica em negrit...
Comandos adicionais de formatação
Tag
<Font >

efeito
O texto colocado entre as tags de abertura e fechamento
utilizará a ...
Exercício


Construa uma página que exiba este resultado:

32/57
Solução
<html>
<head>
<title> exercício</title>
</head>
<body>
<h1>estilos de formatação de texto</h1>
<b>este texto está ...
Adicionando figuras


Figuras podem ser adicionadas a uma página usando a
tag <img>.




Ex: <img src=“minhaimagem.jpg"...
Criando tabelas
tag
<table>

efeito
Cria uma tabela. Pode utilizar o parâmetro
border para especificar a espessura da bord...
Exercício


Construa uma página que exiba este resultado:

36/57
Solução
<html>
<body>
<table border = 1>
<tr> <th>Nome <th>Telefone <th>Codigo
<tr> <td>Augusto <td>3301-0000<td> 81
<tr> ...
Exercício: Monte a seguinte página:

38/57
Solução
<html><head>
<title> SuperNintendo home page </title>
</head>
<center>
<h1>Super Nintendo </h1>
<HR>
<img src="sup...
Solução
<TR>
<TD> <b> Emulador </TD>
<TD> <center> <b> Versão </center></TD>
<TD> <b> Descrição </TD>
</TR>
<TR>
<TD> <p> ...
Formulários


Mecanismo essencial do padrão html para comunicação
entre o cliente e o servidor;



Permitem ao usuário r...
Funcionamento do formulário


Formulário possui um botão do tipo submit, que ao ser
pressionado dispara o processo de com...
Algumas tags de formulários
Tag

efeito

<form>

Cria uma formulário. Aceita 3 parâmetros,
Name, Method e Action.

Name

P...
Algumas tags de formulários
Tag
Action

efeito
Especifica o endereço do programa ou script que
vai receber a informação en...
Alguns tipos de entrada em formulários
Tag efeito
hidden Cria um dado que não é exibido na tela. Pode ser
usado para passa...
Alguns tipos de entrada em formulários
Tag

efeito

radio

Especifica um componente do tipo radiobutton.
Ex: <input type="...
Exemplo
<html>
<form method=post action="">
<input type="text" name="texto">
<input type="reset" value="limpar">
<input ty...
Resultado

48/57
Exercício


Construa uma página que exiba este resultado:


Dica: use as tags vistas anteriormente para ajustar a format...
Solução
<html><head><title>Deixe-me rico! </title></head>
<h2>Deixe-me rico!</h2>
<form method=post action="Aplicacao.jsp"...
Exercício


Construa uma página que exiba este resultado:

51/57
Solução
<html><head><title>Deixe-me rico! </title></head>
<h2>Deixe-me rico!</h2>
<form method=post action="Aplicacao.jsp"...
Exercício


Construa uma
página que
exiba este
resultado:

53/57
Solução
<html><head><title>Deixe-me rico! </title></head>
<h2>Deixe-me rico!</h2>
<form method=post action="Aplicacao.jsp"...
Solução
<input type="radio" name = "pagamento" value="v" CHECKED> Visa
<br>
<input type="radio" name = "pagamento" value="...
Exercício


Crie uma tela para realizar cadastro de cliente para um
site de comércio eletrônico. Essa tela deverá:



...
Conceitos básicos Web

Prof. Maurício Braga
Próximos SlideShares
Carregando em…5
×

A87c5f081429cf

277 visualizações

Publicada em

aeho

Publicada em: Indústria automotiva
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

A87c5f081429cf

  1. 1. Conceitos básicos web Prof. Maurício Braga
  2. 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. 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. 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. 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
  6. 6. 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 UserAgent: Mozilla/4.0 (compatible; MSIE 4.01; Windows 98) Content-Length: 33 Content-Type: application/x-www-formurlencoded Accept-Encoding: gzip, deflate LastName=Franks&FirstName=Michael 6/57
  7. 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. 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. 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. 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. 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. 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. 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. 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
  15. 15. Exemplo Hello World em HTML <html> <body> Olá mundo! </body> </html> 15/57
  16. 16. Exemplo Hello World em HTML 16/57
  17. 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. 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. 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. 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
  21. 21. Resultado 21/57
  22. 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. 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
  24. 24. Exercício  Modifique a página do exercício anterior, para que a mesma fique da seguinte forma: 24/57
  25. 25. 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. 25/57
  26. 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. 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. 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. 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. 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. 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
  32. 32. Exercício  Construa uma página que exiba este resultado: 32/57
  33. 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. 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. 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
  36. 36. Exercício  Construa uma página que exiba este resultado: 36/57
  37. 37. 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> 37/57
  38. 38. Exercício: Monte a seguinte página: 38/57
  39. 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
  40. 40. 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> 40/57
  41. 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. 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. 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. 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. 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. 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
  47. 47. Exemplo <html> <form method=post action=""> <input type="text" name="texto"> <input type="reset" value="limpar"> <input type="submit" value="enviar"> </form> </html> 47/57
  48. 48. Resultado 48/57
  49. 49. Exercício  Construa uma página que exiba este resultado:  Dica: use as tags vistas anteriormente para ajustar a formatação. 49/57
  50. 50. 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> 50/57
  51. 51. Exercício  Construa uma página que exiba este resultado: 51/57
  52. 52. 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> 52/57
  53. 53. Exercício  Construa uma página que exiba este resultado: 53/57
  54. 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. 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. 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
  57. 57. Conceitos básicos Web Prof. Maurício Braga

×