A87c5f081429cf

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

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

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

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

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

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

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



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



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



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

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

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

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

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
exibido na janela do navegador;
 O texto exibido no slide seguinte, com os parágrafos
definidos conforme o exemplo.

17/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é.
18/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.
19/57

Tentativa inicial
Mais sobre mim

</body>
</html>
20/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.

22/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.
23/57

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 é a minha primeira página. Aqui você encontrará informações sobre
mim, meus interesses e os esportes que pratico.

25/57

Solução
<h3>Mais sobre mim</h3>
<p>
<p>
</body>
</html>
26/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:meunome@meuemail.com.br"> meu e-mail
</a>
27/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 email para você.

28/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:

29/57

tag

efeito

<b>

O texto colocado entre as tags de abertura e
fechamento fica em negrito.

<i>

fechamento fica em itálico.

<u>

fechamento fica sublinhado.

<s>

fechamento fica riscado.
30/57

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

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

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

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

Exercício



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> <td>Ricardo <td>4404-0001<td> 81
<tr> <td>Valério <td>5505-0005<td> 81
</table>
</body>
</html>
37/57

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

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

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

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

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

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

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

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

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

Exercício




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

49/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>
</form></html>
50/57

Exercício



51/57

Solução
<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>
</table>
</form></html>
52/57

Exercício


Construa uma
página que
exiba este
resultado:

53/57

Solução
<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

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>
</table>
</form></html>

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

56/57

Conceitos básicos Web

Prof. Maurício Braga

A87c5f081429cf

Mais conteúdo relacionado

Mais procurados

Semelhante a A87c5f081429cf

A87c5f081429cf