OO e HTML 3

Universidade
de Brasília
Orientação a Objetos
HTML e HTTP
Sérgio Freitas e Ricardo Jacobi

Faculdade do Gama
Universidade de Brasília
Faculdade do Gama – FGA / UnB

Universidade
1. Noções de HTML
de Brasília
HTML é uma linguagem largamente utilizada

nos dias de hoje.
Mas HTML é uma linguagem?
Que tipo de linguagem?
Podemos fazer programas nela?

Universidade
1.1 Linguagens de Marcação
de Brasília
❂ O que é um documento ?
❂ Os documentos possuem estrutura ?
❂ Como estruturar um documento ?
❂ O que são Markup Languages, ou,
Linguagens de Marcação ?
❂ Para que servem ? Como podem ser
criadas ?

Universidade
de Brasília
memorando nº 12/2003, Brasília, 10 de outubro de 2009

assunto: curso em andamento
Prezados Srs.,
Já se encontra em andamento o curso Servlet e JSP do curso de
Orientação à Objetos.
Atenciosamente, Sérgio Freitas

Universidade
de Brasília
Exercício nº 1
Proponha um conjunto de marcas (tags) para
o documento exemplo.

Universidade
de Brasília
❂ Que marcas foram necessárias ?

❂ De que forma estas marcas foram usadas
na marcação ?
❂ Foi necessário um encapsulamento de
marcas ?
❂ Foi necessário a utilização de atributos ?
❂ O surgimento da HTML e sua comparação
com a SGML e a XML.

Universidade
1.2 Marcação HTML
de Brasília
O que significa HTML ?
HyperText Markup Language
O que é a HTML ?
(???)

Universidade
1.2 Marcação HTML
de Brasília
Tipos de marcas:
Marcação semântica - delimita e estrutura o
contéudo informativo de um documento.
URIs - ligação (em termos de navegação) a
outros recursos externos ao documento.

Universidade
1.2 Marcação HTML
de Brasília
Tipos de marcas (cont.):

» Formatação visual - dá
informações sobre o formato com
que determinado conteúdo deve
ser visualizado.
» Programação – marcas que
permitem algum tipo de
programação/interação no cliente
(e.g. Javascript).

Universidade
HTML – Marcação semântica
de Brasília
• Definição de marcação semântica

• Marcas utilizadas:
<html> </html>
<head></head> e <body></body> <title></title> <p></p>
<h1>, <h2>, ..., <h6>
<ol> <li></li> ...

Universidade
HTML – Formatação visual
de Brasília
• Definição
• Marcas utilizadas:
<hr> - faz linha na tela do navegador., <br> - pula uma linha no
navegador.
<b> ... </b>, <i> ... </i> e <u> .... </u> - formatação de estilo.
<blink> ... </blink> - destaca (pisca) um texto na janela do navegador.
<center> ... </center> - centraliza um texto de acordo com a janela do
navegador.
<font> ... </font> - altera a fonte do trecho na exibição pelo navegador.

Universidade
Marcação HTML
de Brasília
Exercício nº 2
Refazer a marcação do exercício nº 1, agora
usando as marcas HTML.

Universidade
1.3 URIs
de Brasília
❂ O que é um documento do tipo

“HyperText”? URIs ou URLs
» Uniform Resource Identifier: é o
conjunto genérico de todos os
nomes/endereços que identificam
atalhos para recursos.
» Uniform Resource Locator: termo
informal associado aos
esquemas URI mais populares:
http, ftp, mailto, etc. Este termo
deixou de ser usado em
especificações técnicas.
Universidade
Componentes de uma URI
de Brasília
<scheme> : // <authority> <path> ? <query>

