Marcação e
Layout para Web
Me. Arthur Emanuel de Oliveira Carosia
DOCTYPE define o tipo do
documento como HTML
Essa declaração ajuda o
browser a exibir
corretamente a página web.
O conteúdo
entre <html> e </html>
descreve um
documento HTML
O texto entre
<head> e </head>
apresenta informações
sobre o documento
O texto
entre <title> e </title>
apresenta o título do
documento
O texto
entre <body> e </body>
descreve o conteúdo visível
da página
O texto
entre <h1> e </h1>
descreve um
cabeçalho
O texto
entre <p> e </p>
descreve um
parágrafo
O navegador não exibe as tags HTML,
apenas as usa para determinar como exibir o documento HTML.
O web brower (navegador) (...
Tag de abertura
Tag de abertura Tag de fechamento
Região exibida no browser
<!DOCTYPE html>
Arquivos HTML podem ser desenvolvidos em editores de texto
profissionais.
Adobe Dreamweaver
Microsoft Expression Web
CoffeeCup HTML Editor
Entretanto, HTML pode ser desenvolvido também em editores de texto
simples, tais como Notepad++ e Notepad.
Notepad++ Notep...
Abra o Notepad, digite o seguinte código HTML, salve-o como index.html e
abra-o em seu web browser.
O elemento <html> define o
documento HTML completo
- Tag de abertura <html>
- Tag de fechamento
</html>.
- O seu conteúdo ...
O elemento <body> define o
conteúdo visível do HTML
- Tag de abertura <body>
- Tag de fechamento
</body>
- O seu Conteúdo ...
O elemento <h1> define um
cabeçalho
-Tag de abertura <h1>
-Tag de fechamento </h1>
- O seu conteúdo é: My First
Heading.
O elemento <p> define um
parágrafo
- Tag de abertura <p>
- Tag de fechamento </p>
- O seu conteúdo é: My first
paragraph.
Exemplos
Para cada exemplo, clique em Try it yourself.
http://www.w3schools.com/html/html_elements.asp
http://www.w3school...
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...
W3Schools. Disponível em: http://www.w3schools.com/.
SILVA, M. S. Construindo sites com CSS e (X)HTML:
sites controlados p...
Marcação e Layout para Web
Me. Arthur Emanuel de Oliveira Carosia
HTML - Introducao
HTML - Introducao
HTML - Introducao
HTML - Introducao
HTML - Introducao
HTML - Introducao
HTML - Introducao
HTML - Introducao
HTML - Introducao
HTML - Introducao
HTML - Introducao
HTML - Introducao
HTML - Introducao
HTML - Introducao
HTML - Introducao
HTML - Introducao
HTML - Introducao
HTML - Introducao
HTML - Introducao
HTML - Introducao
HTML - Introducao
HTML - Introducao
Próximos SlideShares
Carregando em…5
×

HTML - Introducao

94 visualizações

Publicada em

HTML - Introducao

Publicada em: Tecnologia
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

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

×