Introdução 
à Internet, HTTP e HTML 
Eduardo Mendes
Internet 
Breve histórico
História 
n No final de 60’s surge a ARPANet com propósito militar.
História 
n Acesso cresce principalmente entre acadêmicos
História 
Entretanto, 
o conteúdo... 
..textos 
acadêmicos 
em ASCII
História 
n Cientistas do CERN lançam uma proposta para a 
World Wide Web (HTML), 1989 
n Facilitar o compartilhamento de documentos de 
pesquisa 
n Hipertexto + Internet 
n Internet se populariza nos 90’s
História 
Hipertexto 
• Extensão para textos 
• HTML (Hypertext Markup Language) 
HTML na Internet 
• Antes: coleção fragmentada de imagens e textos. 
• Depois: Rede interligada através de hipertextos 
com links 
Navegador Mosaic 
• índices clicáveis, tabelas de conteúdo, busca de 
texto, bookmark, etc
Servidores
O quê 
um SERVIDOR web faz? 
n Um servidor web recebe uma solicitação do 
cliente e devolve algo para ele
O que 
um CLIENTE web faz? 
n Permite o usuário requisitar algo no servidor 
n Mostra ao usuário o resultado da requisição 
click
Mas como 
cliente e 
servidor se 
comunicam? 
Clientes e servidores 
devem entender 
HTTP e os navegadores 
devem conhecer HTML
HTTP e HTML
Como clientes e servidores 
se comunicam? 
• é a forma usada pelo 
navegador para mostrar 
o conteúdo ao usuário 
HTML 
• é o protocolo que os 
clientes e servidores 
usam para se comunicar 
HTTP 
• para enviar HTML ao 
cliente 
O 
servidor 
usa HTTP
HTTP 
n HyperText Transfer Protocol 
n Protocolo stateless: uma requisição executada 
não tem conhecimento das requisições anteriores
HTTP 
n HyperText Transfer Protocol 
n Dois tipos de mensagem: request e response
Estrutura da 
conversação HTTP? 
Principais Elementos Request 
n Método http (ação a ser 
executada) 
n Página a ser acessada 
n Parâmetros de formulários 
(como argumentos para 
métodos) 
Principais Elementos Response 
n Código de Status 
n Tipo de conteúdo (content-type: 
texto, imagem...) 
n O conteúdo
HTTP Request 
n Uma requisição HTTP é composta por: 
n Linha inicial 
n Zero ou mais linhas de cabeçalho 
n Um linha em branco seguida pelo conteúdo 
n A linha inicial possui os dados: 
n Método de requisição (em geral GET ou POST) 
n URI do recurso solicitado 
n Versão do protocolo usada
HTTP Request 
n O cabeçalho de um request é formado por pares 
atributos valores separados por dois pontos. 
Alguns exemplos: 
n Accept:image/gif,image/jpeg 
n indica tipos aceitos como resposta 
n User-Agent:Mozilla/4.0 
n indica o tipo de browser usado pelo cliente 
n Accept-Language:pt-br,en-us 
n indica a linguagem de preferência do cliente 
n O corpo da requisição é usado para levar ao 
servidor dados associados à requisição
Método Request??? 
n O método HTTP 
n Tipo de requisição que está sendo feita 
n Diversos tipos 
n Mais usados: GET e POST
GET x POST 
GET 
POST 
Nova Página 
Envia dados
HTTP Response 
n Uma resposta HTTP é composta por: 
n Linha inicial 
n Zero ou mais linhas de cabeçalho 
n Um linha em branco seguida pelo conteúdo 
n A linha inicial possui o status da resposta: 
n A versão do protocolo usada 
n Código do status 
n Texto de explicação do status
HTTP Response 
n Alguns exemplos de status de resposta: 
200 OK - A requisição foi bem sucedida 
400 Bad Request - O servidor não pode entender a 
requisição 
401 Unauthorized – O dado requisitado não foi 
autorizado 
404 Not Found – Servidor não encontrou o dado 
requisitado 
n O cabeçalho da resposta possui informações 
extra sobre o resultado e o servidor 
n O corpo possui os dados da requisição (ex: arquivo 
HTML)
HTML 
Parte da resposta HTTP 
n Uma resposta HTTP contém HTML
Servidores web 
n Distribuem páginas estáticas 
n Acha a página procurada 
e a devolve examente 
como ela está no servidor 
n E se precisarmos de algo dinâmico???
Páginas dinâmicas e estáticas 
n Conteúdo 
n Estático: não se altera 
n Dinâmico: mudanças de acordo 
com a interação com o usuário
Quando usar páginas 
dinâmicas? 
A página web deve 
ser baseada nos 
dados informados 
pelo usuário 
A página usa 
informações de 
banco de dados ou 
de outras fontes 
Utilização de 
modelos quando os 
dados mudam 
frequentemente
Tecnologias lado-servidor 
Estendem as funções 
básicas de servidor HTTP: 
• CGI - Common Gateway Interface 
• APIs: ISAPI, NSAPI, Apache 
API, Servlet API 
• Scripts: ASP, JSP, Cold Fusion, 
PHP 
Rodam do lado do servidor, 
portanto, não dependem de 
suporte por parte dos 
navegadores 
• Navegadores fornecem apenas a 
interface do usuário 
Interceptam o curso normal 
da comunicação 
• Recebem dados via requisições 
HTTP (GET e POST) 
• Devolvem dados através de 
respostas HTTP
Internet everywhere!
Tecnologias dinâmicas

