Tecnologias Internet

Tecnologias Internet Ano Lectivo 2012/2013 * 2º Semestre Licenciaturas em Engenharia Informática (5378) Tecnologias e Sistemas da Informação (6625) Aula 4 Nuno M. Garcia, ngarcia@di.ubi.pt

Fizeram isto??? 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

Agenda: Dia do profissional (follow up 2) Aulas práticas (sobrecarga de turmas 2) Revisões de conceitos importantes estrutura de um documento HTTP

R Tecnologias da Internet Pedido Resposta.......... V 4

R Tecnologias da Internet Pedidos HTTP: GET HEAD PUT... alguns outros (é matéria de TPC) 5

R Tecnologias da Internet Um comando HTTP tem o seguinte formato genérico: <linha inicial, diferente para pedido e resposta> Header1: valor1 Header2: valor2 Header3: 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 Tecnologias da Internet 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 Tecnologias da Internet SGML e HTML Standard Generalized Markup Language Hypertext 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 Tecnologias da Internet 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 Tecnologias da Internet 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 Tecnologias da Internet Construtores de SGML presentes no HTML 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 Tecnologias da Internet Construtores de SGML presentes no HTML 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 Tecnologias da Internet Construtores de SGML presentes no HTML 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 Tecnologias da Internet Construtores de SGML presentes no HTML 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 Tecnologias da Internet Construtores de SGML presentes no HTML 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 Tecnologias da Internet 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

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... <!ENTITY Omega CDATA "Γ" -- greek capital letter gamma, U+0393 ISOgrk3 --> 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