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

Like this? Share it with your network

Share

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

  • 2,933 views
Uploaded on

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.

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,933
On Slideshare
2,690
From Embeds
243
Number of Embeds
1

Actions

Shares
Downloads
57
Comments
0
Likes
0

Embeds 243

http://asminhasaulas.wordpress.com 243

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. DTD HTML Agrupamento de EscolasdaBatalha MiguelaFernandes Novembro 2010
  • 2. 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
  • 3. 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
  • 4. 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
  • 5. 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
  • 6. 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
  • 7. 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
  • 8. 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
  • 9. 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
  • 10. 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
  • 11. 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
  • 12. 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
  • 13. 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
  • 14. 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
  • 15. 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
  • 16. 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
  • 17. 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