onde: <scheme> são os esquemas (ou protocolos) “aceitos” por ambos
cliente e servidor. Alguns exemplos são: http, ftp, mailto, gopher, etc.
<authority> = <userinfo>@<host>:<port>
<userinfo> = <user>[:<password>]
<host> = IP ou nome (DNS)
<port> número da porta no destino (host).
<path> = <pathinfo>[#<reference>]
<pathinfo> = caminho para o recurso/arquivo
<reference> = referência dentro do arquivo
<query> = ?<attribute1>=<value1>[&<attribute2>=<value2>&...]

Universidade
Exemplos de URIs
de Brasília
http://www.inf.ufes.br/index.html
http://hannover.inf.ufes.br/cursos/servlet
https://200.137.66.101/cursos/servlet/
http://www.yahoo.com.br:8080
http://www.estado.com.br/diario/economia.htm#editais
http://www.outromundo.com.br/cgi-bin/prog/novo/dir?
data=hoje&contexto=escola
ftp://anonymous:teste@ftp.gnu.org
mailto:SergioAAFreitas@yahoo.com.br?subject=Assunto:
Uso HTML: <a href=”<URI>” Outros Atributos>texto de

referência</a>

Universidade
2. Protocolo HTTP
de Brasília

Universidade WWW: o jargão
de Brasília
•Página WWW: • Agente de usuário para

•consiste de “objetos” WWW se chama de
•endereçada por uma URL browser:
•Quase todas as páginas – MS Internet Explorer
WWW consistem de: – Netscape Communicator
•página base HTML, e
• Servidor para WWW se
•vários objetos referenciados.
chama “servidor WWW”:
•URL tem duas partes:
– Apache (domínio público)
nome de hospedeiro, e
– MS Internet Information
nome de caminho:
Server (IIS)

Universidade WWW: o protocolo HTTP
de Brasília
HTTP: hypertext transfer protocol

•protocolo da camada de aplicação para WWW
•modelo cliente/servidor
•cliente: browser que pede, recebe, “visualiza” objetos WWW
•servidor: servidor WWW envia objetos em resposta a pedidos
•http1.0: RFC 1945
•http1.1: RFC 2068

Universidade WWW: o protocolo HTTP
de Brasília
pe
did
oh
PC executa res ttp
po
Explorer sta
htt
p
http
dido ttp Servidor
pe h
osta executando
p
res servidor
WWW
do NCSA
Mac executa
Navigator

Universidade Mais sobre o protocolo HTTP
de Brasília
Usa serviço de HTTP é “sem estado”

transporte TCP: • servidor não mantém
•cliente inicia conexão TCP informação sobre
(cria socket) ao servidor, pedidos anteriores do
porta 80 cliente
•servidor aceita conexão
TCP do cliente Nota
Protocolos que mantêm
•mensagens HTTP
(mensagens do protocolo “estado” são complexos!
da camada de apl) ❒ história passada (estado)
trocadas entre browser tem que ser guardada
(cliente HTTP) e servidor ❒ Caso caia servidor/cliente,
Web (servidor HTTP) suas visões do “estado”
•encerra conexão TCP podem ser inconsistentes,
devem ser reconciliadas

Universidade Conexões HTTP
de Brasília
HTTP persistente
HTTP não persistente • Múltiplos objetos podem
•No máximo um objeto ser enviados sobre uma
é enviado numa única conexão TCP
conexão TCP. entre cliente e servidor.
•HTTP/1.0 usa o • HTTP/1.1 usa conexões
HTTP não persistente persistentes no seu
modo default

Universidade Exemplo HTTP não persistente
de Brasília
(contém texto,
referências a 10
imagens jpeg)
1a. Cliente http inicia conexão TCP
a servidor http (processo) a 1b. servidor http no
www.algumaUniv.br. Porta 80 é hospedeiro
padrão para servidor http. www.algumaUniv.br espera
por conexão TCP na porta
2. cliente http envia 80. “aceita” conexão,
mensagem de pedido de avisando ao cliente
http (contendo URL) através 3. servidor http recebe
do socket da conexão TCP mensagem de pedido,
formula mensagem de
resposta contendo objeto
solicitado
tempo (algumDepartmento/inicial.index)
Faculdade do Gama,– envia mensagem via socket
FGA / UnB
Universidade Exemplo HTTP não persistente
de Brasília
4. servidor http encerra

conexão TCP .
5. cliente http recebe mensagem de resposta contendo arquivo html,

visualiza html. Analisando arquivo html, encontra 10 objetos jpeg
6. Passos 1 a 5 repetidos para referenciados
cada um dos 10 objetos
tempo jpeg

Universidade
HTTP persistente
de Brasília
Problemas com o HTTP não Persistente sem pipelining:
persistente:
•requer 2 RTTs para cada • o cliente envia um novo
objeto pedido apenas quando a
•SO aloca recursos do host resposta anterior tiver sido
para cada conexão TCP recebida
•os browsers freqüentemente • um RTT para cada objeto
abrem conexões TCP referenciado
paralelas para recuperar os
objetos referenciados Persistente com pipelining:
HTTP persistente • default no HTTP/1.1
•o servidor deixa a conexão • o cliente envia os pedidos
aberta após enviar a resposta
logo que encontra um objeto
•mensagens HTTP seguintes
referenciado
entre o mesmo
cliente/servidor são enviadas • pode ser necessário apenas
nesta conexão um RTT para todos os
objetos referenciados
mensagem de pedido HTTP:
Universidade
de Brasília formato geral

Universidade
Formulários e interação bidirecional
de Brasília
• Formulários processados usando

scripts CGI (programas que
executam no servidor WWW)
•Formulários transmitem
informação do cliente ao – CGI - Common Gateway
servidor Interface
•HTTP permite enviar – scripts CGI escondem acesso
formulários ao servidor a diferentes serviços
•Resposta enviada como – servidor WWW atua como
página HTML dinâmica gateway universal
GET/POST
formulário
cliente servidor Sistema de
WWW resposta:
WWW informação
HTML
Universidade Formulários de entrada
de Brasília
Post method:
•As páginas Web
podem incluir URL method:
formulários para
• Usa o metodo GET
entrada de dados
• A enrada de dados é
•Os campos
preenchidos são atualizada através da
atualizados no servidor URL:
através do corpo da
mensagem
www.somesite.com/animalsearch?monkeys&banana

Universidade Tipos de Metodos
de Brasília
HTTP/1.1
• GET, POST, HEAD
HTTP/1.0
•GET • PUT
– Atualiza um arquivo
•POST
numa dada URL
•HEAD
• DELETE
•Deixa o objeto requisitado
for a da resposta – Apaga o arquivo
(response) especificado na URL.

formato de mensagem HTTP:
resposta
Universidade
de Brasília
linha de status
(protocolo,
HTTP/1.0 200 OK
código de status, Date: Thu, 06 Aug 1998 12:00:15 GMT
frase de status) Server: Apache/1.3.0 (Unix)
Last-Modified: Mon, 22 Jun 1998 …...
linhas de Content-Length: 6821
cabeçalho Content-Type: text/html
dados dados dados dados ...
dados, p.ex.,
arquivo html
solicitado

códigos de status da resposta
HTTP
Universidade
de Brasília
200 OK
•sucesso, objeto pedido segue mais adiante nesta mensagem
301 Moved Permanently
•objeto pedido mudou de lugar, nova localização especificado
mais adiante nesta mensagem (Location:)
400 Bad Request
•mensagem de pedido não entendida pelo servidor
404 Not Found
•documento pedido não se encontra neste servidor
505 HTTP Version Not Supported
•versão de http do pedido não usada por este servidor

Interação usuário-servidor:
Universidade
de Brasília autenticação
Meta da autenticação:
controle de acesso aos cliente servidor
documentos do servidor
msg de pedido HTTP comum
•sem estado: cliente deve
apresentar autorização 401: authorization
com cada pedido req.
WWW authenticate:
•autorização: tipicamente
nome, senha msg de pedido HTTP
•authorization: linha comum
de cabeçalho no pedido +msg
Authorization:line
de resposta http
•se não for apresentada
comum
autorização, servidor
nega acesso, e coloca no
cabeçalho da resposta msg de pedido http
WWW authenticate: comum
tempo
+msg
Authorization:line
de resposta http
Browser guarda nome e senha comum para
evitar que Faculdade
sejam do pedidos ao
Gama – FGA usuário a cada acesso.
/ UnB
Cookies: manutenção do
“estado”
Universidade
de Brasília
Exemplo:
Muitos dos principais sítios – Suzana acessa a Internet
Web usam cookies sempre do mesmo PC
Quatro componentes: – Ela visita um sítio
1) linha de cabeçalho do cookie específico de comércio
na mensagem de resposta HTTP eletrônico pela primeira
2) linha de cabeçalho do cookie vez
na mensagem de pedido HTTP
– Quando os pedidos
3) arquivo do cookie mantido no
host do usuário e gerenciado pelo iniciais HTTP chegam no
browser do usuário sítio, o sítio cria uma ID
4) BD de retaguarda no sítio Web única e cria uma entrada
para a ID no BD de
retaguarda

