Módulo: 4 – Desenvolvimento de Páginas Web Estáticas:  HTML DOCTYPE
Upcoming SlideShare
Loading in...5
×
 

Módulo: 4 – Desenvolvimento de Páginas Web Estáticas: HTML DOCTYPE

on

  • 2,816 views

Curso Técnico de Gestão e Programação de Sistema Informáticos, ano lectivo 2010/2011.

Curso Técnico de Gestão e Programação de Sistema Informáticos, ano lectivo 2010/2011.

Statistics

Views

Total Views
2,816
Views on SlideShare
2,590
Embed Views
226

Actions

Likes
0
Downloads
55
Comments
0

1 Embed 226

http://asminhasaulas.wordpress.com 226

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Módulo: 4 – Desenvolvimento de Páginas Web Estáticas:  HTML DOCTYPE Módulo: 4 – Desenvolvimento de Páginas Web Estáticas: HTML DOCTYPE Presentation Transcript

  • DTD HTML Agrupamento de EscolasdaBatalha MiguelaFernandes Novembro 2010
  • Sumário Iremos abordar: Revisões TAG - META DTS – definição DTS – browser DTS – tipos DTS – exemplos Exercício prático MF. 2 DTS HTML
  • Revisões - estrutura da página Estrutura da página HTML: html> <head> <title>Título da Página</title> <meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1”> </head> <bodybgcolor=“#CCCCCC”> Aulas de Redes de Comunicação </body> </html> MF. 3
  • Revisões - tags <html> e </html> - Início e Fim do conteúdo de um documento HTML <head> e </head> - Área reservada para o cabeçalho <title> e </title> - Define o título da página <body> e </body> - Corpo do documento. Onde será inserido o conteúdo da página. MF. 4
  • TAG – META (1) <meta> - utilizada pelos programadores para definir quais serão as palavras utilizadas para procurar nos sites de busca. Ex: <title>Cisco Systems, Inc</title> <meta http-equiv="Content-type“content="text/html; charset=UTF-8"/> <meta name="concept" content="Welcome to Cisco"/> <meta name="accessLevel" content="Guest"/> <meta name="country" content="US"/> <meta name="og: title" content="Welcome to Cisco"/> MF. 5
  • TAG – META (2) <meta name=“Author” content=“MF”> Define quem foi o criador da página HTML <meta name=“Keywords” content=“aula, html, css, RC”> - Define quais palavras-chaves que poderão ser utilizadas pelos sites de busca <meta http-equiv=“Content-type” contet=“text/html; charset=iso-8859-1”> - Especifica o conjunto de caracteres utilizados na página: iso-8859-1 MF. 6
  • DTS: definição (1) DocumentTypeDefinition - indica ao browser o tipo de formato e versão (HTML 3.2, HTML 4.01, XHTML, etc.) em que a página está escrita, informa-o como agir. Coloca-se na 1ª linha da página, antes da tag<html>. O browser entende que deve tratar a página conforme os padrões da W3C*. O elemento doctypemesmo estando entre <> não é uma tag, mas sim uma instrução. MF. 7 * http://www.w3.org/QA/2002/04/valid-dtd-list.html#DTD
  • DTS : definição (2) Exemplo simples: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> <HTML> …… A declaração DOCTYPE está dividida em duas partes, um identificador público (publicidentifier) e um URL. MF. 8
  • DTS : definição (3) Identificador público PUBLIC "-//W3C//DTD HTML 4.01//EN“ URL - endereço do DTD na Internethttp://www.w3.org/TR/html4/strict.dtd MF. 9
  • DTS - browser Um browser, ao encontrar a declaração DOCTYPE, não vai ler o documento referido no URLe interpretar o HTML de acordo com este. Porém, vai basear-se no identificador público e na presença ou não do URL para decidir como interpretar o documento. Esta decisão vai ter influência na forma como os estilos CSS são aplicados ao documento HTML. MF. 10
  • DTS – 3 tipos Existem 3 tipos de DTDs para HTML/CSS: Strict – Permite todos elementos e atributos que não estão obsoletos ou que não usam o frameset (usar). Transitional – engloba DTD strict mais elementos e atributos obsoletos (formatações visuais). Frameset – usada com páginas HTML que utilizem framesets (evitar). MF. 11
  • DTS – Strict Permite todos elementos e atributos que não estão obsoletos ou que não usam o frameset (usar). Exemplo: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN“ http://www.w3.org/TR/html4/strict.dtd"> MF. 12
  • DTS – Transitional Engloba DTD strict mais elementos e atributos obsoletos (formatações visuais). Exemplo: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> MF. 13
  • DTS – Frameset Usada com páginas HTML que utilizem framesets(evitar). Exemplo: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> MF. 14
  • DTS - exemplo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>Title of the document</title></head><body>Página de redes de comunicação......</body></html> MF. 15
  • Exercício prático Verifica que tipo de DTDs usam os seguintes sites: http://www.w3.org/TR/html4/struct/global.html _____________________ http://www.w3.org/_____________________ http://www.iol.pt/ _____________________ http://aeiou.expresso.pt/ ____________ _________ MF. 16
  • Webgrafia e Bibliografia http://www.w3.org/TR/html4/sgml/dtd.html http://www.speaking-in-styles.com/index.php/the-book/css-dhtml-ajax-visual-quickstart-guide/ http://www.obasicodaweb.com/html-esqueleto-de-um-documento-html-parte-1-doctype/ Teagu, J. C. (2004). DHTML and CSS for the World Wide Web (2ª Ed.). USA:Peachpit Press. Validar CSS: http://jigsaw.w3.org/css-validator/ Validar HTML http://validator.w3.org/ MF. 17