Your SlideShare is downloading. ×
Aula 2 - HTML Editores e Documento HTML / XHTML Prof. Leandro Rezende Carneiro de Mendonça, MSc.
Editores HTML <ul><li>Página Web : basicamente um arquivo de texto, escrito em uma linguagem. </li></ul><ul><ul><li>Página...
Editores HTML - Dreamweaver
Editores HTML - FrontPage
Editores HTML - NVU
Documento HTML <ul><li>Visualização de uma página : </li></ul><ul><ul><li>Solicitação HTTP  (Navegador -> Servidor Web). <...
Documento HTML <ul><ul><li>Se o servidor Web não encontra a informação solicitada, ele constrói uma página contendo uma me...
Documento HTML <ul><li>Informações Transportadas </li></ul><ul><ul><li>URL ( U niform  R esource  L ocator ). </li></ul></...
Arquitetura Cliente Servidor
Documento HTML <ul><li>Acrônimo de  H yper T ext  M arkup  L anguage (L inguagem de Marcação de Hipertexto). </li></ul>
Documento HTML <ul><li>Exemplo: </li></ul><ul><li>Documento  HTML </li></ul>
Documento HTML <ul><li>Tags HTML  </li></ul>
Documento HTML <ul><li>Exemplo: </li></ul><ul><li>exemplo_tag.html </li></ul>
Documento HTML <ul><li>Categorias de Marcadores (Tags): </li></ul><ul><ul><li>Estruturais:  são marcadores que determinam ...
XML e HTML = XHTML <ul><li>XHTML : linguagem que utiliza o vocabulário de HTML com a sintaxe de XML. </li></ul><ul><li>Com...
XML e HTML = XHTML <ul><li>Importância de HTML : linguagem amplamente utilizada por milhões de pessoas. </li></ul><ul><li>...
XML e HTML = XHTML <ul><li>Benefícios da XHTML: </li></ul><ul><ul><li>Portabilidade : utilizando-se documentos bem formado...
Diferenças entre HTML e XHTML <ul><li>Um documento  XHTML  deve fornecer a declaração de um DTD no início do documento </l...
Diferenças entre HTML e XHTML
Diferenças entre HTML e XHTML <ul><li>Deve-se incluir uma referência ao namespace XML no elemento <html> do documento </li...
Diferenças entre HTML e XHTML
Documento XHTML <ul><li>Exemplo: </li></ul><ul><li>estrutura_documento_xhtml.xhtml </li></ul>
Diferenças entre HTML e XHTML <ul><li>XML  diferencia letras maiúsculas de minúsculas (linguagem  case sensitive ). </li><...
Diferenças entre HTML e XHTML <ul><li>Todos os marcadores iniciados devem ser fechados “ documentos bem formados ”. </li><...
Diferenças entre HTML e XHTML <ul><li>Exemplo de Documentos  mal formados : </li></ul><ul><ul><li>documento_html_mal_forma...
Diferenças entre HTML e XHTML <ul><li>Todos os atributos  de um elemento devem ser apresentados entre aspas. </li></ul><ul...
Diferenças entre HTML e XHTML <ul><li>Todos os atributos  de um elemento devem ser apresentados entre aspas e não devem se...
Diferenças entre HTML e XHTML <ul><li>Elementos sem conteúdo : e lementos que não sejam elementos vazios devem sempre util...
Informações <ul><li>W3C </li></ul><ul><ul><li>http://www.w3c.org </li></ul></ul><ul><li>Macromedia Dreamweaver </li></ul><...
Perguntas? <ul><li>boolean  duvida; </li></ul><ul><li>String  pergunta=“”, resposta=“”; </li></ul><ul><li>Read (duvida); <...
Atividade <ul><li>Elaborar uma página HTML  no  Notepad , contendo  título  e alguma  informação textual  no corpo do docu...
Upcoming SlideShare
Loading in...5
×

Desenvolvimento para a Internet - Aula 02

2,096