Interação usuário-servidor: GET
Universidade
de Brasília condicional
•Meta: não enviar
objeto se cliente já cliente servidor
tem (no cache)
msg de pedido http
versão atual If-modified-since: objeto
•cliente: especifica <date>
não
data da cópia no resposta http
HTTP/1.0 modificado
cache no pedido http 304 Not Modified
If-modified-
since: <date>
•servidor: resposta
não contém objeto msg de pedido http
If-modified-since:
se cópia no cache é <date> objeto
atual: modificado
resposta http
HTTP/1.0 304 Not HTTP/1.1 200 OK
Modified …
<data>
Universidade
3. Servidor Tomcat
de Brasília
• O que faz o servidor Tomcat ?

• Qual a sua interligação com o java ?
• Estrutura de arquivos do tomcat:
• servidor
• aplicação

Universidade
Servidor Tomcat
de Brasília
• Arquivos de configuração:
• servidor: server.xml
• aplicação: web.xml
• Consulte a URI:
http://jakarta.apache.org/tomcat

Universidade
Servidor Tomcat
de Brasília
• Como instalar o servidor Tomcat:

• download do arquivo tomcat.tgz
• descompactar no diretório raiz da sua área
• executar: jakarta-tomcat.../bin/catalina.sh
start
• Como configurar:
• Arquivo server.xml, web.xml e tomcat-
users.xml

