Desenvolvimento para a Internet - Aula 02

  • 1,951 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,951
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
0
Comments
0
Likes
3

Embeds 0

No embeds

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