Módulo: 4 – Desenvolvimento de Páginas Web Estáticas: HTML DOCTYPE
17
Agrupamento de Escolas da Batalha Miguela Fernandes Novembro 2010 HTML DTD
-
Upload
miguela-fernandes -
Category
Education
-
view
2.551 -
download
4
description
Curso Técnico de Gestão e Programação de Sistema Informáticos, ano lectivo 2010/2011.
Transcript of Módulo: 4 – Desenvolvimento de Páginas Web Estáticas: HTML DOCTYPE
Agrupamento de Escolas da BatalhaMiguela FernandesNovembro 2010
HTMLDTD
Sumário
Iremos abordar: Revisões TAG - METADTS – definiçãoDTS – browserDTS – tiposDTS – exemplosExercício prático
MF. 2
DTS HTML
Revisões - estrutura da páginaEstrutura 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><body bgcolor=“#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)
Document Type Definition - 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 doctype mesmo 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 (public identifier) 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 URL e 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 Bibliografiahttp://www.w3.org/TR/html4/sgml/dtd.htmlhttp
://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