Universidade
Servidor Tomcat
de Brasília
• Configuração via web:

• manager
• administrator
• Deploying aplications:
• definição e configuração de contextos
• arquivos .war

OO e HTML 3

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

OO e HTML 3

Enviado por

Direitos autorais:

Formatos disponíveis

Universidade

Sérgio Freitas e Ricardo Jacobi

Faculdade do Gama – FGA / UnB

HTML é uma linguagem largamente utilizada

Faculdade do Gama – FGA / UnB

Faculdade do Gama – FGA / UnB

memorando nº 12/2003, Brasília, 10 de outubro de 2009

Faculdade do Gama – FGA / UnB

Faculdade do Gama – FGA / UnB

❂ Que marcas foram necessárias ?

Faculdade do Gama – FGA / UnB

O que significa HTML ?

HyperText Markup Language

Faculdade do Gama – FGA / UnB

Faculdade do Gama – FGA / UnB

Tipos de marcas (cont.):

Faculdade do Gama – FGA / UnB

• Definição de marcação semântica

Faculdade do Gama – FGA / UnB

Faculdade do Gama – FGA / UnB

Faculdade do Gama – FGA / UnB

❂ O que é um documento do tipo

<scheme> : // <authority> <path> ? <query>

Faculdade do Gama – FGA / UnB

Uso HTML: <a href=”<URI>” Outros Atributos>texto de

Faculdade do Gama – FGA / UnB

Faculdade do Gama – FGA / UnB

•Página WWW: • Agente de usuário para

Faculdade do Gama – FGA / UnB

HTTP: hypertext transfer protocol

Faculdade do Gama – FGA / UnB

Faculdade do Gama – FGA / UnB

Usa serviço de HTTP é “sem estado”

Faculdade do Gama – FGA / UnB

Faculdade do Gama – FGA / UnB

4. servidor http encerra

5. cliente http recebe mensagem de resposta contendo arquivo html,

Faculdade do Gama – FGA / UnB

Faculdade do Gama – FGA / UnB

• Formulários processados usando

Faculdade do Gama – FGA / UnB

Faculdade do Gama – FGA / UnB

dados dados dados dados ...

Faculdade do Gama – FGA / UnB

Faculdade do Gama – FGA / UnB

Faculdade do Gama – FGA / UnB

• O que faz o servidor Tomcat ?

Faculdade do Gama – FGA / UnB

Faculdade do Gama – FGA / UnB

• Como instalar o servidor Tomcat:

Faculdade do Gama – FGA / UnB

• Configuração via web:

Faculdade do Gama – FGA / UnB

Você também pode gostar