Published on

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,096
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Desenvolvimento para a Internet - Aula 02"

  1. 1. Aula 2 - HTML Editores e Documento HTML / XHTML Prof. Leandro Rezende Carneiro de Mendonça, MSc.
  2. 2. Editores HTML <ul><li>Página Web : basicamente um arquivo de texto, escrito em uma linguagem. </li></ul><ul><ul><li>Página HTML (arquivo de texto ASCII, contendo tag’s HTML e extensão .htm ou .html). </li></ul></ul><ul><li>Criação de uma página Web : pode ser auxiliada com editores WYSIWYG (What You See Is What You Get). </li></ul><ul><ul><li>Editores WYSIWYG: Macromedia Dreamweaver, Microsoft FrontPage, NVU etc… </li></ul></ul>
  3. 3. Editores HTML - Dreamweaver
  4. 4. Editores HTML - FrontPage
  5. 5. Editores HTML - NVU
  6. 6. Documento HTML <ul><li>Visualização de uma página : </li></ul><ul><ul><li>Solicitação HTTP (Navegador -> Servidor Web). </li></ul></ul><ul><ul><li>O Servidor recebe a solicitação e verifica se possui a página solicitada. </li></ul></ul><ul><ul><li>Em caso afirmativo o servidor empacota o conteúdo HTML (utilizando TCP) e os endereça (utilizando HTTP) e os envia através da rede. </li></ul></ul>
  7. 7. Documento HTML <ul><ul><li>Se o servidor Web não encontra a informação solicitada, ele constrói uma página contendo uma mensagem de erro, empacota esta página e a envia ao navegador do cliente. </li></ul></ul><ul><ul><li>A mensagem enviada pelo servidor Web ao navegador é denominada Resposta HTTP . </li></ul></ul>
  8. 8. Documento HTML <ul><li>Informações Transportadas </li></ul><ul><ul><li>URL ( U niform R esource L ocator ). </li></ul></ul><ul><ul><li>Cabeçalho HTTP. </li></ul></ul><ul><ul><li>Corpo HTTP. </li></ul></ul>
  9. 9. Arquitetura Cliente Servidor
  10. 10. Documento HTML <ul><li>Acrônimo de H yper T ext M arkup L anguage (L inguagem de Marcação de Hipertexto). </li></ul>
  11. 11. Documento HTML <ul><li>Exemplo: </li></ul><ul><li>Documento HTML </li></ul>
  12. 12. Documento HTML <ul><li>Tags HTML </li></ul>
  13. 13. Documento HTML <ul><li>Exemplo: </li></ul><ul><li>exemplo_tag.html </li></ul>
  14. 14. Documento HTML <ul><li>Categorias de Marcadores (Tags): </li></ul><ul><ul><li>Estruturais: são marcadores que determinam a estrutura de um documento, dando a esse sua forma e integridade. Ex: <p>, <h1> etc... </li></ul></ul><ul><ul><li>Estilísticos : são marcadores que indicam como o conteúdo de um elemento será apresentado no navegador. Ex: <b>, <i> etc... </li></ul></ul><ul><ul><li>Descritivos : são conhecidos também como marcadores semânticos e descrevem a natureza do conteúdo de um elemento. Ex: <title>, <address> etc... </li></ul></ul>
  15. 15. XML e HTML = XHTML <ul><li>XHTML : linguagem que utiliza o vocabulário de HTML com a sintaxe de XML. </li></ul><ul><li>Como documentos XHTML utilizam a gramática de XML eles podem ser analisados e apresentados por agentes que lêem documentos XML. </li></ul>
  16. 16. XML e HTML = XHTML <ul><li>Importância de HTML : linguagem amplamente utilizada por milhões de pessoas. </li></ul><ul><li>A Introdução de alterações no padrão implica em Problemas que implica em Solução que implica em Reformulação da linguagem HTML. </li></ul><ul><li>Melhor solução : unir as melhores características de cada uma delas. </li></ul>
  17. 17. XML e HTML = XHTML <ul><li>Benefícios da XHTML: </li></ul><ul><ul><li>Portabilidade : utilizando-se documentos bem formados, qualquer que seja o navegador utilizado, um documento será visualizado sempre da mesma maneira. A apresentação torna-se independente do navegador, fato que não ocorre hoje com HTML. </li></ul></ul><ul><ul><li>Facilidades de extensão da linguagem através dos DTD . </li></ul></ul>
  18. 18. Diferenças entre HTML e XHTML <ul><li>Um documento XHTML deve fornecer a declaração de um DTD no início do documento </li></ul><ul><ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> </li></ul></ul>
  19. 19. Diferenças entre HTML e XHTML
  20. 20. Diferenças entre HTML e XHTML <ul><li>Deve-se incluir uma referência ao namespace XML no elemento <html> do documento </li></ul><ul><ul><li><html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> </li></ul></ul>
  21. 21. Diferenças entre HTML e XHTML
  22. 22. Documento XHTML <ul><li>Exemplo: </li></ul><ul><li>estrutura_documento_xhtml.xhtml </li></ul>
  23. 23. Diferenças entre HTML e XHTML <ul><li>XML diferencia letras maiúsculas de minúsculas (linguagem case sensitive ). </li></ul><ul><li>Os marcadores XHTML devem ser inseridos em letras minúsculas. </li></ul>
  24. 24. Diferenças entre HTML e XHTML <ul><li>Todos os marcadores iniciados devem ser fechados “ documentos bem formados ”. </li></ul><ul><li>Não se pode omitir os marcadores <head> e <body> e o primeiro elemento do elemento head deve ser o marcador <title>. </li></ul>
  25. 25. Diferenças entre HTML e XHTML <ul><li>Exemplo de Documentos mal formados : </li></ul><ul><ul><li>documento_html_mal_formado.html </li></ul></ul><ul><ul><li>documento_xhtml_mal_formado.xhtml </li></ul></ul>
  26. 26. Diferenças entre HTML e XHTML <ul><li>Todos os atributos de um elemento devem ser apresentados entre aspas. </li></ul><ul><li>Elementos vazios : escrever estes elementos com um espaço entre o nome do marcador e a barra <br />. </li></ul>
  27. 27. Diferenças entre HTML e XHTML <ul><li>Todos os atributos de um elemento devem ser apresentados entre aspas e não devem ser simplificados. </li></ul><ul><li>Elementos vazios : escrever estes elementos com um espaço entre o nome do marcador e a barra <br />. </li></ul>
  28. 28. Diferenças entre HTML e XHTML <ul><li>Elementos sem conteúdo : e lementos que não sejam elementos vazios devem sempre utilizar os marcadores de abertura e fechamento <title> </title> </li></ul>
  29. 29. Informações <ul><li>W3C </li></ul><ul><ul><li>http://www.w3c.org </li></ul></ul><ul><li>Macromedia Dreamweaver </li></ul><ul><ul><li>http://www.macromedia.com </li></ul></ul><ul><li>Microsoft FrontPage </li></ul><ul><ul><li>http://www.microsoft.com </li></ul></ul><ul><li>NVU / N-View </li></ul><ul><ul><li>http:// www.nvu.com </li></ul></ul>
  30. 30. Perguntas? <ul><li>boolean duvida; </li></ul><ul><li>String pergunta=“”, resposta=“”; </li></ul><ul><li>Read (duvida); </li></ul><ul><li>while (duvida){ </li></ul><ul><li>Read (pergunta, resposta); </li></ul><ul><li>System.out.println (pegunta+resposta); </li></ul><ul><li>Read (duvida); </li></ul><ul><li>} </li></ul><ul><li>System.out.println (“Congratulações”); </li></ul><ul><li>System.exit (0); </li></ul>
  31. 31. Atividade <ul><li>Elaborar uma página HTML no Notepad , contendo título e alguma informação textual no corpo do documento. </li></ul><ul><li>Salvar o documento com o nome: </li></ul><ul><ul><li>index.htm </li></ul></ul><ul><li>Visualizar o resultado no Navegador. </li></ul>

×