Html Aula 1 Parte 1

680 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
680
On SlideShare
0
From Embeds
0
Number of Embeds
93
Actions
Shares
0
Downloads
46
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html Aula 1 Parte 1

  1. 1. Técnicas de Programação HTML, XHTML e CSSHTML, XHTML e CSS Eduardo Mendes
  2. 2. Aula 1 Parte IParte I
  3. 3. O que você escreve... <html> <head> <title>PHP Drinks</title> <head> <body> <h1>Bem-vindo ao PHP Drinks</h1> <img src=“drinks.gif”/><img src=“drinks.gif”/> <p> Prove uma de nossas bebidas e relaxe ao som de <em>Dance Dance</em>. </p> <h2>Localização</h2> <p> Você pode nos encontrar no centro da Vila Web. </p> </body> </html>
  4. 4. ... e o que o navegador gera...
  5. 5. Comparando <html> <head> <title>PHP Drinks</title> </head> <body> <h1>Bem-vindo ao PHP Drinks</h1> <img src=“drinks.gif”/> <p> Prove uma de nossas bebidas e relaxe ao somde <em>Dance Dance</em>. </p> <h2>Localização</h2> <p> Você pode nos encontrar no centro da Vila Web. </p> </body> </html>
  6. 6. Criando uma página HTML
  7. 7. Criando uma página HTML Criar um arquivo HTML usando um editor de texto Digitar o conteúdo do guardanapo Salvar como “index.html” Abrir o arquivo “index.html” em um navegador
  8. 8. Criando uma página HTML
  9. 9. Salvando
  10. 10. Primeiro test drive!
  11. 11. Adicionando os marcadoresCafeteria Megasena Café expresso R$ 1,50 O melhor café Cappucino R$ 3,50 O melhor Capuccino Café com Leite R$ 2,00 O melhor Café com leite Pingado R$ 1,50 O melhor pingado
  12. 12. Feito <h1>Cafeteria Megasena</h1> <h2>Café expresso R$ 1,50</h2> <p>O melhor café</p> <h2>Cappucino R$ 3,50</h2> <p>O melhor Capuccino</p> <h2>Café com Leite R$ 2,00</h2> <p>O melhor Café com leite</p> <h2>Pingado R$ 1,50</h2> <p>O melhor pingado</p>
  13. 13. Concluindo...<html> <head> <title>Cafeteria Megasena</title> </head> <body> <h1>Cafeteria Megasena</h1> <h2>Café expresso R$ 1,50</h2> <p>O melhor café</p><p>O melhor café</p> <h2>Cappucino R$ 3,50</h2> <p>O melhor Capuccino</p> <h2>Café com Leite R$ 2,00</h2> <p>O melhor Café com leite</p> <h2>Pingado R$ 1,50</h2> <p>O melhor pingado</p> </body> </html>
  14. 14. Novo test drive
  15. 15. Entendendo as tags <h1>Cafeteria Megasena</h1>
  16. 16. Adicionando estilo<html> <head> <title>Cafeteria Megasena</title> </head> <body> <h1>Cafeteria Megasena</h1> <h2>Café expresso R$ 1,50</h2> <p>O melhor café</p> <style type=“text/css”> </style> <h2>Cappucino R$ 3,50</h2> <p>O melhor Capuccino</p> <h2>Café com Leite R$ 2,00</h2> <p>O melhor Café com leite</p> <h2>Pingado R$ 1,50</h2> <p>O melhor pingado</p> </body> </html>
  17. 17. Adicionando estilo <style type="text/css"> body{ background-color: #d2b48c; margin-left: 20%;margin-left: 20%; margin-rigth:20%; border: 1px dotted gray; padding: 10px 10px 10px 10px; font-family: sans-serif; } </style>
  18. 18. Site com estilo
  19. 19. Aula 1 Parte IIParte II
  20. 20. HTML
  21. 21. <a> <a href=“destino”>Elemento linkado</a>
  22. 22. O que faremos??? O texto que deve se tornar um “link” será colocado entre tags <a> Adicionaremos a informação HTML que informará para onde o link nos levará ao clicá-lo
  23. 23. O que o navegador fará?
  24. 24. Criando a nova versão do PHP Drinks As páginas “bebidas.html” e “instrucoes.html” já estão criadas http://www.fa7.edu.br/tecnicas/drinks.zip Editaremos a pagina “phpdrinks.html” adicionando o código necessário para ligá-la àsadicionando o código necessário para ligá-la às paginas “bebidas.html” e “instrucoes.html” Realizar o teste
  25. 25. Criando a nova versão do PHP Drinks Faça o download dos arquivos
  26. 26. <html> <head> <title>PHP Drinks</title> <head> <body> <h1>Bem-vindo ao Novo PHP Drinks</h1> <img src="drinks.gif"/> <p> Prove uma de nossas <a href="bebidas.html">bebidas</a> Edite phpdrinks.html Prove uma de nossas <a href="bebidas.html">bebidas</a> e relaxe ao som de <em>Dance Dance</em>. </p> <h2>Localização</h2> <p> Você pode nos encontrar no centro da Vila Web. Para chegar aqui sigas as <a href="instrucoes.html">instrucoes</a>. </p> </body> <html>
  27. 27. Teste Salve phpdrinks.html e faça um test drive Abra a página phpdrinks.html em um navegador Clique no “link” para as bebidas e você seráClique no “link” para as bebidas e você será direcionado para uma nova página Clique no botão retornar no navegador Clique no “link” para instruções e a página de instruções será exibida
  28. 28. Compreendendo os atributos Através dos atributos temos um modo de especificar informação adicional a uma tag. <style type=“text/css”> <a href=“teste.html”> <img src=“foto.gif”>
  29. 29. Exemplo Como seria uma tag carro??? <carro>Meu carro Azul</carro> <carro fabricante=“BMW” modelo=“Cooper”> Meu Carro Azul </car>
  30. 30. Organizando PHP Drinks
  31. 31. Dificuldades Técnicas
  32. 32. Criando links para uma subpasta O que temos Identificando o destinoIdentificando o destino
  33. 33. Criando links para uma subpasta Identicamos o caminho Criar um valor para o atributo href para caminho identificado bebidas/bebidas.html <a href=“bebidas/bebidas.html”>bebidas</a>
  34. 34. O caminho de volta – Linkando para uma pasta acima Queremos linkar de instrucoes.html para phpdrinks.html <a href=“phpdrinks.html”>Voltar</a> Identificando o destinoIdentificando o destino
  35. 35. C r i a n d o l i n k s p a r a u m a p a s t a acima Identicamos o caminho Criar um valor para o atributo href para caminho identificado ../phpdrinks.html <a href=“../phpdrinks.html”>Voltar</a>
  36. 36. Corrigindo os links para as imagens Realize o mesmo para as imagens no caminho para a imagem: <img src=“drinks.gif”/> <img src=“imagens/drinks.gif”/> <img src=“../imagens/red.jpg”/>

×