Your SlideShare is downloading. ×
Html  Aula 1 Parte 1
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Html Aula 1 Parte 1

350
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
350
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
37
Comments
0
Likes
0
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. Técnicas de Programação HTML, XHTML e CSSHTML, XHTML e CSS Eduardo Mendes
  • 2. Aula 1 Parte IParte I
  • 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. ... e o que o navegador gera...
  • 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. Criando uma página HTML
  • 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. Criando uma página HTML
  • 9. Salvando
  • 10. Primeiro test drive!
  • 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. 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. 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. Novo test drive
  • 15. Entendendo as tags <h1>Cafeteria Megasena</h1>
  • 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. 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. Site com estilo
  • 19. Aula 1 Parte IIParte II
  • 20. HTML
  • 21. <a> <a href=“destino”>Elemento linkado</a>
  • 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. O que o navegador fará?
  • 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. Criando a nova versão do PHP Drinks Faça o download dos arquivos
  • 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. 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. 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. Exemplo Como seria uma tag carro??? <carro>Meu carro Azul</carro> <carro fabricante=“BMW” modelo=“Cooper”> Meu Carro Azul </car>
  • 30. Organizando PHP Drinks
  • 31. Dificuldades Técnicas
  • 32. Criando links para uma subpasta O que temos Identificando o destinoIdentificando o destino
  • 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. 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. 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. 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”/>