Introdução à Internet, Http e HTML

  • 1.
    Introdução à Internet,HTTP e HTML Eduardo Mendes
  • 2.
  • 3.
    História n Nofinal de 60’s surge a ARPANet com propósito militar.
  • 4.
    História n Acessocresce principalmente entre acadêmicos
  • 5.
    História Entretanto, oconteúdo... ..textos acadêmicos em ASCII
  • 6.
    História n Cientistasdo CERN lançam uma proposta para a World Wide Web (HTML), 1989 n Facilitar o compartilhamento de documentos de pesquisa n Hipertexto + Internet n Internet se populariza nos 90’s
  • 7.
    História Hipertexto •Extensão para textos • HTML (Hypertext Markup Language) HTML na Internet • Antes: coleção fragmentada de imagens e textos. • Depois: Rede interligada através de hipertextos com links Navegador Mosaic • índices clicáveis, tabelas de conteúdo, busca de texto, bookmark, etc
  • 8.
  • 9.
    O quê umSERVIDOR web faz? n Um servidor web recebe uma solicitação do cliente e devolve algo para ele
  • 10.
    O que umCLIENTE web faz? n Permite o usuário requisitar algo no servidor n Mostra ao usuário o resultado da requisição click
  • 11.
    Mas como clientee servidor se comunicam? Clientes e servidores devem entender HTTP e os navegadores devem conhecer HTML
  • 12.
  • 13.
    Como clientes eservidores se comunicam? • é a forma usada pelo navegador para mostrar o conteúdo ao usuário HTML • é o protocolo que os clientes e servidores usam para se comunicar HTTP • para enviar HTML ao cliente O servidor usa HTTP
  • 14.
    HTTP n HyperTextTransfer Protocol n Protocolo stateless: uma requisição executada não tem conhecimento das requisições anteriores
  • 15.
    HTTP n HyperTextTransfer Protocol n Dois tipos de mensagem: request e response
  • 16.
    Estrutura da conversaçãoHTTP? Principais Elementos Request n Método http (ação a ser executada) n Página a ser acessada n Parâmetros de formulários (como argumentos para métodos) Principais Elementos Response n Código de Status n Tipo de conteúdo (content-type: texto, imagem...) n O conteúdo
  • 17.
    HTTP Request nUma requisição HTTP é composta por: n Linha inicial n Zero ou mais linhas de cabeçalho n Um linha em branco seguida pelo conteúdo n A linha inicial possui os dados: n Método de requisição (em geral GET ou POST) n URI do recurso solicitado n Versão do protocolo usada
  • 18.
    HTTP Request nO cabeçalho de um request é formado por pares atributos valores separados por dois pontos. Alguns exemplos: n Accept:image/gif,image/jpeg n indica tipos aceitos como resposta n User-Agent:Mozilla/4.0 n indica o tipo de browser usado pelo cliente n Accept-Language:pt-br,en-us n indica a linguagem de preferência do cliente n O corpo da requisição é usado para levar ao servidor dados associados à requisição
  • 19.
    Método Request??? nO método HTTP n Tipo de requisição que está sendo feita n Diversos tipos n Mais usados: GET e POST
  • 20.
    GET x POST GET POST Nova Página Envia dados
  • 21.
    HTTP Response nUma resposta HTTP é composta por: n Linha inicial n Zero ou mais linhas de cabeçalho n Um linha em branco seguida pelo conteúdo n A linha inicial possui o status da resposta: n A versão do protocolo usada n Código do status n Texto de explicação do status
  • 22.
    HTTP Response nAlguns exemplos de status de resposta: 200 OK - A requisição foi bem sucedida 400 Bad Request - O servidor não pode entender a requisição 401 Unauthorized – O dado requisitado não foi autorizado 404 Not Found – Servidor não encontrou o dado requisitado n O cabeçalho da resposta possui informações extra sobre o resultado e o servidor n O corpo possui os dados da requisição (ex: arquivo HTML)
  • 23.
    HTML Parte daresposta HTTP n Uma resposta HTTP contém HTML
  • 24.
    Servidores web nDistribuem páginas estáticas n Acha a página procurada e a devolve examente como ela está no servidor n E se precisarmos de algo dinâmico???
  • 26.
    Páginas dinâmicas eestáticas n Conteúdo n Estático: não se altera n Dinâmico: mudanças de acordo com a interação com o usuário
  • 27.
    Quando usar páginas dinâmicas? A página web deve ser baseada nos dados informados pelo usuário A página usa informações de banco de dados ou de outras fontes Utilização de modelos quando os dados mudam frequentemente
  • 29.
    Tecnologias lado-servidor Estendemas funções básicas de servidor HTTP: • CGI - Common Gateway Interface • APIs: ISAPI, NSAPI, Apache API, Servlet API • Scripts: ASP, JSP, Cold Fusion, PHP Rodam do lado do servidor, portanto, não dependem de suporte por parte dos navegadores • Navegadores fornecem apenas a interface do usuário Interceptam o curso normal da comunicação • Recebem dados via requisições HTTP (GET e POST) • Devolvem dados através de respostas HTTP
  • 30.
  • 31.