Successfully reported this slideshow.

HTML - Introducao

94 views

Published on

HTML - Introducao

Published in: Technology
  • Be the first to comment

  • Be the first to like this

HTML - Introducao

  1. 1. Marcação e Layout para Web Me. Arthur Emanuel de Oliveira Carosia
  2. 2. DOCTYPE define o tipo do documento como HTML Essa declaração ajuda o browser a exibir corretamente a página web.
  3. 3. O conteúdo entre <html> e </html> descreve um documento HTML
  4. 4. O texto entre <head> e </head> apresenta informações sobre o documento
  5. 5. O texto entre <title> e </title> apresenta o título do documento
  6. 6. O texto entre <body> e </body> descreve o conteúdo visível da página
  7. 7. O texto entre <h1> e </h1> descreve um cabeçalho
  8. 8. O texto entre <p> e </p> descreve um parágrafo
  9. 9. O navegador não exibe as tags HTML, apenas as usa para determinar como exibir o documento HTML. O web brower (navegador) (Chrome, IE, Firefox, Safari) lê o conteúdo dos arquivos HTML para exibição.
  10. 10. Tag de abertura
  11. 11. Tag de abertura Tag de fechamento
  12. 12. Região exibida no browser
  13. 13. <!DOCTYPE html>
  14. 14. Arquivos HTML podem ser desenvolvidos em editores de texto profissionais.
  15. 15. Adobe Dreamweaver
  16. 16. Microsoft Expression Web
  17. 17. CoffeeCup HTML Editor
  18. 18. Entretanto, HTML pode ser desenvolvido também em editores de texto simples, tais como Notepad++ e Notepad. Notepad++ Notepad
  19. 19. Abra o Notepad, digite o seguinte código HTML, salve-o como index.html e abra-o em seu web browser.
  20. 20. O elemento <html> define o documento HTML completo - Tag de abertura <html> - Tag de fechamento </html>. - O seu conteúdo é o elemento <body>
  21. 21. O elemento <body> define o conteúdo visível do HTML - Tag de abertura <body> - Tag de fechamento </body> - O seu Conteúdo são os elementos<h1> e <p>.
  22. 22. O elemento <h1> define um cabeçalho -Tag de abertura <h1> -Tag de fechamento </h1> - O seu conteúdo é: My First Heading.
  23. 23. O elemento <p> define um parágrafo - Tag de abertura <p> - Tag de fechamento </p> - O seu conteúdo é: My first paragraph.
  24. 24. Exemplos Para cada exemplo, clique em Try it yourself. http://www.w3schools.com/html/html_elements.asp http://www.w3schools.com/html/html_attributes.asp
  25. 25. Exercícios Crie uma página HTML que irá conter uma notícia retirada da internet. A página deve conter título com o nome da notícia, cabeçalho destacando a notícia e por fim vários parágrafos detalhando-a. Pesquise sobre o elemento <img> e seus atributos e insira no início da notícia uma imagem que a ilustre. Use o elemento <a> para fazer o link a uma notícia relacionada.
  26. 26. W3Schools. Disponível em: http://www.w3schools.com/. SILVA, M. S. Construindo sites com CSS e (X)HTML: sites controlados por folhas de estilo em cascata. 1. ed. São Paulo: Novatec, 2008. SILVA, O. J. HTML 4.0 e XHTML 1.0. 5. ed. São Paulo: Érica, 2008. SILVA, M. S. Criando sites com HTML: sites de alta qualidade com HTML e CSS. 1. ed. São Paulo: Novatec, 2008. Referências
  27. 27. Marcação e Layout para Web Me. Arthur Emanuel de Oliveira Carosia

×