tecnologias internet - departamento de informáticangarcia/old/ti1213/ubi_1213_ti_aula4.pdf ·...

Tecnologias InternetAno Lectivo 2012/2013 * 2º Semestre

Licenciaturas em Engenharia Informática (5378)

Tecnologias e Sistemas da Informação (6625)Aula 4

UNIVERSIDADE DA BEIRA INTERIORFaculdade de EngenhariaDepartamento de Informática

Nuno M. Garcia, [email protected]


2010, 2012, 2013 - Nuno M. Garcia, [email protected]

Tecnologias da Internet

• TPC da aula passada

• Ver o sítio http://www.jmarshall.com/easy/http/

• Tentar usar o programa TELNET para conectar com o sítio do DI (www.di.ubi.pt) ou do NINF (ninf.ubi.pt).

• Nesta aula: vamos continuar a ver a estrutura de um documento HTML 4.01, e vamos ver exemplos de HTML 5.0

Fizeram isto???




• Agenda:

• Dia do profissional (follow up 2)

• Aulas práticas (sobrecarga de turmas 2)

• Revisões de conceitos importantes

• estrutura de um documento HTTP




4

Pedido

Resposta...........V

R




• Pedidos HTTP:

• GET

• HEAD

• PUT

• ... alguns outros (é matéria de TPC)

5

R




• Um comando HTTP tem o seguinte formato genérico:

<linha inicial, diferente para pedido e resposta>Header1: valor1Header2: valor2Header3: valor3

<linhas opcionais que contêm o corpo da mensagem. pode ter qualquer comprimento e incluir dados que não sejam de texto. o tamanho é controlado pela opção Content-Length no cabeçalho e o tipo de dados é controlado pela opção Content-Type também do cabeçalho>

6

R




• Existem outras formas de enviar dados ao servidor de HTTP.

• Em vez de usar um POST, podem enviar-se pedidos ao servidor usando o URL.GET /path/script.cgi?field1=valor1&field2=valor2 HTTP/1.0

• Por exemplo:http://www.youtube.com/watch?v=TTaulpClHco

7

:-)

R




• SGML e HTMLStandard Generalized Markup LanguageHypertext Markup Language

• O SGML é um sistema para definir uma Linguagem com Marcação (Markup Language).

• Numa linguagem com marcação os autores marcam os seus documentos por forma a incluir informação estrutural, de apresentação e informação semântica integrada no conteúdo do documento.

• O HTML é um uma SGML.

8

R




• Uma linguagem com marcação definida em SGML é dita uma aplicação de SGML. Uma aplicação de SGML é geralmente caracterizada por ter:

• uma declaração SGML: define que caracteres e delimitadores podem aparecer na aplicação

• Uma definição de tipo de documento (Document Type Definition - DTD). O DTD define a sintaxe das construções de marcação. Pode incluir definições adicionais como referências de identidade de caracteres (&lt == <).

• A especificação da semântica da marcação. Esta especificação impõe restrições à sintaxe.

• Instâncias do documento contendo dados e marcações. Cada documento contém referência ao DTD usado para o interpretar.

9

R




• Construtores de SGML presentes no HTML

• Elementos. Cada elemento é composto normalmente por três partes: etiqueta de início, conteúdo, etiqueta de fim.

• Há elementos que podem omitir a etiqueta final, como por exemplo, a etiqueta <p> e a etiqueta <li>.

• Há elementos que podem omitir a etiqueta inicial, como por exemplo a etiqueta <head> e <body>.

• Os nomes de elementos não são agnósticos em relação às maiúsculas.

10

R





• Elementos. Esta é a lista de todos os elementos usáveis em HTML 4.01:

• http://www.w3.org/TR/html401/index/elements.html

11

R





• Elementos.

• Atributos.

• Os elementos podem ter propriedades associadas, denominadas atributos. Os atributos são definidos na etiqueta de definição do elemento, antes do sinal de >.

• Os nomes dos atributos são agnósticos quanto ao uso de maísculas. Os valores dos atributos são geralmente agnósticos quanto às maíusculas.

• Os valores de atributos estão compreendidos entre ”” ou ’ ’.

12

R





• Elementos.

• Atributos.

• Referências a caracteres.

• Permitem a inclusão de caracteres no documento

• ">" representa o sinal >

