HTTP & HTML CRD – Filipe Pacheco.

Apresentação em tema: "HTTP & HTML CRD – Filipe Pacheco."— Transcrição da apresentação:

1 HTTP & HTML CRD – Filipe Pacheco

2 HTTP & HTML Duas das normas “base” de utilização da World Wide Web
HTTP – transmitir ficheiros entre servidor e clientes HTML – linguagem de formatação das páginas Nota: além de páginas HTML podem ser transmitidos na WWW outros formatos como, por exemplo, imagens GIF, imagens JPEG, imagens PNG, documentos word DOC, documentos PDF, etc, etc…

3 HTTP Hipertext Transport Protocol Permite:
Pedir e receber qualquer ficheiro de um servidor Transmitir informação associada como: Se o ficheiro pode ou não ser guardado em memória temporária (chache) Qual o servidor virtual a utilizar (a maioria dos servidores partilham o mesmo endereço IP, e são distinguidos pelo nome do servidor, eg. Obter apenas informação sobre a última vez que o ficheiro foi alterado (sem transferir o ficheiro) Se o ficheiro não existe, ou qual a nova localização do ficheiro (redirect) Usar compressão de dados (avançado)

4 Servidores Virtuais A maioria dos servidores WWW actuais suportam servidores virtuais, em que conforme o nome do servidor no pedido funcionam como servidores independentes Por exemplo: i.publico.pt e mobile.publico.pt partilham o mesmo endereço IP: Todas as ligações TCP são feitas ao mesmo computador e à mesma porta, mas nos cabeçalhos do HTTP vai informação sobre qual o site que queremos e o servidor responde de forma adequada

5 Comando Básico: GET Cliente envia para o servidor após estabelecer uma ligação TCP: GET□/index.html□HTTP/1.1 Host:□ Connection:□close São três linhas Na primeira indica-se que recurso/ficheiro pretendemos e a versão do protocolo (normalmente usa-se HTTP/1.1) Na segunda indica-se qual o servidor virtual respectivo Na terceira indica-se que após enviar a resposta o servidor deve fechar a ligação TCP O caracter “□” representa um espaço neste powerpoint

6 Comando Básico: GET Se tudo correr bem o servidor deverá responder passados uns momentos com algo parecido com: HTTP/1.1□200□OK Date:□Mon,□23□May□2005□22:38:34□GMT Server:□Apache/1.3.27□(Unix)□(Red-Hat/Linux) Last-Modified:□Wed,□08□Jan□2003□23:11:55□GMT Etag:□"3f80f-1b6-3e1cb03b" Accept-Ranges:□bytes Content-Length:□438 Connection:□close Content-Type:□text/html;□charset=UTF-8 Seguido de uma linha em branco e o conteúdo do ficheiro propriamente dito

7 Comando Básico: GET Vamos agora ver cada uma das linhas da resposta:
HTTP/1.1□200□OK Todas as respostas começam com “HTTP/1.1” O código “200□OK” indica o código da resposta e uma mensagem de texto mais ou menos compreensível por humanos Os códigos começados por 2 (como este) indicam que tudo correu bem Os códigos começados por 1 indicam respostas informativas Os códigos começados por 3 indicam um redirecionamento (permanente ou temporário) Os códigos começados por 4 indicam algum erro no cliente (e.g. ficheiro não existe) Os códigos começados por 5 indicam algum erro no servidor (e.g. erro ao tentar interpretar um ficheiro de programa, por exemplo)

8 Comando Básico: GET Depois da primeira linha seguem-se os “cabeçalhos” que têm informação adicional sobre a resposta. A hora actual Date:□Mon,□23□May□2005□22:38:34□GMT O software do servidor WWW Server:□Apache/1.3.27□(Unix)□(Red-Hat/Linux) A última vez que foi alterado o recurso pedido Last-Modified:□Wed,□08□Jan□2003□23:11:55□GMT Alguns cabeçalhos são específicos do servidor: Etag:□"3f80f-1b6-3e1cb03b" É possível pedir ficheiros em “blocos” e o cabeçalho “Accept-Ranges” permite gerir esta tarefa Accept-Ranges:□bytes

9 Comando Básico: GET O cabeçalho ”Content-Length” indica o comprimento, em bytes, dos dados Content-Length:□438 O cabeçalho “Connection” indica que o servidor irá fechar esta ligação TCP assim que todos os dados forem transferidos Connection:□close E o cabeçalho “Content-Type” indica o tipo de dados que estão a ser transferidos, neste caso uma página HTML Content-Type:□text/html;□charset=UTF-8

10 Outros Comandos HEAD É usado exactamente da mesma forma que o GET mas na resposta são apenas devolvidos os cabeçalhos e não os dados do ficheiro propriamente dito Normalmente é utilizado para verificar se um recurso que esteja guardado em memória temporária foi ou não actualizado recentemente

11 Outros Comandos POST Permite enviar dados para o servidor
Normalmente é utilizado para enviar formulários incluindo o “upload” de ficheiros Em alternativa pode-se usar o GET mas com limitações na quantidade de dados a transferir

12 HTTP Básico (visto pelo cliente)
Início Estabelecer ligação TCP com o servidor Enviar o comando GET Receber os Cabeçalhos SIM NÃO Receber o ficheiro e apresentá-lo OK? Mostrar mensagem de erro Fechar ligação TCP Fim

13 HTTP Básico (visto pelo servidor)
Início Esta é o código chamado após a ligação pelo cliente Iniciar ligação TCP com o Cliente Receber o comando GET ou HEAD Verificar o servidor pedido e o ficheiro SIM NÃO Enviar Resposta Ficheiro OK? Enviar Resposta de Erro Fechar ligação TCP Cliente Fim

14 HTML Hypertext Markup Language
A forma de formatar as páginas base que vemos na World Wide Web É basicamente um ficheiro de texto com “etiquetas” ou “tags” que contém comandos de formatação As tags estão delimitadas por “<“ e “>”

15 Tags Nas versões mais recentes do HTML há 3 tipos de tags
Início. Que marcam o início de um comando de formatação como “<div>” Fim. Que marcam o fim de um comando de formatação como “</div>” Independentes. Que funcionam por si sós como “<br />”

16 Estrutura do documento
Eis um exemplo de um documento HTML simples <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html lang="pt"> <head> <title>Título do Documento</title> </head> <body> texto, imagem, links, ... </body> </html>

17 Tipo de documento A primeira linha
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " Identifica o tipo de documento HTML que vamos usar Basicamente é fazer copy&paste para os documentos em que precisamos Alguns browsers podem apresentar as páginas de forma ligeiramente diferente dependendo desta linha

18 Cabeçalhos e Corpo Depois da primeira linha é aberto um bloco <html> … </html> que contém o código HTML propriamente dito e tem, quase sempre, apenas dois sub-blocos: <head> … </head> - com informação sobre o próprio documento, como o título, palavras-chave, descrição, links para documentos auxiliares, etc <body> … </body> - com a formatação do documento propriamente dita

19 Cabeçalhos e Corpo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> </html> <head> </head> Título, palavras chave, etc, etc… <body> </body> Conteúdo da página propriamente dito

20 Tags básicas <h1>, <h2>,... <h6> : cabeçalhos e títulos no documento em diversos tamanhos. (quanto menor for o número, maior será o tamanho da letra) <p>: um parágrafo. <br/>: quebra de linha. <table>: cria uma tabela (linhas são criadas com <tr> e novas células com <td>. A linha dos cabeçalhos de coluna é criada com a etiqueta <th>.) <div>: determina um bloco de texto na página a qual pode possuir variadas formatações. <b>, <i>, <u> : negrito, itálico, sublinhado, respectivamente. <img />: imagem. <a>: hiperligação para um outro local, seja uma página, endereço de  ou outro serviço. Nota: excepto para <br /> e <img />, todas as tags aqui listadas devem ter uma tag de início e outra de fim

21 Style Sheets Na maioria dos elementos podemos acrescentar um comando style para definir alternativas de formatação Por exemplo, podemos colocar um parágrafo alinhado à direita com o comando text-align: right; <p style=“text-align: right;”>olá, isto é um parágrafo!</p> Ou formatar uma imagem para ter uma margem maior que o normal com margin: 10px; <img src=“teste.gif” style=“margin: 10px;” /> E é possível combinar várias opções de formatação num comando: <div style=“float:right; margin: 10px; border: 1px solid red;”>olá, isto é uma caixa de texto</div>

22 Style Sheets Também é possível definir um estilo que afecta todas as tags de um tipo (e.g. todos os <h1>) ou um grupo de tags (com o comando class) usando CSS, Cascaded Style Sheets Os estilos CSS podem ser aplicados no início do documento usando a tag <style> ou referenciando um ou mais ficheiros CSS externos com a tag <link> Exemplo com <style> (colocar este código na secção <head>) <style type=“text/css”> body {color:blue;} h1 {color:#00ff00;} h2 {color:rgb(255,0,0);} </style> Neste caso a tag <body> (ou seja, todo o texto) passa a ter a cor azul, todos os <h1> ficam verdes e todos os <h2> vermelhos. Se tivermos comandos style nas tags estes podem sobrepor-se ao do cabeçalho.

23 Style Sheets Mais informações sobre os comandos de style em:
(e sim… são centenas de comandos possíveis… a ideia é saber que existem e como se usam, não decorá-los!)