Técnicas de Programação
HTML, XHTML e CSSHTML, XHTML e CSS
Eduardo Mendes
Aula 1
Parte IParte I
O que você escreve...
<html>
<head>
<title>PHP Drinks</title>
<head>
<body>
<h1>Bem-vindo ao PHP Drinks</h1>
<img src=“dri...
... e o que o navegador gera...
Comparando
<html>
<head>
<title>PHP Drinks</title>
</head>
<body>
<h1>Bem-vindo ao PHP Drinks</h1>
<img src=“drinks.gif”/>...
Criando uma página HTML
Criando uma página HTML
Criar um arquivo HTML usando um editor de
texto
Digitar o conteúdo do guardanapo
Salvar como “inde...
Criando uma página HTML
Salvando
Primeiro test drive!
Adicionando os marcadoresCafeteria Megasena
Café expresso R$ 1,50
O melhor café
Cappucino R$ 3,50
O melhor Capuccino
Café ...
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 melh...
Concluindo...<html>
<head>
<title>Cafeteria Megasena</title>
</head>
<body>
<h1>Cafeteria Megasena</h1>
<h2>Café expresso ...
Novo test drive
Entendendo as tags
<h1>Cafeteria Megasena</h1>
Adicionando estilo<html>
<head>
<title>Cafeteria Megasena</title>
</head>
<body>
<h1>Cafeteria Megasena</h1>
<h2>Café expr...
Adicionando estilo
<style type="text/css">
body{
background-color: #d2b48c;
margin-left: 20%;margin-left: 20%;
margin-rigt...
Site com estilo
Aula 1
Parte IIParte II
HTML
<a>
<a href=“destino”>Elemento linkado</a>
O que faremos???
O texto que deve se tornar um “link” será
colocado entre tags <a>
Adicionaremos a informação HTML que inf...
O que o navegador fará?
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/t...
Criando a nova versão do PHP
Drinks
Faça o download dos arquivos
<html>
<head>
<title>PHP Drinks</title>
<head>
<body>
<h1>Bem-vindo ao Novo PHP Drinks</h1>
<img src="drinks.gif"/>
<p>
Pr...
Teste
Salve phpdrinks.html e faça um test drive
Abra a página phpdrinks.html em um navegador
Clique no “link” para as bebi...
Compreendendo os atributos
Através dos atributos temos um modo de
especificar informação adicional a uma tag.
<style type=...
Exemplo
Como seria uma tag carro???
<carro>Meu carro Azul</carro>
<carro fabricante=“BMW” modelo=“Cooper”>
Meu Carro Azul
...
Organizando PHP Drinks
Dificuldades Técnicas
Criando links para uma
subpasta
O que temos
Identificando o destinoIdentificando o destino
Criando links para uma
subpasta
Identicamos o caminho
Criar um valor para o atributo href para
caminho identificado
bebida...
O caminho de volta – Linkando para uma pasta
acima
Queremos linkar de instrucoes.html para
phpdrinks.html
<a href=“phpdrin...
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
camin...
Corrigindo os links para as
imagens
Realize o mesmo para as imagens no caminho para
a imagem:
<img src=“drinks.gif”/>
<img...
Próximos SlideShares
Carregando em…5
×

Html Aula 1 Parte 1

698 visualizações

Publicada em

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
698
No SlideShare
0
A partir de incorporações
0
Número de incorporações
93
Ações
Compartilhamentos
0
Downloads
47
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no 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”/>

×