TECNOLOGIA EM SISTEMAS PARA INTERNET

UNIVALI / CTTMAR
PROGRAMAO I

HTTP e HTML
Professor: Carlos Henrique Bughi
Perodo: 1 C/H: 72

Reviso

Surgimento internet
Protocolo TCP/IP
Internet e WWW
Servios da internet
IP
URL
DNS

Protocolo HTTP

O Protocolo HTTP
O protocolo HTTP um
protocolo requisio/resposta:
Hypertext Transfer Protocol 1.1
(RFC2616 *)

A maioria das comunicaes

HTTP iniciada por um agente
usurio (UA) e consiste de uma
requisio aplicvel em algum
recurso em um servidor de
origem (O). No caso mais
simples, isto pode ser feito em
uma nica conexo (v).

UA

O
CONNECT

REQUEST

RESPONSE

DISCONNECT

* RFC (acrnimo para o ingls Request for Comments , um documento que descreve os padres
de cada protocolo da Internet previamente a serem considerados um padro. Alguns exemplos
so: *RFC 793 - Transmission Control Protocol*RFC 2616 - Hypertext Transfer Protocol -HTTP/1.1*RFC 2821 - Simple Mail Transfer Protocol

Requisio / Resposta HTTP

O cliente envia, atravs de
uma conexo com o
servidor, uma requisio
contendo o mtodo de
requisio, URI, e a verso
do protocolo, seguido por
uma mensagem do tipo
MIME com modificadores da
requisio, informao do
cliente, e possivelmente um
corpo de contedo.

O servidor responde, pela

mesma conexo, com uma
status line, incluindo a
verso do protocolo da
mensagem e um cdigo de
erro ou sucesso, seguido
por uma mensagem do tipo
MIME contendo informaes
do servidor, metainformao
da entidade, e
possivelmente o corpo da
entidade.

Requisio HTTP
Uma mensagem de requisio de um
cliente para um servidor inclui:
Mtodo
Identificador do recurso
Verso da Requisio HTTP

Exemplo:
GET / HTTP/1.1
Host: www.univali.br

Requisio HTTP
Tipos comuns de mtodos usados na
requisio:

OPTIONS
GET
HEAD
POST
PUT
DELETE
TRACE
CONNECT

Requisio HTTP
Outros campos do cabealho de requisio:

Accept
Accept-Charset
Accept-Encoding
Accept-Language
Authorization
Connection
Expect
From
Host
If-Match

If-Modified-Since
If-None-Match
If-Range
If-Unmodified-Since
Max-Forwards
Proxy-Authorization
Range
Referer
TE
User-Agent

Resposta HTTP
Depois de receber e interpretar uma
mensagem de requisio, um servidor
retorna com uma mensagem de resposta
HTTP, incluindo:
Verso da Resposta HTTP
Cdigo de STATUS (3 dgitos)
Frase descritiva

Exemplo:
HTTP/1.1 200 OK

Resposta HTTP
O primeiro dgito do cdigo de status define a
classe da resposta. Existem 5 categorias de
resposta:
1xx Informational: Requisio recebida, continuando o
processamento;
2xx Success: A ao foi recebida, compreendida e aceita
com sucesso;
3xx Redirection: Mais aes devem ser tomadas para
completar a requisio
4xx Client Error: A requisio contm erro de sintaxe ou no
pode ser executada
5xx Server Error: O servidor falhou em cumprir uma
requisio aparentemente vilda

Resposta HTTP
Outros cdigos de status da resposta HTTP:

100: Continue
101: Switching Protocols
200: OK
204: No Content
205: Reset Content
206: Partial Content
300: Multiple Choices
301: Moved Permanently
303: See Other
304: Not Modified
305: Use Proxy
307: Temporary Redirect
400: Bad Request
401: Unauthorized

403: Forbidden
404: Not Found
407: Proxy Authentication Required
408: Request Time-out
413: Request Entity Too Large
415: Unsupported Media Type
500: Internal Server Error
501: Not Implemented
502: Bad Gateway
503: Service Unavailable
504: Gateway Time-out
505: HTTP Version not supported

Ligaes
SERVIO
DE ARQUIVOS

USURIO

SERVIO
HTTP

NAVEGADOR

CAMADA DE
TRANSPORTE

Passo 1

SERVIO
DE ARQUIVOS

USURIO

SERVIO
HTTP

NAVEGADOR

CAMADA DE
TRANSPORTE

O usurio submete ao
navegador o pedido de
apresentao do contedo
da URL
www.google.com.br.

Passo 2

SERVIO
DE ARQUIVOS

USURIO

SERVIO
HTTP

NAVEGADOR

CAMADA DE
TRANSPORTE

O navegador processa o
pedido e codifica uma
requisio no protocolo
HTTP a ser enviada, via
camada de transporte, ao
servio HTTP em um
servidor, no caso, o servidor
www.google.com.br.

Passo 3

SERVIO
DE ARQUIVOS

USURIO

SERVIO
HTTP

NAVEGADOR

CAMADA DE
TRANSPORTE

O servio HTTP processa a

requisio e identifica o
documento solicitado como
o arquivo index.html (raiz).
Em seguida, o servio HTTP
busca recuperar o
documento solicitado
atravs do servio de
arquivos do computador
servidor.

Passo 4

SERVIO
DE ARQUIVOS

USURIO

SERVIO
HTTP

NAVEGADOR

CAMADA DE
TRANSPORTE

O documento raiz obtido

pelo servio HTTP a partir
do servio de arquivos.

ateno especial para o trecho que

identifica um segundo documento
(imagem) que faz parte do
hiperdocumento raiz!

Passo 5

SERVIO
DE ARQUIVOS

USURIO

SERVIO
HTTP

NAVEGADOR

CAMADA DE
TRANSPORTE

O servio HTTP produz

uma resposta no protocolo
HTTP a ser enviada, via
camada de transporte, ao
navegador. Em anexo
mensagem, encaminhado
o documento raiz
index.html.

Passo 6

SERVIO
DE ARQUIVOS

USURIO

SERVIO
HTTP

NAVEGADOR

CAMADA DE
TRANSPORTE

O navegador processa o
documento raiz e percebe
uma declarao de uma
imagem como parte do
documento. Esta imagem
no est disponvel no
cliente, e deve ser obtida do
servidor. Novamente, o
navegador codifica uma
requisio no protocolo
HTTP a ser enviada, via
camada de transporte, ao
servio HTTP do servidor

Passo 7

SERVIO
DE ARQUIVOS

USURIO

SERVIO
HTTP

NAVEGADOR

CAMADA DE
TRANSPORTE

O servio HTTP processa a

requisio e identifica o
documento solicitado como
o arquivo de imagem
logo.gif. Em seguida, o
servio HTTP busca
recuperar o documento
solicitado atravs do servio
de arquivos do computador
servidor.

Passo 8

SERVIO
DE ARQUIVOS

USURIO

SERVIO
HTTP

NAVEGADOR

CAMADA DE
TRANSPORTE

O documento de imagem
logo.gif obtido pelo servio
HTTP a partir do servio de
arquivos.

Passo 9

SERVIO
DE ARQUIVOS

USURIO

SERVIO
HTTP

NAVEGADOR

CAMADA DE
TRANSPORTE

O servio HTTP produz

uma resposta no protocolo
HTTP a ser enviada, via
camada de transporte, ao
navegador. Em anexo
mensagem, encaminhado
o documento logo.gif.

Passo 10

SERVIO
DE ARQUIVOS

USURIO

SERVIO
HTTP

NAVEGADOR

CAMADA DE
TRANSPORTE

O navegador, de posse dos

documentos HTML e GIF
processa a solicitao que
renderizada para o usurio
em uma tela web

Atividade 01
Produzir um relatrio sobre a atividade de visita ao Google.
Formato de entrega: MAD, link relatrio sobre a atividade de visita ao Google
Tempo para a atividade: 45 minutos.

Introduo HTML 4.0.1 (por enquanto)

HTML
Regulamentada pela W3C.
HTML a linguagem utilizada pela World Wide Web
para publicar informao universalmente aceita.
HTML a linguagem me de apresentao da
informao na web, que permite:
Publicar documentos com cabealhos, textos, tabelas, fotos, entre
outros;
Recuperar informao atravs de links de hipertextos, com o
simples clique de um boto;
Projetar formulrios para conduzir transaes com servios
remotos, para uso na busca de mais informaes;
Incluir planilhas, vdeo-clipes, sons e outras aplicaes como parte
de seu prprio documento.

HTML
HTML uma linguagem de marcao e no linguagem de
programao;
Criar um documento em uma linguagem de marcao significa
que voc comea com o texto da sua pgina e inclui elementos
(tags) especiais no incio e no final de determinadas palavras ou
pargrafos;
Os elementos indicam as diversas partes da pgina e produzem
diferentes efeitos no navegador;
Os arquivos recebem normalmente a extenso .html ou .htm;
A primeira pgina a ser exibida geralmente recebe o nome de
index.htm ou .html, dependendo do provedor que hospeda a
pgina;
Os elementos normalmente so especificadas em pares,
delimitando um texto que sofrer algum tipo de formatao;

HTML
Os elementos podem ser identificados por
estarem entre os sinais < > e < / >;
Entre os sinais < > so especificados os
elementos propriamente ditos;
O formato genrico de um elemento :

<nomedatag> texto</nomedatag>

Estrutura de um HTML
Assim como outras linguagens, a HTML possui
uma estrutura bsica para seus programas.
Para que um navegador interprete
corretamente a pgina web, ela deve possuir
alguns comandos bsicos que sempre devero
estar presentes;
Alguns navegadores at dispensam seu uso,
porm melhor assumir como parte
fundamental do programa tais comandos;

Estrutura de um HTML
Uma pgina HTML possui trs partes bsicas:
(a) a estrutura principal, (b) o cabealho e (c) o
corpo da pgina;
Toda pgina deve iniciar com o elemento <html> e
<HTML>
ser encerrado com o elemento </html>;
<HEAD>
A rea de<TITLE>Minha
cabealho opcional
e delimitada pelo
primeira pgina</TITLE>
par</HEAD>
de elementos <head> e </head>;
</HTML>
Estes
elementos para cabealho so usados
para especificar informaes sobre a pgina,
por exemplo o ttulo que aparecer no barra de
ttulo do navegador;

Estrutura de um HTML
A maioria dos elementos ser especificado no
corpo da pgina que delimitado pelas tags
<body> e </body> (obrigatrio).
<HTML>
<HEAD>
<TITLE>Minha primeira pgina</TITLE>
</HEAD>
<BODY>
Corpo do texto
</BODY>
</HTML>

Estrutura de um HTML
Resumindo
<HTML>
</HTML>

Esta tag marca o incio do programa HTML

<HEAD>
</HEAD>

Esta tag marca incio e fim de cabealho

<TITLE>
</TITLE>

Esta tag delimita o texto que ir ser visualizado na barra de

ttulo do browser.

<BODY>
</BODY>

Esta tag delimita o corpo do programa, aonde a maior parte

do comando sero colocados

A Linguagem HTML
Hello, World!

Este trecho de cdigo

obrigatrio para seguir
o padro W3C

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Meu primeiro documento HTML</TITLE>
</HEAD>
<BODY>
<H1>Hello, world!</H1>
</BODY>
</HTML>

A Linguagem HTML
Padronizao
A verso 4.01 permite 3 formas de padronizao de
documento:

HTML 4.01 Strict Usar quando se deseja um HTML

somente com elementos estruturais, livres de
qualquer elemento associado com layout. Deve ser
usado juntamente com W3C's Cascading Style Sheet
language (CSS) para realizar efeitos em fontes, cores e
layout;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

A Linguagem HTML
HTML 4.01 Transitional
Permite a construo de HTML com elementos
obsoletos;
Inclui o uso dos elementos BODY com os atributos
bgcolor, text e link;.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

A Linguagem HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Titulo</TITLE>
</HEAD>
<BODY bgcolor="white" text="black"
link="red" alink="fuchsia" vlink="maroon">
... document body...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
</BODY>
"http://www.w3.org/TR/html4/strict.dtd">
</HTML>
<HTML>
<HEAD>
<TITLE>Titulo</TITLE>
<STYLE type="text/css">
BODY { background: white; color: black }
A:link { color: red }
A:visited { color: maroon }
A:active { color: fuchsia }
</STYLE>
</HEAD>
<BODY> <div> ... document body... </div>
</BODY>
</HTML>

A Linguagem HTML
HTML 4.01 Frameset
Usado em documentos que utilizam frames.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN

"http://www.w3.org/TR/html4/frameset.dtd">

A Linguagem HTML
Validao
Todo documento HTML deve ser validado segundo
os padres definidos pelo W3C;
Pode ser validado atravs de programas e
extenses para os navegadores;

Estrutura de uma pgina HTML

<html>
<head>Aqui vai o cabealho</head>
<body>Aqui vai o contedo da pgina</body>
</html>

Cabealho
<html>
<head>
<title>Ttulo da Pgina</title>
</head>
<body></body>
</html>

Contedo HTML
<html>
<head></head>
<body>Contedo da pgina</body>
</html>

Texto
Imagens
Tabelas
Formulrios
...