Desenvolvimento para a Internet - Aula 03

660 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
660
On SlideShare
0
From Embeds
0
Number of Embeds
50
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Desenvolvimento para a Internet - Aula 03

  1. 1. Aula 3 – HTML / XHTML Textos e Imagens Prof. Leandro Rezende Carneiro de Mendonça, MSc.
  2. 2. Formatação de Textos <ul><li>Elementos de Bloco básicos: </li></ul><ul><ul><li>Parágrafo: <p> </p> </li></ul></ul><ul><ul><li>Divisão: <div> </div> Não há espaçamento vertical entre tags div. </li></ul></ul><ul><ul><li>Títulos: <h1> </h1> …. <h6> </h6> </li></ul></ul><ul><ul><li><blockquote></blockquote> geralmente utilizado para apresentar citações. </li></ul></ul><ul><ul><li>Preserve: <pre> </pre> preserva todo o espaçamento de um texto. </li></ul></ul>
  3. 3. Formatação de Textos <ul><li>Elementos descritivos: </li></ul><ul><ul><li>Abreviação: <abbr> </abbr> elemento meramente descritivo não introduzindo em alguns navegadores nenhum estilo no texto. </li></ul></ul><ul><ul><li>Acrônimo: <acronym> </acronym> outro elemento meramente descritivo. </li></ul></ul>
  4. 4. Formatação de Textos <ul><li>Elementos descritivos: </li></ul><ul><ul><li>Citação: <cite> </cite> </li></ul></ul><ul><ul><li>Código: <code> </code> </li></ul></ul><ul><ul><li>Definição: <dfn> </dfn> </li></ul></ul><ul><ul><li>Quotation: <q> </q> outro elemento meramente descritivo que também não adiciona nenhum estilo no texto. </li></ul></ul>
  5. 5. Formatação de Textos <ul><li>Elementos descritivos: </li></ul><ul><ul><li>Exemplo: <samp> </samp> </li></ul></ul><ul><ul><li>Span: <span> </span> </li></ul></ul><ul><ul><li>Forte: <strong> </strong> </li></ul></ul><ul><ul><li>Ênfase: <em> </em> </li></ul></ul>
  6. 6. Formatação de Textos <ul><li>Elementos de estilo: </li></ul><ul><ul><li>Grande: <big> </big> </li></ul></ul><ul><ul><li>Negrito: <b> </b> </li></ul></ul><ul><ul><li>Itálico: <i> </i> </li></ul></ul><ul><ul><li>Teclado: <kbd> </kbd> </li></ul></ul><ul><ul><li>Sublinhado: <u> </u> </li></ul></ul>
  7. 7. Formatação de Textos <ul><li>Elementos de estilo: </li></ul><ul><ul><li>Pequeno: <small> </small> </li></ul></ul><ul><ul><li>Riscado: <strike> </strike> </li></ul></ul><ul><ul><li>Subscrito: <sub> </sub> </li></ul></ul><ul><ul><li>Sobrescrito: <sup> </sup> </li></ul></ul><ul><ul><li>True-Type: <tt> </tt> </li></ul></ul>
  8. 8. Formatação de Textos <ul><li>Elementos de estilo, sem estilo: </li></ul><ul><ul><li>Adiciona uma linha em branco: <br /> </li></ul></ul><ul><ul><li>Adiciona uma linha horizontal: <hr /> </li></ul></ul>
  9. 9. Formatação de Textos <ul><li>Lista Não ordenada: </li></ul><ul><ul><li><ul type=“circle&quot;> </li></ul></ul><ul><ul><li><li> conteudo1 </li> </li></ul></ul><ul><ul><li><li> conteudo2 </li> </li></ul></ul><ul><ul><li>... </li></ul></ul><ul><ul><li></ul> </li></ul></ul><ul><ul><li>Atributo type: circle, disc, square. </li></ul></ul>
  10. 10. Formatação de Textos <ul><li>Exemplo de Lista Não ordenada: </li></ul><ul><ul><li>lista_nao_ordenada.html </li></ul></ul>
  11. 11. Formatação de Textos <ul><li>Lista Ordenada: </li></ul><ul><ul><li><ol type=&quot;1&quot;> </li></ul></ul><ul><ul><li><li>conteudo1</li> </li></ul></ul><ul><ul><li><li>conteudo2</li> </li></ul></ul><ul><ul><li></ol> </li></ul></ul><ul><ul><li>Atributo type: 1 (arábico) , a ou A (alfabético) , i ou I (romano) . </li></ul></ul>
  12. 12. Formatação de Textos <ul><li>Exemplo de Lista Ordenada: </li></ul><ul><ul><li>lista_ordenada.html </li></ul></ul>
  13. 13. Formatação de Textos <ul><li>Lista de Definição: </li></ul><ul><ul><li><dl> </li></ul></ul><ul><ul><li><dt>Termo1</dt> </li></ul></ul><ul><ul><li><dd>Definir termo1</dd> </li></ul></ul><ul><ul><li><dt>Termo2</dt> </li></ul></ul><ul><ul><li><dd>Definir termo2</dd> </li></ul></ul><ul><ul><li></dl> </li></ul></ul>
  14. 14. Formatação de Textos <ul><li>Exemplo de Lista de Definição: </li></ul><ul><ul><li>lista_de_definicao.html </li></ul></ul>
  15. 15. Imagens <ul><li>GIF (Graphics Interchange Format): </li></ul><ul><ul><li>Formato criado com a finalidade de transferir imagens em redes de computadores. </li></ul></ul><ul><ul><li>Utiliza a compressão LZW (Lempel-Ziv-Welch)‏ </li></ul></ul><ul><ul><li>1987 Compuserv introduziu GIF87a. </li></ul></ul><ul><ul><li>1989 e 1990 surge o GIF89a. </li></ul></ul>
  16. 16. Imagens <ul><li>GIF (Graphics Interchange Format): </li></ul><ul><ul><li>GIF é MIME (Multimedia Internet Mail Extension) a maioria dos navegadores suportam este formato. </li></ul></ul><ul><ul><li>8 bits de cor por pixel. </li></ul></ul><ul><ul><li>2 8 = 256 cores diferentes na imagem. </li></ul></ul>
  17. 17. Imagens <ul><li>JPEG (Joint Picture Expert Group): </li></ul><ul><ul><li>A compressão é realizada com perda de informação, o algoritmo retira as cores de freqüências altas que são de difícil visualização para os seres humanos. </li></ul></ul><ul><ul><li>24 bits de cor por pixel. </li></ul></ul><ul><ul><li>2 24 = 16,7 milhões cores diferentes na imagem. </li></ul></ul>
  18. 18. Imagens <ul><li>PNG (Portable Network Graphics): </li></ul><ul><ul><li>Cores verdadeiras (True Color), cores indexadas e suporte para níveis de cinza. </li></ul></ul><ul><ul><li>Transparência de canal alpha: com GIF um bit é ou não transparente, em PNG são definidos níveis de transparência . </li></ul></ul><ul><ul><li>Compressão sem perdas . </li></ul></ul><ul><ul><li>Surgiu em 1996 para substituir o formato GIF. </li></ul></ul><ul><ul><li>PNG é um formato livre. </li></ul></ul>
  19. 19. Imagens <ul><li>Imagens são utilizadas em páginas XHTML através do elemento <img> . </li></ul><ul><li><img> é um elemento em linha vazio que tem dois atributos, src que indica o endereço onde se encontra a imagem e alt que apresenta um texto que será mostrado caso a imagem não possa ser apresentada. </li></ul>
  20. 20. Imagens <ul><li>Exemplo: </li></ul><ul><li><img src=&quot; &quot; alt=&quot; &quot; /> </li></ul>
  21. 21. Imagens - Atributos <ul><li>width e height : definem o tamanho em pixels que a imagem irá ocupar. </li></ul><ul><li>vspace e hspace : valores em pixels que definem o espaço que deve ser deixado ao redor da imagem, horizontal e verticalmente. </li></ul>
  22. 22. Imagens - Atributos <ul><li>Exemplo: </li></ul><ul><li><img src=&quot; &quot; alt=&quot; &quot; width=&quot; &quot; height=&quot; &quot; hspace=&quot; &quot; vspace=&quot; &quot; /> </li></ul>
  23. 23. Imagens - Atributos <ul><li>align =“top | middle | bottom | left | right” </li></ul><ul><li>border =“tamanho em pixels” </li></ul>
  24. 24. Imagens <ul><li>Exemplos: </li></ul><ul><ul><li>exemplo1_imagens.html </li></ul></ul><ul><ul><li>exemplo2_imagens_CSS.html </li></ul></ul><ul><ul><li>exemplo3_imagens.html </li></ul></ul><ul><ul><li>exemplo4_imagens_background.html </li></ul></ul>
  25. 25. 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>
  26. 26. 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>
  27. 27. Atividade <ul><li>Elaborar páginas HTML que utilizem as tags vistas anteriormente. </li></ul><ul><li>Visualizar o resultado em diferentes Navegadores. </li></ul>

×