• """ representa o caracter "

• "å" (em decimal) representa a letra “a” com um pequeno circulo em cima

• "水" (em hexadecimal) representa o ideograma Chinês para água

13

R





• Referências a caracteres. Esta é a lista de todas as referências a caracteres usáveis em HTML 4.01:

• http://www.w3.org/TR/html401/sgml/entities.html

14

R





• Elementos.

• Atributos.

• Referências a caracteres.

• Comentários.

• Os comentários não interpretam o texto.

• Os comentários têm este aspecto:

15

R




• A estrutura global de um documento HTML:http://www.w3.org/TR/html401/struct/global.html

• Os tipos básicos de dados em HTML: http://www.w3.org/TR/html401/types.html

16

R




• Questões?

17




• Teste!

18




• Um documento HTML é composto por 3 partes:

• uma linha contendo informação HTML

• um secção de cabeçalho, delimitada por uma etiqueta HEAD

• uma secção com o corpo do documento, delimitada por uma etiqueta BODY ou uma etiqueta FRAMESET

•

19




• Versão HTML

• Um documento HTML válido declara que versão de HTML é usada no documento. A declaração DTD identifica essa versão.

• O HTML 4.01 suporta 3 DTDs; os autores DEVEM incluir uma destas declarações.

20




• Versão HTML

• Strict DTD: inclui todos os elementos e atributos que não foram tornados obsoletos ou não aparecem em documentos com molduras (FRAMESETs)

21




• Versão HTML

• Loose DTD: inclui todos os elementos e atributos que do Strict DTD e ainda os elementos obsoletos

22




• Versão HTML

• Frameset DTD: inclui todos os elementos e atributos anteriores e ainda os elementos que se referem a documentos com molduras (FRAMESETs)

23




• Além do DTD, que o agente do cliente pode descarregar para interpretar o documento HTML, podem ainda ser especificados ficheiros de entidades de símbolos, como por exemplo

• HTMLlat1.ent

• HTMLsymbol.ent

• HMTLspecial.ent

24




HTMLlat1.ent...<!ENTITY nbsp CDATA " " -- no-break space = non-breaking space, U+00A0 ISOnum --><!ENTITY iexcl CDATA "¡" -- inverted exclamation mark, U+00A1 ISOnum --><!ENTITY cent CDATA "¢" -- cent sign, U+00A2 ISOnum -->

...<!ENTITY Acirc CDATA "Â" -- latin capital letter A with circumflex, U+00C2 ISOlat1 --><!ENTITY Atilde CDATA "Ã" -- latin capital letter A with tilde, U+00C3 ISOlat1 --><!ENTITY Auml CDATA "Ä" -- latin capital letter A with diaeresis, U+00C4 ISOlat1 --><!ENTITY Aring CDATA "Å" -- latin capital letter A with ring above = latin capital letter A ring, U+00C5 ISOlat1 -->...

25

HTMLsymbol.ent...<!ENTITY Alpha CDATA "Α" -- greek capital letter alpha, U+0391 --><!ENTITY Beta CDATA "Β" -- greek capital letter beta, U+0392 --><!ENTITY Gamma CDATA "Γ" -- greek capital letter gamma, U+0393 ISOgrk3 -->...<!ENTITY Omega CDATA "Ω" -- greek capital letter omega, U+03A9 ISOgrk3 -->

<!ENTITY alpha CDATA "α" -- greek small letter alpha, U+03B1 ISOgrk3 -->...

26

HTMLspecial.ent...

<!ENTITY quot CDATA """ -- quotation mark = APL quote, U+0022 ISOnum --><!ENTITY amp CDATA "&" -- ampersand, U+0026 ISOnum --><!ENTITY lt CDATA "<" -- less-than sign, U+003C ISOnum --><!ENTITY gt CDATA ">" -- greater-than sign, U+003E ISOnum -->

<!ENTITY OElig CDATA "Œ" -- latin capital ligature OE, U+0152 ISOlat2 --><!ENTITY oelig CDATA "œ" -- latin small ligature oe, U+0153 ISOlat2 -->...

27




• Secção de Cabeçalho - HEAD

28




• elementos possíveis na zona HEAD

• BASE - define o endereço base para os recursos indicados no documento

• LINK - estabelece relações entre o documento corrente e outros documentos

• META - define características do documento

• SCRIPT - embebe scripts no documento (p.e. Javascript)

• STYLE - usado para embeber uma StyleSheet no documento

• TITLE - define o título do documento tal como aparece no Browser

29




• HEAD

• BASE

30




• HEAD

• STYLE

31




• HEAD

• LINK

32




• HEAD

• META

33




• HEAD

• TITLE

34




• HEAD

• SCRIPT

35




• Mais elementos no HEAD META

• http-equiv

• refresh

• expires

• reply-to

• content

• scheme

• name

• author

• description

• copyright

• keywords

36




• HEAD

• META name

37




• HEAD

• META name

38




• Secção de Cabeçalho - HEAD

39




• Links úteis

• http://www.informit.com/library/library.aspx?b=STY_html_24hours

• http://www.w3schools.com/html/default.asp

• http://www.w3schools.com/

• http://www.iana.org/assignments/character-sets

• http://www.comptechdoc.org/independent/web/html/guide/htmlhead.html

40

tecnologias internet - departamento de informáticangarcia/old/ti1213/ubi_1213_ti_aula4.pdf ·...

Documents